AI game creator

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

No:52053

126

←

Prev Next

→

Spice wars
Developer User19080｜Date and time 24/3/17 13:48:06
Build time 6.865 sec｜Game capacity 1.971KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Guerra de Temperos</title>
</head>
<body>
  <canvas id="canvas" width="400" height="600"></canvas>
  
  <script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    
    let playerX = 200;
    const playerWidth = 50;
    const playerHeight = 50;
    let spiceX = Math.floor(Math.random() * 350);
    let spiceY = 0;
    const spiceWidth = 30;
    const spiceHeight = 30;
    let score = 0;
    
    function drawPlayer() {
      ctx.fillStyle = 'blue';
      ctx.fillRect(playerX, canvas.height - playerHeight, playerWidth, playerHeight);
    }
    
    function drawSpice() {
      ctx.fillStyle = 'red';
      ctx.fillRect(spiceX, spiceY, spiceWidth, spiceHeight);
    }
    
    function updateSpice() {
      spiceY += 1;
      if (spiceY > canvas.height) {
        spiceY = 0;
        spiceX = Math.floor(Math.random() * 350);
      }
    }
    
    function checkCollision() {
      if (spiceX < playerX + playerWidth &&
         spiceX + spiceWidth > playerX &&
         spiceY < canvas.height - playerHeight &&
         spiceY + spiceHeight > canvas.height - playerHeight) {
          score += 1;
          spiceY = 0;
          spiceX = Math.floor(Math.random() * 350);
        }
    }
    
    function drawScore() {
      ctx.fillStyle = 'black';
      ctx.font = '20px Arial';
      ctx.fillText('Score: ' + score, 10, 30);
    }
    
    function gameLoop() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      drawPlayer();
      drawSpice();
      updateSpice();
      checkCollision();
      drawScore();
      requestAnimationFrame(gameLoop);
    }
    
    gameLoop();
    
    document.addEventListener('keydown', (event) => {
      if (event.key === 'ArrowLeft' && playerX > 0) {
        playerX -= 5;
      } else if (event.key === 'ArrowRight' && playerX < canvas.width - playerWidth) {
        playerX += 5;
      }
    });
  </script>
</body>
</html>