AI game creator

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

No:37336

←

Prev Next

→

Top down shooter
Developer User17066｜Date and time 24/1/21 2:09:17
Build time 16.557 sec｜Game capacity 4.769KB｜

Script

Sure! Here's an example of a simple top-down shooter game implemented as a single HTML file using JavaScript:

In this game, you control a player character represented by a filled square. You can move the player character using the arrow keys on your smartphone. The objective is to shoot down the enemy characters represented by filled squares before they reach the bottom of the screen. You can shoot bullets by tapping the screen. The game ends if an enemy character collides with your player character. The score increases each time you successfully shoot down an enemy. Please note that this is a basic example to demonstrate the mechanics of a top-down shooter game. You can customize and enhance it further based on your specific requirements and game design.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's an example of a simple top-down shooter game implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Top-Down Shooter Game</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
    canvas {
      background: #f0f0f0;
      display: block;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="600" height="400"></canvas>

const playerSize = 20;
    const playerSpeed = 5;
    let playerX = canvas.width / 2 - playerSize / 2;
    let playerY = canvas.height / 2 - playerSize / 2;

const bulletSize = 10;
    const bulletSpeed = 7;
    const bullets = [];

const enemySize = 30;
    const enemySpeed = 2;
    const enemies = [];

let score = 0;

function drawPlayer() {
      context.fillStyle = '#0095DD';
      context.fillRect(playerX, playerY, playerSize, playerSize);
    }

function drawBullets() {
      context.fillStyle = '#FF0000';
      bullets.forEach(bullet => {
        context.fillRect(bullet.x, bullet.y, bulletSize, bulletSize);
      });
    }

function drawEnemies() {
      context.fillStyle = '#000000';
      enemies.forEach(enemy => {
        context.fillRect(enemy.x, enemy.y, enemySize, enemySize);
      });
    }

function updatePlayerPosition(event) {
      const key = event.key;
      if (key === 'ArrowUp' && playerY > 0)
        playerY -= playerSpeed;
      else if (key === 'ArrowDown' && playerY < canvas.height - playerSize)
        playerY += playerSpeed;
      else if (key === 'ArrowLeft' && playerX > 0)
        playerX -= playerSpeed;
      else if (key === 'ArrowRight' && playerX < canvas.width - playerSize)
        playerX += playerSpeed;
    }

function shootBullet() {
      const bulletX = playerX + playerSize / 2 - bulletSize / 2;
      const bulletY = playerY;
      bullets.push({ x: bulletX, y: bulletY });
    }

function spawnEnemy() {
      const enemyX = Math.random() * (canvas.width - enemySize);
      const enemyY = 0;
      enemies.push({ x: enemyX, y: enemyY });
    }

function updateBullets() {
      bullets.forEach((bullet, bulletIndex) => {
        bullet.y -= bulletSpeed;
        if (bullet.y < 0)
          bullets.splice(bulletIndex, 1);
      });
    }

function updateEnemies() {
      enemies.forEach((enemy, enemyIndex) => {
        enemy.y += enemySpeed;
        if (enemy.y > canvas.height)
          enemies.splice(enemyIndex, 1);
      });
    }

function checkCollisions() {
      enemies.forEach((enemy, enemyIndex) => {
        bullets.forEach((bullet, bulletIndex) => {
          if (
            bullet.x < enemy.x + enemySize &&
            bullet.x + bulletSize > enemy.x &&
            bullet.y < enemy.y + enemySize &&
            bullet.y + bulletSize > enemy.y
          ) {
            bullets.splice(bulletIndex, 1);
            enemies.splice(enemyIndex, 1);
            score++;
          }
        });

if (
          playerX < enemy.x + enemySize &&
          playerX + playerSize > enemy.x &&
          playerY < enemy.y + enemySize &&
          playerY + playerSize > enemy.y
        ) {
          endGame();
        }
      });
    }

function drawScore() {
      context.font = '16px Arial';
      context.fillStyle = '#000000';
      context.fillText('Score: ' + score, 8, 20);
    }

function endGame() {
      alert('Game Over! Final Score: ' + score);
      window.location.reload();
    }

function gameLoop() {
      context.clearRect(0, 0, canvas.width, canvas.height);
      drawPlayer();
      drawBullets();
      drawEnemies();
      drawScore();
      updateBullets();
      updateEnemies();
      checkCollisions();
      requestAnimationFrame(gameLoop);
    }

document.addEventListener('keydown', updatePlayerPosition);
    document.addEventListener('keydown', event => {
      if (event.key === ' ')
        shootBullet();
    });

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

Please note that this is a basic example to demonstrate the mechanics of a top-down shooter game. You can customize and enhance it further based on your specific requirements and game design.