Game in which you operate a tank to turn animals into meat's game

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

No:4578

465

←

Prev Next

→

Game in which you operate a tank to turn animals i..ALL
Developer User3771｜Date and time 23/6/28 10:11:26
Build time 31.613 sec｜Game capacity 3.01KB｜

Script

了解しました。以下に、スマホで操作できる戦車を操作して動物を肉に変えるゲームの例を実装したHTMLファイルのコードを示します。

このゲームでは、スマホのブラウザで表示すると、画面上に戦車（緑色の四角形）と動物（茶色の四角形）が表示されます。スワイプ操作ではなく、キーボードの上下左右キーで戦車を操作します。戦車と動物が重なると、動物は新しいランダムな位置に再配置されます。

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

了解しました。以下に、スマホで操作できる戦車を操作して動物を肉に変えるゲームの例を実装したHTMLファイルのコードを示します。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>戦車ゲーム</title>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>

// ゲームオブジェクトの定義
      var tank = {
        x: 200, // 戦車の初期位置
        y: 200,
        speed: 5, // 戦車の速度
        direction: 0, // 戦車の向き（0: 上, 1: 右, 2: 下, 3: 左）
      };

var animal = {
        x: getRandomPosition(20, 380), // 動物の初期位置（ランダム）
        y: getRandomPosition(20, 380),
      };

// キーボードイベントの追加
      document.addEventListener("keydown", function(event) {
        if(event.key === "ArrowUp") {
          tank.direction = 0;
          tank.y -= tank.speed;
        } else if(event.key === "ArrowRight") {
          tank.direction = 1;
          tank.x += tank.speed;
        } else if(event.key === "ArrowDown") {
          tank.direction = 2;
          tank.y += tank.speed;
        } else if(event.key === "ArrowLeft") {
          tank.direction = 3;
          tank.x -= tank.speed;
        }

// 戦車と動物が重なったら、動物を肉に変える
        if(Math.abs(tank.x - animal.x) < 20 && Math.abs(tank.y - animal.y) < 20) {
          animal = {
            x: getRandomPosition(20, 380), // 新しい位置に動物を再配置（ランダム）
            y: getRandomPosition(20, 380),
          };
        }
      });

// ゲームループ
      function gameLoop() {
        // 背景の描画
        ctx.fillStyle = "lightgray";
        ctx.fillRect(0, 0, canvas.width, canvas.height);

// 戦車の描画
        ctx.fillStyle = "green";
        ctx.fillRect(tank.x, tank.y, 20, 20);

// 動物の描画
        ctx.fillStyle = "brown";
        ctx.fillRect(animal.x, animal.y, 20, 20);

// ゲームループの継続
        requestAnimationFrame(gameLoop);
      }

// ゲームループの開始
      gameLoop();
    };

// 指定範囲内のランダムな位置を返す関数
    function getRandomPosition(min, max) {
      return Math.floor(Math.random() * (max - min + 1) + min);
    }
  </script>
</body>
</html>
```