adding 502 error

games/pacman502/js/ai.js

@@ -0,0 +1,23 @@
+var updateEnemies = function(modifier){
+
+  for (var i= 0; i < enemies.length; i++){
+    var enemy = enemies[i];
+    if (isCollidingBlocks(enemy,enemy.direction)){
+      changeDirection(enemy);
+
+    } else {
+      move(enemy, modifier);
+    }
+  }
+}
+
+var changeDirection = function(enemy){
+    var tol =  p(-5,0);
+    var randomDirection = randomBetween(0, 3);
+    switch(randomDirection){
+      case 0: if (!isCollidingBlocks(enemy, LEFT, tol))  enemy.direction = LEFT;break;
+      case 1: if (!isCollidingBlocks(enemy, RIGHT, tol))  enemy.direction = RIGHT;break;
+      case 2: if (!isCollidingBlocks(enemy, UP, tol))  enemy.direction = UP;break;
+      default: if (!isCollidingBlocks(enemy, DOWN, tol))  enemy.direction = DOWN;break;
+    }
+}

games/pacman502/js/assets.js

@@ -0,0 +1,20 @@
+var setImage = function(img){
+	var i = new Image();
+	i.src = img;
+	return i;
+};
+
+// Hero image
+var playerImageClose =  setImage("images/32_player_close.png");
+var playerImageOpen = setImage("images/32_player_open.png");
+
+var monsterImage = setImage("images/enemy_red.png");
+
+var dotImage = setImage("images/32_dot.png");
+
+var backgroundImage = {};
+backgroundImage.center = setImage("images/bg_center.png");
+backgroundImage.left = setImage("images/bg_left.png");
+backgroundImage.right = setImage("images/bg_right.png");
+backgroundImage.down = setImage("images/bg_down.png");
+backgroundImage.up = setImage("images/bg_up.png");

games/pacman502/js/collision.js

@@ -0,0 +1,71 @@
+//http://gamedev.stackexchange.com/questions/13774/how-do-i-detect-the-direction-of-2d-rectangular-object-collisions
+var collision = new Collision();
+
+var RIGHT = { x: 1, y: 0};
+var LEFT = { x: -1, y: 0};
+var UP = { x: 0, y: -1};
+var DOWN = { x: 0, y: 1};
+
+function Collision(){
+
+  this.onCollisionChange  = function(ojb1, obj2, size, callback) {
+    var isColliding = false;
+    setInterval(
+      function(){
+        var beforeStatus = isColliding;
+        isColliding = collision(obj1, obj2, size);
+        if (beforeStatus != isColliding) callback();
+      }, 100);
+  }
+
+  this.isCollidingDirection = function(obj1, obj2, direction, offset){
+    switch(direction){
+      case LEFT:  return collision.containsLeft(obj1, obj2, SIZE, offset); break;
+      case RIGHT: return collision.containsRight(obj1, obj2, SIZE, offset); break;
+      case UP: return collision.containsUp(obj1, obj2, SIZE, offset); break;
+      case DOWN:  return collision.containsDown(obj1, obj2, SIZE, offset); break;
+      default: console.log("Undefined direction");
+    }
+  }
+
+  this.contains = function(obj, p, size){
+    var contains =  p.x > obj.x && p.x < (obj.x + size) &&
+      p.y > obj.y && p.y < (obj.y + size);
+    return contains;
+  }
+
+  this.collision = function(obj1, obj2, size){
+    return obj1.x <= (obj2.x + size)
+  		&& obj2.x <= (obj1.x + size)
+  		&& obj1.y <= (obj2.y + size)
+  		&& obj2.y <= (obj1.y + size)
+  }
+
+  this.containsLeft = function(obj1, obj2, size, offset){
+    return this.contains(obj1, addCoords(middlePoints(obj2, size).left, offset) , size);
+  }
+  this.containsRight = function(obj1, obj2, size, offset){
+    return this.contains(obj1,  addCoords(middlePoints(obj2, size).right, offset), size);
+  }
+  this.containsUp = function(obj1, obj2, size, offset){
+    return this.contains(obj1,  addCoords(middlePoints(obj2, size).top, offset), size);
+  }
+  this.containsDown = function(obj1, obj2, size, offset){
+    return this.contains(obj1, addCoords( middlePoints(obj2, size).bottom, offset), size);
+  }
+
+  var addCoords = function(point, offset) {
+    return p(point.x + offset.x, point.y + offset.y);
+  }
+
+  var middlePoints = function(obj, size){
+    var middleX = (obj.x + obj.x + size) / 2; //(obj.x *2 + size) / 2;   ?
+    var middleY = (obj.y + obj.y + size) / 2;
+    return {
+      left: p(obj.x, middleY),
+      right: p(obj.x + size , middleY),
+      top: p(middleX, obj.y),
+      bottom: p(middleX, obj.y + size),
+    }
+  }
+}

