AI game creator

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

No:13215

120

←

Prev Next

→

Shooter game
Developer User5805｜Date and time 23/8/27 10:03:15
Build time 18.056 sec｜Game capacity 4.864KB｜

Script

Sure! Here's an example of a simple shooter game implemented as a single HTML file using JavaScript:

In this game, you control a blue circle representing the player using the arrow keys on your smartphone. Pressing the spacebar shoots a red bullet towards the green enemy circle. If the bullet collides with the enemy, the game is over, and an alert is shown. The game will then be automatically reset. The game loop continuously redraws the game elements and checks for collisions. The game is enclosed within `
` tags and can be run as a single HTML file.

←

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 shooter game implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Shooter Game</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

// Player variables
        var playerX = canvas.width / 2;
        var playerY = canvas.height - 30;
        var playerSize = 20;
        var playerSpeed = 5;

// Bullet variables
        var bulletSize = 10;
        var bulletSpeed = 10;
        var isBulletFired = false;
        var bulletX = 0;
        var bulletY = 0;

// Enemy variables
        var enemySize = 30;
        var enemySpeed = 2;
        var enemyX = Math.random() * (canvas.width - enemySize);
        var enemyY = 0;

// Game loop
        function gameLoop() {
            // Clear canvas
            ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw player
            drawPlayer();

// Draw bullet if fired
            if (isBulletFired) {
                drawBullet();
                updateBulletPosition();
            }

// Draw enemy
            drawEnemy();
            updateEnemyPosition();

// Check for collision
            if (isCollision()) {
                alert("Game Over!");
                resetGame();
            }

// Continue the game loop
            requestAnimationFrame(gameLoop);
        }

// Draw player
        function drawPlayer() {
            ctx.beginPath();
            ctx.arc(playerX, playerY, playerSize, 0, Math.PI * 2);
            ctx.fillStyle = "blue";
            ctx.fill();
            ctx.closePath();
        }

// Move player
        function movePlayer(direction) {
            if (direction === "left") {
                playerX -= playerSpeed;
            } else if (direction === "right") {
                playerX += playerSpeed;
            }
        }

// Shoot bullet
        function shootBullet() {
            if (!isBulletFired) {
                bulletX = playerX;
                bulletY = playerY;
                isBulletFired = true;
            }
        }

// Draw bullet
        function drawBullet() {
            ctx.beginPath();
            ctx.arc(bulletX, bulletY, bulletSize, 0, Math.PI * 2);
            ctx.fillStyle = "red";
            ctx.fill();
            ctx.closePath();
        }

// Update bullet position
        function updateBulletPosition() {
            if (bulletY > 0) {
                bulletY -= bulletSpeed;
            } else {
                isBulletFired = false;
            }
        }

// Draw enemy
        function drawEnemy() {
            ctx.beginPath();
            ctx.arc(enemyX, enemyY, enemySize, 0, Math.PI * 2);
            ctx.fillStyle = "green";
            ctx.fill();
            ctx.closePath();
        }

// Update enemy position
        function updateEnemyPosition() {
            if (enemyY < canvas.height) {
                enemyY += enemySpeed;
            } else {
                enemyX = Math.random() * (canvas.width - enemySize);
                enemyY = 0;
            }
        }

// Check for collision
        function isCollision() {
            var dx = bulletX - enemyX;
            var dy = bulletY - enemyY;
            var distance = Math.sqrt(dx * dx + dy * dy);
            return distance < bulletSize + enemySize;
        }

// Reset game
        function resetGame() {
            playerX = canvas.width / 2;
            isBulletFired = false;
            enemyX = Math.random() * (canvas.width - enemySize);
            enemyY = 0;
        }

// Event listener for player movement
        document.addEventListener("keydown", function(event) {
            if (event.key === "ArrowLeft") {
                movePlayer("left");
            } else if (event.key === "ArrowRight") {
                movePlayer("right");
            } else if (event.key === " ") {
                shootBullet();
            }
        });

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