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

No:6951

←

Prev Next

→

Tuna fishing boat
Developer User3940｜Date and time 23/7/4 16:05:42
Build time 34.018 sec｜Game capacity 5.401KB｜

Script

了解しました。以下に、スマホ操作前提のマグロ漁船のゲームを実装したHTMLファイルの例を示します。

マグロ漁船

スコア: 0

このコードでは、マグロ漁船が海の中でマグロを追いかけるゲームとなっています。スマホのブラウザで表示すると、海を船が動き回り、マグロに衝突するとスコアが加算されます。スコア上限に到達するとゲームが終了し、アラートで結果が表示されます。

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

了解しました。以下に、スマホ操作前提のマグロ漁船のゲームを実装したHTMLファイルの例を示します。

```html
<!DOCTYPE html>
<html>
<head>
    <title>マグロ漁船</title>
    <style>
        #ocean {
            width: 300px;
            height: 300px;
            border: 1px solid black;
            position: relative;
            overflow: hidden;
        }
        #ship {
            width: 50px;
            height: 50px;
            background-color: gray;
            position: absolute;
        }
        #tuna {
            width: 20px;
            height: 20px;
            background-color: blue;
            position: absolute;
        }
        #score {
            text-align: center;
            font-size: 24px;
        }
    </style>
</head>
<body>
    <h1>マグロ漁船</h1>
    <div id="ocean">
        <div id="ship"></div>
        <div id="tuna"></div>
    </div>
    <div id="score">スコア: 0</div>

// 初期表示
        ship.style.left = shipX + "px";
        ship.style.top = shipY + "px";
        tuna.style.left = tunaX + "px";
        tuna.style.top = tunaY + "px";

// ゲーム開始
        function startGame() {
            document.onkeydown = moveShip;
            setInterval(moveTuna, 1000);
        }

// 船の移動
        function moveShip(event) {
            switch (event.keyCode) {
                case 37: // 左
                    if (shipX > 0) {
                        shipX -= 10;
                        ship.style.left = shipX + "px";
                    }
                    break;
                case 38: // 上
                    if (shipY > 0) {
                        shipY -= 10;
                        ship.style.top = shipY + "px";
                    }
                    break;
                case 39: // 右
                    if (shipX < oceanWidth - shipWidth) {
                        shipX += 10;
                        ship.style.left = shipX + "px";
                    }
                    break;
                case 40: // 下
                    if (shipY < oceanHeight - shipHeight) {
                        shipY += 10;
                        ship.style.top = shipY + "px";
                    }
                    break;
            }

// マグロとの衝突判定
            if (isColliding(shipX, shipY, shipWidth, shipHeight, tunaX, tunaY, tunaWidth, tunaHeight)) {
                score++;
                document.getElementById("score").innerHTML = "スコア: " + score;

// スコアの上限に到達した場合、ゲーム終了
                if (score >= maxScore) {
                    gameOver();
                }

// マグロの位置をランダムに再設定
                tunaX = Math.random() * (oceanWidth - tunaWidth);
                tunaY = Math.random() * (oceanHeight - tunaHeight);
                tuna.style.left = tunaX + "px";
                tuna.style.top = tunaY + "px";
            }
        }

// マグロの移動
        function moveTuna() {
            var minX = tunaX - 10;
            var maxX = tunaX + 10;
            var minY = tunaY - 10;
            var maxY = tunaY + 10;

if (minX < 0 || maxX > oceanWidth - tunaWidth) {
                tunaX = Math.random() * (oceanWidth - tunaWidth);
            } else {
                tunaX += Math.random() > 0.5 ? 10 : -10;
            }

if (minY < 0 || maxY > oceanHeight - tunaHeight) {
                tunaY = Math.random() * (oceanHeight - tunaHeight);
            } else {
                tunaY += Math.random() > 0.5 ? 10 : -10;
            }

tuna.style.left = tunaX + "px";
            tuna.style.top = tunaY + "px";
        }

// 衝突判定
        function isColliding(x1, y1, w1, h1, x2, y2, w2, h2) {
            return x1 < x2 + w2 &&
                    x1 + w1 > x2 &&
                    y1 < y2 + h2 &&
                    y1 + h1 > y2;
        }

// ゲーム終了
        function gameOver() {
            document.onkeydown = null;
            clearInterval();
            alert("ゲーム終了！おめでとうございます！");
        }

startGame();
    </script>
</body>
</html>
```