games/pacman502/js/controls.js

@@ -0,0 +1,21 @@
+// 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(modifier){
+  if (KEY_LEFT in keysDown && !isCollidingBlocks(player, LEFT, p(-5,0)))  player.direction = LEFT;
+  if (KEY_RIGHT in keysDown && !isCollidingBlocks(player,RIGHT, p(5,0)))  player.direction = RIGHT;
+	if (KEY_UP in keysDown && !isCollidingBlocks(player,UP, p(0,-5)))  player.direction = UP;
+	if (KEY_DOWN in keysDown && !isCollidingBlocks(player,DOWN, p(0,5)))  player.direction = DOWN;
+}

games/pacman502/js/draw.js

@@ -0,0 +1,87 @@
+// Create the canvas
+var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+var SIZE = 32;
+
+var directionToRotation = function(direction){
+		switch(direction){
+			case RIGHT : return 0;
+			case LEFT: return 180;
+			case DOWN: return 90;
+			case UP: return 270;
+
+		}
+}
+// Draw everything
+var render = function () {
+	//    ctx.clearRect(0,0,canvas.width,canvas.height);
+/*
+	if (bgReady) {
+		ctx.drawImage(bgImage,0 , 0);
+	}*/
+	ctx.fillStyle="black";
+	ctx.fillRect(0,0,canvas.width,canvas.height);
+
+	drawBackground();
+
+	if (!player.dead) {
+		var image;
+		if(player.sprite == 0) image = playerImageClose;
+		else image = playerImageOpen;
+		//TODO rotate with direction
+	//	ctx.drawImage(image, player.x, player.y, SIZE, SIZE);
+	  var rotation = directionToRotation(player.direction);
+		drawRotated(image, player.x, player.y, rotation);
+	}
+
+	for (var i=0; i < dots.length; i++){
+    var dot = dots[i];
+    ctx.drawImage(dotImage, dot.x, dot.y  ,SIZE, SIZE);
+  }
+
+  for (var i=0; i < enemies.length; i++){
+    var enemy = enemies[i];
+    ctx.drawImage(monsterImage, enemy.x, enemy.y,SIZE, SIZE);
+
+  }
+	if (false) //DEBUG
+  for (var i=0; i < blocks.length; i++){
+    var block = blocks[i];
+    ctx.drawImage(monsterImage, block.x, block.y  ,SIZE, SIZE);
+  }
+
+
+
+  if (player.dead){
+    ctx.fillStyle = "red";
+    ctx.font = "48px Helvetica";
+    ctx.textAlign = "center";
+    ctx.textBaseline = "top";
+    ctx.fillText("Game Over", canvas.width / 2, canvas.height/ 2);
+  }
+};
+
+function drawBackground(){
+	for (var i= 0; i < background.length; i++){
+		var b = background[i];
+
+		//ctx.drawImage(backgroundImage.center, b.x, b.y  ,SIZE, SIZE);
+		for (var j= 0; j < b.directions.length; j++){
+			var d = b.directions[j];
+			ctx.drawImage(backgroundImage[d], b.x, b.y  ,SIZE, SIZE);
+		}
+	}
+}
+var TO_RADIANS = Math.PI/180;
+
+//http://creativejs.com/2012/01/day-10-drawing-rotated-images-into-canvas/
+function drawRotated(image, x, y, angle) {
+	 var halfWidth = image.width/2;
+	 var halfHeight = image.height/2;
+		ctx.save();
+		ctx.translate(x +halfWidth, y + halfHeight);
+		ctx.rotate(angle * TO_RADIANS);
+		ctx.drawImage(image, -halfWidth, -halfHeight);
+		ctx.restore();
+	}

games/pacman502/js/game.js

@@ -0,0 +1,21 @@
+// The main game loop
+var main = function () {
+	var now = Date.now();
+	var delta = now - then;
+
+	update(delta / 1000);
+	render();
+
+	then = now;
+
+	// Request to do this again ASAP
+	requestAnimationFrame(main);
+};
+
+// 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();
+main();

games/pacman502/js/objects.js

@@ -0,0 +1,12 @@
+// Game objects
+var player = {
+  direction: LEFT,
+  speed: 100,
+  sprite: 0
+}
+
+var enemies = [];
+var dots = [];
+var blocks = [];
+
+var background = [];

games/pacman502/js/objectsLoad.js

