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

No:41789

←

Prev Next

→

ハリーポッター炎のゴブレット
Developer User18743｜Date and time 24/2/9 23:26:27
Build time 19.34 sec｜Game capacity 4.042KB｜

Script

了解です。では、以下にハリーポッター炎のゴブレットというゲームの実装例を示します。

ハリーポッター炎のゴブレット

ハリー・ポッターは危険なミッションに挑戦しようとしています。彼は火の球に追われています。逃げるためにはどうしますか？

スコア: 0

この例では、ハリー・ポッターが火の球から逃げるというゲームを実装しています。走るボタンを押すとハリー・ポッターが左に進み、火の球が徐々に迫ってきます。スコアが10に達するか、火の球に追いつかれるとゲームオーバーになります。スマホで表示した場合、ボタンをタップすることで操作できます。完成したゲームを1枚のHTMLファイルとして実装し、必ずJavaScriptを含め、scriptタグで囲むことに注意してください。

←

Prev　Next

→ 　

Back　

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

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

了解です。では、以下にハリーポッター炎のゴブレットというゲームの実装例を示します。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ハリーポッター炎のゴブレット</title>
    <style>
        body {
            text-align: center;
        }
        .message {
            font-size: 24px;
            margin-bottom: 20px;
        }
        .button {
            display: inline-block;
            padding: 10px 20px;
            font-size: 20px;
            cursor: pointer;
            border-radius: 5px;
            background-color: #337ab7;
            color: white;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <h1>ハリーポッター炎のゴブレット</h1>
  
    <div class="message">ハリー・ポッターは危険なミッションに挑戦しようとしています。彼は火の球に追われています。逃げるためにはどうしますか？</div>

// ゲームオーバー時の処理
        function endGame() {
            document.getElementById('message').textContent = 'ゲームオーバーです。スコア: ' + score;
            document.getElementById('buttons').innerHTML = '';
            gameOver = true;
        }

// 火の球が追いついたか判定する関数
        function checkCollision() {
            if (score >= 10) {
                endGame();  // スコアが10以上になったらゲームオーバー
            }
        }

// スコアを増加させる関数
        function increaseScore() {
            if (!gameOver) {
                score++;
                document.getElementById('score').textContent = 'スコア: ' + score;
                checkCollision();
            }
        }

// 火の球が移動する処理
        function moveFireBall() {
            if (!gameOver) {
                let fireBall = document.getElementById('fireBall');
                let left = parseInt(window.getComputedStyle(fireBall).getPropertyValue('left'));
                if (left < 90) {
                    fireBall.style.left = (left + 10) + 'vw';
                } else {
                    endGame();
                }
            }
        }

// ゲームスタート時の処理
        function startGame() {
            gameOver = false;
            score = 0;
            document.getElementById('score').textContent = 'スコア: 0';
            document.getElementById('message').textContent = 'ハリー・ポッターは危険なミッションに挑戦しようとしています。彼は火の球に追われています。逃げるためにはどうしますか？';
            document.getElementById('buttons').innerHTML = '<a class="button" onclick="increaseScore()">走る</a>' +
                                                          '<a class="button" onclick="endGame()">待つ</a>';
            // 0.5秒ごとに火の球を移動する
            setInterval(moveFireBall, 500);
        }

// ページロード時にゲームをスタートする
        window.onload = startGame;
    </script>

<div id="score">スコア: 0</div>
    <div id="buttons"></div>
    <img id="fireBall" src="🔥" style="position: absolute; top: 50vh; left: 0; font-size: 100px;">
</body>
</html>
```