A game with lots of birds attacking's game

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

No:4267

3649

←

Prev Next

→

A game with lots of birds attacking
Developer User1006｜Date and time 23/6/27 17:04:10
Build time 18.757 sec｜Game capacity 2.111KB｜

Script

を作りましょう。

このゲームでは、プレイヤーが操作する鳥を表示し、その周りをランダムに現れる鳥が襲撃してきます。プレイヤーが操作する鳥の位置を上下左右に移動して、襲撃してくる鳥を避けながら、近くにいる鳥をクリックして撃退するゲームです。絵文字を使い、雰囲気を楽しめるようにしました。

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

を作りましょう。

<html>
  <head>
    <meta charset="UTF-8">
    <title>鳥襲撃ゲーム</title>
  </head>
  <body>
    <canvas id="game" width="400" height="400"></canvas>
    <script>
      const canvas = document.getElementById('game');
      const context = canvas.getContext('2d');
      const birdImage = new Image();
      birdImage.src = 'https://twemoji.maxcdn.com/2/svg/1f426.svg';

let birdX = canvas.width/2;
      let birdY = canvas.height/2;
      let birdSpeed = 5;
      let score = 0;

function drawBird() {
        context.drawImage(birdImage, birdX, birdY);
      }

function moveBird(event) {
        switch(event.keyCode) {
          case 37: // 左
            birdX -= birdSpeed;
            break;
          case 38: // 上
            birdY -= birdSpeed;
            break;
          case 39: // 右
            birdX += birdSpeed;
            break;
          case 40: // 下
            birdY += birdSpeed;
            break;
        }
      }

function spawnBird() {
        const randomX = Math.floor(Math.random() * canvas.width);
        const randomY = Math.floor(Math.random() * canvas.height);

context.drawImage(birdImage, randomX, randomY);

if(Math.abs(randomX - birdX) < 50 && Math.abs(randomY - birdY) < 50) {
          score++;
        } else {
          score--;
        }

document.getElementById('score').innerHTML = score;
      }

document.addEventListener('keydown', moveBird);

setInterval(spawnBird, 1000);

setInterval(function() {
        context.clearRect(0, 0, canvas.width, canvas.height);
        drawBird();
      }, 10);

</script>
    <div id="score">0</div>
  </body>
</html>