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

No:7833

6972

←

Prev Next

→

Nile River vs. Amazon River
Developer anonymous｜Date and time 70/1/1 10:01:40
Build time unknown sec｜Game capacity 3.7KB｜

Script

了解しました。以下にナイル川とアマゾン川の対決をテーマにしたゲームを実装してみます。

ナイル川 vs アマゾン川

スコア: 0

このゲームでは、ナイル川とアマゾン川が水平に移動します。ナイル川は青色の川で、アマゾン川は緑色の川です。それぞれの川に対応するスコアも表示されています。川が画面外に出ると、スコアがリセットされます。スマホで操作する場合は、画面の左側をタップするとナイル川が進み、右側をタップするとアマゾン川が進みます。このゲームは、JavaScriptの実装とHTMLの一部を示しています。もちろん、ポイントやルールの追加、グラフィックの改善など、さらに拡張することもできます。

←

Prev　Next

→ 　

Back　

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

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

了解しました。以下にナイル川とアマゾン川の対決をテーマにしたゲームを実装してみます。

```html
<!DOCTYPE html>
<html>
<head>
    <title>ナイル川vsアマゾン川</title>
    <style>
        #river1, #river2 {
            position: absolute;
            top: 200px;
            left: 50px;
            width: 300px;
            height: 50px;
            background-color: blue;
        }
        #river2 {
            top: 300px;
            background-color: green;
        }
        #score1, #score2 {
            position: absolute;
            top: 150px;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <h1>ナイル川 vs アマゾン川</h1>
    <div id="score1">スコア: 0</div>
    <div id="river1"></div>
    <div id="score2">スコア: 0</div>
    <div id="river2"></div>

// 初期スコア
        var scoreNile = 0;
        var scoreAmazon = 0;

// ナイル川の位置とスコアの更新
        function updateNile() {
            river1.style.left = (parseInt(river1.style.left) + 10) + "px";
            scoreNile++;
            score1.textContent = "スコア: " + scoreNile;
        }

// アマゾン川の位置とスコアの更新
        function updateAmazon() {
            river2.style.left = (parseInt(river2.style.left) + 10) + "px";
            scoreAmazon++;
            score2.textContent = "スコア: " + scoreAmazon;
        }

// ゲームループ
        setInterval(function() {
            updateNile();
            updateAmazon();

// 川の位置が画面外に出たらリセット
            if (parseInt(river1.style.left) >= window.innerWidth - 300) {
                river1.style.left = "50px";
            }
            if (parseInt(river2.style.left) >= window.innerWidth - 300) {
                river2.style.left = "50px";
            }
        }, 100);

// スマホ操作用
        var touchStartX = 0;
        var touchStartY = 0;

document.addEventListener("touchstart", function(event) {
            touchStartX = event.touches[0].pageX;
            touchStartY = event.touches[0].pageY;
        });

document.addEventListener("touchmove", function(event) {
            var touchEndX = event.touches[0].pageX;
            var touchEndY = event.touches[0].pageY;

var diffX = touchEndX - touchStartX;
            var diffY = touchEndY - touchStartY;

// 左スワイプ
            if (diffX < 0 && Math.abs(diffX) > Math.abs(diffY)) {
                updateNile();
            }

// 右スワイプ
            if (diffX > 0 && Math.abs(diffX) > Math.abs(diffY)) {
                updateAmazon();
            }
        });
    </script>
</body>
</html>
```

このゲームでは、ナイル川とアマゾン川が水平に移動します。ナイル川は青色の川で、アマゾン川は緑色の川です。それぞれの川に対応するスコアも表示されています。川が画面外に出ると、スコアがリセットされます。

スマホで操作する場合は、画面の左側をタップするとナイル川が進み、右側をタップするとアマゾン川が進みます。

このゲームは、JavaScriptの実装とHTMLの一部を示しています。もちろん、ポイントやルールの追加、グラフィックの改善など、さらに拡張することもできます。