smooooth animation, fixes #1, also rendered the grid to help in this: c…

…loses #3
deificx · Jan 7, 2016 · 2247e9d · 2247e9d
1 parent e5b9045
commit 2247e9d
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 24 deletions.
diff --git a/src/constants.js b/src/constants.js
@@ -9,6 +9,6 @@ export const IDLE = 'IDLE';
 export const STARTED = 'STARTED';
 export const ENDED = 'ENDED';
 
-export const COOLDOWN = 1000;
-export const SCORE_CAP = 180;
+export const COOLDOWN = 250;
+export const SCORE_CAP = 150;
 export const SCORE_INCREASE = 10;
diff --git a/src/snake.js b/src/snake.js
@@ -48,14 +48,8 @@ export default class Snake {
 			x:Math.round(this.grid.w/2),
 			y:Math.round(this.grid.h/2),
 		});
-		this.snake.push({
-			x:this.snake[0].x + 1,
-			y:this.snake[0].y,
-		});
-		this.snake.push({
-			x:this.snake[0].x + 2,
-			y:this.snake[0].y,
-		});
+		this.snake.push(this.snake[0]);
+		this.snake.push(this.snake[0]);
 
 		this.position = this.snake[0];
 		this.randomDir();
@@ -64,6 +58,8 @@ export default class Snake {
 
 		this.score = 0;
 		this.state = STARTED;
+		this.wait = COOLDOWN;
+		this.cooldown = COOLDOWN;
 	}
 
 	setDir(dir) {
@@ -127,9 +123,9 @@ export default class Snake {
 			this.snake.pop();
 		}
 		this.snake.unshift(move);
-		this.snake[0].from = this.directionDiff(this.snake[0], this.snake[1]);
-		this.snake[1].to = this.directionDiff(this.snake[1], this.snake[0]);
-		console.log(this.snake[0].x, this.snake[0].y);
+		this.snake[0].from = this.directionDiff(this.snake[1], this.snake[0]);
+		this.snake[1].from = this.directionDiff(this.snake[2], this.snake[1]);
+		this.snake[1].to = this.directionDiff(this.snake[0], this.snake[1]);
 	}
 
 	update(dt) {
@@ -180,6 +176,7 @@ export default class Snake {
 			this.placeApple();
 			this.move(move, false);
 		} else if (this.collision(move)) {
+			this.wait = 0;
 			this.state = ENDED;
 		} else {
 			this.move(move, true);
@@ -219,16 +216,10 @@ export default class Snake {
 			return;
 		}
 
-		this.c.fillStyle = '#aaa';
 		this.c.strokeStyle = '#ccc';
-		this.c.font = "16px sans-serif";
 		for (i = 1; i < this.grid.w; i++) {
 			this.c.moveTo(this.radius * 2 * i, 0);
 			this.c.lineTo(this.radius * 2 * i, this.height);
-			this.c.fillText(
-				i.toString(),
-				this.radius * 2 * i,
-				this.radius * 2);
 		}
 		for (i = 1; i < this.grid.h; i++) {
 			this.c.moveTo(0, this.radius * 2 * i);
@@ -255,20 +246,20 @@ export default class Snake {
 			if (entering) {
 				switch (this.snake[i].from) {
 				case UP:
-					offsetY = this.radius * percentage * -1 + this.radius;
+					offsetY = this.radius * percentage - this.radius;
 					break;
 				case DOWN:
-					offsetY = this.radius * percentage - this.radius;
+					offsetY = this.radius * percentage * -1 + this.radius;
 					break;
 				case LEFT:
-					offsetX = this.radius * percentage * -1 + this.radius;
+					offsetX = this.radius * percentage - this.radius;
 					break;
 				case RIGHT:
-					offsetX = this.radius * percentage - this.radius;
+					offsetX = this.radius * percentage * -1 + this.radius;
 					break;
 				}
 			} else {
-				switch (this.snake[i].from) {
+				switch (this.snake[i].to || this.direction) {
 				case UP:
 					offsetY = this.radius * percentage * -1 + this.radius;
 					break;