AI game creator

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

No:688

336

←

Prev Next

→

debug
Developer User3082｜Date and time 23/6/17 12:56:19
Build time 95.602 sec｜Game capacity 6.203KB｜

Script

テトリス風のブロック崩しゲームを作成しました。以下が実装したコードです。

このゲームは、縦に3列、横に5列のブロックを壊していくブロック崩しゲームです。スマホでの操作も可能で、左右の矢印ボタンでパドルを動かすことができます。ブロックの色は赤、緑、青の3種類あり、スコアを獲得することで得点が加算されます。また、3つの残機を持ち、ボールをパドルで跳ね返せなかった場合に残機を減らします。残機が0になるとゲームオーバーとなります。全てのブロックを壊すと、ゲームクリアになります。

←

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>
</head>
<body>
  <canvas id="canvas" width=300 height=400></canvas>
  <script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');

let ballX = canvas.width/2; // ボールのX座標
    let ballY = canvas.height-30; // ボールのY座標
    let ballDx = 2; // ボールのX方向の移動量
    let ballDy = -2; // ボールのY方向の移動量

const paddleHeight = 10; // パドルの高さ
    const paddleWidth = 75; // パドルの幅
    let paddleX = (canvas.width-paddleWidth)/2; // パドルのX座標

const brickRowCount = 3; // ブロックの縦の数
    const brickColumnCount = 5; // ブロックの横の数
    const brickWidth = 60; // ブロックの幅
    const brickHeight = 20; // ブロックの高さ
    const brickPadding = 10; // ブロック間の間隔
    const brickOffsetTop = 30; // ブロックの上端のオフセット
    const brickOffsetLeft = 30; // ブロックの左端のオフセット

let score = 0; // スコア
    let lives = 3; // 残機

function drawBall() {
      ctx.beginPath();
      ctx.arc(ballX, ballY, 10, 0, Math.PI*2);
      ctx.fillStyle = 'orange';
      ctx.fill();
      ctx.closePath();
    }

function drawPaddle() {
      ctx.beginPath();
      ctx.rect(paddleX, canvas.height-paddleHeight, paddleWidth, paddleHeight);
      ctx.fillStyle = 'blue';
      ctx.fill();
      ctx.closePath();
    }

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 draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height); // キャンバスをクリアする
      drawBall();
      drawPaddle();
      drawBricks();
      drawScore();
      drawLives();

// ボールの移動
      ballX += ballDx;
      ballY += ballDy;

// 壁に当たった時の処理
      if(ballX + ballDx > canvas.width - 10 || ballX + ballDx < 10) {
        ballDx = -ballDx;
      }
      if(ballY + ballDy < 10) {
        ballDy = -ballDy;
      } else if(ballY + ballDy > canvas.height - 10) {
        if(ballX > paddleX && ballX < paddleX+paddleWidth) {
          ballDy = -ballDy;
        } else {
          lives--;
          if(!lives) {
            alert('Game Over!');
            document.location.reload();
          } else {
            ballX = canvas.width/2;
            ballY = canvas.height-30;
            paddleX = (canvas.width-paddleWidth)/2;
          }
        }
      }

// パドルとの当たり判定
      if(ballY === canvas.height - paddleHeight - 10 && ballX >= paddleX && ballX <= paddleX + paddleWidth) {
        ballDy = -ballDy;
      }

// ブロックとの当たり判定
      for(let c=0; c<brickColumnCount; c++) {
        for(let r=0; r<brickRowCount; r++) {
          const brick = bricks[c][r];
          if(brick.status === 1) {
            if(ballX > brick.x && ballX < brick.x+brickWidth && ballY > brick.y && ballY < brick.y+brickHeight) {
              ballDy = -ballDy;
              brick.status = 0;
              score++;
              if(score === brickRowCount*brickColumnCount) {
                alert('You Win!');
                document.location.reload();
              }
            }
          }
        }
      }

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

requestAnimationFrame(draw); // 次のアニメーションフレームを要求する
    }

let rightPressed = false;
    let leftPressed = false;

draw(); // ゲームの描画を開始する
  </script>
</body>
</html>