AI game creator

Click here for free DL of the app version that can save data.

No:45456

←

Prev Next

→

Monkey game
Developer User19598｜Date and time 24/2/20 16:25:37
Build time 7.665 sec｜Game capacity 1.583KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
<title>Monkey Game</title>
<style>
canvas {
  border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");

const monkey = {
  x: 50,
  y: 100,
  width: 50,
  height: 50,
  speed: 5
};

const banana = {
  x: Math.random() * canvas.width,
  y: Math.random() * canvas.height,
  width: 20,
  height: 20
};

function drawMonkey() {
  ctx.fillStyle = "brown";
  ctx.fillRect(monkey.x, monkey.y, monkey.width, monkey.height);
}

function drawBanana() {
  ctx.fillStyle = "yellow";
  ctx.fillRect(banana.x, banana.y, banana.width, banana.height);
}

function checkCollision() {
  if (monkey.x < banana.x + banana.width &&
      monkey.x + monkey.width > banana.x &&
      monkey.y < banana.y + banana.height &&
      monkey.y + monkey.height > banana.y) {
    banana.x = Math.random() * canvas.width;
    banana.y = Math.random() * canvas.height;
  }
}

function update() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  drawMonkey();
  drawBanana();
  
  checkCollision();
  
  requestAnimationFrame(update);
}

update();

document.addEventListener("keydown", function(event) {
  switch(event.key) {
    case "ArrowUp":
      monkey.y -= monkey.speed;
      break;
    case "ArrowDown":
      monkey.y += monkey.speed;
      break;
    case "ArrowLeft":
      monkey.x -= monkey.speed;
      break;
    case "ArrowRight":
      monkey.x += monkey.speed;
      break;
  }
});
</script>
</body>
</html>