adding 502 error
@@ -1,6 +1,6 @@
|
|||||||
FROM nginx:stable-alpine-slim
|
FROM nginx:stable-alpine-slim
|
||||||
LABEL authors="tebarius"
|
LABEL authors="tebarius"
|
||||||
LABEL description="nginx_with_404_games"
|
LABEL description="nginx_with_404_and_502_games"
|
||||||
|
|
||||||
COPY ./404_games /usr/share/nginx/html
|
COPY ./games /usr/share/nginx/html
|
||||||
CMD ["nginx", "-g", "daemon off;"]
|
CMD ["nginx", "-g", "daemon off;"]
|
||||||
|
|||||||
28
games/404.html
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
<HTML>
|
||||||
|
<HEAD>
|
||||||
|
<TITLE>ups.. Page not Found !!! 404-Alarm!!!!</TITLE>
|
||||||
|
</HEAD>
|
||||||
|
<body>
|
||||||
|
<center>
|
||||||
|
<H1><b><FONT COLOR="#FF0000"><big><big>404 - Alert</big></big></FONT></b></H1>
|
||||||
|
<H2>... page not found ...</H2>
|
||||||
|
|
||||||
|
<iframe id='404-game' width="520" height="520" scrolling="none" frameborder="0"></iframe>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
var randomBetween = function(f, to){
|
||||||
|
return Math.floor(Math.random() * to) + f;
|
||||||
|
}
|
||||||
|
var randomGame = function(){
|
||||||
|
var games = ["pacman404", "space-invaders404", "snake404"];
|
||||||
|
var randomGame = randomBetween(0,games.length);
|
||||||
|
return games[randomGame];
|
||||||
|
}
|
||||||
|
var src = "" + randomGame();
|
||||||
|
document.getElementById('404-game').src = src;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</center>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
28
games/502.html
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
<HTML>
|
||||||
|
<HEAD>
|
||||||
|
<TITLE>ups.. Bad Gateway !!! 502-Alarm!!!!</TITLE>
|
||||||
|
</HEAD>
|
||||||
|
<body>
|
||||||
|
<center>
|
||||||
|
<H1><b><FONT COLOR="#FF0000"><big><big>502 - Alert</big></big></FONT></b></H1>
|
||||||
|
<H2>... Bad Gateway - (maybe subdomain is temporarily down) ...</H2>
|
||||||
|
|
||||||
|
<iframe id='502-game' width="520" height="520" scrolling="none" frameborder="0"></iframe>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
var randomBetween = function(f, to){
|
||||||
|
return Math.floor(Math.random() * to) + f;
|
||||||
|
}
|
||||||
|
var randomGame = function(){
|
||||||
|
var games = ["pacman502", "space-invaders502", "snake502"];
|
||||||
|
var randomGame = randomBetween(0,games.length);
|
||||||
|
return games[randomGame];
|
||||||
|
}
|
||||||
|
var src = "" + randomGame();
|
||||||
|
document.getElementById('502-game').src = src;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</center>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
@@ -14,7 +14,7 @@ var randomBetween = function(f, to){
|
|||||||
return Math.floor(Math.random() * to) + f;
|
return Math.floor(Math.random() * to) + f;
|
||||||
}
|
}
|
||||||
var randomGame = function(){
|
var randomGame = function(){
|
||||||
var games = ["pacman", "space-invaders", "snake"];
|
var games = ["pacman404", "space-invaders404", "snake404"];
|
||||||
var randomGame = randomBetween(0,games.length);
|
var randomGame = randomBetween(0,games.length);
|
||||||
return games[randomGame];
|
return games[randomGame];
|
||||||
}
|
}
|
||||||
|
Before Width: | Height: | Size: 217 B After Width: | Height: | Size: 217 B |
|
Before Width: | Height: | Size: 564 B After Width: | Height: | Size: 564 B |
|
Before Width: | Height: | Size: 583 B After Width: | Height: | Size: 583 B |
|
Before Width: | Height: | Size: 530 B After Width: | Height: | Size: 530 B |
|
Before Width: | Height: | Size: 898 B After Width: | Height: | Size: 898 B |
|
Before Width: | Height: | Size: 902 B After Width: | Height: | Size: 902 B |
|
Before Width: | Height: | Size: 775 B After Width: | Height: | Size: 775 B |
|
Before Width: | Height: | Size: 765 B After Width: | Height: | Size: 765 B |
|
Before Width: | Height: | Size: 904 B After Width: | Height: | Size: 904 B |
|
Before Width: | Height: | Size: 294 B After Width: | Height: | Size: 294 B |
BIN
games/pacman502/data/map.png
Normal file
|
After Width: | Height: | Size: 5.1 KiB |
BIN
games/pacman502/images/32_dot.png
Normal file
|
After Width: | Height: | Size: 564 B |
BIN
games/pacman502/images/32_player_close.png
Normal file
|
After Width: | Height: | Size: 583 B |
BIN
games/pacman502/images/32_player_open.png
Normal file
|
After Width: | Height: | Size: 530 B |
BIN
games/pacman502/images/bg_center.png
Normal file
|
After Width: | Height: | Size: 898 B |
BIN
games/pacman502/images/bg_down.png
Normal file
|
After Width: | Height: | Size: 902 B |
BIN
games/pacman502/images/bg_left.png
Normal file
|
After Width: | Height: | Size: 775 B |
BIN
games/pacman502/images/bg_right.png
Normal file
|
After Width: | Height: | Size: 765 B |
BIN
games/pacman502/images/bg_up.png
Normal file
|
After Width: | Height: | Size: 904 B |
BIN
games/pacman502/images/enemy_red.png
Normal file
|
After Width: | Height: | Size: 294 B |
23
games/pacman502/index.html
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>404 Pacman</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<canvas id='canvas' height="480" width="512"></canvas>
|
||||||
|
<script src="js/utils.js"></script>
|
||||||
|
<script src="js/collision.js"></script>
|
||||||
|
|
||||||
|
<script src="js/assets.js"></script>
|
||||||
|
<script src="js/draw.js"></script>
|
||||||
|
<script src="js/update.js"></script>
|
||||||
|
<script src="js/controls.js"></script>
|
||||||
|
<script src="js/objects.js"></script>
|
||||||
|
<script src="js/objectsLoad.js"></script>
|
||||||
|
|
||||||
|
<script src="js/ai.js"></script>
|
||||||
|
|
||||||
|
<script src="js/game.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
23
games/pacman502/js/ai.js
Normal file
@@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
20
games/pacman502/js/assets.js
Normal file
@@ -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");
|
||||||
71
games/pacman502/js/collision.js
Normal file
@@ -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),
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
21
games/pacman502/js/controls.js
vendored
Normal file
@@ -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;
|
||||||
|
}
|
||||||
87
games/pacman502/js/draw.js
Normal file
@@ -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();
|
||||||
|
}
|
||||||
21
games/pacman502/js/game.js
Normal file
@@ -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();
|
||||||
12
games/pacman502/js/objects.js
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
// Game objects
|
||||||
|
var player = {
|
||||||
|
direction: LEFT,
|
||||||
|
speed: 100,
|
||||||
|
sprite: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
var enemies = [];
|
||||||
|
var dots = [];
|
||||||
|
var blocks = [];
|
||||||
|
|
||||||
|
var background = [];
|
||||||
75
games/pacman502/js/objectsLoad.js
Normal file
@@ -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;
|
||||||
|
}
|
||||||
50
games/pacman502/js/update.js
Normal file
@@ -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;
|
||||||
|
}
|
||||||
48
games/pacman502/js/utils.js
Normal file
@@ -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;
|
||||||
|
}
|
||||||
|
Before Width: | Height: | Size: 269 B After Width: | Height: | Size: 269 B |
BIN
games/snake502/data/map.png
Normal file
|
After Width: | Height: | Size: 4.3 KiB |
15
games/snake502/index.html
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>404 snake</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<canvas id='canvas' height="480" width="512" border=1></canvas>
|
||||||
|
<script src="js/logic.js"></script>
|
||||||
|
<script src="js/controls.js"></script>
|
||||||
|
<script src="js/utils.js"></script>
|
||||||
|
<script src="js/draw.js"></script>
|
||||||
|
<script src="js/framework.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
20
games/snake502/js/controls.js
vendored
Normal file
@@ -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');
|
||||||
|
}
|
||||||
43
games/snake502/js/draw.js
Normal file
@@ -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();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
34
games/snake502/js/framework.js
Normal file
@@ -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);
|
||||||
140
games/snake502/js/logic.js
Normal file
@@ -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);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
47
games/snake502/js/utils.js
Normal file
@@ -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;
|
||||||
|
}
|
||||||
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 597 B After Width: | Height: | Size: 597 B |
|
Before Width: | Height: | Size: 460 B After Width: | Height: | Size: 460 B |
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 29 KiB After Width: | Height: | Size: 29 KiB |
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 23 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
41
games/space-invaders502/enemies.json
Normal file
@@ -0,0 +1,41 @@
|
|||||||
|
{"zero": [
|
||||||
|
{"x": 0, "y": 0},
|
||||||
|
{"x": 0, "y": 1},
|
||||||
|
{"x": 0, "y": 2},
|
||||||
|
{"x": 0, "y": 3},
|
||||||
|
{"x": 0, "y": 4},
|
||||||
|
{"x": 1, "y": 0},
|
||||||
|
{"x": 1, "y": 4},
|
||||||
|
{"x": 2, "y": 0},
|
||||||
|
{"x": 2, "y": 1},
|
||||||
|
{"x": 2, "y": 2},
|
||||||
|
{"x": 2, "y": 3},
|
||||||
|
{"x": 2, "y": 4}
|
||||||
|
],
|
||||||
|
"five": [
|
||||||
|
{"x": 0, "y": 0},
|
||||||
|
{"x": 0, "y": 1},
|
||||||
|
{"x": 0, "y": 2},
|
||||||
|
{"x": 0, "y": 4},
|
||||||
|
{"x": 1, "y": 0},
|
||||||
|
{"x": 1, "y": 2},
|
||||||
|
{"x": 1, "y": 4},
|
||||||
|
{"x": 2, "y": 0},
|
||||||
|
{"x": 2, "y": 2},
|
||||||
|
{"x": 2, "y": 3},
|
||||||
|
{"x": 2, "y": 4}
|
||||||
|
],
|
||||||
|
"two": [
|
||||||
|
{"x": 0, "y": 0},
|
||||||
|
{"x": 0, "y": 3},
|
||||||
|
{"x": 0, "y": 2},
|
||||||
|
{"x": 0, "y": 4},
|
||||||
|
{"x": 1, "y": 0},
|
||||||
|
{"x": 1, "y": 2},
|
||||||
|
{"x": 1, "y": 4},
|
||||||
|
{"x": 2, "y": 0},
|
||||||
|
{"x": 2, "y": 2},
|
||||||
|
{"x": 2, "y": 1},
|
||||||
|
{"x": 2, "y": 4}
|
||||||
|
]
|
||||||
|
}
|
||||||
BIN
games/space-invaders502/images/32_enemy.png
Normal file
|
After Width: | Height: | Size: 1.7 KiB |
BIN
games/space-invaders502/images/32_laser_blue.png
Normal file
|
After Width: | Height: | Size: 597 B |
BIN
games/space-invaders502/images/32_laser_red.png
Normal file
|
After Width: | Height: | Size: 460 B |
BIN
games/space-invaders502/images/32_player.png
Normal file
|
After Width: | Height: | Size: 1.7 KiB |
BIN
games/space-invaders502/images/64_1.png
Normal file
|
After Width: | Height: | Size: 29 KiB |
BIN
games/space-invaders502/images/64_2.png
Normal file
|
After Width: | Height: | Size: 23 KiB |
BIN
games/space-invaders502/images/64_laser_blue.png
Normal file
|
After Width: | Height: | Size: 12 KiB |
BIN
games/space-invaders502/images/64_laser_red.png
Normal file
|
After Width: | Height: | Size: 10 KiB |
BIN
games/space-invaders502/images/background.png
Normal file
|
After Width: | Height: | Size: 1.1 KiB |
20
games/space-invaders502/index.html
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>404 Space Invaders</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<canvas id='canvas' height="480" width="512"></canvas>
|
||||||
|
<script src="js/utils.js"></script>
|
||||||
|
|
||||||
|
<script src="js/assets.js"></script>
|
||||||
|
<script src="js/draw.js"></script>
|
||||||
|
<script src="js/update.js"></script>
|
||||||
|
<script src="js/controls.js"></script>
|
||||||
|
<script src="js/objects.js"></script>
|
||||||
|
<script src="js/ai.js"></script>
|
||||||
|
|
||||||
|
<script src="js/game.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
41
games/space-invaders502/js/ai.js
Normal file
@@ -0,0 +1,41 @@
|
|||||||
|
var updateEnemies = function(){
|
||||||
|
|
||||||
|
if (hasReachedEnd()) {
|
||||||
|
changeEnemyDirection();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
var enemyMovement;
|
||||||
|
if (enemyDirection == LEFT) enemyMovement = -10;
|
||||||
|
else enemyMovement = 10;
|
||||||
|
|
||||||
|
for (var i = 0 ; i < enemies.length; i++){
|
||||||
|
var enemy = enemies[i];
|
||||||
|
enemy.x = enemy.x + enemyMovement ;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var hasReachedEnd = function(){
|
||||||
|
var threshold = 32;
|
||||||
|
|
||||||
|
for (var i = 0 ; i < enemies.length; i++){
|
||||||
|
var enemy = enemies[i];
|
||||||
|
if (enemyDirection == RIGHT && enemy.x > canvas.width - threshold - 32) return true;
|
||||||
|
else if (enemyDirection == LEFT && enemy.x < threshold) return true;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
var changeEnemyDirection = function(){
|
||||||
|
if (enemyDirection == LEFT) enemyDirection = RIGHT;
|
||||||
|
else enemyDirection = LEFT;
|
||||||
|
|
||||||
|
for (var i = 0 ; i < enemies.length; i++){
|
||||||
|
var enemy = enemies[i];
|
||||||
|
enemy.y = enemy.y + 30 ;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var enemyShot = function(){
|
||||||
|
var enemy = enemies[Math.floor(Math.random()*enemies.length)];
|
||||||
|
enemyShots.push({x:enemy.x, y: enemy.y});
|
||||||
|
}
|
||||||
45
games/space-invaders502/js/assets.js
Normal file
@@ -0,0 +1,45 @@
|
|||||||
|
/**
|
||||||
|
Ship and laser assets by Cpt_Flash
|
||||||
|
Available at: http://opengameart.org/content/space-ships-2-units
|
||||||
|
License: GPL 3.0
|
||||||
|
**/
|
||||||
|
|
||||||
|
// Background image
|
||||||
|
var bgReady = false;
|
||||||
|
var bgImage = new Image();
|
||||||
|
|
||||||
|
bgImage.onload = function () {
|
||||||
|
bgReady = true;
|
||||||
|
};
|
||||||
|
bgImage.src = "images/background.png";
|
||||||
|
|
||||||
|
// Hero image
|
||||||
|
var heroReady = false;
|
||||||
|
var heroImage = new Image();
|
||||||
|
heroImage.onload = function () {
|
||||||
|
heroReady = true;
|
||||||
|
};
|
||||||
|
heroImage.src = "images/32_player.png";
|
||||||
|
|
||||||
|
// Monster image
|
||||||
|
var monsterReady = false;
|
||||||
|
var monsterImage = new Image();
|
||||||
|
monsterImage.onload = function () {
|
||||||
|
monsterReady = true;
|
||||||
|
};
|
||||||
|
monsterImage.src = "images/32_enemy.png";
|
||||||
|
|
||||||
|
// Hero image
|
||||||
|
var shotReady = false;
|
||||||
|
var shotImage = new Image();
|
||||||
|
shotImage.onload = function () {
|
||||||
|
shotReady = true;
|
||||||
|
};
|
||||||
|
shotImage.src = "images/32_laser_blue.png";
|
||||||
|
|
||||||
|
var shotRedReady = false;
|
||||||
|
var shotRedImage = new Image();
|
||||||
|
shotRedImage.onload = function () {
|
||||||
|
shotRedReady = true;
|
||||||
|
};
|
||||||
|
shotRedImage.src = "images/32_laser_red.png";
|
||||||
40
games/space-invaders502/js/controls.js
vendored
Normal file
@@ -0,0 +1,40 @@
|
|||||||
|
// 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);
|
||||||
|
|
||||||
|
addEventListener("mousemove", function(evt) {
|
||||||
|
hero.x = evt.pageX - 24 ;
|
||||||
|
}, false);
|
||||||
|
|
||||||
|
var lastShot = 0;
|
||||||
|
var SHOT_DELAY = 1000;
|
||||||
|
|
||||||
|
addEventListener("click", function(evt) {
|
||||||
|
if (!hero.dead) {
|
||||||
|
var now = new Date().getTime();
|
||||||
|
if (lastShot +SHOT_DELAY < now ) {
|
||||||
|
lastShot = now;
|
||||||
|
playerShots.push({x:evt.pageX, y: hero.y});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, false);
|
||||||
|
|
||||||
|
|
||||||
|
//Called from update.js
|
||||||
|
var controls = function(modifier){
|
||||||
|
if (KEY_LEFT in keysDown) { // Player holding left
|
||||||
|
hero.x -= hero.speed * modifier;
|
||||||
|
}
|
||||||
|
if (KEY_RIGHT in keysDown) { // Player holding right
|
||||||
|
hero.x += hero.speed * modifier;
|
||||||
|
}
|
||||||
|
}
|
||||||
45
games/space-invaders502/js/draw.js
Normal file
@@ -0,0 +1,45 @@
|
|||||||
|
// Create the canvas
|
||||||
|
var canvas = document.getElementById("canvas");
|
||||||
|
var ctx = canvas.getContext("2d");
|
||||||
|
|
||||||
|
var SIZE = 32;
|
||||||
|
|
||||||
|
var vy = 0;
|
||||||
|
// Draw everything
|
||||||
|
var render = function () {
|
||||||
|
if (bgReady) {
|
||||||
|
|
||||||
|
ctx.drawImage(bgImage, 0, vy);
|
||||||
|
ctx.drawImage(bgImage, 0, bgImage.height-Math.abs(vy));
|
||||||
|
|
||||||
|
if (Math.abs(vy) > bgImage.height) vy = 0;
|
||||||
|
vy -= 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (heroReady && !hero.dead) {
|
||||||
|
ctx.drawImage(heroImage, hero.x, hero.y,SIZE, SIZE);
|
||||||
|
}
|
||||||
|
|
||||||
|
for (var i=0; i < enemies.length; i++){
|
||||||
|
var enemy = enemies[i];
|
||||||
|
ctx.drawImage(monsterImage, enemy.x, enemy.y,SIZE, SIZE);
|
||||||
|
|
||||||
|
}
|
||||||
|
for (var i=0; i < enemyShots.length; i++){
|
||||||
|
var shot = enemyShots[i];
|
||||||
|
ctx.drawImage(shotRedImage, shot.x, shot.y ,SIZE, SIZE);
|
||||||
|
}
|
||||||
|
|
||||||
|
for (var i=0; i < playerShots.length; i++){
|
||||||
|
var shot = playerShots[i];
|
||||||
|
ctx.drawImage(shotImage, shot.x, shot.y ,SIZE, SIZE);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (hero.dead){
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
};
|
||||||
28
games/space-invaders502/js/game.js
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
// Reset the game when the player catches a monster
|
||||||
|
var reset = function () {
|
||||||
|
hero.x = canvas.width / 2;
|
||||||
|
hero.y = canvas.height - 64;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 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();
|
||||||
|
reset();
|
||||||
|
main();
|
||||||
29
games/space-invaders502/js/objects.js
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
// Game objects
|
||||||
|
var hero = {};
|
||||||
|
var playerShots = [];
|
||||||
|
var enemyShots = [];
|
||||||
|
|
||||||
|
var shotSpeed = 200;
|
||||||
|
|
||||||
|
var RIGHT = 1, LEFT = 0;
|
||||||
|
var enemies = [];
|
||||||
|
var enemyDirection = RIGHT;
|
||||||
|
var loadEnemy = function(offset, json){
|
||||||
|
var size = 32;
|
||||||
|
|
||||||
|
for (var i = 0; i< json.length; i++){
|
||||||
|
var pos = json[i];
|
||||||
|
var enemy = {x: offset.x + pos.x * size, y: offset.y + pos.y * size} ;
|
||||||
|
enemies.push(enemy);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
loadJSON('enemies.json',
|
||||||
|
function(data) {
|
||||||
|
|
||||||
|
loadEnemy({ x: 50, y: 50 }, data.five);
|
||||||
|
loadEnemy({ x: 180, y: 50 }, data.zero);
|
||||||
|
loadEnemy({ x: 300, y: 50 }, data.two);
|
||||||
|
},
|
||||||
|
function(xhr) { console.error(xhr); }
|
||||||
|
);
|
||||||
45
games/space-invaders502/js/update.js
Normal file
@@ -0,0 +1,45 @@
|
|||||||
|
|
||||||
|
// Update game objects
|
||||||
|
var update = function (modifier) {
|
||||||
|
controls(modifier);
|
||||||
|
|
||||||
|
for (var i = 0; i< playerShots.length; i++){
|
||||||
|
var shot = playerShots[i];
|
||||||
|
shot.y = shot.y - modifier * shotSpeed;
|
||||||
|
|
||||||
|
for (var e= 0; e < enemies.length; e++){
|
||||||
|
var enemy = enemies[e];
|
||||||
|
if (collision(shot, enemy)) {
|
||||||
|
console.log("Collision with enemy ", shot, enemy);
|
||||||
|
playerShots.splice(i, 1);
|
||||||
|
enemies.splice(e, 1);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
for (var i = 0; i< enemyShots.length; i++){
|
||||||
|
var shot = enemyShots[i];
|
||||||
|
shot.y = shot.y + modifier * shotSpeed;
|
||||||
|
|
||||||
|
if (collision(shot, hero)) {
|
||||||
|
console.log("Collision with hero ", shot, hero);
|
||||||
|
enemyShots.splice(i, 1);
|
||||||
|
hero.dead = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//updateEnemies();
|
||||||
|
// Are they touching?
|
||||||
|
};
|
||||||
|
|
||||||
|
var collision = function(shot, enemy){
|
||||||
|
return shot.x <= (enemy.x + 32)
|
||||||
|
&& enemy.x <= (shot.x + 32)
|
||||||
|
&& shot.y <= (enemy.y + 32)
|
||||||
|
&& enemy.y <= (shot.y + 32)
|
||||||
|
}
|
||||||
|
|
||||||
|
//AI METHODS
|
||||||
|
setInterval(function(){updateEnemies()}, 500);
|
||||||
|
|
||||||
|
setInterval(function(){enemyShot()}, 1000);
|
||||||
11
games/space-invaders502/js/utils.js
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
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();
|
||||||
|
}
|
||||||
@@ -1,3 +1,5 @@
|
|||||||
# 404 ;)
|
# 404 ;)
|
||||||
|
|
||||||
Games from https://github.com/coconauts/404-games with some minor-changes to build a self-running Docker-Container
|
Games from https://github.com/coconauts/404-games with some minor-changes to build a self-running Docker-Container
|
||||||
|
|
||||||
|
and properly also added modified games for error 502
|
||||||