AI game creator

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

No:47814

←

Prev Next

→

Save The Letter I
Developer User20657｜Date and time 24/3/1 0:24:02
Build time 8.239 sec｜Game capacity 1.966KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
  <head>
    <title>Save The Letter I</title>
  </head>
  <body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    
    <script>
      const canvas = document.getElementById('gameCanvas');
      const ctx = canvas.getContext('2d');
      
      // Game variables
      let playerX = 200;
      let playerY = 350;
      let isMovingLeft = false;
      let isMovingRight = false;
      let letterX = 50;
      let letterY = 50;
      let hasLetter = false;
      
      // Event listeners for key presses
      document.addEventListener('keydown', (event) => {
        if(event.key === 'ArrowLeft') {
          isMovingLeft = true;
        }
        if(event.key === 'ArrowRight') {
          isMovingRight = true;
        }
      });
      
      document.addEventListener('keyup', (event) => {
        if(event.key === 'ArrowLeft') {
          isMovingLeft = false;
        }
        if(event.key === 'ArrowRight') {
          isMovingRight = false;
        }
      });
      
      // Game loop
      function gameLoop() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        // Draw player
        ctx.fillStyle = 'blue';
        ctx.fillRect(playerX, playerY, 50, 50);
        
        // Draw letter
        ctx.fillStyle = 'red';
        ctx.fillRect(letterX, letterY, 30, 30);
        
        // Check for collision
        if(playerX < letterX + 30 &&
           playerX + 50 > letterX &&
           playerY < letterY + 30 &&
           playerY + 50 > letterY) {
          hasLetter = true;
        }
        
        if(hasLetter) {
          ctx.font = "30px Arial";
          ctx.fillText("I", 180, 200);
        }
        
        if(isMovingLeft && playerX > 0) {
          playerX -= 5;
        }
        if(isMovingRight && playerX < 350) {
          playerX += 5;
        }
        
        requestAnimationFrame(gameLoop);
      }
      
      gameLoop();
    </script>
  </body>
</html>