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

No:6531

←

Prev Next

→

Map of Japan
Developer User3897｜Date and time 23/7/2 17:37:34
Build time 31.015 sec｜Game capacity 3.065KB｜

Script

日本都道府県地図ゲーム

いまどの都道府県か当ててみよう！

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>日本地図ゲーム</title>
    <style>
        #map {
            height: 400px;
            width: 600px;
        }
        #question {
            font-size: 20px;
            margin-top: 20px;
        }
        #result {
            font-size: 24px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>日本都道府県地図ゲーム</h1>
    <div id="map"></div>
    <div id="question">いまどの都道府県か当ててみよう！</div>
    <div id="result"></div>

function createMap() {
            const map = document.getElementById("map");
            map.innerHTML = "🗺️";
            map.style.backgroundColor = "lightgray";
            map.style.textAlign = "center";
            map.style.verticalAlign = "middle";
            map.style.display = "table-cell";
            map.style.fontWeight = "bold";
            map.style.fontSize = "80px";
            map.style.cursor = "pointer";

map.addEventListener("click", function() {
                const selectedPrefecture = getRandomPrefecture();
                const map = document.getElementById("map");
                map.innerHTML = selectedPrefecture;
                map.style.fontSize = "40px";
                map.style.cursor = "default";

const question = document.getElementById("question");
                const result = document.getElementById("result");
                
                question.style.visibility = "hidden";
                result.style.visibility = "visible";
                result.textContent = "正解は " + selectedPrefecture + " でした！";

setTimeout(function() {
                    map.innerHTML = "🗺️";
                    map.style.fontSize = "80px";
                    map.style.cursor = "pointer";
                    question.style.visibility = "visible";
                    result.style.visibility = "hidden";
                }, 3000);
            });
        }

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