building block scrabble's game

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

No:9154

186

←

Prev Next

→

building block scrabble
Developer User3161｜Date and time 23/7/21 18:14:40
Build time 38.234 sec｜Game capacity 3.198KB｜

Script

了解しました。以下はHTMLファイルに実装されたブロック崩しゲームの例です。

このファイルを保存して、ウェブブラウザで開いていただければ、ブロック崩しゲームがプレイできます。マウスを動かしてパドルを操作し、ボールが地面に落ちる前にブロックを壊してください。

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

了解しました。以下はHTMLファイルに実装されたブロック崩しゲームの例です。

```html
<!DOCTYPE html>
<html>
<head>
  <title>ブロック崩しゲーム</title>
  <style>
    #game {
      position: relative;
      width: 600px;
      height: 400px;
      margin: 0 auto;
      border: 1px solid black;
    }
    .block {
      position: absolute;
      width: 50px;
      height: 20px;
      background-color: red;
      top: 0;
      left: 0;
    }
    #paddle {
      position: absolute;
      width: 100px;
      height: 10px;
      background-color: blue;
      bottom: 0;
      left: 0;
    }
    #ball {
      position: absolute;
      width: 10px;
      height: 10px;
      background-color: black;
      top: 200px;
      left: 200px;
      border-radius: 50%;
    }
  </style>
</head>
<body>
  <div id="game">
    <div id="paddle"></div>
    <div id="ball"></div>
    <div class="block" style="top: 50px; left: 50px;"></div>
    <div class="block" style="top: 50px; left: 110px;"></div>
    <div class="block" style="top: 50px; left: 170px;"></div>
    
  </div>

// パドルの移動
    window.addEventListener('mousemove', function(e) {
      var x = e.clientX - game.offsetLeft;
      paddle.style.left = x - paddle.offsetWidth / 2 + 'px';
    });

// ボールの移動と衝突判定
    var dx = 2;
    var dy = -2;
    setInterval(function() {
      ball.style.left = parseFloat(ball.style.left) + dx + 'px';
      ball.style.top = parseFloat(ball.style.top) + dy + 'px';

// 上下の壁との衝突判定
      if (parseFloat(ball.style.top) <= 0 || parseFloat(ball.style.top) >= game.offsetHeight - ball.offsetHeight) {
        dy = -dy;
      }

// 左右の壁との衝突判定
      if (parseFloat(ball.style.left) <= 0 || parseFloat(ball.style.left) >= game.offsetWidth - ball.offsetWidth) {
        dx = -dx;
      }

// パドルとの衝突判定
      if (collision(ball, paddle)) {
        dy = -dy;
      }

// ブロックとの衝突判定
      for (var i = 0; i < blocks.length; i++) {
        if (collision(ball, blocks[i])) {
          blocks[i].style.display = 'none'; // ブロックを消す
          dy = -dy;
        }
      }
    }, 10);

// 衝突判定
    function collision(obj1, obj2) {
      var rect1 = obj1.getBoundingClientRect();
      var rect2 = obj2.getBoundingClientRect();

return rect1.top < rect2.bottom &&
             rect1.bottom > rect2.top &&
             rect1.left < rect2.right &&
             rect1.right > rect2.left;
    }
  </script>
</body>
</html>
```