Racing with Donald duck's game

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

No:48790

←

Prev Next

→

Racing with Donald duck
Developer Kason Lucas｜Date and time 24/3/2 22:59:44
Build time 9.054 sec｜Game capacity 2.046KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Racing with Donald Duck</title>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>
  
  <script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');
    
    const player = {
      x: 50,
      y: 200,
      speed: 5,
      width: 50,
      height: 50,
      color: 'blue'
    };
    
    const enemy = {
      x: 350,
      y: 200,
      speed: 7,
      width: 50,
      height: 50,
      color: 'red'
    };
    
    let score = 0;
    
    function drawPlayer() {
      ctx.fillStyle = player.color;
      ctx.fillRect(player.x, player.y, player.width, player.height);
    }
    
    function drawEnemy() {
      ctx.fillStyle = enemy.color;
      ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
    }
    
    function drawScore() {
      ctx.fillStyle = 'black';
      ctx.font = '20px Arial';
      ctx.fillText('Score: ' + score, 10, 30);
    }
    
    function checkCollision() {
      if (player.x < enemy.x + enemy.width &&
          player.x + player.width > enemy.x &&
          player.y < enemy.y + enemy.height &&
          player.y + player.height > enemy.y) {
        alert('You crashed! Game Over!');
        location.reload();
      }
    }
    
    function update() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      drawPlayer();
      drawEnemy();
      drawScore();
      checkCollision();
      
      player.x += player.speed;
      enemy.x -= enemy.speed;
      
      if (player.x > canvas.width) {
        score++;
        player.x = 0;
      }
      
      if (enemy.x + enemy.width < 0) {
        enemy.x = canvas.width;
      }
    }
    
    setInterval(update, 1000/60);
    
    document.addEventListener('keydown', (event) => {
      switch(event.keyCode) {
        case 38: // Up arrow key
          player.y -= player.speed;
          break;
        case 40: // Down arrow key
          player.y += player.speed;
          break;
      }
    });
  </script>
</body>
</html>