AI game creator

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

No:23551

←

Prev Next

→

Shooting Game
Developer User10996｜Date and time 23/11/1 19:02:04
Build time 72.671 sec｜Game capacity 4.049KB｜

Script

Certainly! Here's a simple shooting game implemented as a single HTML file using JavaScript. It features pictograms and can be played on a smartphone. Just copy the code below into an HTML file and open it in a browser:

To use pictograms, you can replace `"emozi_all/player.png"` with the path to your desired player pictogram image. Similarly, you can modify the `context.fillStyle` values for bullets and enemies to represent different pictograms or colors. Note: This is a basic implementation to give you a starting point. You can further enhance the game with additional features, sound effects, animations, and more.

←

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 {
            border: 1px solid black;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

// Start the game
        function startGame() {
            canvas = document.getElementById("gameCanvas");
            context = canvas.getContext("2d");

player = {
                x: canvas.width / 2,
                y: canvas.height - 50,
                width: 50,
                height: 50,
                speed: 5,
                image: new Image(),
                draw: function () {
                    context.drawImage(this.image, this.x, this.y, this.width, this.height);
                }
            };

bullets = [];
            enemies = [];
            score = 0;

player.image.src = "player.png";

setInterval(updateGame, 20);

canvas.addEventListener("touchstart", shoot);
        }

// Update the game state
        function updateGame() {
            context.clearRect(0, 0, canvas.width, canvas.height);

player.draw();

// Update bullets
            bullets.forEach(function (bullet) {
                bullet.y -= 5;
                context.fillStyle = "red";
                context.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
            });

// Update enemies
            enemies.forEach(function (enemy) {
                enemy.y += 2;
                context.fillStyle = "blue";
                context.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);

if (enemy.y + enemy.height > canvas.height) {
                    gameOver();
                }

// Check collision with bullets
                bullets.forEach(function (bullet, bulletIndex) {
                    if (collision(enemy, bullet)) {
                        enemies.splice(enemies.indexOf(enemy), 1);
                        bullets.splice(bulletIndex, 1);
                        score++;
                    }
                });

// Check collision with player
                if (collision(player, enemy)) {
                    gameOver();
                }
            });

// Display score
            context.fillStyle = "black";
            context.font = "20px Arial";
            context.fillText("Score: " + score, 10, 30);
        }

// Shoot a bullet
        function shoot(event) {
            var bullet = {
                x: player.x + player.width / 2,
                y: player.y,
                width: 2,
                height: 10
            };

bullets.push(bullet);
        }

// Check collision between two objects
        function collision(a, b) {
            return a.x < b.x + b.width &&
                a.x + a.width > b.x &&
                a.y < b.y + b.height &&
                a.y + a.height > b.y;
        }

// Game over
        function gameOver() {
            alert("Game over!\nYour score: " + score);
            location.reload(); // Reload the game
        }

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

To use pictograms, you can replace `"player.png"` with the path to your desired player pictogram image. Similarly, you can modify the `context.fillStyle` values for bullets and enemies to represent different pictograms or colors.

Note: This is a basic implementation to give you a starting point. You can further enhance the game with additional features, sound effects, animations, and more.