building block scrabble's game

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

No:6137

1565

←

Prev Next

→

building block scrabble
Developer User3860｜Date and time 23/7/1 17:27:39
Build time 39.17 sec｜Game capacity 3.814KB｜

Script

了解しました。以下にブロック崩しのゲームを作成したサンプルコードを記述します。

以上のコードでは、HTMLの構造においてゲーム領域を表示するdiv要素を用意し、その中にボール、パドル、ブロックの要素を配置しています。JavaScriptのコードでは、ボールとパドルの位置を更新し、衝突判定を行います。また、キー操作に応じてパドルの位置を変更します。これにより、ボールがパドルやブロックに当たると反射するゲームとして遊ぶことができます。

←

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-area {
      width: 400px;
      height: 400px;
      background-color: black;
      position: relative;
    }
    .ball {
      width: 20px;
      height: 20px;
      background-color: red;
      border-radius: 50%;
      position: absolute;
    }
    .paddle {
      width: 60px;
      height: 10px;
      background-color: white;
      position: absolute;
      bottom: 10px;
      left: 170px;
    }
    .block {
      width: 60px;
      height: 20px;
      background-color: yellow;
      position: absolute;
    }
  </style>
</head>
<body>
  <div id="game-area">
    <div class="ball"></div>
    <div class="paddle"></div>
    <div class="block"></div>
  </div>

// パドルの初期位置
    var paddleX = 170;

// ブロックの初期位置
    var blockX = 170;
    var blockY = 100;
    var blockVisible = true;

// ゲームエリアと要素を取得
    var gameArea = document.getElementById('game-area');
    var ball = document.querySelector('.ball');
    var paddle = document.querySelector('.paddle');
    var block = document.querySelector('.block');

// オブジェクトの位置を更新する関数
    function updatePosition() {
      // ボールの位置を更新
      ballX += speedX;
      ballY += speedY;
      ball.style.left = ballX + 'px';
      ball.style.top = ballY + 'px';

// ボールが壁に当たった場合、反射させる
      if (ballX >= gameArea.offsetWidth || ballX <= 0) {
        speedX = -speedX;
      }
      if (ballY >= gameArea.offsetHeight || ballY <= 0) {
        speedY = -speedY;
      }

// パドルの位置を更新
      paddle.style.left = paddleX + 'px';

// ボールとパドルの当たり判定
      if (collision(ball, paddle)) {
        speedY = -speedY;
      }

// ボールとブロックの当たり判定
      if (blockVisible && collision(ball, block)) {
        speedY = -speedY;
        blockVisible = false;
        block.style.display = 'none';
      }
    }

// 2つの要素が重なっているか判定する関数
    function collision(elm1, elm2) {
      var rect1 = elm1.getBoundingClientRect();
      var rect2 = elm2.getBoundingClientRect();
      return rect1.left < rect2.right &&
             rect1.right > rect2.left &&
             rect1.top < rect2.bottom &&
             rect1.bottom > rect2.top;
    }

// キー操作に応じてパドルの位置を更新する関数
    function handleKeyPress(event) {
      if (event.key === 'ArrowLeft') {
        paddleX -= 10;
      }
      if (event.key === 'ArrowRight') {
        paddleX += 10;
      }
    }

// ゲームのメインループ
    function mainLoop() {
      updatePosition();
      requestAnimationFrame(mainLoop);
    }

// イベントリスナーを設定
    document.addEventListener('keydown', handleKeyPress);

// ゲームの開始
    mainLoop();
  </script>
</body>
</html>
```