AI game creator

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

No:49249

←

Prev Next

→

Race game
Developer User20978｜Date and time 24/3/4 4:57:44
Build time 8.68 sec｜Game capacity 2.715KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

<html>
  <head>
    <title>Race Game</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: 200,
        y: 350,
        width: 50,
        height: 50,
        color: 'blue',
        speed: 5,
        leftPressed: false,
        rightPressed: false
      };
      
      const enemy = {
        x: Math.random() * 350,
        y: 0,
        width: 50,
        height: 50,
        color: 'red',
        speed: 3
      };
      
      document.addEventListener('keydown', keyDownHandler);
      document.addEventListener('keyup', keyUpHandler);
      
      function keyDownHandler(event) {
        if (event.key === 'ArrowLeft') {
          player.leftPressed = true;
        } else if (event.key === 'ArrowRight') {
          player.rightPressed = true;
        }
      }
      
      function keyUpHandler(event) {
        if (event.key === 'ArrowLeft') {
          player.leftPressed = false;
        } else if (event.key === 'ArrowRight') {
          player.rightPressed = false;
        }
      }
      
      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 movePlayer() {
        if (player.leftPressed) {
          player.x -= player.speed;
        } else if (player.rightPressed) {
          player.x += player.speed;
        }
        if (player.x < 0) {
          player.x = 0;
        } else if (player.x + player.width > canvas.width) {
          player.x = canvas.width - player.width;
        }
      }
      
      function moveEnemy() {
        enemy.y += enemy.speed;
        if (enemy.y > canvas.height) {
          enemy.y = 0;
          enemy.x = Math.random() * 350;
        }
      }
      
      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('Game Over! You crashed!');
            document.location.reload();
          }
      }
      
      function drawGame() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        drawPlayer();
        drawEnemy();
        movePlayer();
        moveEnemy();
        checkCollision();
        window.requestAnimationFrame(drawGame);
      }
      
      drawGame();
    </script>
  </body>
</html>