Make a fps pixel game about interacting with objects's game

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

No:30940

←

Prev Next

→

Make a fps pixel game about interacting with objec..ALL
Developer User14978｜Date and time 23/12/24 15:11:36
Build time 16.93 sec｜Game capacity 4.772KB｜

Script

Sure! Here's an example of a simple FPS pixel game about interacting with objects, implemented as a single HTML file:

This game sets up a simple scenario where the player, represented by a red square, can move around using arrow keys on a smartphone. The objective is to collect blue objects, represented by blue squares. When the player collides with an object, it is collected and removed from the game. The console will log the message "Object collected!" for each object collected. Feel free to modify and enhance the game further as per your requirements!

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

Sure! Here's an example of a simple FPS pixel game about interacting with objects, implemented as a single HTML file:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Pixel FPS Game</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        
        canvas {
            background-color: black;
            display: block;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas"></canvas>
    <script>
        // Enclosing the JavaScript code inside script tags
        (function() {
            // Set up game constants
            const WIDTH = 800;
            const HEIGHT = 600;
            const MOVE_SPEED = 3;
            const NUM_OBJECTS = 10;
            const OBJECT_SIZE = 20;
            
            // Set up game objects
            let player = {
                x: WIDTH / 2,
                y: HEIGHT / 2,
                width: OBJECT_SIZE,
                height: OBJECT_SIZE,
                color: "red"
            };
            
            let objects = [];
            for (let i = 0; i < NUM_OBJECTS; i++) {
                let obj = {
                    x: Math.floor(Math.random() * (WIDTH - OBJECT_SIZE)),
                    y: Math.floor(Math.random() * (HEIGHT - OBJECT_SIZE)),
                    width: OBJECT_SIZE,
                    height: OBJECT_SIZE,
                    color: "blue"
                };
                objects.push(obj);
            }
            
            // Set up canvas
            let canvas = document.getElementById("gameCanvas");
            canvas.width = WIDTH;
            canvas.height = HEIGHT;
            let ctx = canvas.getContext("2d");
            
            // Initialize key states
            let keyState = {};
            
            // Handle key down events
            document.addEventListener("keydown", function(event) {
                keyState[event.keyCode] = true;
            });
            
            // Handle key up events
            document.addEventListener("keyup", function(event) {
                keyState[event.keyCode] = false;
            });
            
            // Update game objects
            function update() {
                if (keyState[37]) { // Left arrow key
                    player.x -= MOVE_SPEED;
                }
                if (keyState[38]) { // Up arrow key
                    player.y -= MOVE_SPEED;
                }
                if (keyState[39]) { // Right arrow key
                    player.x += MOVE_SPEED;
                }
                if (keyState[40]) { // Down arrow key
                    player.y += MOVE_SPEED;
                }
                
                // Check object interactions
                objects.forEach(function(object, index) {
                    if (checkCollision(player, object)) {
                        objects.splice(index, 1);
                        console.log("Object collected!");
                    }
                });
            }
            
            // Check collision between two objects
            function checkCollision(obj1, obj2) {
                return obj1.x < obj2.x + obj2.width &&
                    obj1.x + obj1.width > obj2.x &&
                    obj1.y < obj2.y + obj2.height &&
                    obj1.y + obj1.height > obj2.y;
            }
            
            // Draw game objects
            function draw() {
                ctx.clearRect(0, 0, WIDTH, HEIGHT);
                
                // Draw player
                ctx.fillStyle = player.color;
                ctx.fillRect(player.x, player.y, player.width, player.height);
                
                // Draw objects
                objects.forEach(function(object) {
                    ctx.fillStyle = object.color;
                    ctx.fillRect(object.x, object.y, object.width, object.height);
                });
            }
            
            // Game loop
            function gameLoop() {
                update();
                draw();
                
                requestAnimationFrame(gameLoop);
            }
            
            // Start the game
            gameLoop();
        })();
    </script>
</body>
</html>
```

Feel free to modify and enhance the game further as per your requirements!