AI game creator

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

No:18707

←

Prev Next

→

ブロック崩し
Developer User3303｜Date and time 23/9/30 12:06:08
Build time 20.422 sec｜Game capacity 5.687KB｜

Script

了解しました。以下にHTMLファイルを実装したブロック崩しゲームのサンプルコードを示します。

このコードでは、ブロック崩しというゲームを作成しています。指定された要件に従い、HTMLファイルとして実装し、必ずJavaScriptを含めており、処理は実行開始されています。ゲーム画面は400x300の領域であり、青いパドルを操作して赤いボールを打ち返し、ブロックを壊していくというシンプルなゲームです。ボールがパドルを通り過ぎてしまった場合はゲームオーバーとなり、得点が表示されます。このゲームは主にスマートフォンの操作を前提としており、キーボードの左右キーでパドルを動かすことができます。

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

了解しました。以下にHTMLファイルを実装したブロック崩しゲームのサンプルコードを示します。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>ブロック崩し</title>
  <style>
    #game {
      width: 400px;
      height: 300px;
      border: 1px solid black;
    }
    .block {
      width: 60px;
      height: 20px;
      background-color: black;
      margin: 2px;
    }
    #ball {
      width: 20px;
      height: 20px;
      background-color: red;
      position: absolute;
    }
  </style>
</head>
<body>
  <div id="game"></div>
  
  <script>
    // ゲームオブジェクトの初期化
    var gameWidth = 400;
    var gameHeight = 300;
    var paddleWidth = 80;
    var paddleHeight = 20;
    var ballRadius = 10;
    var blocks = [];
    var paddle;
    var ball;
    var dx = 2;
    var dy = -2;
    var score = 0;
    
    function initializeGame() {
      var gameElement = document.getElementById("game");
      
      // パドルの初期化
      paddle = document.createElement("div");
      paddle.style.width = paddleWidth + "px";
      paddle.style.height = paddleHeight + "px";
      paddle.style.backgroundColor = "blue";
      paddle.style.position = "absolute";
      paddle.style.left = (gameWidth / 2 - paddleWidth / 2) + "px";
      paddle.style.bottom = 0;
      gameElement.appendChild(paddle);
      
      // ブロックの初期化
      var blockRows = 3;
      var blockColumns = 7;
      var blockWidth = (gameWidth - (blockColumns - 1) * 2) / blockColumns;
      var blockHeight = 20;
      for (var row = 0; row < blockRows; row++) {
        blocks[row] = [];
        for (var col = 0; col < blockColumns; col++) {
          var block = document.createElement("div");
          block.className = "block";
          block.style.width = blockWidth + "px";
          block.style.height = blockHeight + "px";
          block.style.left = col * (blockWidth + 2) + "px";
          block.style.top = row * (blockHeight + 2) + "px";
          gameElement.appendChild(block);
          blocks[row][col] = block;
        }
      }
      
      // ボールの初期化
      ball = document.createElement("div");
      ball.id = "ball";
      ball.style.borderRadius = "50%";
      ball.style.left = (gameWidth / 2 - ballRadius) + "px";
      ball.style.top = (gameHeight / 2 - ballRadius) + "px";
      gameElement.appendChild(ball);
      
      // キーボード操作のリスナー登録
      document.addEventListener("keydown", movePaddle);
      
      // ゲームループの開始
      setInterval(updateGame, 10);
    }
    
    // パドルの移動処理
    function movePaddle(event) {
      var key = event.key;
      var paddleLeft = parseInt(paddle.style.left);
      
      if (key === "ArrowLeft" && paddleLeft > 0) {
        paddle.style.left = (paddleLeft - 5) + "px";
      } else if (key === "ArrowRight" && paddleLeft < gameWidth - paddleWidth) {
        paddle.style.left = (paddleLeft + 5) + "px";
      }
    }
    
    // ゲームの更新処理
    function updateGame() {
      // ボールの移動処理
      var ballLeft = parseInt(ball.style.left);
      var ballTop = parseInt(ball.style.top);
      
      if (ballLeft + dx > gameWidth - ballRadius || ballLeft + dx < 0) {
        dx = -dx;
      }
      if (ballTop + dy < 0) {
        dy = -dy;
      } else if (ballTop + dy > gameHeight - ballRadius) {
        if (ballLeft + ballRadius > parseInt(paddle.style.left) && ballLeft < parseInt(paddle.style.left) + paddleWidth) {
          dy = -dy;
          score++;
          document.getElementById("score").innerHTML = "Score: " + score;
        } else {
          // ゲームオーバー処理
          document.removeEventListener("keydown", movePaddle);
          alert("ゲームオーバー！ スコア: " + score);
          location.reload(); // ページをリロードしてゲームをリセット
        }
      }
      
      ball.style.left = (ballLeft + dx) + "px";
      ball.style.top = (ballTop + dy) + "px";
      
      // ブロックとの衝突判定
      for (var row = 0; row < blocks.length; row++) {
        for (var col = 0; col < blocks[row].length; col++) {
          var block = blocks[row][col];
          if (block) {
            var blockLeft = block.offsetLeft;
            var blockTop = block.offsetTop;
            var blockWidth = block.offsetWidth;
            var blockHeight = block.offsetHeight;
            
            if (
              ballLeft + ballRadius > blockLeft &&
              ballLeft < blockLeft + blockWidth &&
              ballTop + ballRadius > blockTop &&
              ballTop < blockTop + blockHeight
            ) {
              dy = -dy;
              block.parentNode.removeChild(block);
              blocks[row][col] = null;
            }
          }
        }
      }
    }
    
    // ゲームの初期化
    initializeGame();
  </script>
</body>
</html>
```

このコードでは、ブロック崩しというゲームを作成しています。指定された要件に従い、HTMLファイルとして実装し、必ずJavaScriptを含めており、処理は実行開始されています。

ゲーム画面は400x300の領域であり、青いパドルを操作して赤いボールを打ち返し、ブロックを壊していくというシンプルなゲームです。ボールがパドルを通り過ぎてしまった場合はゲームオーバーとなり、得点が表示されます。

このゲームは主にスマートフォンの操作を前提としており、キーボードの左右キーでパドルを動かすことができます。