adding 502 error

games/snake404/js/controls.js

@@ -0,0 +1,20 @@
+// Handle keyboard controls
+var keysDown = {};
+
+var KEY_UP =38, KEY_DOWN =40, KEY_LEFT =37, KEY_RIGHT =39;
+
+addEventListener("keydown", function (e) {
+	keysDown[e.keyCode] = true;
+}, false);
+
+addEventListener("keyup", function (e) {
+	delete keysDown[e.keyCode];
+}, false);
+
+//Called from update.js
+var controls = function(){
+  if (KEY_LEFT in keysDown)  GAME_STATE.snake.move('l');
+  if (KEY_RIGHT in keysDown)  GAME_STATE.snake.move('r');
+	if (KEY_UP in keysDown)  GAME_STATE.snake.move('u');
+	if (KEY_DOWN in keysDown)  GAME_STATE.snake.move('d');
+}

games/snake404/js/draw.js

@@ -0,0 +1,43 @@
+// Create the canvas
+var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+var SIZE = 32;
+
+Cell.prototype.draw = function(){
+	switch(this.content){
+    case 'SNAKE':
+			ctx.fillStyle="gray";
+			break;
+    case 'BLOCK':
+			ctx.fillStyle="black";
+			break;
+		case 'FOOD':
+		  ctx.fillStyle="silver";
+      break;
+  }
+	if (this.content && this.content != 'INVALID'){
+		ctx.fillRect(this.x*BLOCK_SIZE, this.y*BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE)
+	}
+}
+
+// Draw everything
+var render = function () {
+	if (GAME_STATE.game_over) {
+		ctx.fillStyle = "rgb(250, 0, 0)";
+		ctx.font = "48px Helvetica";
+		ctx.textAlign = "center";
+		ctx.textBaseline = "top";
+		ctx.fillText("Game Over", canvas.width / 2, canvas.height * 2 / 3);
+	}
+	else {
+		// draw the background
+		ctx.fillStyle="white";
+		ctx.fillRect(0,0,canvas.width,canvas.height);
+
+		// draw game state
+		Object.keys(GAME_STATE.grid).forEach(function(key){
+			GAME_STATE.grid[key].draw();
+		});
+	}
+};

games/snake404/js/framework.js

@@ -0,0 +1,34 @@
+// The main game loop
+var main = function () {
+	var now = Date.now();
+	var delta = now - then;
+
+	controls();
+	render();
+
+	then = now;
+
+	// Request to do this again ASAP
+	requestAnimationFrame(main);
+};
+
+//var canvas = document.createElement('canvas');
+//document.body.appendChild(canvas);
+
+
+
+setInterval(function(){update()}, 300);
+
+// Cross-browser support for requestAnimationFrame
+var w = window;
+requestAnimationFrame =
+	(
+		w.requestAnimationFrame ||
+		w.webkitRequestAnimationFrame ||
+		w.msRequestAnimationFrame ||
+		w.mozRequestAnimationFrame
+	);
+
+// Let's play this game!
+var then = Date.now();
+initGameState(main);

games/snake404/js/logic.js

