Shooting Game's game | AI game creator

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

No:42434

104

Shooting Game
Developer User18878｜Date and time 24/2/11 18:31:31
Build time 16.078 sec｜Game capacity 5.761KB｜

Sure! Here's an example of a simple shooting game implemented as a single HTML file using JavaScript:

This code creates a simple shooting game where you control a player with left and right arrow keys or touch gestures on smartphones. The player shoots projectiles to destroy enemies, and the score increases for each enemy destroyed. The game is displayed using a canvas element and the game logic is written in JavaScript.

→ 　

0　

0　

　

　

[PR]現在の新着人気ランキング

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

(C)2023 HisashiApp

Sure! Here's an example of a simple shooting game implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Shooting Game</title>
  <style>
    #game-container {
      width: 100%;
      height: 190vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    #game-canvas {
      border: 2px solid black;
    }
  </style>
</head>
<body>
  <div id="game-container">
    <canvas id="game-canvas" width="400" height="400"></canvas>
  </div>
  
  <script>
    document.addEventListener('DOMContentLoaded', init);

function init() {
      const canvas = document.getElementById('game-canvas');
      const ctx = canvas.getContext('2d');
    
      const player = {
        x: canvas.width / 2,
        y: canvas.height - 30,
        size: 20,
        color: '#ff823e',
        speed: 5
      };
    
      let projectiles = [];
      let enemies = [];
      let score = 0;
    
      function drawPlayer() {
        ctx.fillStyle = player.color;
        ctx.fillRect(player.x - player.size/2, player.y - player.size/2, player.size, player.size);
      }
    
      function movePlayer(direction) {
        if (direction === 'left') {
          player.x -= player.speed;
        } else if (direction === 'right') {
          player.x += player.speed;
        }
      }
    
      function shootProjectile() {
        const projectile = {
          x: player.x,
          y: player.y - 10,
          size: 3,
          color: '#ffffff',
          speed: 5
        };
    
        projectiles.push(projectile);
      }
    
      function drawProjectiles() {
        projectiles.forEach(projectile => {
          ctx.fillStyle = projectile.color;
          ctx.beginPath();
          ctx.arc(projectile.x, projectile.y, projectile.size, 0, Math.PI * 2);
          ctx.fill();
        });
      }
    
      function moveProjectiles() {
        projectiles.forEach(projectile => {
          projectile.y -= projectile.speed;
        });
    
        projectiles = projectiles.filter(projectile => projectile.y > 0);
      }
    
      function createEnemy() {
        const enemy = {
          x: Math.random() * canvas.width,
          y: 0,
          size: 15,
          color: '#ff4e4e',
          speed: Math.random() * 2 + 2
        };
    
        enemies.push(enemy);
      }
    
      function drawEnemies() {
        enemies.forEach(enemy => {
          ctx.fillStyle = enemy.color;
          ctx.fillRect(enemy.x - enemy.size/2, enemy.y - enemy.size/2, enemy.size, enemy.size);
        });
      }
    
      function moveEnemies() {
        enemies.forEach(enemy => {
          enemy.y += enemy.speed;
        });
    
        enemies = enemies.filter(enemy => enemy.y < canvas.height);
      }
    
      function detectCollision() {
        projectiles.forEach(projectile => {
          enemies.forEach(enemy => {
            const dx = projectile.x - enemy.x;
            const dy = projectile.y - enemy.y;
            const distance = Math.sqrt(dx * dx + dy * dy);
    
            if (distance < projectile.size + enemy.size) {
              score++;
              projectiles = projectiles.filter(p => p !== projectile);
              enemies = enemies.filter(e => e !== enemy);
            }
          });
        });
      }
    
      function updateScore() {
        ctx.fillStyle = '#000000';
        ctx.font = '20px Arial';
        ctx.fillText(`Score: ${score}`, 10, 30);
      }
    
      function update() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
    
        drawPlayer();
        drawProjectiles();
        drawEnemies();
        updateScore();
    
        moveProjectiles();
        moveEnemies();
        detectCollision();
    
        requestAnimationFrame(update);
      }
    
      update();
    
      // Keyboard event listeners
      document.addEventListener('keydown', (event) => {
        if (event.key === 'ArrowLeft' || event.key === 'Left') {
          movePlayer('left');
        } else if (event.key === 'ArrowRight' || event.key === 'Right') {
          movePlayer('right');
        } else if (event.key === ' ' || event.key === 'Spacebar') {
          shootProjectile();
        }
      });
    
      // Touch event listeners for mobile
      document.addEventListener('touchstart', handleTouchStart, false);
      document.addEventListener('touchmove', handleTouchMove, false);
    
      let xDown = null;
      let yDown = null;
    
      function handleTouchStart(event) {
        const firstTouch = event.touches[0];
        xDown = firstTouch.clientX;
        yDown = firstTouch.clientY;
      }
    
      function handleTouchMove(event) {
        if (!xDown || !yDown) {
          return;
        }
    
        const xUp = event.touches[0].clientX;
        const yUp = event.touches[0].clientY;
    
        const xDiff = xDown - xUp;
        const yDiff = yDown - yUp;
    
        if (Math.abs(xDiff) > Math.abs(yDiff)) {
          if (xDiff > 0) {
            movePlayer('left');
          } else {
            movePlayer('right');
          }
        }
    
        xDown = null;
        yDown = null;
      }
    }
  </script>
</body>
</html>
```

This code creates a simple shooting game where you control a player with left and right arrow keys or touch gestures on smartphones. The player shoots projectiles to destroy enemies, and the score increases for each enemy destroyed. The game is displayed using a canvas element and the game logic is written in JavaScript.