A ball of light. The Great Demon King shines in rainbow colors and is defeated.'s game

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

No:4599

1854

←

Prev Next

→

A ball of light. The Great Demon King shines in ra..ALL
Developer User3694｜Date and time 23/6/28 12:17:44
Build time 38.126 sec｜Game capacity 3.597KB｜

Script

されるまで多数の光の玉を発射するゲームの実装例を以下に示します。

このゲームでは、プレイヤーを矢印キーで操作し、クリックすると光の玉を発射します。光の玉は画面外に出ると消えます。光の玉が大魔王の位置に当たるとゲームクリアとなり、全ての光の玉が削除されます。

←

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 {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color: black;
      color: white;
    }
    #game-board {
      width: 300px;
      height: 300px;
      position: relative;
      border: 1px solid white;
    }
    #player {
      width: 30px;
      height: 30px;
      position: absolute;
      background-color: white;
    }
    .ball {
      width: 10px;
      height: 10px;
      position: absolute;
      background-color: cyan;
      border-radius: 50%;
    }
  </style>
</head>
<body>
  <div id="game-board">
    <div id="player"></div>
  </div>

// 光の玉のスピード
    const ballSpeed = 3;

// 光の玉を格納する配列
    const balls = [];

// プレイヤーの要素
    const player = document.getElementById('player');

// ゲームボードの要素
    const gameBoard = document.getElementById('game-board');
    
    // プレイヤーの初期位置を設定
    player.style.left = `${playerX}px`;
    player.style.top = `${playerY}px`;

// プレイヤーの移動処理
    document.addEventListener('keydown', function(event) {
      switch (event.key) {
        case "ArrowUp":
          playerY -= 10;
          break;
        case "ArrowDown":
          playerY += 10;
          break;
        case "ArrowLeft":
          playerX -= 10;
          break;
        case "ArrowRight":
          playerX += 10;
          break;
      }
      player.style.left = `${playerX}px`;
      player.style.top = `${playerY}px`;
    });

// 光の玉を発射
    document.addEventListener('click', function(event) {
      const ball = document.createElement('div');
      ball.classList.add('ball');
      ball.style.left = `${playerX + 10}px`;
      ball.style.top = `${playerY + 10}px`;
      gameBoard.appendChild(ball);
      balls.push(ball);
    });

// 光の玉の移動処理
    setInterval(function() {
      for (let i = 0; i < balls.length; i++) {
        const ball = balls[i];
        const ballX = parseInt(ball.style.left);
        const ballY = parseInt(ball.style.top);
        ball.style.left = `${ballX + ballSpeed}px`;
        ball.style.top = `${ballY - ballSpeed}px`;

// 光の玉がゲームボード外に出た場合に削除
        if (ballX >= 300 || ballY <= 0) {
          gameBoard.removeChild(ball);
          balls.splice(i, 1);
          i--;
        }
      }
    }, 10);

// 大魔王が撃破された時の処理
    setInterval(function() {
      if (balls.length > 0) {
        const ballX = parseInt(balls[0].style.left);
        const ballY = parseInt(balls[0].style.top);
        if (ballX >= 130 && ballX <= 160 && ballY >= 130 && ballY <= 160) {
          alert('撃破されました！');
          for (let i = 0; i < balls.length; i++) {
            const ball = balls[i];
            gameBoard.removeChild(ball);
          }
          balls.splice(0, balls.length);
        }
      }
    }, 10);
  </script>
</body>
</html>
```