A 2d FPS About fighting large machines and avoiding being found by the very large machines's game

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

No:24872

←

Prev Next

→

A 2d FPS About fighting large machines and avoidin..ALL
Developer User11971｜Date and time 23/11/13 17:13:11
Build time 265.907 sec｜Game capacity 5.604KB｜

Script

Sure! Here's a sample implementation of a 2D FPS game where the player fights large machines and avoids being found by them. Since the requirement is to implement it as a single HTML file with JavaScript enclosed in script tags, I'll provide the code accordingly.

This is a basic implementation of the 2D FPS game using HTML, CSS, and JavaScript. The player can control a character using the arrow keys and shoot bullets using the spacebar. The objective is to avoid colliding with the large machines moving down the screen and destroy them by shooting. The score increases each time a machine is destroyed. If the player collides with a machine, the game ends, and a "GAME OVER" message is displayed.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>2D FPS Game</title>
    <style>
        /* CSS for game canvas */
        #gameCanvas {
            background-color: black;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="800" height="600"></canvas>

// Game variables
        let canvas, ctx, player, machines, bullets;
        let score = 0;
        let isGameOver = false;
        const machineSpeed = 2;

// Initialize the game
        function startGame() {
            canvas = document.getElementById("gameCanvas");
            ctx = canvas.getContext("2d");
            player = { x: 50, y: 50, width: 20, height: 20 };
            machines = [{ x: 100, y: 100, width: 30, height: 30 }];
            bullets = [];
            score = 0;
            isGameOver = false;
            document.addEventListener("keydown", handleKeyDown);
            updateGame();
        }

// Update game logic and draw everything
        function updateGame() {
            if (isGameOver) return;

// Clear canvas
            ctx.clearRect(0, 0, canvas.width, canvas.height);

// Update player position
            movePlayer();

// Check if player collides with machines
            checkCollision();

// Draw player
            drawRect(player.x, player.y, player.width, player.height, "white");

// Update and draw machines
            machines.forEach(machine => {
                machine.y += machineSpeed;
                drawRect(machine.x, machine.y, machine.width, machine.height, "red");
            });

// Update and draw bullets
            bullets.forEach(bullet => {
                bullet.y -= machineSpeed * 2;
                drawRect(bullet.x, bullet.y, bullet.width, bullet.height, "yellow");

// Check if bullet hits a machine
                machines.forEach((machine, machineIndex) => {
                    if (isColliding(bullet, machine)) {
                        bullets.splice(bullets.indexOf(bullet), 1);
                        machines.splice(machineIndex, 1);
                        score += 100;
                    }
                });
            });

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

// Game over condition
            if (machines.some(machine => isColliding(player, machine))) {
                gameOver();
            }

// Repeat game update
            requestAnimationFrame(updateGame);
        }

// Move player based on key input
        function movePlayer() {
            document.onkeydown = function (e) {
                switch (e.keyCode) {
                    case 37: // left arrow
                        if (player.x > 0)
                            player.x -= 10;
                        break;
                    case 38: // up arrow
                        if (player.y > 0)
                            player.y -= 10;
                        break;
                    case 39: // right arrow
                        if (player.x < canvas.width - player.width)
                            player.x += 10;
                        break;
                    case 40: // down arrow
                        if (player.y < canvas.height - player.height)
                            player.y += 10;
                        break;
                    case 32: // spacebar
                        shootBullet();
                        break;
                    default:
                        break;
                }
            };
        }

// Shoot bullet
        function shootBullet() {
            bullets.push({ x: player.x + player.width / 2, y: player.y, width: 5, height: 10 });
        }

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

// Game over
        function gameOver() {
            isGameOver = true;
            document.removeEventListener("keydown", handleKeyDown);
            ctx.fillStyle = "white";
            ctx.font = "40px Arial";
            ctx.fillText("GAME OVER", canvas.width / 2 - 120, canvas.height / 2);
        }

// Utility function to draw rectangular objects
        function drawRect(x, y, width, height, color) {
            ctx.fillStyle = color;
            ctx.fillRect(x, y, width, height);
        }

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