Initial commit

2024-01-13 18:20:27 +01:00
commit 4265d64e57
57 changed files with 1623 additions and 0 deletions
--- a/404_games/pacman/js/draw.js
+++ b/404_games/pacman/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();
+	}