tweaking, refactoring and some effects...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>

simplesnake/simplesnake.appcache

@@ -1,7 +1,7 @@
 CACHE MANIFEST
-# Last Modified: 2017 Apr 15
+# Timestamp: 20170415203520
 
 CACHE:
+simplesnake.html
 simplesnake.css
 simplesnake.js
-simplesnake.html

simplesnake/simplesnake.css

@@ -50,7 +50,9 @@ body.hints:after {
 	content: "pause";
 }
 
+
 body {
+	background-color: rgb(253, 253, 253);
 	font-family: sans-serif;
 	overflow: hidden;
 }
@@ -65,6 +67,7 @@ body {
 	border: solid 1px silver;
 }
 
+/* show score... */
 .simplesnake[score]:after {
 	position: absolute;
 	display: block;
@@ -79,3 +82,62 @@ body {
 	opacity: 0.9;
 }
 
+.simplesnake .wall {
+	background-color: silver;
+}
+.simplesnake .apple {
+	position: relative;
+	background-color: red;
+}
+
+/*
+.simplesnake .apple {
+	position: relative;
+	background-color: none;
+}
+.simplesnake .apple:before {
+	position: absolute;
+	display: block;
+	content: "";
+	width: 100%;
+	height: 100%;
+	top: 0;
+	left: 0;
+	background-color: red;
+	transform: rotate(45deg);
+}
+*/
+
+/*
+.simplesnake .apple {
+	position: relative;
+	background-color: none;
+}
+.simplesnake .apple:before {
+	display: block;
+	content: "";
+	width: 60%;
+	height: 100%;
+	top: 0;
+	left: 0;
+	position: absolute;
+	background-color: red;
+	border-radius: 30%;
+	border-bottom-right-radius: 50%;
+	transform: rotate(-10deg);
+}
+.simplesnake .apple:after {
+	display: block;
+	content: "";
+	width: 60%;
+	height: 100%;
+	top: 0;
+	right: 0;
+	position: absolute;
+	background-color: red;
+	border-radius: 30%;
+	border-bottom-left-radius: 50%;
+	transform: rotate(10deg);
+}
+*/
+

simplesnake/simplesnake.js

@@ -69,8 +69,6 @@ function makeEvent(handler_attr){
 var Snake = {
 	config: {
 		field_size: 32,
-		apple_color: 'red',
-		wall_color: 'silver',
 		interval: 150,
 	},
 
@@ -86,7 +84,7 @@ var Snake = {
 
 		do {
 			var i = Math.floor(Math.random() * l)
-		} while(cells[i].style.backgroundColor != '')
+		} while(cells[i].classList.length > 0)
 
 		return {
 			x: i%w,
@@ -103,7 +101,6 @@ var Snake = {
 		var w = this.field_size.width
 		var x = point.x % w
 		x = x < 0 ? (x + w) : x
-
 		var h = this.field_size.height
 		var y = point.y % h
 		y = y < 0 ? (y + h) : y
@@ -142,6 +139,7 @@ var Snake = {
 				// handle cell age...
 				if(cell.age == 0){
 					delete cell.age
+					cell.classList.remove('snake')
 					cell.style.backgroundColor = ''
 
 				} else {
@@ -178,6 +176,7 @@ var Snake = {
 					// special case: other snake's head -> kill both...
 					if(next.direction){
 						var other = next.style.backgroundColor
+						next.classList.remove('snake')
 						next.style.backgroundColor = ''
 						// NOTE: we are not deleteing .direction here as 
 						//		we can have upto 4 snakes colliding...
@@ -187,17 +186,17 @@ var Snake = {
 						delete next.age
 
 					// apple -> increment age...
-					} else if(next.style.backgroundColor == that.config.apple_color){
+					} else if(next.classList.contains('apple')){
 						age += 1
 						move = true
+						next.classList.remove('apple')
 						that.appleEaten(color, age+2)
 
 					// empty -> just move...
-					} else if(next.style.backgroundColor == ''){
+					} else if(next.classList.length == 0){
 						move = true
 
 					// other -> kill...
-					// NOTE: anything but an apple or empty will kill the snake...
 					} else {
 						that.snakeKilled(color, age+2)
 					}
@@ -206,6 +205,7 @@ var Snake = {
 					if(move){
 						next.tick = tick
 						next.style.backgroundColor = color
+						next.classList.add('snake')
 						next.age = age + 1
 						next.direction = direction
 					}
@@ -213,9 +213,9 @@ var Snake = {
 					delete cell.direction
 				}
 			}
-
 			cell.tick = tick
 		})
+		this.tick(tick)
 	},
 
 	// constructors...
@@ -224,6 +224,7 @@ var Snake = {
 
 		var head = this._cells[point.x + point.y * this.field_size.width]
 		head.style.backgroundColor = color
+		head.classList.add('snake')
 		head.direction = direction || this.random_direction
 		head.age = (age || 5) - 1
 		this.players[color] = ''
@@ -232,8 +233,9 @@ var Snake = {
 	},
 	apple: function(point){
 		point = this.normalize_point(point || this.random_point)
-		this._cells[point.x + point.y * this.field_size.width]
+		var c = this._cells[point.x + point.y * this.field_size.width]
-			.style.backgroundColor = this.config.apple_color
+		c.classList.add('apple')
+		c.style.backgroundColor = ''
 		return this
 	},
 	wall: function(point, direction, length){
@@ -244,8 +246,7 @@ var Snake = {
 		length = length || 1
 
 		while(length > 0){
-			this._cells[x + y * this.field_size.width]
+			this._cells[x + y * this.field_size.width].classList.add('wall')
-				.style.backgroundColor = this.config.wall_color
 
 			x += direction == 'e' ? 1
 				: direction == 'w' ? -1
@@ -266,6 +267,7 @@ var Snake = {
 	// events...
 	appleEaten: makeEvent('__appleEatenHandlers'),
 	snakeKilled: makeEvent('__killHandlers'),
+	tick: makeEvent('__tickHandlers'),
 
 	// actions...
 	setup: function(field, size){
@@ -287,6 +289,11 @@ var Snake = {
 	start: function(t){
 		this.__timer = this.__timer 
 			|| setInterval(this._tick.bind(this), t || this.config.interval || 200)
+		// reset player control actions...
+		var that = this
+		Object.keys(this.players)
+			.forEach(function(k){ that.players[k] = '' })
+		this.tick()
 		return this
 	},
 	stop: function(){
@@ -307,26 +314,20 @@ var Snake = {
 	},
 
 	// levels...
-	basicLevel: function(){
-		var a = Math.round(this.field_size.width/8)
-		return this
-			.wall({x:a*3, y:a*5}, 's', a*6)
-			.wall({x:a*3, y:a*3}, 'e', a*2)
-			.wall({x:a*5, y:a*3}, 's', a*2)
-			.wall({x:a*5, y:a*5}, 'e', a*6) },
 	randomLevel: function(){
 		var a = Math.round(this.field_size.width/8)
-		var b = Math.round(this.field_size.height/8)
 		return this
-			.wall(null, null, b*6)
+			.wall(null, null, a*6)
-			.wall(null, null, b*6)
+			.wall(null, null, a*6)
-			.wall(null, null, b*6) },
+			.wall(null, null, a*6) },
 }
 
 
 
 /*********************************************************************/
 
+//var BG_ANIMATION = true
+
 var __CACHE_UPDATE_CHECK = 10*60*1000
 var __HANDLER_SET = false
 var __DEBOUNCE_TIMEOUT = 100
@@ -428,21 +429,35 @@ function setup(snake, timer, size){
 		.start(timer)
 		.pause()
 
-		// stuff...
+		// game events...
 		.appleEaten(function(color, age){ 
 			this.apple() 
 			showScore(color, age)
 		})
-		.apple()
-		.apple()
-
-		// players...
 		.snakeKilled(function(color, age){ 
 			this
 				.pause()
 				.snake(color, 3) 
 			showScore(color, 3)
 		})
+		.tick(function(){
+			// digital noise effect...
+			window.BG_ANIMATION
+				&& (!snake.__tick || snake.__tick % 2 == 0)
+				&& this._cells.forEach(function(c){
+					var v = Math.floor(Math.random() * 6)
+					c.classList.length == 0 ?
+						(c.style.backgroundColor = 
+							`rgb(${255 - v}, ${255 - v}, ${255 - v})`)
+					: c.classList.contains('wall') ?
+						(c.style.backgroundColor = 
+							`rgb(${220 - v*2}, ${220 - v*2}, ${220 - v*2})`)
+					: null })
+		})
+
+		// game eleemnts...
+		.apple()
+		.apple()
 		.snake('blue', 3)
 }