Cat rainbow sushi circle pendulum lots of random movement's game

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

No:5082

4500

←

Prev Next

→

Cat rainbow sushi circle pendulum lots of random m..ALL
Developer User3812｜Date and time 23/6/29 17:03:53
Build time 29.856 sec｜Game capacity 3.105KB｜

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>
        #canvas {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>

function getRandomCoord() {
            return Math.floor(Math.random() * (canvas.width - 50)) + 25;
        }

function getRandomEmoji() {
            const emojis = ["😺", "🐱", "😸", "😹", "😻", "😼", "😽"];
            return emojis[Math.floor(Math.random() * emojis.length)];
        }

function moveSwing(event) {
            swingX = event.touches[0].pageX;
            swingY = event.touches[0].pageY;
        }

function moveEmojis() {
            for (let i = 0; i < emojis.length; i++) {
                emojis[i].x += emojis[i].dx;
                emojis[i].y += emojis[i].dy;

if (emojis[i].x <= 0 || emojis[i].x >= canvas.width) {
                    emojis[i].dx *= -1;
                }

if (emojis[i].y <= 0 || emojis[i].y >= canvas.height) {
                    emojis[i].dy *= -1;
                }
            }
        }

function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.beginPath();
            ctx.arc(swingX, swingY, 50, 0, Math.PI * 2);
            ctx.fillStyle = "#FFC0CB";
            ctx.fill();
            ctx.closePath();

for (let i = 0; i < emojis.length; i++) {
                ctx.fillText(emojis[i].emoji, emojis[i].x, emojis[i].y);
            }

requestAnimationFrame(draw);
        }

function startGame() {
            for (let i = 0; i < 10; i++) {
                emojis.push({
                    emoji: getRandomEmoji(),
                    x: getRandomCoord(),
                    y: getRandomCoord(),
                    dx: Math.random() * 3 - 1.5,
                    dy: Math.random() * 3 - 1.5
                });
            }

canvas.addEventListener("touchmove", moveSwing);
            setInterval(moveEmojis, 30);
            draw();
        }

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

このゲームでは、スワイプ操作で円の振り子を動かし、たくさんの絵文字が画面内をランダムに動き回ります。円の振り子はピンク色の円で表され、絵文字は描画されます。絵文字は画面の端に到達すると反対方向に跳ね返ります。

以上が、スマホで遊べる絵文字を使ったゲームの実装例です。