Various magic spells erupt at random from the magic wand, using JS animation and various pictograms.'s game

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

No:5892

5248

←

Prev Next

→

Various magic spells erupt at random from the magi..ALL
Developer anonymous｜Date and time 70/1/1 9:50:45
Build time unknown sec｜Game capacity 3.045KB｜

Script

し、プレイヤーがそれをキャッチすると得点が加算されるというゲームを作りましょう。以下が実装例です。

🪄

このプログラムは、画面上でランダムな位置に魔法が出現し、プレイヤーがそれをクリックすることで得点が加算されます。得点は画面に表示され、1秒ごとに新しい魔法が生成されます。

🪄

この例では絵文字として「魔法の杖」の絵文字（🪄）を使用しましたが、ランダムに生成される魔法には様々な絵文字が使用されます。プログラムを実行すると、画面上に魔法が表示され、それをクリックすると得点が加算されます。

←

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">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Magic Game</title>
    <style>
        #gameContainer {
            width: 100%;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f0f0f0;
        }
        #wand {
            font-size: 100px;
        }
        #score {
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div id="gameContainer">
        <div id="wand">🪄</div>
    </div>

// 画面上でランダムな位置に魔法が出現する
        function spawnMagic() {
            const magicElement = document.createElement('div');
            const magicEmoji = randomEmoji();
            magicElement.innerHTML = magicEmoji;
            magicElement.style.fontSize = '50px';
            magicElement.style.position = 'absolute';
            magicElement.style.left = `${Math.random() * 90}%`;
            magicElement.style.top = `${Math.random() * 90}%`;

// 魔法がクリックされた時の処理
            magicElement.addEventListener('click', () => {
                // スコアを加算
                score++;
                scoreElement.innerText = `Score: ${score}`;

// 魔法を削除
                magicElement.parentNode.removeChild(magicElement);
            });

document.body.appendChild(magicElement);
        }

// ランダムな絵文字を返す
        function randomEmoji() {
            const emojis = ['🌟', '✨', '🌈', '🧙‍♂️', '🎩', '🔮'];
            return emojis[Math.floor(Math.random() * emojis.length)];
        }

// 1秒ごとに魔法を生成
        setInterval(spawnMagic, 1000);
    </script>
</body>
</html>
```

この例では絵文字として「魔法の杖」の絵文字（🪄）を使用しましたが、ランダムに生成される魔法には様々な絵文字が使用されます。

プログラムを実行すると、画面上に魔法が表示され、それをクリックすると得点が加算されます。