以下が提供できる解決策です。
<!DOCTYPE html>
<html>
<head>
<title>Poop Dodger Game</title>
<style>
canvas {
border:1px solid #d3d3d3;
background-color: #f1f1f1;
}
</style>
</head>
<body onload="loadGame()">
<script>
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
document.body.appendChild(canvas);
var poop = {
x: 0,
y: 0,
speed: 0,
width: 50,
height: 50,
};
var player = {
x: canvas.width/2,
y: canvas.height-70,
speed: 10,
width: 100,
height: 70,
};
var score = 0;
function loadGame() {
document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);
setInterval(gameLoop, 30);
}
function gameLoop() {
// Clean canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw poop
ctx.beginPath();
ctx.rect(poop.x, poop.y, poop.width, poop.height);
ctx.fillStyle = "#0095DD";
ctx.fill();
ctx.closePath();
// Draw player
ctx.beginPath();
ctx.rect(player.x, player.y, player.width, player.height);
ctx.fillStyle = "#0095DD";
ctx.fill();
ctx.closePath();
// Move poop
poop.y += poop.speed;
if (poop.y > canvas.height) {
// Reset poop's position and speed
poop.x = Math.floor(Math.random()*(canvas.width-poop.width));
poop.y = -poop.height;
poop.speed = Math.floor(Math.random()*10)+1;
// Increase score
score++;
}
// Move player
if (leftPressed && player.x > 0) {
player.x -= player.speed;
}
if (rightPressed && player.x < canvas.width-player.width) {
player.x += player.speed;
}
// Check collision
if (poop.x < player.x + player.width &&
poop.x + poop.width > player.x &&
poop.y < player.y + player.height &&
poop.y + poop.height > player.y) {
// Collided, game over
alert("Oops, you hit the poop! Game over.\nYour score is: " + score);
// Reset game
poop.speed = 0;
poop.y = -poop.height;
player.x = canvas.width/2;
score = 0;
}
// Draw score
ctx.font = "30px Arial";
ctx.fillStyle = "#0095DD";
ctx.fillText("Score: " + score, 10, canvas.height-20);
}
var leftPressed = false;
var rightPressed = false;
function keyDownHandler(event) {
if (event.keyCode == 37) {
leftPressed = true;
}
else if (event.keyCode == 39) {
rightPressed = true;
}
}
function keyUpHandler(event) {
if (event.keyCode == 37) {
leftPressed = false;
}
else if (event.keyCode == 39) {
rightPressed = false;
}
}
</script>
</body>
</html>
ジョークを含めてみました。Enjoy!
