A game in which the pictures you draw start to move's game

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

No:11413

301

←

Prev Next

→

A game in which the pictures you draw start to mov..ALL
Developer もちきなこ｜Date and time 23/8/9 17:29:54
Build time 32.148 sec｜Game capacity 3.389KB｜

Script

了解です。以下のコードは、スマートフォンで操作し、絵文字が動き出すシンプルなゲームです。

このゲームでは、10個の絵文字が画面内でランダムに移動します。スマートフォンを傾けると、絵文字も同じように移動します。絵文字は画面外に出ないように制限されています。スクリプトタグ内のコードにより、ゲームの初期化、絵文字の移動、スマートフォンの傾きによる移動が処理されます。実際にゲームを遊ぶには、このコードをHTMLファイルとして保存し、スマートフォンで開く必要があります。

←

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>Emoji Game</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
    }
    #game {
      position: relative;
      height: 100vh;
    }
    .emoji {
      position: absolute;
      font-size: 3rem;
    }
  </style>
</head>
<body>
  <div id="game"></div>

function createEmoji() {
      const emoji = document.createElement('div');
      emoji.classList.add('emoji');
      emoji.textContent = emojis[Math.floor(Math.random() * emojis.length)];
      emoji.style.left = Math.random() * (window.innerWidth - 50) + 'px';
      emoji.style.top = Math.random() * (window.innerHeight - 50) + 'px';
      return emoji;
    }

function moveEmojis() {
      const emojis = document.getElementsByClassName('emoji');
      for (let i = 0; i < emojis.length; i++) {
        const emoji = emojis[i];
        let left = parseInt(emoji.style.left) || 0;
        let top = parseInt(emoji.style.top) || 0;
        left += Math.random() * 2 - 1;
        top += Math.random() * 2 - 1;

if (left < 0) {
          left = 0;
        } else if (left > window.innerWidth - 50) {
          left = window.innerWidth - 50;
        }

if (top < 0) {
          top = 0;
        } else if (top > window.innerHeight - 50) {
          top = window.innerHeight - 50;
        }

emoji.style.left = left + 'px';
        emoji.style.top = top + 'px';
      }

requestAnimationFrame(moveEmojis);
    }

function handleOrientation(event) {
      const emojis = document.getElementsByClassName('emoji');
      for (let i = 0; i < emojis.length; i++) {
        const emoji = emojis[i];
        let left = parseInt(emoji.style.left) || 0;
        let top = parseInt(emoji.style.top) || 0;
        if (event.beta) {
          left += event.beta / 30;
        }
        if (event.gamma) {
          top += event.gamma / 30;
        }

if (left < 0) {
          left = 0;
        } else if (left > window.innerWidth - 50) {
          left = window.innerWidth - 50;
        }

if (top < 0) {
          top = 0;
        } else if (top > window.innerHeight - 50) {
          top = window.innerHeight - 50;
        }

emoji.style.left = left + 'px';
        emoji.style.top = top + 'px';
      }
    }

for (let i = 0; i < 10; i++) {
      gameDiv.appendChild(createEmoji());
    }

moveEmojis();
    window.addEventListener('deviceorientation', handleOrientation);
  </script>
</body>
</html>
```

このゲームでは、10個の絵文字が画面内でランダムに移動します。スマートフォンを傾けると、絵文字も同じように移動します。絵文字は画面外に出ないように制限されています。

スクリプトタグ内のコードにより、ゲームの初期化、絵文字の移動、スマートフォンの傾きによる移動が処理されます。実際にゲームを遊ぶには、このコードをHTMLファイルとして保存し、スマートフォンで開く必要があります。