AI game creator

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

No:39731

105

←

Prev Next

→

Shooting Game
Developer User17462｜Date and time 24/1/30 1:16:19
Build time 22.186 sec｜Game capacity 3.961KB｜

Script

Sure! Here's an example of a simple shooting game implemented in a single HTML file using JavaScript. You can play it on a smartphone and it uses pictograms for graphics:

In this game, you control a blue rectangle (the player) using your finger to move horizontally on the screen. You can shoot bullets (red rectangles) by tapping on the screen. The goal is to hit and destroy the green rectangles (enemies) that move downwards. If an enemy reaches the bottom of the screen, it's game over.

←

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 in a single HTML file using JavaScript. You can play it on a smartphone and it uses pictograms for graphics:

```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>
    <script>
        var canvas = document.getElementById("gameCanvas");
        var ctx = canvas.getContext("2d");
        var playerX = canvas.width / 2;
        var playerY = canvas.height - 50;
        var playerWidth = 50;
        var playerHeight = 50;
        var bullets = [];
        var enemies = [
            { x: 50, y: 50, width: 30, height: 30 },
            { x: 150, y: 50, width: 30, height: 30 },
            { x: 250, y: 50, width: 30, height: 30 },
            { x: 350, y: 50, width: 30, height: 30 }
        ];
 
        function drawPlayer() {
            ctx.fillStyle = "blue";
            ctx.fillRect(playerX, playerY, playerWidth, playerHeight);
        }
 
        function drawBullet() {
            ctx.fillStyle = "red";
            for (var i = 0; i < bullets.length; i++) {
                var bullet = bullets[i];
                ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
            }
        }
 
        function drawEnemies() {
            ctx.fillStyle = "green";
            for (var i = 0; i < enemies.length; i++) {
                var enemy = enemies[i];
                ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
            }
        }
 
        function update() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            drawPlayer();
            drawBullet();
            drawEnemies();
 
            for (var i = 0; i < bullets.length; i++) {
                var bullet = bullets[i];
                bullet.y -= 5;
                if (bullet.y <= 0) {
                    bullets.splice(i, 1);
                    i--;
                }
            }
 
            for (var i = 0; i < enemies.length; i++) {
                var enemy = enemies[i];
                enemy.y += 2;
                if (enemy.y >= canvas.height) {
                    alert("Game Over!");
                    location.reload();
                }
 
                for (var j = 0; j < bullets.length; j++) {
                    var bullet = bullets[j];
                    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(j, 1);
                        enemies.splice(i, 1);
                        i--;
                        j--;
                    }
                }
            }
 
            requestAnimationFrame(update);
        }
 
        document.addEventListener("keydown", function (event) {
            if (event.keyCode === 32) {
                var bullet = {
                    x: playerX + playerWidth / 2,
                    y: playerY,
                    width: 5,
                    height: 10
                };
                bullets.push(bullet);
            }
        });
 
        document.addEventListener("mousemove",
            function (event) {
                playerX = event.clientX - canvas.offsetLeft - playerWidth / 2;
            });
 
        update();
    </script>
</body>
</html>
```