tebarius/Docker-404-games
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adding 502 error

Browse Source
This commit is contained in:
Martin Kayser
2025-02-01 16:17:45 +01:00
parent eae424d582
commit ee644cb950
99 changed files with 1156 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
games/pacman404/data/map.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 217 B

BIN
games/pacman404/images/32_dot.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 564 B

BIN
games/pacman404/images/32_player_close.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 583 B

BIN
games/pacman404/images/32_player_open.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 530 B

BIN
games/pacman404/images/bg_center.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 898 B

BIN
games/pacman404/images/bg_down.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 902 B

BIN
games/pacman404/images/bg_left.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 775 B

BIN
games/pacman404/images/bg_right.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 765 B

BIN
games/pacman404/images/bg_up.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 904 B

BIN
games/pacman404/images/enemy_red.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 294 B

23
games/pacman404/index.html Normal file
View 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/pacman404/js/ai.js Normal file
View 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/pacman404/js/assets.js Normal file
View 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/pacman404/js/collision.js Normal file
View 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/pacman404/js/controls.js vendored Normal file
View 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/pacman404/js/draw.js Normal file
View 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/pacman404/js/game.js Normal file
View 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/pacman404/js/objects.js Normal file
View 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/pacman404/js/objectsLoad.js Normal file
View 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/pacman404/js/update.js Normal file
View 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/pacman404/js/utils.js Normal file
View 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;
}