タワーで1000 敵お出せるホラー's game

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

No:12974

111

←

Prev Next

→

タワーで1000 敵お出せるホラー
Developer User5664｜Date and time 23/8/25 16:13:56
Build time 25.2 sec｜Game capacity 2.986KB｜

Script

了解しました。以下に、タワーディフェンスゲームの実装例を示します。

このコードでは、タワーディフェンスゲームをCanvasを使用して実装しています。タワーと敵のイメージを表示し、それぞれのヘルスバーを描画します。ゲームループ内でゲームの状態を更新し、描画を行います。タワーのヘルスバーが0になるとゲームオーバー、敵のヘルスバーが0になるとゲームクリアとなります。画像ファイルは適宜 `emozi_rabbit.png` と `emozi_all/enemy.png` の名前で用意して、ソースコード内の `towerImage.src` と `enemyImage.src` のパスを適切に指定してください。このゲームはスマートフォンでもプレイできるようにしており、タワーや敵のイメージは絵文字としても使用することができます。

←

Prev　Next

→ 　

Back　

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

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

了解しました。以下に、タワーディフェンスゲームの実装例を示します。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Tower Defense Game</title>
</head>
<body>
   <canvas id="game-canvas" width="400" height="600"></canvas>

const towerImage = document.createElement("img");
      towerImage.src = "tower.png";

const enemyImage = document.createElement("img");
      enemyImage.src = "enemy.png";

const towerX = canvas.width / 2 - towerImage.width / 2;
      const towerY = canvas.height - towerImage.height;

const enemyX = canvas.width / 2 - enemyImage.width / 2;
      const enemyY = 0;

let towerHealth = 1000;
      let enemyHealth = 1000;

function drawGame() {
         // 背景を描画
         ctx.fillStyle = "#000000";
         ctx.fillRect(0, 0, canvas.width, canvas.height);

// タワーを描画
         ctx.drawImage(towerImage, towerX, towerY);

// 敵を描画
         ctx.drawImage(enemyImage, enemyX, enemyY);

// ヘルスバーを描画
         ctx.fillStyle = "#00FF00";
         ctx.fillRect(10, 10, towerHealth / 10, 20);

ctx.fillStyle = "#FF0000";
         ctx.fillRect(canvas.width - 10 - enemyHealth / 10, 10, enemyHealth / 10, 20);
      }

function updateGame() {
         if (enemyHealth <= 0) {
            alert("ゲームクリア！");
            return;
         }
      
         if (towerHealth <= 0) {
            alert("ゲームオーバー！");
            return;
         }

enemyY++;
         towerHealth--;
         enemyHealth--;

if (enemyY > canvas.height - enemyImage.height) {
            enemyY = 0;
         }
      }

function gameLoop() {
         drawGame();
         updateGame();
         requestAnimationFrame(gameLoop);
      }

// ゲーム開始
      towerImage.onload = function() {
         gameLoop();
      };
   </script>
</body>
</html>
```

このコードでは、タワーディフェンスゲームをCanvasを使用して実装しています。タワーと敵のイメージを表示し、それぞれのヘルスバーを描画します。ゲームループ内でゲームの状態を更新し、描画を行います。

タワーのヘルスバーが0になるとゲームオーバー、敵のヘルスバーが0になるとゲームクリアとなります。画像ファイルは適宜 `tower.png` と `enemy.png` の名前で用意して、ソースコード内の `towerImage.src` と `enemyImage.src` のパスを適切に指定してください。

このゲームはスマートフォンでもプレイできるようにしており、タワーや敵のイメージは絵文字としても使用することができます。