Exclusive logical sum random animation in CANVAS's game

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

No:7929

2350

←

Prev Next

→

Exclusive logical sum random animation in CANVAS
Developer User3997｜Date and time 23/7/11 2:07:36
Build time 13.386 sec｜Game capacity 2.862KB｜

Script

おっしゃる通り、以下のような排他的論理和乱舞アニメをcanvasを使用して実装したプログラムをご紹介します。

このプログラムでは、canvas要素を使用して絵文字がランダムに表示され、下に移動していく排他的論理和乱舞アニメを実現しています。絵文字は一定の間隔でランダムに生成され、画面下まで移動すると削除されます。絵文字の描画には絵文字のテキストを使っているので、対応する絵文字フォントがブラウザで利用可能である必要があります。このプログラムはスマートフォン上での操作を前提としており、スマートフォンのブラウザで表示すると遊ぶことができます。もちろん、PC上のブラウザでも遊ぶことは可能です。以上が、排他的論理和乱舞アニメのcanvasを使ったゲームの例となります。

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

おっしゃる通り、以下のような排他的論理和乱舞アニメをcanvasを使用して実装したプログラムをご紹介します。

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>排他的論理和乱舞アニメ</title>
    <style>
      canvas {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <canvas id="gameCanvas" width="600" height="400"></canvas>
    <script>
      const canvas = document.getElementById('gameCanvas');
      const ctx = canvas.getContext('2d');
      const emoji = ["😀", "😁", "😂", "😃", "😄", "😅", "😆", "😇", "😈", "😉", "😊", "😋", "😌", "😍"]; // 絵文字リスト
      const emojiSize = 40; // 絵文字のサイズ
      const emojiSpeed = 2; // 絵文字の移動スピード
      const emojiSpawnInterval = 1000; // 絵文字を生成する間隔（ミリ秒）
      const emojiSpawnChance = 0.5; // 絵文字を生成する確率

let emojis = []; // 絵文字の配列

function getRandomEmoji() {
        return emoji[Math.floor(Math.random() * emoji.length)]; // ランダムな絵文字を取得
      }

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

for (const emoji of emojis) {
          emoji.y += emojiSpeed; // 絵文字を下に移動
          ctx.fillText(getRandomEmoji(), emoji.x, emoji.y); // 絵文字を描画

if (emoji.y > canvas.height) {
            // 絵文字が画面外に出たら削除
            const index = emojis.indexOf(emoji);
            emojis.splice(index, 1);
          }
        }

requestAnimationFrame(update);
      }

setInterval(spawnEmoji, emojiSpawnInterval);
      update();
    </script>
  </body>
</html>
```

このプログラムはスマートフォン上での操作を前提としており、スマートフォンのブラウザで表示すると遊ぶことができます。もちろん、PC上のブラウザでも遊ぶことは可能です。以上が、排他的論理和乱舞アニメのcanvasを使ったゲームの例となります。