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

No:40244

A puzzle game that includes picking up metal boxes..ALL
Developer User18042｜Date and time 24/2/2 2:14:59
Build time 24.104 sec｜Game capacity 5.92KB｜

Script

Sure! Below is a sample implementation of the puzzle game you described. The game is written in a single HTML file and contains JavaScript code enclosed in script tags. The game interface uses pictograms for simplicity.

Puzzle Game

To play the game, you can paste the above code in an empty HTML file and open it in a web browser (preferably on a smartphone) or you can copy and paste it into an online HTML editor. Note: This is a simplified implementation and may require further improvements, including handling collision detection more accurately, adding proper graphics, and optimizing the game flow.

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Puzzle Game</title>
</head>
<body style="text-align: center;">
    <h1>Puzzle Game</h1>
    <canvas id="gameCanvas"></canvas>
    
    <script>
        // Game dimensions and settings
        const gameWidth = 600;
        const gameHeight = 400;
        const boxSize = 50;
        
        // Game objects
        const player = {
            x: 0,
            y: 0
        };
        
        const boxes = [
            { x: 100, y: 100 },
            { x: 200, y: 200 },
            { x: 300, y: 300 }
        ];
        
        const buttons = [
            { x: 400, y: 100, isPressed: false },
            { x: 500, y: 200, isPressed: false }
        ];
        
        const doors = [
            { x: 400, y: 300, isOpen: false },
            { x: 500, y: 300, isOpen: false }
        ];
        
        const fields = [
            { x: 300, y: 100 },
            { x: 200, y: 300 }
        ];
        
        const bouncePads = [
            { x: 100, y: 300 },
            { x: 300, y: 200 }
        ];
        
        const funnels = [
            { x: 100, y: 200, isOpen: false },
            { x: 500, y: 100, isOpen: false }
        ];
        
        // Game canvas and rendering
        const canvas = document.getElementById("gameCanvas");
        const ctx = canvas.getContext("2d");
        
        canvas.width = gameWidth;
        canvas.height = gameHeight;
        
        function drawGame() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            // Draw player
            ctx.fillStyle = "yellow";
            ctx.fillRect(player.x, player.y, boxSize, boxSize);
            
            // Draw boxes
            ctx.fillStyle = "gray";
            boxes.forEach(box => ctx.fillRect(box.x, box.y, boxSize, boxSize));
            
            // Draw buttons
            ctx.fillStyle = "blue";
            buttons.forEach(button => ctx.fillRect(button.x, button.y, boxSize, boxSize));
            
            // Draw doors
            ctx.fillStyle = "brown";
            doors.forEach(door => ctx.fillRect(door.x, door.y, boxSize, boxSize));
            
            // Draw fields
            ctx.fillStyle = "red";
            fields.forEach(field => ctx.fillRect(field.x, field.y, boxSize, boxSize));
            
            // Draw bounce pads
            ctx.fillStyle = "orange";
            bouncePads.forEach(bouncePad => ctx.fillRect(bouncePad.x, bouncePad.y, boxSize, boxSize));
            
            // Draw funnels
            ctx.fillStyle = "green";
            funnels.forEach(funnel => ctx.fillRect(funnel.x, funnel.y, boxSize, boxSize));
        }
        
        // Game logic and interaction
        function updateGame() {
            // Check for collisions with boxes
            boxes.forEach(box => {
                if (box.x === player.x && box.y === player.y) {
                    // Check if there's a button below the box
                    const button = buttons.find(b => b.x === box.x && b.y === box.y + boxSize);
                    if (button) {
                        button.isPressed = true;
                        // Check if there's a door below the button
                        const door = doors.find(d => d.x === button.x && d.y === button.y + boxSize);
                        if (door) {
                            door.isOpen = true;
                        }
                    }
                }
            });
            
            // Check if player is on a field
            const field = fields.find(field => field.x === player.x && field.y === player.y);
            if (field) {
                boxes.splice(0, boxes.length); // Destroy all boxes
            }
            
            // Check if player is on a bounce pad
            const bouncePad = bouncePads.find(pad => pad.x === player.x && pad.y === player.y);
            if (bouncePad) {
                // Bounce player to the right
                player.x += boxSize;
            }
            
            // Check if player is on a funnel
            const funnel = funnels.find(funnel => funnel.x === player.x && funnel.y === player.y);
            if (funnel && funnel.isOpen) {
                // Move player upwards
                player.y -= boxSize;
            }
            
            // Check if player is at the exit door
            if (player.x === doors[0].x && player.y === doors[0].y) {
                alert("Congratulations! You escaped the chamber!"); // Game ends
            }
        }
        
        // Event listeners for player movement
        document.addEventListener("keydown", function(event) {
            if (event.key === "ArrowUp") { // Move player up
                player.y -= boxSize;
            }
            else if (event.key === "ArrowDown") { // Move player down
                player.y += boxSize;
            }
            else if (event.key === "ArrowLeft") { // Move player left
                player.x -= boxSize;
            }
            else if (event.key === "ArrowRight") { // Move player right
                player.x += boxSize;
            }
            updateGame();
            drawGame();
        });
        
        // Initial game rendering
        drawGame();
    </script>
</body>
</html>
```

To play the game, you can paste the above code in an empty HTML file and open it in a web browser (preferably on a smartphone) or you can copy and paste it into an online HTML editor.

Note: This is a simplified implementation and may require further improvements, including handling collision detection more accurately, adding proper graphics, and optimizing the game flow.