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

No:21397

Make a game where you are a box going in maze tryi..ALL
Developer User9808｜Date and time 23/10/15 7:53:34
Build time 127.839 sec｜Game capacity 4.781KB｜

Script

Sure! Here's an example of a simple maze game using JavaScript and HTML, where you control a box to navigate through a maze and reach the end point.

Maze Game

In this game, the maze is represented by a 2D array (`maze`), where 1 indicates a wall and 0 indicates an empty space. The box's position is tracked using `boxRow` and `boxCol` variables, which start at the top-left corner. To control the box, you can use the arrow keys on your smartphone's virtual keyboard. The box moves one cell at a time, but only if the move is valid (i.e., not outside the maze boundaries or into a wall). If the box reaches the bottom-right cell of the maze, a message "Congratulations! You won the game." will be displayed. Please note that this implementation doesn't include pictograms, but you could enhance it by using appropriate images or icons for the box and the maze elements as per your requirements.

←

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 maze game using JavaScript and HTML, where you control a box to navigate through a maze and reach the end point.

```html
<!DOCTYPE html>
<html>
<head>
    <style>
        #maze {
            width: 400px;
            height: 400px;
            border: 1px solid black;
            position: relative;
        }
        #box {
            width: 40px;
            height: 40px;
            background-color: blue;
            position: absolute;
            top: 0;
            left: 0;
        }
        .wall {
            background-color: black;
            position: absolute;
        }
        #endPoint {
            background-color: green;
            position: absolute;
            bottom: 0;
            right: 0;
        }
    </style>
</head>
<body>
    <h1>Maze Game</h1>
    <div id="maze" onkeydown="moveBox(event)" tabindex="0"></div>
    <script>
        // Maze definition
        const maze = [
            [1, 1, 0, 1, 1, 1, 1, 1, 1, 1],
            [1, 1, 0, 1, 0, 0, 0, 0, 0, 1],
            [1, 0, 0, 0, 0, 1, 1, 1, 0, 1],
            [1, 1, 1, 1, 0, 1, 0, 0, 0, 1],
            [1, 0, 0, 1, 0, 1, 0, 1, 1, 1],
            [1, 0, 1, 1, 0, 0, 0, 0, 1, 1],
            [1, 0, 1, 0, 1, 1, 1, 0, 0, 1],
            [1, 0, 0, 0, 0, 0, 1, 1, 1, 1],
            [1, 1, 1, 1, 1, 1, 1, 0, 1, 1],
            [1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
        ];

// Box position
        let boxRow = 0;
        let boxCol = 0;

// Game start
        drawMaze();

function drawMaze() {
            const mazeElement = document.getElementById("maze");
            mazeElement.innerHTML = "";

for (let row = 0; row < maze.length; row++) {
                for (let col = 0; col < maze[row].length; col++) {
                    const cell = document.createElement("div");
                    cell.className = maze[row][col] ? "wall" : "";
                    cell.style.top = row * 40 + "px";
                    cell.style.left = col * 40 + "px";
                    mazeElement.appendChild(cell);
                }
            }

const boxElement = document.createElement("div");
            boxElement.id = "box";
            mazeElement.appendChild(boxElement);

const endPointElement = document.createElement("div");
            endPointElement.id = "endPoint";
            mazeElement.appendChild(endPointElement);
        }

function moveBox(event) {
            let newRow = boxRow;
            let newCol = boxCol;

// Arrow key codes
            const LEFT_ARROW = 37;
            const UP_ARROW = 38;
            const RIGHT_ARROW = 39;
            const DOWN_ARROW = 40;

switch (event.keyCode) {
                case LEFT_ARROW:
                    newCol--;
                    break;
                case UP_ARROW:
                    newRow--;
                    break;
                case RIGHT_ARROW:
                    newCol++;
                    break;
                case DOWN_ARROW:
                    newRow++;
                    break;
                default:
                    return;
            }

if (isValidMove(newRow, newCol)) {
                boxRow = newRow;
                boxCol = newCol;

const boxElement = document.getElementById("box");
                boxElement.style.top = boxRow * 40 + "px";
                boxElement.style.left = boxCol * 40 + "px";

if (isGameWon(boxRow, boxCol)) {
                    alert("Congratulations! You won the game.");
                }
            }
        }

function isValidMove(row, col) {
            return (
                row >= 0 &&
                row < maze.length &&
                col >= 0 &&
                col < maze[row].length &&
                maze[row][col] === 0
            );
        }

function isGameWon(row, col) {
            return row === maze.length - 1 && col === maze[row].length - 1;
        }
    </script>
</body>
</html>
```

To control the box, you can use the arrow keys on your smartphone's virtual keyboard. The box moves one cell at a time, but only if the move is valid (i.e., not outside the maze boundaries or into a wall). If the box reaches the bottom-right cell of the maze, a message "Congratulations! You won the game." will be displayed.

Please note that this implementation doesn't include pictograms, but you could enhance it by using appropriate images or icons for the box and the maze elements as per your requirements.