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

No:36581

←

Prev Next

→

Walk To School
Developer User16822｜Date and time 24/1/17 23:50:21
Build time 17.518 sec｜Game capacity 3.635KB｜

Script

¡Camina a la Escuela!

Presiona los botones para llegar a la escuela:

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームアプリランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Walk To School Game</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
        }

#map {
            width: 300px;
            height: 300px;
            background-color: #f0f0f0;
            border-radius: 6px;
            margin: 0 auto;
            margin-top: 20px;
        }

#buttons-container {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }

.button {
            padding: 10px;
            margin: 0 5px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

.button:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <h1>¡Camina a la Escuela!</h1>
    <h3>Presiona los botones para llegar a la escuela:</h3>
    <div id="map"></div>
    <div id="buttons-container">
        <button class="button" onclick="move('left')">⬅️</button>
        <button class="button" onclick="move('up')">⬆️</button>
        <button class="button" onclick="move('down')">⬇️</button>
        <button class="button" onclick="move('right')">➡️</button>
    </div>

function move(direction) {
            var nextPosition = { x: currentPosition.x, y: currentPosition.y };

if (direction === 'left') {
                nextPosition.x -= 1;
            }
            else if (direction === 'up') {
                nextPosition.y -= 1;
            }
            else if (direction === 'down') {
                nextPosition.y += 1;
            }
            else if (direction === 'right') {
                nextPosition.x += 1;
            }

if (isPositionValid(nextPosition)) {
                currentPosition = nextPosition;
                updateMap();
                checkWinCondition();
            }
            else {
                alert("¡No puedes ir en esa dirección!");
            }
        }

function isPositionValid(position) {
            return position.x >= 0 && position.x <= 4 && position.y >= 0 && position.y <= 4;
        }

function updateMap() {
            var mapDiv = document.getElementById('map');
            mapDiv.innerHTML = '';

for (var y = 0; y < 5; y++) {
                for (var x = 0; x < 5; x++) {
                    var tile = document.createElement('div');
                    tile.style.width = '60px';
                    tile.style.height = '60px';
                    tile.style.float = 'left';
                    tile.style.border = '1px solid #ccc';

if (x === currentPosition.x && y === currentPosition.y) {
                        tile.style.backgroundColor = '#ffdd57';
                    }
                    else if (x === schoolPosition.x && y === schoolPosition.y) {
                        tile.style.backgroundColor = '#ff4081';
                        tile.innerHTML = '🏫';
                    }

mapDiv.appendChild(tile);
                }
            }
        }

function checkWinCondition() {
            if (currentPosition.x === schoolPosition.x && currentPosition.y === schoolPosition.y) {
                alert("¡Felicidades! ¡Has llegado a la escuela!");
            }
        }

updateMap(); // Initial map rendering
    </script>
</body>
</html>