Pictogram Dot Eat Game's game

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

No:247

238

←

Prev Next

→

Pictogram Dot Eat Game
Developer User2983｜Date and time 23/6/11 10:23:59
Build time 23.374 sec｜Game capacity 2.434KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>絵文字ドットイートゲーム</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        background-color: black;
        color: white;
        font-size: 2em;
        text-align: center;
      }
      canvas {
        display: block;
        margin-top: 10%;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas"></canvas>
    <script>
      // ゲームの概要：絵文字を集めるドットイートゲーム
      
      // キャンバスの取得
      const canvas = document.getElementById('canvas');
      const ctx = canvas.getContext('2d');
      
      // 絵文字の定義
      const emojis = ['🍔', '🍟', '🍕', '🌭', '🍿', '🥤', '🍩', '🍪'];
      
      // キャラクターの初期位置
      let x = 250;
      let y = 250;
      
      // 絵文字の初期位置
      let emojiX = Math.floor(Math.random() * canvas.width);
      let emojiY = Math.floor(Math.random() * canvas.height);
      
      // 絵文字を描画する関数
      function drawEmoji() {
        ctx.fillText(emojis[Math.floor(Math.random() * emojis.length)], emojiX, emojiY);
      }
      
      // ゲームループ
      function gameLoop() {
        // キャンバスをクリアする
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        // 絵文字を描画する
        drawEmoji();
        
        // キャラクターを描画する
        ctx.fillText('😀', x, y);
        
        // 絵文字とキャラクターの当たり判定
        if (x < emojiX + 30 && x + 30 > emojiX && y < emojiY + 30 && y + 30 > emojiY) {
          emojiX = Math.floor(Math.random() * canvas.width);
          emojiY = Math.floor(Math.random() * canvas.height);
        }
        
        // ゲームループを再帰的に呼び出す
        requestAnimationFrame(gameLoop);
      }
      
      // タッチ操作の処理
      function handleTouch(e) {
        e.preventDefault();
        x = e.changedTouches[0].clientX - canvas.offsetLeft;
        y = e.changedTouches[0].clientY - canvas.offsetTop;
      }
      
      // イベントの登録
      canvas.addEventListener('touchstart', handleTouch, false);
      canvas.addEventListener('touchmove', handleTouch, false);
      
      // ゲームループを開始する
      gameLoop();
    </script>
  </body>
</html>