@@ -0,0 +1,75 @@
+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 addEnemy = function(x, y){
+  var enemy = {
+    direction: DOWN,
+    speed: 100,
+    x: x,
+    y: y
+  };
+  enemies.push(enemy);
+}
+
+var bg = function(x, y , dirs) {
+  return {
+    x: x * SIZE,
+    y: y * SIZE,
+    directions: dirs
+  }
+}
+
+loadImagePixels("data/map.png", function(pixels){
+
+  pixelBackground(pixels);
+
+  for(i=0;i<pixels.length;i++){
+      for(j=0;j<pixels[i].length;j++){
+          var pixel = pixels[i][j];
+          if (isColor(pixel,WHITE)) {} //White
+          else if (isColor(pixel,BLACK)) blocks.push(p(i*SIZE,j*SIZE));
+          else if (isColor(pixel,YELLOW))  dots.push(p(i*SIZE,j*SIZE));
+          else if (isColor(pixel,GREEN)) { player.x =i*SIZE ; player.y =j*SIZE; }
+
+          else if (isColor(pixel,RED) || isColor(pixel,CYAN) || isColor(pixel,PINK) || isColor(pixel,ORANGE)) { addEnemy(i* SIZE, j*SIZE) }
+
+          else console.log("Unrecognized color in position "+i+"x"+j,pixel);
+      }
+  }
+});
+
+var pixelBackground = function(pixels, x, y){
+  var type = "undefined";
+  for(i=0;i<pixels.length;i++){
+      for(j=0;j<pixels[i].length;j++){
+        var pixel = pixels[i][j];
+        if (isColor(pixel,BLACK)) {
+
+        var dirs = [];
+
+        if (pixelIsBlock(pixels, i -1, j) ) dirs.push("left");
+        if (pixelIsBlock(pixels,i +1, j)) dirs.push("right");
+        if (pixelIsBlock(pixels,i, j-1)) dirs.push("up");
+        if (pixelIsBlock(pixels,i, j +1)) dirs.push("down");
+
+        //console.log("Adding bg item " , i, j , dirs);
+        background.push(bg(i,j,dirs));
+      }
+    }
+  }
+}
+var pixelIsBlock = function(pixels, x, y){
+  try{
+    return isColor(pixels[x][y], BLACK);
+  } catch (e){return false; }
+}
+
+var isColor = function(rgb, color) {
+  return rgb.r == color.r && rgb.g == color.g && rgb.b == color.b;
+}

games/pacman502/js/update.js

@@ -0,0 +1,50 @@
+var playerSpriteTimeout ;
+// Update game objects
+var update = function (modifier) {
+	controls(modifier);
+
+	if (player.dead || isCollidingBlocks(player,player.direction)){
+		clearTimeout(playerSpriteTimeout);
+		player.isMoving = false;
+	} else {
+		if (!player.isMoving) {
+			player.isMoving = true;
+			playerSpriteTimeout = setInterval(function(){
+				player.sprite = (player.sprite +1) %2;
+			}, 250);
+		}
+		move(player, modifier);
+	}
+	updateEnemies(modifier); //AI
+
+	//Enemy collision
+	for (var i= 0; i < enemies.length; i++){
+    var enemy = enemies[i];
+    if (collision.collision(enemy, player, SIZE)) player.dead = true;
+  }
+	//Eating dots
+	for (var i= 0; i < dots.length; i++){
+    var dot = dots[i];
+    if (collision.collision(dot, player, SIZE / 2)) dots.splice(i, 1);
+  }
+};
+
+var move = function(obj, modifier){
+
+  obj.x  = obj.x + obj.direction.x * obj.speed  * modifier;
+  obj.y =  obj.y + obj.direction.y * obj.speed * modifier;
+
+  if (obj.y < 0 ) obj.y = canvas.height;
+  else if (obj.y > canvas.height ) obj.y = 0 ;
+}
+
+var isCollidingBlocks = function(obj, direction, offset){
+	if (!offset) offset = p(0,0);
+		for (var i=0; i < blocks.length; i++){
+		var block = blocks[i];
+
+		var isColliding = collision.isCollidingDirection(block, obj, direction, offset);
+		if (isColliding) return true;
+	}
+	return false;
+}

games/pacman502/js/utils.js

@@ -0,0 +1,48 @@
+var loadJSON = function (path, success, error)
+{
+    var oReq = new XMLHttpRequest();
+    oReq.onload = function reqListener () {
+      jsonData = JSON.parse(this.responseText);
+      //console.log("Loading JSON data", jsonData);
+      success(jsonData);
+    };;
+    oReq.open("get", path, true);
+    oReq.send();
+}
+
+var p = function(x,y){   return {x: x, y: y};  }
+
+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]};
+          //console.log("Pixel ", pixel);
+        }
+     }
+
+     canvas.remove();
+     callback(pixels);
+  };
+
+}
+var randomBetween = function(f, to){
+  return Math.floor(Math.random() * (to + 1)) + f;
+}