AI game creator

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

No:34892

119

←

Prev Next

→

Shooting Game
Developer User16363｜Date and time 24/1/12 5:56:21
Build time 12.967 sec｜Game capacity 2.762KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
  <title>Shooting Game</title>
  <style>
    #canvas {
      border: 1px solid black;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="canvas" width="400" height="400"></canvas>
  <script>
    // Game variables
    const canvas = document.getElementById("canvas");
    const ctx = canvas.getContext("2d");
    const playerSize = 50;
    const enemySize = 30;
    const bulletSize = 10;
    let playerX = (canvas.width - playerSize) / 2;
    let playerY = canvas.height - playerSize;
    let enemyX = Math.random() * (canvas.width - enemySize);
    let enemyY = 0;
    let bulletX = 0;
    let bulletY = 0;
    let isBulletVisible = false;
    let gameScore = 0;

// Handle touch events
    canvas.addEventListener('touchmove', function(event) {
      const touch = event.touches[0];
      const relativeX = touch.pageX - canvas.offsetLeft;
      if (relativeX > playerSize / 2 && relativeX < canvas.width - playerSize / 2) {
        playerX = relativeX - playerSize / 2;
      }
    });

canvas.addEventListener('touchend', function() {
      if (!isBulletVisible) {
        bulletX = playerX + playerSize / 2 - bulletSize / 2;
        bulletY = playerY;
        isBulletVisible = true;
      }
    });

// Game loop
    function gameLoop() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw player
      ctx.fillStyle = 'blue';
      ctx.fillRect(playerX, playerY, playerSize, playerSize);

// Draw enemy
      ctx.fillStyle = 'red';
      ctx.fillRect(enemyX, enemyY, enemySize, enemySize);

// Draw bullet
      if (isBulletVisible) {
        ctx.fillStyle = 'yellow';
        ctx.fillRect(bulletX, bulletY, bulletSize, bulletSize);
      }

// Move enemy downwards
      enemyY += 1;
      if (enemyY > canvas.height) {
        enemyX = Math.random() * (canvas.width - enemySize);
        enemyY = 0;
        gameScore -= 1;
      }

// Move bullet upwards
      if (isBulletVisible) {
        bulletY -= 5;
        if (bulletY < 0) {
          isBulletVisible = false;
        } else {
          // Check bullet collision with enemy
          if (bulletX < enemyX + enemySize &&
              bulletX + bulletSize > enemyX &&
              bulletY < enemyY + enemySize &&
              bulletY + bulletSize > enemyY) {
            enemyX = Math.random() * (canvas.width - enemySize);
            enemyY = 0;
            isBulletVisible = false;
            gameScore += 10;
          }
        }
      }

// Draw score
      ctx.fillStyle = 'black';
      ctx.font = '20px Arial';
      ctx.fillText(`Score: ${gameScore}`, 10, 30);

requestAnimationFrame(gameLoop);
    }

gameLoop();
  </script>
</body>
</html>