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

No:6665

207

←

Prev Next

→

Random pictograms escaping from touch coordinates
Developer User3898｜Date and time 23/7/3 2:39:27
Build time 29.376 sec｜Game capacity 2.607KB｜

Script

以下は、タッチ座標から逃げるランダム絵文字のゲームの実装例です。

Emoji Escape Game

Click or touch the emoji to start chasing it!

このゲームは、ページを表示した際にランダムな位置に絵文字が表示されます。その絵文字をクリックまたはタッチすると、絵文字が逃げるように移動します。絵文字が画面の外に出た場合は、ゲームクリアとなります。絵文字をクリックすると、ゲームオーバーとなります。

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

以下は、タッチ座標から逃げるランダム絵文字のゲームの実装例です。

```html
<!DOCTYPE html>
<html>
<head>
  <title>Emoji Escape Game</title>
  <style>
    #emoji {
      position: absolute;
      font-size: 50px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h1>Emoji Escape Game</h1>
  <p>Click or touch the emoji to start chasing it!</p>

// 絵文字クリック時のイベントハンドラの登録
        this.emoji.addEventListener("click", function() {
          game.gameOver();
        });

// クリック時に絵文字が逃げる処理
        document.addEventListener("click", function(event) {
          var x = event.clientX;
          var y = event.clientY;
          var emojiX = parseInt(game.emoji.style.left);
          var emojiY = parseInt(game.emoji.style.top);

var newX = emojiX + (emojiX < x ? -10 : 10);
          var newY = emojiY + (emojiY < y ? -10 : 10);

// 絵文字位置の更新
          game.emoji.style.left = newX + "px";
          game.emoji.style.top = newY + "px";

// ゲームクリア判定
          if (newX < 0 || newX > game.width || newY < 0 || newY > game.height) {
            game.gameClear();
          }
        });

console.log("Game started.");
      },
      gameOver: function() {
        alert("Game over!");
        this.emoji.remove();
        console.log("Game over.");
      },
      gameClear: function() {
        alert("Game clear!");
        this.emoji.remove();
        console.log("Game clear.");
      }
    };

// ゲーム開始
    game.start();
  </script>
</body>
</html>
```