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

No:3758

165

←

Prev Next

→

Doggie Panic
Developer User1006｜Date and time 23/6/26 13:06:37
Build time 53.301 sec｜Game capacity 4.712KB｜

Script

わんわんパニックというゲームを作りました。 HTMLファイルには以下のようなコードを含みます。

わんわんパニック

JavaScriptのコードは以下のようになります。
このゲームでは、プレイヤーはクリックして動くドッグを追いかけ、キャットに当たらないようにします。ドッグをクリックするとスコアが加算されます。スコアが100になるとクリアとなります。キャットに当たると残機が減り、残機が0になるとゲームオーバーとなります。

←

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 {
        background-color: lightblue;
        font-family: Arial, sans-serif;
        text-align: center;
      }
      h1 {
        color: white;
        font-size: 48px;
        margin-top: 100px;
      }
      canvas {
        border: 1px solid black;
        margin-top: 50px;
      }
    </style>
  </head>
  <body>
    <h1>わんわんパニック</h1>
    <canvas id="gameCanvas" width="500" height="400"></canvas>
    <script>
      // ここにJavaScriptのコードを書く
    </script>
  </body>
</html>
```

JavaScriptのコードは以下のようになります。

```
// ゲームの準備
var canvas = document.getElementById("gameCanvas");
var ctx = canvas.getContext("2d");
var score = 0;
var lives = 3;
var dogImage = new Image();
dogImage.src = "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/271/dog-face_1f436.png";
var catImage = new Image();
catImage.src = "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/271/cat-face_1f431.png";
var dogs = [];
var cats = [];
for (var i = 0; i < 10; i++) {
  dogs.push({
    x: Math.random() * (canvas.width - 64),
    y: Math.random() * (canvas.height - 64),
    dx: Math.random() * 4 - 2,
    dy: Math.random() * 4 - 2,
    image: dogImage
  });
  cats.push({
    x: Math.random() * (canvas.width - 64),
    y: Math.random() * (canvas.height - 64),
    dx: Math.random() * 4 - 2,
    dy: Math.random() * 4 - 2,
    image: catImage
  });
}

// ゲームループ
function draw() {
  // 背景を描画
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = "lightgreen";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  // ドッグを移動して描画
  for (var i = 0; i < dogs.length; i++) {
    dogs[i].x += dogs[i].dx;
    dogs[i].y += dogs[i].dy;
    if (dogs[i].x < 0 || dogs[i].x > canvas.width - 64) {
      dogs[i].dx *= -1;
    }
    if (dogs[i].y < 0 || dogs[i].y > canvas.height - 64) {
      dogs[i].dy *= -1;
    }
    ctx.drawImage(dogs[i].image, dogs[i].x, dogs[i].y, 64, 64);
  }
  // キャットを移動して描画
  for (var i = 0; i < cats.length; i++) {
    cats[i].x += cats[i].dx;
    cats[i].y += cats[i].dy;
    if (cats[i].x < 0 || cats[i].x > canvas.width - 64) {
      cats[i].dx *= -1;
    }
    if (cats[i].y < 0 || cats[i].y > canvas.height - 64) {
      cats[i].dy *= -1;
    }
    ctx.drawImage(cats[i].image, cats[i].x, cats[i].y, 64, 64);
  }
  // スコアと残機を表示
  ctx.fillStyle = "white";
  ctx.font = "24px Arial";
  ctx.fillText("Score: " + score, 10, 30);
  ctx.fillText("Lives: " + lives, canvas.width - 100, 30);
  // ゲームオーバーの処理
  if (lives == 0) {
    ctx.fillStyle = "black";
    ctx.globalAlpha = 0.5;
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.globalAlpha = 1;
    ctx.fillStyle = "white";
    ctx.font = "48px Arial";
    ctx.fillText("GAME OVER", canvas.width / 2, canvas.height / 2);
    clearInterval(gameLoop);
  }
}

var gameLoop = setInterval(draw, 20);

// ドッグをクリックしたときの処理
canvas.addEventListener("click", function(event) {
  for (var i = 0; i < dogs.length; i++) {
    if (event.pageX > dogs[i].x && event.pageY > dogs[i].y &&
        event.pageX < dogs[i].x + 64 && event.pageY < dogs[i].y + 64) {
      score += 10;
      dogs[i].x = Math.random() * (canvas.width - 64);
      dogs[i].y = Math.random() * (canvas.height - 64);
    }
  }
  if (score == 100) {
    clearInterval(gameLoop);
    alert("おめでとう！クリアしました！");
  }
});

// キャットに当たったときの処理
setInterval(function() {
  for (var i = 0; i < cats.length; i++) {
    if ((cats[i].x < dogs[0].x + 64 && cats[i].x + 64 > dogs[0].x &&
         cats[i].y < dogs[0].y + 64 && cats[i].y + 64 > dogs[0].y) ||
        (cats[i].x < dogs[1].x + 64 && cats[i].x + 64 > dogs[1].x &&
         cats[i].y < dogs[1].y + 64 && cats[i].y + 64 > dogs[1].y)) {
      lives--;
      cats[i].x = Math.random() * (canvas.width - 64);
      cats[i].y = Math.random() * (canvas.height - 64);
    }
  }
}, 1000);
```

このゲームでは、プレイヤーはクリックして動くドッグを追いかけ、キャットに当たらないようにします。ドッグをクリックするとスコアが加算されます。スコアが100になるとクリアとなります。キャットに当たると残機が減り、残機が0になるとゲームオーバーとなります。