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

No:7866

161

←

Prev Next

→

Shooting Game
Developer User4089｜Date and time 23/7/10 3:00:15
Build time 16.175 sec｜Game capacity 4.746KB｜

Script

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

Shooting Game

👾

In this game, the player (represented by the 👾 symbol) can move left and right using the left and right arrow keys. The player can shoot bullets using the space bar key to destroy the red enemies. The objective is to shoot as many enemies as possible before one reaches the bottom of the game board. The score is displayed at the top of the game board. The game will end once an enemy reaches the bottom, and the final score will be shown in an alert window. Please note that this game uses simple CSS and HTML elements to represent the player, bullets, and enemies instead of pictograms. However, you can customize the visual appearance by modifying the CSS styles as desired.

←

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 shooting game implemented as a single HTML file using JavaScript and enclosed in script tags:

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Shooting Game</title>
  <style>
    #game-board {
      position: relative;
      width: 400px;
      height: 400px;
      border: 1px solid black;
    }

#player {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      font-size: 20px;
    }

#bullet {
      position: absolute;
      width: 10px;
      height: 20px;
      background-color: black;
    }

.enemy {
      position: absolute;
      width: 20px;
      height: 20px;
      background-color: red;
    }
  </style>
</head>
<body>
  <h1>Shooting Game</h1>

// Game configuration
    const boardWidth = 400;
    const boardHeight = 400;
    const playerSpeed = 10;
    const bulletSpeed = 5;
    const enemySpeed = 2;

// Key codes
    const LEFT_ARROW = 37;
    const RIGHT_ARROW = 39;
    const SPACE_BAR = 32;

function startGame() {
      player = {
        element: document.getElementById("player"),
        x: boardWidth / 2,
        y: boardHeight - 40,
        width: 30,
        height: 30
      };

bullet = {
        element: document.createElement("div"),
        x: 0,
        y: player.y - 20,
        width: 10,
        height: 20
      };
      bullet.element.id = "bullet";
      document.getElementById("game-board").appendChild(bullet.element);

// Event listeners
      document.addEventListener("keydown", movePlayer);
      document.addEventListener("keydown", shoot);

gameInterval = setInterval(updateGame, 20);
    }

function shoot(event) {
      if (event.keyCode === SPACE_BAR) {
        bullet.x = player.x + (player.width / 2) - (bullet.width / 2);
        bullet.element.style.left = bullet.x + "px";

let bulletInterval = setInterval(function() {
          bullet.y -= bulletSpeed;
          bullet.element.style.top = bullet.y + "px";

if (bullet.y < 0) {
            clearInterval(bulletInterval);
            bullet.y = player.y - 20;
            bullet.element.style.top = bullet.y + "px";
          }
        }, 20);
      }
    }

function createEnemy() {
      let enemy = {
        element: document.createElement("div"),
        x: Math.random() * (boardWidth - 20),
        y: -20,
        width: 20,
        height: 20
      };
      enemy.element.className = "enemy";
      document.getElementById("game-board").appendChild(enemy.element);
      enemies.push(enemy);
    }

function updateGame() {
      createEnemy();

for (let i = 0; i < enemies.length; i++) {
        enemies[i].y += enemySpeed;
        enemies[i].element.style.top = enemies[i].y + "px";

if (enemies[i].y + enemies[i].height > boardHeight) {
          gameOver();
          return;
        }

if (collisionCheck(bullet, enemies[i])) {
          score++;
          document.getElementById("score").innerHTML = "Score: " + score;
          enemies[i].element.remove();
          enemies.splice(i, 1);
          i--;
        }
      }
    }

function collisionCheck(obj1, obj2) {
      return obj1.x < obj2.x + obj2.width &&
             obj1.x + obj1.width > obj2.x &&
             obj1.y < obj2.y + obj2.height &&
             obj1.y + obj1.height > obj2.y;
    }

function gameOver() {
      clearInterval(gameInterval);
      alert("Game Over! Your score is: " + score);
    }

startGame();
  </script>
</body>
</html>
```

Please note that this game uses simple CSS and HTML elements to represent the player, bullets, and enemies instead of pictograms. However, you can customize the visual appearance by modifying the CSS styles as desired.