JavaScript
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var tileSize = 16;
var key = 0;
var map = [
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
[1,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,1,0,0,0,1,1,1,1,1,1,0,0,0,1],
[1,0,0,0,1,0,0,0,1,0,0,0,0,1,0,0,0,1],
[1,0,0,0,1,0,0,0,1,0,0,0,0,1,0,0,0,1],
[1,0,0,0,1,1,1,1,1,1,1,1,1,1,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
];
function drawMap() {
context.fillStyle = "white";
context.fillRect(0, 0, canvas.width, canvas.height);
for (i=0; i < map.length; i++) {
for (j=0; j < map[i].length; j++) {
if (map[i][j] === 1) {
context.fillStyle = "black";
context.fillRect(j * tileSize, i * tileSize, tileSize, tileSize);
}
}
}
}
function drawPlayer() {
context.fillStyle = "red";
context.save();
context.translate(player.x+8, player.y+8);
context.rotate(player.rot);
context.fillRect(-8, -8, 16, 16)
context.fillStyle = "black";
context.fillRect(4, -4, 2, 2)
context.fillRect(4, 2, 2, 2)
context.restore();
}
function gameCycle() {
move();
drawMap();
drawPlayer();
context.fillStyle = "black";
context.font = "40px Arial";
context.fillText("Key:" + key, 300, 40);
context.fillText("Speed:" + player.speed, 300, 80);
context.fillText("Direction:" + player.dir, 300, 120);
context.fillText("Rotation:" + player.rot, 300, 160);
context.fillText("X:" + player.x, 300, 200);
context.fillText("Y:" + player.y, 300, 240);
}
var player = {
x : 32,
y : 32,
dir : 0,
rot : 1.56,
speed : 0,
moveSpeed : 2,
rotSpeed : 6 * Math.PI / 180
}
function move() {
moveStep = player.speed * player.moveSpeed;
player.rot += player.dir * player.rotSpeed;
newX = player.x + Math.cos(player.rot) * moveStep;
newY = player.y + Math.sin(player.rot) *...