電車を脱線するな!線路を繋げろ!2's game

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

No:27881

←

Prev Next

→

電車を脱線するな!線路を繋げろ!2
Developer User13711｜Date and time 23/12/9 22:33:12
Build time 36.471 sec｜Game capacity 4.234KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>電車ゲーム</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            font-size: 2rem;
            background-color: #f1f1f1;
        }
        
        #game-container {
            background-color: white;
            padding: 40px;
            border-radius: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }
    </style>
</head>
<body>
    <div id="game-container">
        <div id="track" style="display: flex; justify-content: center; align-items: center; flex-wrap: wrap; width: 400px; height: 400px;"></div>
        <button id="shuffle-btn" style="margin-top: 20px; font-size: 1.5rem;">シャッフル</button>
        <button id="reset-btn" style="margin-top: 10px; font-size: 1.5rem;">リセット</button>
    </div>

const emojis = ["🚂", "🚃", "🚃", "🚃", "🚋", "🛤️"];

function renderTrack() {
            track.innerHTML = "";
            connections.forEach((connection, index) => {
                const emoji = emojis[index];
                const connectionDiv = document.createElement("div");
                connectionDiv.textContent = emoji;
                connectionDiv.style.fontSize = "3rem";
                connectionDiv.style.flex = "0 0 33.33%";
                connectionDiv.style.textAlign = "center";
                connectionDiv.style.padding = "20px 0";
                connectionDiv.style.lineHeight = "1";
                connectionDiv.style.cursor = "pointer";
                connectionDiv.addEventListener("click", () => toggleConnection(connectionDiv, connection));
                track.appendChild(connectionDiv);
            });
        }

connections[Number(connectionDiv.getAttribute("data-index"))] = connection;
            checkWinCondition();
        }

function checkWinCondition() {
            if (
                connections[0] === 1 &&
                connections[1] === 2 &&
                connections[2] === 3 &&
                connections[3] === 4 &&
                connections[4] === 3 &&
                connections[5] === 5
            ) {
                alert("ゲームクリア!");
            }
        }

function shuffleConnections() {
            for (let i = connections.length - 1; i > 0; i--) {
                const randomIndex = Math.floor(Math.random() * (i + 1));
                [connections[i], connections[randomIndex]] = [connections[randomIndex], connections[i]];
            }
            renderTrack();
        }

function resetConnections() {
            connections = [0, 1, 2, 3, 4, 5];
            renderTrack();
        }

shuffleBtn.addEventListener("click", shuffleConnections);
        resetBtn.addEventListener("click", resetConnections);

resetConnections();
    </script>
</body>
</html>