building block scrabble's game

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

No:2258

1136

←

Prev Next

→

building block scrabble
Developer User3527｜Date and time 23/6/20 18:49:30
Build time 74.212 sec｜Game capacity 6.004KB｜

Script

building block scrabbleは、while breaking enemy blocks.、Hitting the ball back、This is a game in which you control the paddle with the mouse or keys. The program consists of a single HTML file and、It is implemented in JavaScript. It is based on the assumption that the user operates the system with a smartphone, and、It uses a lot of expressive characters. The game has a、ball、paddle、block (lump of something)、score、It includes a remaining aircraft counter and more. Scores are earned by breaking blocks and、The game is over when the remaining aircraft reaches zero.

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ブロック崩し</title>
  <style>
    * {
      box-sizing: border-box;
    }
    canvas {
      border: 2px solid black;
    }
  </style>
</head>
<body>
  <canvas id="canvas" width="320" height="480"></canvas>
</body>
<script>
  // ゲームの変数
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  var ballRadius = 10;
  var ballColor = "yellow";
  var x = canvas.width / 2;
  var y = canvas.height - 30;
  var dx = 3;
  var dy = -3;
  var paddleHeight = 10;
  var paddleWidth = 75;
  var paddleColor = "blue";
  var paddleX = (canvas.width - paddleWidth) / 2;
  var rightPressed = false;
  var leftPressed = false;
  var brickRowCount = 4;
  var brickColumnCount = 5;
  var brickWidth = 75;
  var brickHeight = 20;
  var brickPadding = 10;
  var brickOffsetTop = 30;
  var brickOffsetLeft = 30;
  var score = 0;
  var lives = 3;

// 練習問題：マウス移動によるパドル操作
  // document.addEventListener("mousemove", mouseMoveHandler, false);
  // function mouseMoveHandler(e) {
  //   var relativeX = e.clientX - canvas.offsetLeft;
  //   if (relativeX > 0 && relativeX < canvas.width) {
  //     paddleX = relativeX - paddleWidth / 2;
  //   }
  // }

// キー入力によるパドル操作
  document.addEventListener("keydown", keyDownHandler, false);
  document.addEventListener("keyup", keyUpHandler, false);
  function keyDownHandler(e) {
    if (e.key == "Right" || e.key == "ArrowRight") {
      rightPressed = true;
    } else if (e.key == "Left" || e.key == "ArrowLeft") {
      leftPressed = true;
    }
  }
  function keyUpHandler(e) {
    if (e.key == "Right" || e.key == "ArrowRight") {
      rightPressed = false;
    } else if (e.key == "Left" || e.key == "ArrowLeft") {
      leftPressed = false;
    }
  }

// ブロック配列の初期化
  var bricks = [];
  for (var c = 0; c < brickColumnCount; c++) {
    bricks[c] = [];
    for (var r = 0; r < brickRowCount; r++) {
      bricks[c][r] = { x: 0, y: 0, status: 1 };
    }
  }

// スコア表示
  function drawScore() {
    ctx.font = "16px Arial";
    ctx.fillStyle = "black";
    ctx.fillText("Score: " + score, 8, 20);
  }

// 残機表示
  function drawLives() {
    ctx.font = "16px Arial";
    ctx.fillStyle = "black";
    ctx.fillText("Lives: " + lives, canvas.width - 65, 20);
  }

// ボール描画
  function drawBall() {
    ctx.beginPath();
    ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
    ctx.fillStyle = ballColor;
    ctx.fill();
    ctx.closePath();
  }

// パドル描画
  function drawPaddle() {
    ctx.beginPath();
    ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
    ctx.fillStyle = paddleColor;
    ctx.fill();
    ctx.closePath();
  }

// ブロック描画
  function drawBricks() {
    for (var c = 0; c < brickColumnCount; c++) {
      for (var r = 0; r < brickRowCount; r++) {
        if (bricks[c][r].status == 1) {
          var brickX = (c * (brickWidth + brickPadding)) + brickOffsetLeft;
          var brickY = (r * (brickHeight + brickPadding)) + brickOffsetTop;
          bricks[c][r].x = brickX;
          bricks[c][r].y = brickY;
          ctx.beginPath();
          ctx.rect(brickX, brickY, brickWidth, brickHeight);
          ctx.fillStyle = "#0095DD";
          ctx.fill();
          ctx.closePath();
        }
      }
    }
  }

// ブロック衝突判定
  function collisionDetection() {
    for (var c = 0; c < brickColumnCount; c++) {
      for (var r = 0; r < brickRowCount; r++) {
        var b = bricks[c][r];
        if (b.status == 1) {
          if (x > b.x && x < b.x + brickWidth && y > b.y && y < b.y + brickHeight) {
            dy = -dy;
            b.status = 0;
            score++;
            if (score == brickRowCount * brickColumnCount) {
              alert("You win!");
              document.location.reload();
            }
          }
        }
      }
    }
  }

// ゲームオーバー処理
  function gameOver() {
    if (lives == 0) {
      alert("Game over!");
      document.location.reload();
    }
  }

// ゲームループ
  function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawBricks();
    drawBall();
    drawPaddle();
    drawScore();
    drawLives();
    collisionDetection();
    gameOver();

// ボール位置更新
    x += dx;
    y += dy;

// 壁との衝突判定
    if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
      dx = -dx;
    }
    if (y + dy < ballRadius) {
      dy = -dy;
    } else if (y + dy > canvas.height - ballRadius) {
      // パドルとの衝突判定
      if (x > paddleX && x < paddleX + paddleWidth) {
        dy = -dy;
      } else {
        lives--;
        if (!lives) {
          gameOver();
        } else {
          x = canvas.width / 2;
          y = canvas.height - 30;
          dx = 3;
          dy = -3;
          paddleX = (canvas.width - paddleWidth) / 2;
        }
      }
    }

// パドル移動
    if (rightPressed && paddleX < canvas.width - paddleWidth) {
      paddleX += 7;
    } else if (leftPressed && paddleX > 0) {
      paddleX -= 7;
    }

requestAnimationFrame(draw);
  }

// 初期化
  draw();
</script>
</html>

ブロック崩しは、敵のブロックを壊しながら、ボールを打ち返し、マウスまたはキーでパドルを操作するゲームです。 このプログラムは1枚のHTMLファイルで構成されており、JavaScriptで実装されています。 ユーザーがスマホで操作することを前提としており、表情文字を多く使用しています。 ゲームには、ボール、パドル、ブロック、スコア、残機カウンターなどが含まれています。 ブロックを壊すことでスコアを獲得し、残機が0になるとゲームオーバーとなります。