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

No:6954

198

←

Prev Next

→

Star Platinum💪✨
Developer User3940｜Date and time 23/7/4 16:22:33
Build time 21.668 sec｜Game capacity 2.809KB｜

Script

了解です。以下にスマホで遊べる簡単なゲームを作成しました。htmlファイルとして実装してください。

スタープラチナゲーム

「✨」をスマホ画面上で動かして、「💪」に当ててください。

このゲームでは、「✨」が画面内を動き回り、「💪」に当たったらおめでとうのメッセージが表示されます。ゲーム開始後にはリセットボタンなども実装することもできますが、一旦シンプルに実装しました。お楽しみください！✨

←

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>
</head>
<body>
    <h1>スタープラチナゲーム</h1>
    <p>「✨」をスマホ画面上で動かして、「💪」に当ててください。</p>
    <div id="gameArea" style="width: 100%; height: 400px; background-color: lightgray;"></div>

// 💪の位置とサイズ
        let punchX = 300;
        let punchY = 200;
        let punchSize = 100;

// ゲームエリアのサイズ
        const gameAreaWidth = document.getElementById("gameArea").clientWidth;
        const gameAreaHeight = document.getElementById("gameArea").clientHeight;

// ✨と💪の描画
        function drawGame() {
            let gameElement = document.getElementById("gameArea");
            gameElement.innerHTML = `<p style="position: absolute; left: ${starX}px; top: ${starY}px; font-size: 20px;">✨</p>`;
            gameElement.innerHTML += `<p style="position: absolute; left: ${punchX}px; top: ${punchY}px; font-size: 40px;">💪</p>`;
        }

// ゲームのメインループ
        function gameLoop() {
            // ✨の移動
            starX += speedX;
            starY += speedY;

// ✨の壁反射処理
            if (starX < 0 || starX > gameAreaWidth) {
                speedX = -speedX;
            }
            if (starY < 0 || starY > gameAreaHeight) {
                speedY = -speedY;
            }

// ✨が💪に当たったか判定
            let distance = Math.sqrt(Math.pow(starX - punchX, 2) + Math.pow(starY - punchY, 2));
            if (distance < punchSize/2) {
                alert("当たりました！おめでとうございます！");
                resetGame();
            }

// ゲームの描画
            drawGame();

// 次のフレーム呼び出し
            requestAnimationFrame(gameLoop);
        }

// ゲームのリセット
        function resetGame() {
            starX = 50;
            starY = 200;
            speedX = 2;
            speedY = 2;
        }

// ゲーム開始
        gameLoop();
    </script>
</body>
</html>
```