見出し画像

やっぱりJavaScript! - やっぱりゲーム！6

donguri

ブロック崩しのブロックを配置するのですが、配置する座標を入れていくための配列を利用します。

横が5列、縦に3行を作ります。

二次元配列で座標を指定するためにまず座標(x,y) = (0,0)の空の入れ物を作ります。

const brickRowCount = 3;
const brickColumnCount = 5;

const bricks = [];
for (let c = 0; c < brickColumnCount; c++) {
  bricks[c] = [];
  for (let r = 0; r < brickRowCount; r++) {
   　 bricks[c][r] = { x: 0, y: 0 };
    
  }
}


console.log(bricks)

出力は

[[[object Object] {
  x: 0,
  y: 0
}, [object Object] {
  x: 0,
  y: 0
}, [object Object] {
  x: 0,
  y: 0
}], [[object Object] {
  x: 0,
  y: 0
}, [object Object] {
  x: 0,
  y: 0
}, [object Object] {
  x: 0,
  y: 0
}], [[object Object] {
  x: 0,
  y: 0
}, [object Object] {
  x: 0,
  y: 0
}, [object Object] {
  x: 0,
  y: 0
}], [[object Object] {
  x: 0,
  y: 0
}, [object Object] {
  x: 0,
  y: 0
}, [object Object] {
  x: 0,
  y: 0
}], [[object Object] {
  x: 0,
  y: 0
}, [object Object] {
  x: 0,
  y: 0
}, [object Object] {
  x: 0,
  y: 0
}]]

15個の座標ができました。これに一つ一つのブロックの座標を入れていきます。

ブロックを作ります。まず変数としてブロックの縦横余白など以下用意します。

const brickWidth = 75;
const brickHeight = 20;
const brickPadding = 10;
const brickOffsetTop = 30;
const brickOffsetLeft = 30;

関数です。

function drawBricks() {
  for (let c = 0; c < brickColumnCount; c++) {
    for (let r = 0; r < brickRowCount; r++) {
      bricks[c][r].x = 0;
      bricks[c][r].y = 0;
      ctx.beginPath();
      ctx.rect(0, 0, brickWidth, brickHeight);
      ctx.fillStyle = "#0095DD";
      ctx.fill();
      ctx.closePath();
    }
  }
}

ブロックの座標は

  bricks[c][r].x = 0;
  bricks[c][r].y = 0;

で指定されているので、この状態では1つのブロックしかできません

座標をループするごとにずらしていきます。

const brickX = c * (brickWidth + brickPadding) + brickOffsetLeft;
const brickY = r * (brickHeight + brickPadding) + brickOffsetTop;

これを入れ込んで実行するとうまくいきます。

function drawBricks() {
  for (let c = 0; c < brickColumnCount; c++) {
    for (let r = 0; r < brickRowCount; r++) {
      const brickX = c * (brickWidth + brickPadding) + brickOffsetLeft;
      const 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();
    }
  }
}

全コードです

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var ballRadius = 10;
var x = canvas.width/2;
var y = canvas.height-30;
var dx = 2;
var dy = -2;
var paddleHeight = 10;
var paddleWidth = 75;
var paddleX = (canvas.width-paddleWidth)/2;
var rightPressed = false;
var leftPressed = false;
var brickRowCount = 3;
var brickColumnCount = 5;
var brickWidth = 75;
var brickHeight = 20;
var brickPadding = 10;
var brickOffsetTop = 30;
var brickOffsetLeft = 30;

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 };
    }
}

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;
    }
}

function drawBall() {
    ctx.beginPath();
    ctx.arc(x, y, ballRadius, 0, Math.PI*2);
    ctx.fillStyle = "#0095DD";
    ctx.fill();
    ctx.closePath();
}
function drawPaddle() {
    ctx.beginPath();
    ctx.rect(paddleX, canvas.height-paddleHeight, paddleWidth, paddleHeight);
    ctx.fillStyle = "#0095DD";
    ctx.fill();
    ctx.closePath();
}
function drawBricks() {
    for(var c=0; c<brickColumnCount; c++) {
        for(var r=0; r<brickRowCount; r++) {
            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 draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawBricks();
    drawBall();
    drawPaddle();
    
    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) {
           if(y= y-paddleHeight){
            dy = -dy  ;
			 }
        }
        else {
            alert("GAME OVER");
            document.location.reload();
            clearInterval(interval); // Needed for Chrome to end game
        }
    }
    
    if(rightPressed && paddleX < canvas.width-paddleWidth) {
        paddleX += 7;
    }
    else if(leftPressed && paddleX > 0) {
        paddleX -= 7;
    }
    
    x += dx;
    y += dy;
}

var interval = setInterval(draw, 10);



参考　二次元配列の挙動

JavaScriptで九九の計算をしてみます。

let bricks = 0;
  

for (let c = 1; c < 10; c++) {
  
  for (let r = 1; r < 10; r++) {

    bricks = c*r;

    
    console.log(bricks)
  }
}

これを出力すると

1
1
2
3
4
・
・
18
27
36
45
54
63
72
81

と縦にずらっと並んで出力されますがこれが

bricks = c*r;

"c"には"1"から"9"が入ってきます。その数字に対して"r"に入っていく"1"から"9"を掛けていきます。
例えばcが"1"のが入っているときに、"r"の"1"から"9"を掛けていきます。

1 * 1
1 * 2
・
・
1 * 9

これが終わると"c"は"2"が入り、"r"は"1"から"9"が入り順次掛けていきます。

2 * 1
2 * 2
・
・
2 * 9

これを"c"が"9"になるまで繰り返します。

これをpythonで作ると

for i in range(1,10):
    print('\n', end='')
    for j in range(1,10):
         print(f'{i*j:4d}', end='')

出力すると

   1   2   3   4   5   6   7   8   9
   2   4   6   8  10  12  14  16  18
   3   6   9  12  15  18  21  24  27
   4   8  12  16  20  24  28  32  36
   5  10  15  20  25  30  35  40  45
   6  12  18  24  30  36  42  48  54
   7  14  21  28  35  42  49  56  63
   8  16  24  32  40  48  56  64  72
   9  18  27  36  45  54  63  72  81


この記事が気に入ったらサポートをしてみませんか？