as if it werent there's game

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

No:9528

140

←

Prev Next

→

as if it werent there
Developer User4369｜Date and time 23/7/26 0:21:46
Build time 47.336 sec｜Game capacity 5.097KB｜

Script

了解です。以下に、単純なブロック崩しゲームのプログラムを示します。このプログラムは1枚のHTMLファイルに実装されており、JavaScriptはscriptタグで囲まれています。スマートフォンで操作できるように作成されており、絵文字も使用しています。

このプログラムは、スマートフォンの画面をタッチしてパドルを操作し、ボールがブロックを破壊するというゲームです。絵文字は使用していませんが、ゲーム内の要素を簡単に理解できるようにコメントで説明を追加しています。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>ブロック崩しゲーム</title>
  <style>
    canvas {
      background-color: #eee;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>

// ゲームの初期化
    function init() {
      game.canvas = document.getElementById("gameCanvas");
      game.context = game.canvas.getContext("2d");

// パドルの初期位置
      game.paddle.position.x = game.canvas.width / 2 - game.paddle.width / 2;
      game.paddle.position.y = game.canvas.height - game.paddle.height;

// ボールの初期位置と速度
      game.ball.position.x = game.canvas.width / 2;
      game.ball.position.y = game.canvas.height / 2;
      game.ball.velocity.x = Math.random() * 2 - 1;
      game.ball.velocity.y = -game.ball.speed;

// ブロックの生成
      for (let row = 0; row < 5; row++) {
        for (let col = 0; col < 8; col++) {
          game.blocks.push({
            width: 50,
            height: 20,
            position: { x: col * 52, y: row * 22 },
            color: "#00FF00"
          });
        }
      }

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

// ゲームループ
    function gameLoop() {
      movePaddle();
      moveBall();
      collisionDetection();
      draw();

if (!game.isGameOver) {
        requestAnimationFrame(gameLoop);
      }
    }

// パドルの移動
    function movePaddle() {
      document.addEventListener("touchmove", function (event) {
        game.paddle.position.x = event.touches[0].clientX - game.canvas.offsetLeft;
      });
    }

// ボールの移動
    function moveBall() {
      game.ball.position.x += game.ball.velocity.x;
      game.ball.position.y += game.ball.velocity.y;

// 壁との衝突判定
      if (game.ball.position.x < 0 || game.ball.position.x > game.canvas.width) {
        game.ball.velocity.x *= -1;
      }
      if (game.ball.position.y < 0) {
        game.ball.velocity.y *= -1;
      }

// パドルとの衝突判定
      if (
        game.ball.position.y + game.ball.radius > game.paddle.position.y &&
        game.ball.position.x >= game.paddle.position.x &&
        game.ball.position.x <= game.paddle.position.x + game.paddle.width
      ) {
        game.ball.velocity.y *= -1;
      }

// ゲームオーバー判定
      if (game.ball.position.y + game.ball.radius > game.canvas.height) {
        game.isGameOver = true;
      }
    }

// ブロックとの衝突判定
    function collisionDetection() {
      game.blocks.forEach(function (block, index) {
        if (
          game.ball.position.x > block.position.x &&
          game.ball.position.x < block.position.x + block.width &&
          game.ball.position.y + game.ball.radius > block.position.y &&
          game.ball.position.y + game.ball.radius < block.position.y + block.height
        ) {
          game.ball.velocity.y *= -1;
          game.blocks.splice(index, 1);
        }
      });
    }

// 描画
    function draw() {
      // キャンバスをクリア
      game.context.clearRect(0, 0, game.canvas.width, game.canvas.height);

// パドルを描画
      game.context.fillStyle = game.paddle.color;
      game.context.fillRect(game.paddle.position.x, game.paddle.position.y, game.paddle.width, game.paddle.height);

// ボールを描画
      game.context.beginPath();
      game.context.arc(game.ball.position.x, game.ball.position.y, game.ball.radius, 0, Math.PI * 2, false);
      game.context.fillStyle = game.ball.color;
      game.context.fill();
      game.context.closePath();

// ブロックを描画
      game.blocks.forEach(function (block) {
        game.context.fillStyle = block.color;
        game.context.fillRect(block.position.x, block.position.y, block.width, block.height);
      });
    }

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