update

README.md

@@ -1,18 +1,23 @@
-#Moon9
+# Moon9
 
-该项目一些简单的小合集。代码放在RunJS上。
+A collection of simple projects.
 
-##1.moon9
+## 1. moon9
 
-一个判断多少的简单游戏，最初学习Javascript时候写的，代码写得甚是难看。
+A simple game to guess the number, written when I first started learning JavaScript. The code is quite ugly.
 
-人总是有某个时间会嫌弃以前的东西，难看虽然难看，终究是自己写出来的。而且会觉得难看，至少说明现在写的大概稍微好一点了，有进步就不该觉得沮丧。
+People always find their past work embarrassing at some point. Although it’s ugly, it’s still something I created. And the fact that I find it ugly now means that I’ve improved somewhat, and I shouldn’t feel discouraged by progress.
 
-Demo：[http://sandbox.runjs.cn/show/jyq2gb5n](http://sandbox.runjs.cn/show/jyq2gb5n "http://sandbox.runjs.cn/show/jyq2gb5n")
+[Live Demo ↗](https://mirreal.github.io/moon9/moon9.html)
 
+## 2. Game of Life
 
-##2.Game of Life
+A game invented by the mathematician Conway with simple rules that produce wonderful transformations.
 
-数学家Conway发明的游戏，简单的规则，将产生美妙的变化。
+[Live Demo ↗](https://mirreal.github.io/moon9/game-of-life/)
 
-Demo地址：[http://sandbox.runjs.cn/show/z8ofnxng](http://sandbox.runjs.cn/show/z8ofnxng "http://sandbox.runjs.cn/show/z8ofnxng")
+## 3. Tower of Hanoi
+
+A version of the Tower of Hanoi game with a visual solution demonstration.
+
+[Live Demo ↗](https://mirreal.github.io/moon9/tower-of-hanoi/)

game-of-life/README.md

@@ -0,0 +1,10 @@
+# Game of Life
+
+The Game of Life, also known simply as Life, is a cellular automaton devised by the British mathematician John Horton Conway in 1970.
+
+The rules are simple: Each cell has two states – alive or dead, and interacts with the eight cells surrounding it.
+
+- If a live cell has 2 to 3 live neighbors, it remains alive in the next stage; otherwise, it dies.
+- If a dead cell has exactly 3 live neighbors, it becomes a live cell in the next stage; otherwise, it stays dead.
+
+Conway’s Game of Life is a classic example of how simple rules can produce complex patterns. During the evolution, one can observe some very beautiful transformations and elegant geometric shapes.

GameOfLife/life.html → game-of-life/index.html

@@ -12,4 +12,4 @@
 		<a href="#" id="snapshotButton" class="button">Snapshot</a>
         <script src="life.js"> </script>
     </body>
-</html>
+</html>

GameOfLife/life.css → game-of-life/life.css

@@ -28,4 +28,4 @@ a.button {
 a.button:hover {
 	background: rgba(255,255,255,0.6);
 	transition: all 1.2s ease-in 0.2s;
-}
+}

GameOfLife/life.js → game-of-life/life.js

@@ -14,7 +14,7 @@ Game.prototype.init = function() {
   this.getAroundStones();
 
   this.eventHandler();
-  
+
   this.loop = setInterval(function() {
     self.update();
     self.draw();
@@ -62,7 +62,7 @@ Game.prototype.createRandomStones = function() {
 Game.prototype.draw = function() {
   var self = this;
 
-  this.canvas.drawGrid("lightgrey", 20, 20);
+  this.canvas.drawGrid('lightgrey', 20, 20);
   this.stones.forEach(function(stone) {
     if (stone.status === true) {
       self.canvas.drawStone(stone);
@@ -104,7 +104,7 @@ Game.prototype.update = function() {
     stone.status = stone.nextStatus;
     stone.aliveCount = 0;
   });
-}
+};
 
 
 
@@ -156,7 +156,7 @@ Canvas.prototype.drawGrid = function(color, stepx, stepy) {
     ctx.stroke();
     ctx.closePath();
   }
-  
+
   for (var i = stepy + 0.5; i < ctx.canvas.height; i += stepy) {
     ctx.beginPath();
     ctx.moveTo(0, i);
@@ -181,4 +181,4 @@ Canvas.prototype.drawStone = function(stone) {
 };
 
 
-new Game();
+new Game();

index.html

@@ -0,0 +1,5 @@
+<ul>
+    <li><a href="./moon9.html">moon9</a></li>
+    <li><a href="./game-of-life/">Game of Life</a></li>
+    <li><a href="./tower-of-hanoi/">Tower of Hanoi</a></li>
+</ul>

moon9.css

@@ -100,6 +100,7 @@ footer {
 	background:rgba(255,255,255,0.2);
 	border:none;
 	border-radius:10px;
+	outline: 0;
 	font-size:48px;
 	box-shadow:rgba(0,0,0,0.3) 4px 4px 0px 0px;
 	margin-left:500px;

moon9.html

@@ -12,15 +12,15 @@
 			<header id="gameTitle">
 				<img src="yes.png">
 			</header>
-			
+
 			<div id="statusLine">
 				<div id="introduction">Introduction</div>
 				<div id="headerStats">
 					<p id="headerLevel">LEVEL <span id="selectLevel"></span></p>
 					<p id="headerScore">0</p>
 				</div>
 			</div>
-		
+
 			<div id="gameUI">
 				<div id="gameIntro">
 					<p>This is one of the <span class="stress">simplest</span> games you've played.</p>
@@ -41,10 +41,10 @@
                     <p><a id="gameReset" class="button" href="">Play again</a></p>
                 </div>
 			</div>
-			
+
 			<canvas id="timeLine" width="600" height="60"></canvas>
 			<canvas id="moon9" width="600" height="400"></canvas>
-			
+
 			<div id="levelFrame">
 				<label for="level">Select level: </label>
 				<select id="level">
@@ -57,4 +57,4 @@
 			<footer id="copyright">Copyright © <a href="http://www.mirreal.net">Mirreal's Notes</a> 2013</footer>
 		</div>
 	</body>
-</html>
+</html>