@@ -0,0 +1,140 @@
+var BLOCK_SIZE = 16;
+
+function update(){
+  if (GAME_STATE.complete)	GAME_STATE.snake.update();
+}
+
+function initGameState(callback){
+  GAME_STATE.grid = {};
+  loadImagePixels("data/map.png", function(rows){
+    rows.forEach(function(row, i){
+      row.forEach(function(pixel, j){
+        var cell = new Cell(i,j);
+        if (isColor(pixel, BLACK))
+          cell.content = 'BLOCK';
+        else if (isColor(pixel, GREEN))
+          cell.content = 'INVALID';
+        else if (isColor(pixel, RED)){
+          cell.content = 'SNAKE';
+          GAME_STATE.snake = new Snake(cell);
+        }
+        GAME_STATE.grid[[i,j]] = cell;
+        GAME_STATE.gameHeight = i;
+        GAME_STATE.gameWidth = j;
+      });
+    });
+    Grid.newFood();
+    GAME_STATE.complete = true;
+    callback();
+  });
+}
+
+var GAME_STATE = {
+  snake: null,
+  grid: null,
+  gameOver: false,
+  gameHeight: 0,
+  gameWidth: 0,
+}
+
+function Grid(){}
+
+Grid.get = function(x,y){
+  return GAME_STATE.grid[[x,y]];
+}
+
+Grid.set = function(x, y, content){
+  var cell = GAME_STATE.grid[[x,y]];
+  cell.content = content;
+  return cell;
+}
+
+Grid.unset = function(x, y){
+  var cell = GAME_STATE.grid[[x,y]];
+  cell.content = null;
+  return cell;
+}
+
+Grid.randomFree = function(){
+  do{
+    var row = Math.floor(Math.random() * GAME_STATE.gameHeight);
+    var col = Math.floor(Math.random() * GAME_STATE.gameWidth);
+    var cell = this.get(row,col);
+  } while (cell.content);
+  return cell;
+}
+
+Grid.newFood = function (){
+  var freeCell = this.randomFree();
+  freeCell.content = 'FOOD';
+}
+
+function Cell(x,y){
+  this.x = x;
+  this.y = y;
+  this.content = null;
+}
+
+
+function Snake(initCell){
+  this.body = [initCell];
+  this.dir = {x: -1, y: 0};  // start moving to the left
+}
+
+Snake.prototype.head = function(){
+  return this.body[0];
+}
+
+Snake.prototype.tail = function(){
+  return this.body[-1];
+}
+
+Snake.prototype.move = function(dir){
+  switch(dir){
+    case 'l':
+      this.dir = {x: -1, y: 0};
+      break;
+    case 'r':
+      this.dir = {x: 1, y: 0};
+      break;
+    case 'u':
+      this.dir = {x: 0, y: -1};
+      break;
+    case 'd':
+      this.dir = {x: 0, y: 1};
+      break;
+  }
+}
+
+Snake.prototype.update = function(dir){
+  // compute new position of the head
+  var head = this.head();
+  var dir = this.dir;
+  var newX = head.x + dir.x;
+  var newY = head.y + dir.y;
+  var newHead = Grid.get(newX, newY);
+
+  // check collisions
+
+  // if food, grow (on the head)
+  if (newHead.content == 'FOOD') {
+    newHead.content = 'SNAKE';
+    this.body.unshift(newHead);
+    Grid.newFood();
+  }
+
+  // if block, die
+  else if (newHead.content != null){
+    GAME_STATE.game_over = true;
+  }
+
+  // else, move
+  else {
+    oldTail = this.body.pop();
+    oldTail.content = null;
+
+    newHead.content = 'SNAKE';
+    this.body.unshift(newHead);
+  }
+
+}

games/snake404/js/utils.js

@@ -0,0 +1,47 @@
+var loadImagePixels = function(image, callback){
+
+  var img = new Image();
+  img.src = image;
+  img.onload = function() {
+     console.log("Image " + image + " loaded " + img.width + "x" +img.height);
+     var canvas = document.createElement('canvas');
+     document.body.appendChild(canvas);
+
+     var ctx = canvas.getContext('2d');
+     canvas.width  = img.width;
+     canvas.height = img.height;
+     ctx.drawImage(img, 0, 0);
+     img.style.display = 'none';
+     var imgData = ctx.getImageData(0,0,canvas.width, canvas.height);
+
+     var pixels = [];
+     for(i=0;i<img.width;i++){
+      pixels[i] = [];
+       for(j=0;j<img.height;j++){
+          var pixel = ctx.getImageData(i, j, 1, 1).data;
+          pixels[i][j] = {r: pixel[0], g: pixel[1], b: pixel[2], a: pixel[3]};
+        }
+     }
+     canvas.remove();
+     callback(pixels);
+  };
+}
+
+var BLACK = {r: 0, g: 0, b: 0};
+var WHITE = {r: 255, g: 255, b: 255};
+var YELLOW = {r: 255, g: 255, b: 0};
+var GREEN = {r: 0, g: 255, b: 0};
+var ORANGE = {r: 255, g: 127, b: 0};
+var CYAN = {r: 0, g: 255, b: 255};
+var RED = {r: 255, g: 0, b: 0};
+var PINK = {r: 255, g: 0, b: 255};
+
+var pixelIsColor = function(pixels, x, y, color){
+  try{
+    return isColor(pixels[x][y], color);
+  } catch (e){return false; }
+}
+
+var isColor = function(rgb, color) {
+  return rgb.r == color.r && rgb.g == color.g && rgb.b == color.b;
+}