added text field for run count.

changed texts.
ronzil · May 21, 2014 · 99c7632 · 99c7632
1 parent 3656351
commit 99c7632
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 24 deletions.
diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html>
 <head>
   <meta charset="utf-8">
-  <title>2048</title>
+  <title>2048 - AI</title>
 
   <link href="style/main.css" rel="stylesheet" type="text/css">
   <link href="style/ai.css" rel="stylesheet" type="text/css">
@@ -20,19 +20,25 @@
 <body>
   <div class="container">
     <div class="heading">
-      <h1 class="title">2048</h1>
+      <h1 class="title">2048 - AI</h1>
       <div class="score-container">0</div>
     </div>
     <p class="game-intro">Join the numbers and get to the <strong>2048 tile!</strong></p>
+	<p class="game-intro">Or watch the random-walk AI attempt to solve it!</p>
 
     <div class='controls'>
+      <div id='run-button-container'>
+        <button id='run-button' class='ai-button'>Run AI</button>
+
+			<span> AI runs per move: </span>
+			<input id="run-count" type="text" value="100">
+
+      </div>		
+
       <div id='hint-button-container'>
-        <button id='hint-button' class='ai-button'>Get Hint</button>
+        <button id='hint-button' class='ai-button'>Next move</button>
       </div>
       <div id='feedback-container'> </div>
-      <div id='run-button-container'>
-        <button id='run-button' class='ai-button'>Auto-run</button>
-      </div>
     </div>
 
     <div class="game-container">
@@ -79,12 +85,21 @@ <h1 class="title">2048</h1>
     <p class="game-explanation">
       <strong class="important">How to play:</strong> Use your <strong>arrow keys</strong> to move the tiles. When two tiles with the same number touch, they <strong>merge into one!</strong>
     </p>
+    <p class="game-explanation">
+      <strong class="important">How the AI works:</strong> The AI finished the game using completely <strong>random moves!</strong> It does this 100 times (by default) for each possible move. 
+	  The move with the highest avarage end score is chosen. Increase the run count for a stronger AI.<br/>
+	  <br>
+	  Another interesting property of the AI is that is has <strong>no hard-coded intelligence</strong> meaning no knowledge about what makes a good move was programmed into it! It "figures it out" all by itself.</br>
+	  </br>
+	  More info <a href="...">here</a> and in the <a href="https://github.com/ronzil/2048-AI/blob/master/README.md"> readme file</a>.
+    </p>
+
     <hr>
     <p>
-    Created by <a href="http://gabrielecirulli.com" target="_blank">Gabriele Cirulli.</a> Based on <a href="https://itunes.apple.com/us/app/1024!/id823499224" target="_blank">1024 by Veewo Studio</a> and conceptually similar to <a href="http://asherv.com/threes/" target="_blank">Threes by Asher Vollmer.</a>
+    Original game by <a href="http://gabrielecirulli.com" target="_blank">Gabriele Cirulli.</a>     AI infrastucture by <a href="https://github.com/ov3y/2048-AI">Matt Overlan</a>
     </p>
     <p>
-    AI solver by <a href="https://github.com/ov3y/2048-AI">Matt Overlan</a>
+		AI solver by <a href="https://github.com/ronzil/2048-AI">Ronen Zilberman</a>
     </p>
     <div class="sharing">
       <a href="https://twitter.com/share" class="twitter-share-button" data-text="Check out 2048, a game where you join numbers to score high! #2048game #2048ai" data-via="gabrielecirulli">Tweet</a>
@@ -109,13 +124,8 @@ <h1 class="title">2048</h1>
   <script src="js/application.js"></script>
 
   <script>
-    (function(i,s,o,g,r,a,m){i["GoogleAnalyticsObject"]=r;i[r]=i[r]||function(){
-    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-    })(window,document,"script","//www.google-analytics.com/analytics.js","ga");
+	ga = null;
+  </script>  
 
-    ga("create", "UA-42620757-2", "gabrielecirulli.github.io");
-    ga("send", "pageview");
-  </script>
 </body>
 </html>
diff --git a/js/ai.js b/js/ai.js
@@ -1,3 +1,12 @@
+function moveName(move) {
+ return {
+    0: 'up',
+    1: 'right',
+    2: 'down',
+    3: 'left'
+  }[move];
+}
+
 function getBestMove(grid, runs, debug) {
 		var bestScore = 0; 
 		var bestMove = -1;
@@ -12,7 +21,7 @@ function getBestMove(grid, runs, debug) {
 			}
 
 			if (debug) {
-				console.log('Move ' + i + " - " + score);
+				console.log('Move ' + moveName(i) + ": Extra score - " + score);
 			}
 		}
 		if(!grid.movesAvailable()) console.log('bug2');		
@@ -79,6 +88,8 @@ function moveAndAddRandomTiles(grid, direction) {
 }
 
 // performs a search and returns the best move
-function AI_getBest(grid) {
-    return getBestMove(grid, 100);  
+function AI_getBest(grid, debug) {
+	var runs = document.getElementById('run-count').value;
+    return getBestMove(grid, runs, debug);  
 }
+
diff --git a/js/application.js b/js/application.js
@@ -1,4 +1,4 @@
-animationDelay = 100;
+animationDelay = 150;
 minSearchTime = 100;
 
 // Wait till the browser is ready to render the game (avoids glitches)

diff --git a/js/game_manager.js b/js/game_manager.js
@@ -9,15 +9,15 @@ function GameManager(size, InputManager, Actuator) {
   this.inputManager.on("restart", this.restart.bind(this));
 
   this.inputManager.on('think', function() {
-    var best = AI_getBest(this.grid);
+    var best = AI_getBest(this.grid, true);
     this.actuator.showHint(best.move);
   }.bind(this));
 
 
   this.inputManager.on('run', function() {
     if (this.running) {
       this.running = false;
-      this.actuator.setRunButton('Auto-run');
+      this.actuator.setRunButton('Run AI');
     } else {
       this.running = true;
       this.run()
@@ -84,7 +84,7 @@ GameManager.prototype.move = function(direction) {
 
 // moves continuously until game is over
 GameManager.prototype.run = function() {
-  var best = AI_getBest(this.grid);
+  var best = AI_getBest(this.grid, false);
   this.move(best.move);
   var timeout = animationDelay;
   if (this.running && !this.over && !this.won) {

diff --git a/style/ai.css b/style/ai.css
@@ -5,15 +5,32 @@
 }
 
 .ai-button, #feedback-container {
-  font-size: xx-large;
+  font-size: x-large;
+}
+
+#runs-container {
+	float: left;
+
+}
+
+#run-count {
+	width: 50px;
 }
 
 #run-button-container {
-  float: right;
+  float: left;
+}
+
+#run-button , #hint-button {
+	width: 120px;
 }
 
 #hint-button-container, #feedback-container {
   float: left;
+  display: none;
+}
+#hint-button-container {
+  clear: both;
 }
 
 #feedback-container {