Make a cowboy dueling game relying on time's game

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

No:46678

←

Prev Next

→

Make a cowboy dueling game relying on time
Developer User20203｜Date and time 24/2/25 19:06:48
Build time 5.795 sec｜Game capacity 1.766KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

<!DOCTYPE html>
<html>
  <head>
    <title>Cowboy Dueling Game</title>
  </head>
  <body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    
    <script>
      const canvas = document.getElementById('gameCanvas');
      const ctx = canvas.getContext('2d');
      
      let playerScore = 0;
      
      const player = {
        x: 200,
        y: 200,
        width: 50,
        height: 50,
        color: 'red'
      };
      
      const enemy = {
        x: Math.random() * 350,
        y: Math.random() * 350,
        width: 50,
        height: 50,
        color: 'blue'
      };
      
      canvas.addEventListener('click', () => {
        const playerTime = Math.floor(Math.random() * 5) + 1;
        const enemyTime = Math.floor(Math.random() * 5) + 1;
        
        if (playerTime < enemyTime) {
          playerScore++;
          alert('You win! Your Score: ' + playerScore);
        } else if (playerTime > enemyTime) {
          alert('You lose! Your final Score: ' + playerScore);
          playerScore = 0;
        } else {
          alert('Draw! Your Score: ' + playerScore);
        }
      
        enemy.x = Math.random() * 350;
        enemy.y = Math.random() * 350;
      });
      
      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 draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        drawPlayer();
        drawEnemy();
        
        requestAnimationFrame(draw);
      }
      
      draw();
    </script>
  </body>
</html>