AI game creator

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

No:21706

175

←

Prev Next

→

Shooting Game
Developer User10001｜Date and time 23/10/17 17:37:05
Build time 166.519 sec｜Game capacity 4.984KB｜

Script

Sure! Here's a simple shooting game implemented as a single HTML file using JavaScript. It is designed for smartphone operation and uses pictograms for a visual representation of the game. Enjoy!

To run this game, save the code above as a .html file (e.g., game.html) and open it in a web browser on your smartphone. The game consists of a player character controlled by arrow keys (or touch movement) shooting projectiles at enemies that are spawned from the top of the screen. The goal is to avoid colliding with enemies and earn points by shooting and eliminating them. The game ends when a collision occurs, and the final score is displayed. Enjoy the game!

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

Sure! Here's a simple shooting game implemented as a single HTML file using JavaScript. It is designed for smartphone operation and uses pictograms for a visual representation of the game. Enjoy!

```html
<!DOCTYPE html>
<html>
<head>
  <title>Shooting Game</title>
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <script>
    // Game variables
    var canvas, context, player, projectiles, enemies, score;
    var playerImage, enemyImage;

// Game initialization
    function init() {
      canvas = document.createElement('canvas');
      context = canvas.getContext('2d');
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
      document.body.appendChild(canvas);

player = { x: canvas.width / 2, y: canvas.height - 100, width: 50, height: 50, image: playerImage };
      projectiles = [];
      enemies = [];
      score = 0;

// Load game images
      playerImage = new Image();
      playerImage.src = 'player.png';

enemyImage = new Image();
      enemyImage.src = 'enemy.png';

// Event listeners for player movement
      document.addEventListener('keydown', movePlayer);
      document.addEventListener('touchstart', handleTouch);

setInterval(update, 1000 / 60); // Update game every 60 frames per second
      setInterval(spawnEnemy, 1000);  // Spawn enemies every second
    }

// Game update function
    function update() {
      context.clearRect(0, 0, canvas.width, canvas.height);
      player.draw();
      projectiles.forEach(function(projectile) {
        projectile.update();
      });
      enemies.forEach(function(enemy) {
        enemy.update();
        // Check collision between player and enemies
        if (playerCollision(enemy)) {
          gameOver();
        }
      });

// Clean up projectiles that are off the screen
      projectiles = projectiles.filter(function(projectile) {
        return projectile.y > 0;
      });

// Clean up enemies that are off the screen and update score
      enemies = enemies.filter(function(enemy) {
        if (enemy.y + enemy.height > canvas.height) {
          incrementScore();
          return false;
        }
        return true;
      });
    }

// Player movement function
    function movePlayer(event) {
      if (event.key === 'ArrowLeft' && player.x > 0) {
        player.x -= 10;
      } else if (event.key === 'ArrowRight' && player.x + player.width < canvas.width) {
        player.x += 10;
      } else if (event.key === ' ') {
        fireProjectile();
      }
    }
    
    function handleTouch(event) {
      var touchX = event.changedTouches[0].clientX;

if (touchX < player.x && player.x - 10 > 0) {
        player.x -= 10;
      } else if (touchX > player.x && player.x + player.width + 10 < canvas.width) {
        player.x += 10;
      }
    }

// Projectile creation
    function fireProjectile() {
      var projectile = { x: player.x + player.width / 2, y: player.y, width: 10, height: 10, image: "none" };
      projectiles.push(projectile);
    }

// Enemy creation
    function spawnEnemy() {
      var enemy = { x: Math.random() * (canvas.width - 50), y: 0, width: 50, height: 50, image: enemyImage };
      enemies.push(enemy);
    }

// Drawing functions
    player.draw = function() {
      context.drawImage(player.image, player.x, player.y, player.width, player.height);
    }

projectiles.forEach(function(projectile) {
      projectile.draw = function() {
        context.fillRect(projectile.x, projectile.y, projectile.width, projectile.height);
      }

projectile.update = function() {
        projectile.y -= 5;
        projectile.draw();
      }
    });

enemies.forEach(function(enemy) {
      enemy.draw = function() {
        context.drawImage(enemy.image, enemy.x, enemy.y, enemy.width, enemy.height);
      }

enemy.update = function() {
        enemy.y += 2;
        enemy.draw();
      }
    });

// Collision detection
    function playerCollision(enemy) {
      return 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
    function gameOver() {
      alert('Game over! Your final score is: ' + score);
      init();
    }

// Score increment
    function incrementScore() {
      score++;
    }

// Start the game
    init();
  </script>
</body>
</html>
```

To run this game, save the code above as a .html file (e.g., game.html) and open it in a web browser on your smartphone. The game consists of a player character controlled by arrow keys (or touch movement) shooting projectiles at enemies that are spawned from the top of the screen. The goal is to avoid colliding with enemies and earn points by shooting and eliminating them. The game ends when a collision occurs, and the final score is displayed. Enjoy the game!