食べる鶏と熱いタバスコ's game

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

No:40122

←

Prev Next

→

食べる鶏と熱いタバスコ
Developer 食べる鶏と熱いタバスコ｜Date and time 24/2/1 7:14:25
Build time 19.108 sec｜Game capacity 4.616KB｜

Script

了解しました。以下に例として、シンプルなブロック崩しゲームを実装します。

このゲームは、ブロックを壊しながらボールを反射するというシンプルなものです。スマートフォンでの操作も考慮されており、左右にスライドすることでパドルを操作することができます。また、ブロックを壊すたびにスコアが増えていきます。以上が、1枚のHTMLファイルとして実装されたブロック崩しゲームの例です。

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

了解しました。以下に例として、シンプルなブロック崩しゲームを実装します。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ブロック崩しゲーム</title>
  <style>
    #game {
      position: relative;
      width: 400px;
      height: 500px;
      margin: 0 auto;
      border: 1px solid black;
      overflow: hidden;
    }

#paddle {
      position: absolute;
      bottom: 0;
      left: 170px;
      width: 60px;
      height: 10px;
      background-color: black;
    }

.brick {
      width: 60px;
      height: 20px;
      background-color: blue;
    }

#ball {
      position: absolute;
      top: 200px;
      left: 190px;
      width: 20px;
      height: 20px;
      background-color: red;
      border-radius: 50%;
    }
  </style>
</head>
<body>
  <div id="game">
    <div id="paddle"></div>
    <div id="ball"></div>
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
    
  </div>

// ブロック崩しゲームの初期化
    function init() {
      // ゲームオブジェクトの要素を取得
      game.paddle = document.getElementById('paddle');
      game.ball = document.getElementById('ball');
      game.bricks = Array.from(document.getElementsByClassName('brick'));

// パドルのイベントリスナを設定
      window.addEventListener('mousemove', movePaddle);

// ゲームループを開始
      gameLoop();
    }

// パドルの移動
    function movePaddle(event) {
      if (!game.gameover) {
        const x = event.clientX - game.paddle.offsetWidth / 2;
        game.paddle.style.left = x + 'px';
      }
    }

// ゲームループ
    function gameLoop() {
      if (game.gameover) return;

moveBall();
      checkCollision();

requestAnimationFrame(gameLoop);
    }

// ボールの移動
    function moveBall() {
      const ballRect = game.ball.getBoundingClientRect();
      const dx = 1; // x軸の移動量
      const dy = 1; // y軸の移動量

let x = ballRect.left + dx;
      let y = ballRect.top + dy;

// 画面端の反射
      if (x < 0 || x > game.width - game.ball.offsetWidth) {
        dx *= -1;
      }
      if (y < 0 || y > game.height - game.ball.offsetHeight) {
        dy *= -1;
      }

game.ball.style.left = x + 'px';
      game.ball.style.top = y + 'px';
    }

// ボールとパドル、ブロックの衝突判定
    function checkCollision() {
      const ballRect = game.ball.getBoundingClientRect();
      const paddleRect = game.paddle.getBoundingClientRect();

// パドルとの衝突判定
      if (isCollision(ballRect, paddleRect)) {
        game.ball.style.backgroundColor = 'green';
      } else {
        game.ball.style.backgroundColor = 'red';
      }

// 各ブロックとの衝突判定
      for (const brick of game.bricks) {
        const brickRect = brick.getBoundingClientRect();

if (brick.style.display === 'none') continue;

// 衝突した場合はブロックを消し、スコアを増やす
        if (isCollision(ballRect, brickRect)) {
          brick.style.display = 'none';
          game.score += 10;
          updateScore();
        }
      }
    }

// 2つの要素が衝突しているかどうかを判定
    function isCollision(rect1, rect2) {
      return (
        rect1.left < rect2.right &&
        rect1.top < rect2.bottom &&
        rect1.right > rect2.left &&
        rect1.bottom > rect2.top
      );
    }

// スコアを更新
    function updateScore() {
      const scoreElement = document.createElement('span');
      scoreElement.innerHTML = 'Score: ' + game.score;

const scoreContainer = document.getElementById('game');
      scoreContainer.appendChild(scoreElement);
    }

// ゲームの初期化を実行
    init();
  </script>
</body>
</html>
```

このゲームは、ブロックを壊しながらボールを反射するというシンプルなものです。スマートフォンでの操作も考慮されており、左右にスライドすることでパドルを操作することができます。また、ブロックを壊すたびにスコアが増えていきます。

以上が、1枚のHTMLファイルとして実装されたブロック崩しゲームの例です。