Bullet Shooting, White's game

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

No:1529

1385

←

Prev Next

→

Bullet Shooting, White
Developer AI絵師｜Date and time 23/6/18 18:10:49
Build time 36.748 sec｜Game capacity 3.871KB｜

Script

玉をかわしながら敵を倒す弾幕シューティングゲームです。プレイヤーはスマホで左右にスワイプして自機を動かし、タップして弾を発射します。敵を倒すと得点が入り、高得点を目指しましょう。また、敵弾に当たるとミスになりますので、注意して遊んでください。以下はプログラムの一例です（注：必要な部分のみの記述に留意）。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

玉をかわしながら敵を倒す弾幕シューティングゲームです。プレイヤーはスマホで左右にスワイプして自機を動かし、タップして弾を発射します。敵を倒すと得点が入り、高得点を目指しましょう。また、敵弾に当たるとミスになりますので、注意して遊んでください。

以下はプログラムの一例です（注：必要な部分のみの記述に留意）。

<html>
  <head>
    <title>弾幕シューティング・白</title>
    <style>
      /* スタイルシート */
      body {
        margin:0;
        padding:0;
        background-color:black;
        color:white;
        font-size:20px;
        text-align:center;
      }
      #game {
        position:relative;
        width:100%;
        height:100vh;
      }
      .player {
        position:absolute;
        bottom:0;
        left:calc(50% - 20px);
        width:40px;
        height:40px;
        border-radius:50%;
        background-color:red;
      }
      .bullet {
        position:absolute;
        width:10px;
        height:10px;
        border-radius:50%;
        background-color:yellow;
      }
      .enemy {
        position:absolute;
        width:40px;
        height:40px;
        border-radius:50%;
        background-color:green;
      }
    </style>
  </head>
  <body>
    <div id="game">
      <div class="player"></div>
    </div>
    <script>
      // JavaScript
      const game = document.querySelector('#game');
      const player = document.querySelector('.player');
      const bullets = [];
      const enemies = [];
      let score = 0;

// プレイヤーの移動
      let playerX = 50;
      document.addEventListener('touchmove', event => {
        playerX = event.touches[0].clientX / game.clientWidth * 100;
        player.style.left = `calc(${playerX}% - 20px)`;
      });

// 弾の発射
      document.addEventListener('touchstart', event => {
        const bullet = document.createElement('div');
        bullet.classList.add('bullet');
        bullet.style.left = `calc(${playerX}% - 5px)`;
        game.appendChild(bullet);
        bullets.push({ elem:bullet, y:-30 });
      });

// 敵の出現
      setInterval(() => {
        const enemy = document.createElement('div');
        enemy.classList.add('enemy');
        enemy.style.left = `${Math.random() * 90 + 5}%`;
        game.appendChild(enemy);
        enemies.push({ elem:enemy, y:100 });
      }, 1000);

// メインループ
      setInterval(() => {
        // 弾の移動と当たり判定
        for (let i = 0; i < bullets.length; i++) {
          bullets[i].y -= 5;
          bullets[i].elem.style.top = `${bullets[i].y}px`;
          for (let j = 0; j < enemies.length; j++) {
            if (isHit(bullets[i].elem, enemies[j].elem)) {
              score += 100;
              document.querySelector('#score').textContent = score;
              bullets[i].elem.remove();
              bullets.splice(i, 1);
              enemies[j].elem.remove();
              enemies.splice(j, 1);
              break;
            }
          }
        }
        // 敵の移動と当たり判定
        for (let i = 0; i < enemies.length; i++) {
          enemies[i].y += 2;
          enemies[i].elem.style.top = `${enemies[i].y}%`;
          if (isHit(player, enemies[i].elem)) {
            score = 0;
            document.querySelector('#score').textContent = score;
            location.reload();
          }
        }
      }, 50);

// 当たり判定
      function isHit(elem1, elem2) {
        const rect1 = elem1.getBoundingClientRect();
        const rect2 = elem2.getBoundingClientRect();
        return !(rect1.right < rect2.left || rect1.left > rect2.right || rect1.bottom < rect2.top || rect1.top > rect2.bottom);
      }
    </script>
  </body>
</html>