Crie um jogo no estilo mario's game

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

No:48791

←

Prev Next

→

Crie um jogo no estilo mario
Developer User20839｜Date and time 24/3/2 22:59:53
Build time 6.855 sec｜Game capacity 1.448KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jogo do estilo Mario</title>
</head>
<body>
<canvas id="gameCanvas" width="400" height="400"></canvas>

const player = {
  x: 50,
  y: canvas.height - 50,
  width: 30,
  height: 30,
  speed: 5
};

const obstacle = {
  x: canvas.width - 50,
  y: canvas.height - 50,
  width: 30,
  height: 30,
  speed: 3
};

function drawPlayer() {
  ctx.fillStyle = "red";
  ctx.fillRect(player.x, player.y, player.width, player.height);
}

function drawObstacle() {
  ctx.fillStyle = "blue";
  ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);
}

function clearCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
}

function update() {
  clearCanvas();
  drawPlayer();
  drawObstacle();

player.x += player.speed;
  obstacle.x -= obstacle.speed;

if (player.x < 0) {
    player.x = 0;
  }
  
  if (obstacle.x + obstacle.width < 0) {
    obstacle.x = canvas.width;
  }

if (player.x < obstacle.x + obstacle.width &&
      player.x + player.width > obstacle.x &&
      player.y < obstacle.y + obstacle.height &&
      player.y + player.height > obstacle.y) {
    alert("Game Over!");
    location.reload();
  }

requestAnimationFrame(update);
}

update();
</script>
</body>
</html>