A 2D top down shooter's game

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

No:31772

104

←

Prev Next

→

A 2D top down shooter
Developer User15236｜Date and time 23/12/28 9:19:26
Build time 27.839 sec｜Game capacity 4.418KB｜

Script

Sure, I can provide you with a basic example of a 2D top-down shooter game implemented as a single HTML file, enclosed in script tags using JavaScript. Please note that the example provided here is a simplified version and can be expanded and customized further to meet your specific requirements.

In this example, the game features a player controlled by arrow keys, bullets that spawn randomly, and a simple collision detection between the player and bullets. When a bullet collides with the player, the game ends and displays a "Game Over" message on the canvas. Please note that this is a basic implementation and can be expanded upon with additional features, such as enemy entities, power-ups, levels, 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>2D Top-Down Shooter</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        canvas {
            border: 1px solid black;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="800" height="600"></canvas>

// Handle keyboard input
        const keys = {};
        document.addEventListener("keydown", (event) => {
            keys[event.keyCode] = true;
        });
        document.addEventListener("keyup", (event) => {
            delete keys[event.keyCode];
        });

// Update game state
        function update() {
            if (isGameOver) return;

// Player movement
            if (keys[37] && player.x - player.speed > 0) {
                player.x -= player.speed;
            }
            if (keys[39] && player.x + player.width + player.speed < canvas.width) {
                player.x += player.speed;
            }
            if (keys[38] && player.y - player.speed > 0) {
                player.y -= player.speed;
            }
            if (keys[40] && player.y + player.height + player.speed < canvas.height) {
                player.y += player.speed;
            }

// Bullet movement
            bullets.forEach((bullet) => {
                bullet.y -= 8;

// Check collision with player
                if (
                    bullet.x < player.x + player.width &&
                    bullet.x + bullet.width > player.x &&
                    bullet.y < player.y + player.height &&
                    bullet.y + bullet.height > player.y
                ) {
                    isGameOver = true;
                }
            });

// Remove bullets that are out of bounds
            bullets.forEach((bullet, index) => {
                if (bullet.y < 0) {
                    bullets.splice(index, 1);
                }
            });

// Generate new bullets
            if (Math.random() < 0.03) {
                bullets.push({
                    x: Math.random() * canvas.width,
                    y: canvas.height,
                    width: 8,
                    height: 8
                });
            }
        }

// Render game objects
        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw player
            ctx.fillStyle = "blue";
            ctx.fillRect(player.x, player.y, player.width, player.height);

// Draw bullets
            ctx.fillStyle = "red";
            bullets.forEach((bullet) => {
                ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
            });

// Game over text
            if (isGameOver) {
                ctx.fillStyle = "black";
                ctx.font = "30px Arial";
                ctx.fillText("Game Over", canvas.width / 2 - 70, canvas.height / 2);
            }
        }

// Game loop
        function gameLoop() {
            update();
            draw();
            
            if (!isGameOver) {
                requestAnimationFrame(gameLoop);
            }
        }

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

Please note that this is a basic implementation and can be expanded upon with additional features, such as enemy entities, power-ups, levels, and more.