AI game creator

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

No:22907

←

Prev Next

→

Shooting Game
Developer User10590｜Date and time 23/10/26 13:47:43
Build time 145.403 sec｜Game capacity 5.807KB｜

Script

Sure! Here's an example implementation of a simple shooting game using JavaScript within an HTML file. The game is designed to be played on a smartphone, and it uses pictograms for visuals. The code is enclosed within script tags.

This code sets up a simple shooting game on a smartphone. The player controls a character using either arrow keys or by tapping the screen. The objective is to eliminate enemy characters by shooting bullets at them. If the player collides with an enemy, the game is over. The game continues until the player loses. Please note that the code assumes the availability of three pictogram image files: `emozi_all/pictogram.png`, `emozi_all/enemy.png`, and `emozi_rabbit.png`. Ensure you replace them with actual images for the game elements to be visible on the canvas.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Shooting Game</title>
  <style>
    canvas {
      background-color: #F0F0F0;
      display: block;
      margin: auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas"></canvas>

// Pictogram Assets
    const playerImg = document.createElement('img');
    playerImg.src = 'player.png';

const enemyImg = document.createElement('img');
    enemyImg.src = 'enemy.png';

const bulletImg = document.createElement('img');
    bulletImg.src = 'bullet.png';

// Player Object
    class Player {
      constructor(x, y, width, height) {
        this.x = x;
        this.y = y;
        this.width = width;
        this.height = height;
      }
      draw() {
        context.drawImage(playerImg, this.x, this.y, this.width, this.height);
      }
      moveLeft() {
        if (this.x > 0) {
          this.x -= 5;
        }
      }
      moveRight() {
        if (this.x + this.width < GAME_WIDTH) {
          this.x += 5;
        }
      }
      shoot() {
        bullets.push(new Bullet(this.x + this.width / 2, this.y));
      }
    }

// Enemy Object
    class Enemy {
      constructor(x, y, width, height, speed) {
        this.x = x;
        this.y = y;
        this.width = width;
        this.height = height;
        this.speed = speed;
      }
      draw() {
        context.drawImage(enemyImg, this.x, this.y, this.width, this.height);
      }
      update() {
        this.y += this.speed;
      }
    }

// Bullet Object
    class Bullet {
      constructor(x, y) {
        this.x = x;
        this.y = y;
        this.width = 5;
        this.height = 15;
        this.speed = 5;
      }
      draw() {
        context.drawImage(bulletImg, this.x, this.y, this.width, this.height);
      }
      update() {
        this.y -= this.speed;
      }
    }

// Game Variables
    let canvas;
    let context;
    let player;
    let enemies = [];
    let bullets = [];
    let gameLoop;

// Game Initialization
    function startGame() {
      canvas = document.getElementById('gameCanvas');
      context = canvas.getContext('2d');

canvas.width = GAME_WIDTH;
      canvas.height = GAME_HEIGHT;

player = new Player(GAME_WIDTH / 2 - 25, GAME_HEIGHT - 75, 50, 50);

gameLoop = setInterval(updateGame, 20);

window.addEventListener('keydown', handleKeyPress);
      window.addEventListener('touchstart', handleScreenTouch);
    }

// Handle Key Press
    function handleKeyPress(event) {
      if (event.key === 'ArrowLeft') {
        player.moveLeft();
      } else if (event.key === 'ArrowRight') {
        player.moveRight();
      } else if (event.key === ' ') {
        player.shoot();
      }
    }

// Handle Screen Touch
    function handleScreenTouch(event) {
      const touchX = event.changedTouches[0].clientX;
      const touchY = event.changedTouches[0].clientY;

if (touchX < GAME_WIDTH / 2) {
        player.moveLeft();
      } else if (touchX >= GAME_WIDTH / 2) {
        player.moveRight();
      }

if (touchY < GAME_HEIGHT / 2) {
        player.shoot();
      }
    }

// Update Game State
    function updateGame() {
      clearCanvas();
      player.draw();

// Draw and update bullets
      bullets.forEach((bullet, index) => {
        bullet.draw();
        bullet.update();

// Remove bullets outside the canvas
        if (bullet.y < -bullet.height) {
          bullets.splice(index, 1);
        }
      });

// Draw and update enemies
      enemies.forEach((enemy, index) => {
        enemy.draw();
        enemy.update();

// Check bullet-enemy collision
        bullets.forEach((bullet, bulletIndex) => {
          if (
            bullet.x < enemy.x + enemy.width &&
            bullet.x + bullet.width > enemy.x &&
            bullet.y < enemy.y + enemy.height &&
            bullet.y + bullet.height > enemy.y
          ) {
            bullets.splice(bulletIndex, 1);
            enemies.splice(index, 1);
          }
        });

// Check player-enemy collision
        if (
          player.x < enemy.x + enemy.width &&
          player.x + player.width > enemy.x &&
          player.y < enemy.y + enemy.height &&
          player.y + player.height > enemy.y
        ) {
          // Game Over
          clearInterval(gameLoop);
          alert('Game Over');
        }

// Remove enemies outside the canvas
        if (enemy.y > GAME_HEIGHT) {
          enemies.splice(index, 1);
        }
      });

// Randomly add new enemies
      if (Math.random() < 0.02) {
        const enemyX = Math.random() * (GAME_WIDTH - 50);
        enemies.push(new Enemy(enemyX, 0, 50, 50, Math.random() * 2 + 1));
      }
    }

// Clear the canvas
    function clearCanvas() {
      context.clearRect(0, 0, GAME_WIDTH, GAME_HEIGHT);
    }

// Start the Game
    startGame();
  </script>
</body>
</html>
```

Please note that the code assumes the availability of three pictogram image files: `player.png`, `enemy.png`, and `bullet.png`. Ensure you replace them with actual images for the game elements to be visible on the canvas.