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

No:6487

872

Make your state independent! The player taps a sta..ALL
Developer User3589｜Date and time 23/7/2 14:50:13
Build time 26.608 sec｜Game capacity 2.907KB｜

了解しました。以下が、指定された要件を満たすHTMLファイルとJavaScriptの実装例です。

州を独立させよう！

上記のコードでは、アメリカ地図の表示とクリックイベントのハンドラ関数を定義しています。クリックされた州の背景色を赤に変更し、独立した州の数が3つになると、ランダムな結果をアラートダイアログで表示します。結果には独立した州の数、残った州の数、およびその状況に関する説明が含まれます。なお、上記のコードではアメリカ地図の背景画像として「us_map.png」を使用しています。この画像はプロジェクトフォルダ内に配置して、該当する箇所にパスを修正してください。また、アメリカ地図の背景画像がない場合は適切な背景画像に置き換えてください。このコードをHTMLファイルに保存し、Webブラウザで開くと、ゲームがプレイできる状態になります。

→ 　

1　

1　

[PR]現在の本の売れ筋ランキング

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

(C)2023 HisashiApp

了解しました。以下が、指定された要件を満たすHTMLファイルとJavaScriptの実装例です。

```html
<!DOCTYPE html>
<html>
<head>
    <title>州の独立ゲーム</title>
    <style>
        #map {
            width: 100%;
            height: 500px;
            background-image: url('us_map.png');
            background-size: cover;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>州を独立させよう！</h1>
    <div id="map"></div>

<script>
        var independentStates = 0;
        var remainingStates = 50;

function randomResult() {
            var results = ['独立した州が連邦政府と交渉して独自の憲法を作成しました。',
                '独立した州が戦争を起こし、他の州との関係が悪化しました。',
                '独立した州が隣の州と友好的な関係を築きました。',
                '独立した州が経済的に成功し、繁栄しました。'];
            var index = Math.floor(Math.random() * results.length);
            return results[index];
        }

function tapHandler(event) {
            event.preventDefault();
            if (independentStates < 3) {
                var target = event.target || event.srcElement;
                if (target.nodeName === 'DIV') {
                    target.style.backgroundColor = 'red';
                    independentStates++;
                    remainingStates--;
                    if (independentStates === 3) {
                        var result = randomResult();
                        var message = '独立した州: ' + independentStates + '\n' + '残った州: ' + remainingStates + '\n' + '結果: ' + result;
                        alert(message);
                    }
                }
            }
        }

var mapContainer = document.getElementById('map');
        mapContainer.addEventListener('click', tapHandler);
    </script>
</body>
</html>
```

上記のコードでは、アメリカ地図の表示とクリックイベントのハンドラ関数を定義しています。クリックされた州の背景色を赤に変更し、独立した州の数が3つになると、ランダムな結果をアラートダイアログで表示します。結果には独立した州の数、残った州の数、およびその状況に関する説明が含まれます。

なお、上記のコードではアメリカ地図の背景画像として「us_map.png」を使用しています。この画像はプロジェクトフォルダ内に配置して、該当する箇所にパスを修正してください。また、アメリカ地図の背景画像がない場合は適切な背景画像に置き換えてください。

このコードをHTMLファイルに保存し、Webブラウザで開くと、ゲームがプレイできる状態になります。