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

No:9804

136

←

Prev Next

→

Games that can be played on Dockin BUGGY ANIMAL
Developer User4369｜Date and time 23/7/27 19:56:35
Build time 25.739 sec｜Game capacity 2.452KB｜

Script

了解です。以下がプログラムの実装例です。

ドッキンばぐばぐアニマル

このプログラムは、キャンバス上に動物の絵文字を表示し、それらが画面内を移動しながら反転するというゲームです。画面内の動物をタッチするとスコアが加算されます。ただし、このプログラムはタッチイベントの処理が含まれていないため、現状ではスマートフォンでの操作はできません。タッチイベントの処理を追加することで、スマートフォンでも遊べるようになります。

←

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">
  <title>ドッキンばぐばぐアニマル</title>
  <style>
    body {
      text-align: center;
      font-size: 16px;
    }
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <h1>ドッキンばぐばぐアニマル</h1>
  <canvas id="canvas" width="400" height="400"></canvas>
  <script>
    // キャンバス取得
    const canvas = document.getElementById("canvas");
    const context = canvas.getContext("2d");

// ゲームオブジェクト初期化
    const game = {
      score: 0,
      animals: [
        { name: "🐢", x: 100, y: 100, speedX: 2, speedY: 2 },
        { name: "🐰", x: 200, y: 200, speedX: -2, speedY: -2 },
        { name: "🐙", x: 300, y: 300, speedX: -2, speedY: 2 },
      ],
    };

// ゲームループ
    function loop() {
      // 背景をクリア
      context.clearRect(0, 0, canvas.width, canvas.height);
      
      // 動物を描画
      game.animals.forEach((animal) => {
context.font = "50px serif";
        context.fillText(animal.name, animal.x, animal.y);
      });
      
      // 動物の位置を更新
      game.animals.forEach((animal) => {
        animal.x += animal.speedX;
        animal.y += animal.speedY;
        
        // 動物が画面からはみ出たら反転させる
        if (animal.x < 0 || animal.x > canvas.width) {
          animal.speedX *= -1;
        }
        if (animal.y < 0 || animal.y > canvas.height) {
          animal.speedY *= -1;
        }
      });

// スコアを表示する
      context.fillText("Score: " + game.score, 20, 50);
      
      // ループを続ける
      requestAnimationFrame(loop);
    }

// ゲーム開始
    loop();
  </script>
</body>
</html>
```

このプログラムは、キャンバス上に動物の絵文字を表示し、それらが画面内を移動しながら反転するというゲームです。画面内の動物をタッチするとスコアが加算されます。

ただし、このプログラムはタッチイベントの処理が含まれていないため、現状ではスマートフォンでの操作はできません。タッチイベントの処理を追加することで、スマートフォンでも遊べるようになります。