Side-scrolling action's game

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

No:6637

←

Prev Next

→

Side-scrolling action
Developer User3907｜Date and time 23/7/3 0:51:53
Build time 36.13 sec｜Game capacity 3.926KB｜

Script

以下は、横スクロールアクションゲームのHTMLファイルです。スマートフォンで遊ぶことを前提にしています。

このゲームは、画面内をスワイプすることでプレイヤーの位置を操作し、クリックすることで弾を発射します。プレイヤーは敵の衝突を避け、敵に弾を当てることでスコアを稼ぐことが目的です。

←

Prev　Next

→ 　

Back　

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

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

以下は、横スクロールアクションゲームのHTMLファイルです。スマートフォンで遊ぶことを前提にしています。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>横スクロールアクションゲーム</title>
  <style>
    #game {
      position: relative;
      width: 100%;
      height: 200px;
      background-color: lightblue;
      overflow: hidden;
    }
    #player {
      position: absolute;
      top: 150px;
      left: 50px;
      width: 50px;
      height: 50px;
      background-color: red;
    }
    .enemy {
      position: absolute;
      top: 150px;
      width: 50px;
      height: 50px;
      background-color: green;
    }
    .bullet {
      position: absolute;
      top: 0;
      width: 10px;
      height: 10px;
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div id="game">
    <div id="player"></div>
  </div>

function createEnemy() {
        const enemy = document.createElement('div');
        enemy.classList.add('enemy');
        game.appendChild(enemy);
        enemies.push(enemy);
        enemy.style.left = '100%';
        enemy.style.top = `${Math.floor(Math.random() * 100) + 50}px`;

setInterval(() => {
          const left = parseInt(enemy.style.left);
          enemy.style.left = `${left - 2}px`;

if (left < -50) {
            enemy.style.display = 'none';
            const index = enemies.indexOf(enemy);
            if (index > -1) {
              enemies.splice(index, 1);
            }
          }

if (isColliding(player, enemy)) {
            gameOver();
          }
        }, 10);
      }

function isColliding(element1, element2) {
        const rect1 = element1.getBoundingClientRect();
        const rect2 = element2.getBoundingClientRect();
        return !(rect1.right < rect2.left ||
                 rect1.left > rect2.right ||
                 rect1.bottom < rect2.top ||
                 rect1.top > rect2.bottom);
      }

function gameOver() {
        clearInterval(gameInterval);
        enemies.forEach(enemy => enemy.style.display = 'none');
        alert('ゲームオーバー');
      }

let gameInterval = setInterval(createEnemy, 1000);

document.addEventListener('touchmove', (e) => {
        e.preventDefault();
        player.style.left = `${e.touches[0].clientX - 25}px`;
      });

document.addEventListener('click', () => {
        const bullet = document.createElement('div');
        bullet.classList.add('bullet');
        game.appendChild(bullet);
        bullet.style.left = `${parseInt(player.style.left) + 20}px`;

const bulletInterval = setInterval(() => {
          const top = parseInt(bullet.style.top);
          bullet.style.top = `${top - 5}px`;

enemies.forEach(enemy => {
            if (isColliding(bullet, enemy)) {
              enemy.style.display = 'none';
              const index = enemies.indexOf(enemy);
              if (index > -1) {
                enemies.splice(index, 1);
              }
              bullet.style.display = 'none';
              clearInterval(bulletInterval);
            }
          });

if (top < -10) {
            bullet.style.display = 'none';
            clearInterval(bulletInterval);
          }
        }, 10);
      });
    });
  </script>
</body>
</html>
```