Emissive Color's game | AI game creator

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

No:5823

591

Emissive Color
Developer User1006｜Date and time 23/6/30 21:11:12
Build time 37.542 sec｜Game capacity 3.793KB｜

了解です。以下に、スマホで遊べるシンプルなゲームを実装したHTMLファイルの一例を示します。このゲームは、絵文字を使った簡単な操作で遊ぶことができます。

このゲームは、クリックした場所に表示される絵文字をタップして得点を稼ぐというシンプルな仕組みです。画面上にランダムに表示される絵文字が下へと落下し、絵文字が画面下端に到達すると再びランダムな位置から出現します。絵文字をタップするごとに得点が加算され、画面上に表示されます。なお、このHTMLファイルには`<style>`タグを用いていくつかのスタイルを設定しています。また、`<canvas>`要素を使用して描画を行っていますが、スマホのブラウザでも正しく動作するようにイベントの設定や画面サイズの調整を行っています。以上が、スマホで遊べるシンプルな絵文字ゲームの実装例となります。お試しいただければ幸いです。

→ 　

2　

2　

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

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

(C)2023 HisashiApp

了解です。以下に、スマホで遊べるシンプルなゲームを実装したHTMLファイルの一例を示します。このゲームは、絵文字を使った簡単な操作で遊ぶことができます。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Emoji Catcher</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }

canvas {
            background-color: #f8f8f8;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas"></canvas>

<script>
        const canvas = document.getElementById("gameCanvas");
        const context = canvas.getContext("2d");

canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

const emojis = ["😀", "❤️", "🍕", "🎉", "⚽️"];
        const emojiSize = 50;

let score = 0;

function randomEmoji() {
            const randomIndex = Math.floor(Math.random() * emojis.length);
            return emojis[randomIndex];
        }

class Emoji {
            constructor(x, y, emoji) {
                this.x = x;
                this.y = y;
                this.emoji = emoji;
            }

draw() {
                context.font = `${emojiSize}px sans-serif`;
                context.fillText(this.emoji, this.x, this.y);
            }

update() {
                this.y += 5;

if (this.y > canvas.height) {
                    this.reset();
                }
            }

reset() {
                this.x = Math.random() * (canvas.width - emojiSize);
                this.y = -emojiSize;
                this.emoji = randomEmoji();
            }
        }

const emojisToCatch = [];

for (let i = 0; i < 5; i++) {
            const x = Math.random() * (canvas.width - emojiSize);
            const y = Math.random() * (canvas.height - emojiSize);
            const emoji = randomEmoji();
            emojisToCatch.push(new Emoji(x, y, emoji));
        }

canvas.addEventListener("click", function(event) {
            const clickX = event.clientX;
            const clickY = event.clientY;

emojisToCatch.forEach(function(emoji) {
                if (clickX >= emoji.x && clickX <= emoji.x + emojiSize && clickY >= emoji.y && clickY <= emoji.y + emojiSize) {
                    score++;
                    emoji.reset();
                }
            });
        });

function gameLoop() {
            context.clearRect(0, 0, canvas.width, canvas.height);

emojisToCatch.forEach(function(emoji) {
                emoji.update();
                emoji.draw();
            });

context.font = "24px sans-serif";
            context.fillText("Score: " + score, 10, 30);

requestAnimationFrame(gameLoop);
        }

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

このゲームは、クリックした場所に表示される絵文字をタップして得点を稼ぐというシンプルな仕組みです。画面上にランダムに表示される絵文字が下へと落下し、絵文字が画面下端に到達すると再びランダムな位置から出現します。絵文字をタップするごとに得点が加算され、画面上に表示されます。

なお、このHTMLファイルには`<style>`タグを用いていくつかのスタイルを設定しています。また、`<canvas>`要素を使用して描画を行っていますが、スマホのブラウザでも正しく動作するようにイベントの設定や画面サイズの調整を行っています。

以上が、スマホで遊べるシンプルな絵文字ゲームの実装例となります。お試しいただければ幸いです。