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

No:5080

2723

URYYYY!!
Developer User3812｜Date and time 23/6/29 16:48:37
Build time 43.914 sec｜Game capacity 4.508KB｜

了解しました！では、スマホで遊べるシンプルなゲームを作成してみます。

Emoji Catch Game

これは「Emoji Catch Game」というシンプルなゲームです。絵文字が画面上から落下してくるので、スマホでそれらをタップして得点を獲得します。絵文字が画面下端まで到達した場合はゲームオーバーで、得点がリセットされます。ゲームのループは`gameLoop`という関数の中で行われており、60FPS（1秒間に60回）で実行されます。画面上の絵文字の位置は都度更新され、得点も表示されます。絵文字は`const emojis = ["😀", "😆", "😍", "🙌", "🎉"]`のような配列で管理されており、絵文字を追加すると落下してくるようになります。絵文字が画面下端まで到達しないようにするために、落下速度がランダムに設定されています。ゲームのご確認はぜひスマホでお試しください！何かご要望がありましたらお知らせください。URYYYY！！

→ 　

2　

1　

[PR]現在の欲しいものランキング

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

(C)2023 HisashiApp

了解しました！では、スマホで遊べるシンプルなゲームを作成してみます。

```html
<!DOCTYPE html>
<html>
<head>
    <title>Emoji Catch Game</title>
    <style>
        /* スタイルは省略します（ゲームの見た目を整えるためのCSS） */
        /* 必要なスタイルは自由に追加してください */
    </style>
</head>
<body>
    <h1>Emoji Catch Game</h1>
    <canvas id="gameCanvas" width="300" height="500"></canvas>

<script>
        const canvas = document.getElementById("gameCanvas");
        const ctx = canvas.getContext("2d");
        const emojis = ["😀", "😆", "😍", "🙌", "🎉"]; // ゲーム内の絵文字
        const emojiSize = 40;
        let score = 0;

// 絵文字を表示する関数
        function drawEmoji(x, y, emoji) {
            ctx.font = `${emojiSize}px Arial`;
            ctx.fillText(emoji, x, y);
        }

// 絵文字をクリックしたときに得点を加算するイベントリスナー
        canvas.addEventListener("click", function(event) {
            const rect = canvas.getBoundingClientRect();
            const mouseX = event.clientX - rect.left;
            const mouseY = event.clientY - rect.top;

// クリックした位置に絵文字があるか判定
            for (let i = 0; i < emojis.length; i++) {
                const emojiX = i * emojiSize;
                const emojiY = canvas.height - emojiSize;

if (
                    mouseX >= emojiX &&
                    mouseX <= emojiX + emojiSize &&
                    mouseY >= emojiY &&
                    mouseY <= emojiY + emojiSize
                ) {
                    emojis.splice(i, 1); // クリックした絵文字を配列から削除
                    score += 10; // 得点を加算
                    break; // クリックした絵文字が複数ある場合は1つだけ判定するので、繰り返しを終了
                }
            }
        });

// ゲームループ関数（60FPSで実行される）
        function gameLoop() {
            // 画面をクリア
            ctx.clearRect(0, 0, canvas.width, canvas.height);

// 新しい絵文字をランダムに追加
            if (Math.random() < 0.05) {
                const randomIndex = Math.floor(Math.random() * emojis.length);
                emojis.push(emojis[randomIndex]);
            }

// 絵文字を落下させる
            emojis.forEach(function(emoji, index) {
                const emojiY = index * emojiSize;

// 落下速度をランダムに設定
                const speed = Math.random() * 5 + 2;
                const newY = emojiY + speed;

// 絵文字が画面下端に到達した場合はゲームオーバー
                if (newY >= canvas.height) {
                    alert(`Game Over! Your score: ${score}`);
                    score = 0;
                    emojis.length = 0;
                } else {
                    drawEmoji(0, newY, emoji);
                    emojis[index] = emoji; // 絵文字の位置を更新
                }
            });

// 現在の得点を表示
            ctx.font = "24px Arial";
            ctx.fillText(`Score: ${score}`, 10, 30);

// 次のフレームをリクエスト
            requestAnimationFrame(gameLoop);
        }

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

これは「Emoji Catch Game」というシンプルなゲームです。絵文字が画面上から落下してくるので、スマホでそれらをタップして得点を獲得します。絵文字が画面下端まで到達した場合はゲームオーバーで、得点がリセットされます。

ゲームのループは`gameLoop`という関数の中で行われており、60FPS（1秒間に60回）で実行されます。画面上の絵文字の位置は都度更新され、得点も表示されます。

絵文字は`const emojis = ["😀", "😆", "😍", "🙌", "🎉"]`のような配列で管理されており、絵文字を追加すると落下してくるようになります。絵文字が画面下端まで到達しないようにするために、落下速度がランダムに設定されています。

ゲームのご確認はぜひスマホでお試しください！何かご要望がありましたらお知らせください。URYYYY！！