上から落ちてくる✨を集めて⭐️にしよう's game

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

No:20215

←

Prev Next

→

上から落ちてくる✨を集めて⭐️にしよう
Developer User8984｜Date and time 23/10/8 21:25:48
Build time 30.712 sec｜Game capacity 4.981KB｜

Script

了解です。以下のようなHTMLファイルとJavaScriptコードで、✨を集めて⭐️にするゲームを作ります。

このプログラムでは、画面上からランダムに落ちてくる✨を、プレイヤーの⭐️が触れることで集めるゲームになります。プレイヤーはスマホのタッチ操作で動かすことができ、スコアが表示されます。✨に触れた場合はスコアが加算されます。画面外のランダムな位置から再度落ちてきます。ゲームオーバーになると、スコアが表示されます。このHTMLファイルをブラウザで開くと、直ちにゲームが開始されます。スマホでの操作を前提に、✨と⭐️を集めるゲームをお楽しみください。

←

Prev　Next

→ 　

Back　

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

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

了解です。以下のようなHTMLファイルとJavaScriptコードで、✨を集めて⭐️にするゲームを作ります。

```html
<!DOCTYPE html>
<html>
<head>
    <title>✨ Catcher Game</title>
    <style>
        body {
            font-size: 40px;
            text-align: center;
        }
        #canvas {
            position: relative;
            width: 100vw;
            height: 100vh;
        }
    </style>
</head>
<body>
    <div id="canvas"></div>

// キャンバス作成
        const canvas = document.getElementById("canvas");
        canvas.style.width = screen.width + "px";
        canvas.style.height = screen.height + "px";
        const context = canvas.getContext("2d");

// プレイヤーの座標
        let playerX = screen.width / 2;
        let playerY = screen.height / 2;

// スコア
        let score = 0;

// ゲームオーバーフラグ
        let gameOver = false;

// ✨の座標と速度を管理する配列
        const stars = [];

// ✨クラス
        class Star {
            constructor(x, y, speed) {
                this.x = x;
                this.y = y;
                this.speed = speed;
            }
            move() {
                this.y += this.speed;
                if (this.y > screen.height) {
                    this.y = -50;
                    this.x = Math.random() * screen.width;
                }
                if (
                    this.x < playerX + 50 &&
                    this.x + 50 > playerX &&
                    this.y < playerY + 50 &&
                    this.y + 50 > playerY
                ) {
                    score++;
                    this.y = -50;
                    this.x = Math.random() * screen.width;
                }
            }
            draw() {
                context.fillStyle = "gold";
                context.fillText("✨", this.x, this.y);
            }
        }

// ゲームオーバー画面を表示
        function showGameOver() {
            context.fillStyle = "rgba(0, 0, 0, 0.5)";
            context.fillRect(0, 0, screen.width, screen.height);
            context.fillStyle = "white";
            context.fillText("Game Over", screen.width / 2, screen.height / 2);
            context.fillText("Score: " + score, screen.width / 2, screen.height / 2 + 50);
        }

// ゲームループ
        function gameLoop() {
            context.clearRect(0, 0, screen.width, screen.height);

// ✨を移動・描画
            stars.forEach(star => {
                star.move();
                star.draw();
            });

// プレイヤーを描画
            context.fillStyle = "blue";
            context.fillText("⭐️", playerX, playerY);

// スコアを表示
            context.fillStyle = "white";
            context.fillText("Score: " + score, 20, 40);

// ゲームオーバーの判定
            if (gameOver) {
                showGameOver();
                return;
            }

requestAnimationFrame(gameLoop);
        }

// タッチ操作でプレイヤーを移動
        function handleTouch(event) {
            playerX = event.touches[0].clientX;
            playerY = event.touches[0].clientY;
        }

// タッチ操作のイベントリスナーを登録
        document.addEventListener("touchstart", handleTouch);
        document.addEventListener("touchmove", handleTouch);

// 初期化
        function init() {
            for (let i = 0; i < 10; i++) {
                const x = Math.random() * screen.width;
                const y = Math.random() * screen.height;
                const speed = Math.random() * 5 + 1; // 1~6のランダムな速度
                const star = new Star(x, y, speed);
                stars.push(star);
            }
            gameLoop();
        }

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

このHTMLファイルをブラウザで開くと、直ちにゲームが開始されます。スマホでの操作を前提に、✨と⭐️を集めるゲームをお楽しみください。