我需要随意将砖块做成红色或蓝色

时间:2017-02-21 20:25:09

标签: javascript

这里有所有代码(变量名称正确,因此你应该理解它)

问题在于它会重置所有砖块'颜色随机变为红色或蓝色,但我希望它为每个砖提供随机颜色(70%的时间为蓝色,30%的时间为红色)。



var canvas, canvasContext;

var ballX = 75,
  ballY = 75;
var ballSpeedX = 3,
  ballSpeedY = 3;
var ballR = 7;

const brickW = 80;
const brickH = 20;
const brickCols = Math.floor(800 / brickW);
const brickRows = Math.floor(600 / (brickH * 3));
const brickGap = 1;
var brickGrid = new Array(brickCols * brickRows);
var bricksLeft = 0;

const paddleW = 100,
  paddleH = 10;
var paddleX = 400,
  paddleY = 600;
const distanceBP = 60;

var mouseX, mouseY;

function updateMousePos(evt) {
  var rect = canvas.getBoundingClientRect(); // this is for adjustments only (getting the mouse coordinates even if the page is scrollable)
  var root = document.documentElement;

  mouseX = evt.clientX - rect.left - root.scrollLeft; // clientX is the X of mouse 
  mouseY = evt.clientY - rect.top - root.scrollTop;

  paddleX = mouseX - paddleW / 2;
  //cheat
  //ballX = mouseX;
  //ballY = mouseY;
}

function brickReset() {
  bricksLeft = 0;
  var i;
  for (i = 0; i < 3 * brickCols; i++) {
    brickGrid[i] = false;
  }
  for (; i < brickCols * brickRows; i++) {
    brickGrid[i] = true;
    bricksLeft++;
    randBrickColor();
  }
}

window.onload = function() {
  canvas = document.getElementById("myCanvas");
  canvasContext = canvas.getContext("2d");

  var fps = 60;
  setInterval(updateAll, 1000 / fps);

  canvas.addEventListener("mousemove", updateMousePos); // everytime the mouse moves we call the function updateMousePos()
  brickReset();
  ballReset();
}

function updateAll() {
  drawAll();
  moveAll();
  console.log(brickColor);
}

function ballReset() {
  ballX = canvas.width / 2;
  ballY = canvas.height / 2;
}

function ballMove() {
  ballX += ballSpeedX;
  ballY += ballSpeedY;
  //COLLISION

  //left
  if (ballX - ballR < 0 && ballSpeedX < 0.0) {
    ballSpeedX = -ballSpeedX;
  }
  //right
  if (ballX + ballR > canvas.width && ballSpeedX > 0.0) {
    ballSpeedX = -ballSpeedX;
  }
  //top
  if (ballY - ballR < 0 && ballSpeedY < 0.0) {
    ballSpeedY = -ballSpeedY;
  }

  //bottom
  if (ballY > canvas.height) {
    ballReset();
    brickReset();
  }
}

function isBrickAtColRow(col, row) {
  if (col >= 0 && col < brickCols &&
    row >= 0 && row < brickRows) {
    var brickIndexUnderCoord = rowColToArrayIndex(col, row);
    return brickGrid[brickIndexUnderCoord];

  } else {
    return false;
  }

}

function ballBrickHandling() {
  var ballBrickCol = Math.floor(ballX / brickW);
  var ballBrickRow = Math.floor(ballY / brickH);
  var brickIndexUnderBall = rowColToArrayIndex(ballBrickCol, ballBrickRow);

  if (brickIndexUnderBall >= 0 &&
    brickIndexUnderBall < brickCols * brickRows) {

    if (isBrickAtColRow(ballBrickCol, ballBrickRow)) {
      brickGrid[brickIndexUnderBall] = false;
      bricksLeft--;
      //console.log( bricksLeft)

      var prevBallX = ballX - ballSpeedX;
      var prevBallY = ballY - ballSpeedY;
      var prevBrickCol = Math.floor(prevBallX / brickW);
      var prevBrickRow = Math.floor(prevBallY / brickH);

      var bothTestsFailed = true;

      if (prevBrickCol != ballBrickCol) {

        if (isBrickAtColRow(prevBrickCol, ballBrickRow) == false) {
          ballSpeedX = -ballSpeedX;
          bothTestsFailed = false;
        }
      }
      if (prevBrickRow != ballBrickRow) {

        if (isBrickAtColRow(ballBrickCol, prevBrickRow) == false) {
          ballSpeedY = -ballSpeedY;
          bothTestsFailed = false;
        }
      }

      if (bothTestsFailed) {
        ballSpeedX = -ballSpeedX;
        ballSpeedY = -ballSpeedY;
      }
    }
  }
}

function ballPaddleHandling() {
  var paddleTopEdgeY = canvas.height - distanceBP;
  var paddleBottomEdgeY = paddleTopEdgeY + paddleH;
  var paddleLeftEdgeX = paddleX;
  var paddleRightEdgeX = paddleLeftEdgeX + paddleW;
  if (ballY + ballR > paddleTopEdgeY &&
    ballY - ballR < paddleBottomEdgeY &&
    ballX + ballR > paddleLeftEdgeX &&
    ballX - ballR < paddleRightEdgeX) {

    ballSpeedY *= -1;

    var centerOfPaddleX = paddleX + paddleW / 2;
    var ballDistFromPadlleCenterX = ballX - centerOfPaddleX;
    ballSpeedX = ballDistFromPadlleCenterX * 0.2;

    if (bricksLeft == 0) {
      brickReset();
    }
  }

}

function moveAll() {
  //console.log("X: "+ballSpeedX,"Y: "+ballSpeedY);

  ballMove();

  ballBrickHandling();

  ballPaddleHandling();

}

function rowColToArrayIndex(col, row) {
  return col + brickCols * row;
}

// Random COLOR
var brickColor = "blue";

function randBrickColor() {

  if (Math.random() > 0.7) {
    brickColor = "red";
  } else brickColor = "blue";

  return brickColor;
}
//end of Random COLOR

function drawBricks() {
  for (var eachRow = 0; eachRow < brickRows; eachRow++) {
    for (var eachCol = 0; eachCol < brickCols; eachCol++) {

      var arrayIndex = brickCols * eachRow + eachCol;

      if (brickGrid[arrayIndex]) {
        colorRect(brickW * eachCol, brickH * eachRow, brickW - brickGap, brickH - brickGap, brickColor);
      }
    }
  }
}

function drawAll() {
  // Black Screen
  colorRect(0, 0, canvas.width, canvas.height, "black");
  // Ball
  colorCircle(ballX, ballY, ballR, "white");
  // Paddle
  colorRect(paddleX, paddleY - distanceBP, paddleW, paddleH, "white");
  // Bricks
  drawBricks();

  colorText(mouseX + "," + mouseY, mouseX, mouseY, "yellow");
}

function colorRect(topLeftX, topLeftY, boxWidth, boxHeight, fillColor) {
  canvasContext.fillStyle = fillColor;
  canvasContext.fillRect(topLeftX, topLeftY, boxWidth, boxHeight);
}

function colorCircle(centerX, centerY, radius, fillColor) {
  canvasContext.fillStyle = fillColor;
  canvasContext.beginPath();
  canvasContext.arc(centerX, centerY, radius, 0, Math.PI * 2, true);
  canvasContext.fill();
}

function colorText(showWords, textX, textY, fillColor) {
  canvasContext.fillStyle = fillColor;
  canvasContext.fillText(showWords, textX, textY);
}
&#13;
<canvas id="myCanvas" width="800" height="600"></canvas>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

您可以为每个砖设置一次颜色,但在进行任何绘制之前会覆盖全局变量。因此,当它到达drawBricks时,设置砖颜色的循环已经完成,并且变量在整个绘图中保持不变。

由于您不断重新绘制砖块(我不确定是否有必要),我建议您在randBrickColor函数中保存一个随机颜色的二维数组,而不仅仅是变量。

变更摘要:

  • randBrickColor();来电置于brickReset()
  • 循环之外
  • 将变量brickColors(而非brickColor)初始化为数组。例如:var brickColors = [];
  • 更改功能randBrickColor,使其循环显示brickRowsbrickCols,并将随机颜色存储在brickColors[eachRow][eachCol]下。
  • brickColors[eachRow][eachCol]函数中使用drawBricks选择每个砖块的颜色。

请参阅下面的代码段。

var canvas, canvasContext;

var ballX = 75,
  ballY = 75;
var ballSpeedX = 3,
  ballSpeedY = 3;
var ballR = 7;

const brickW = 80;
const brickH = 20;
const brickCols = Math.floor(800 / brickW);
const brickRows = Math.floor(600 / (brickH * 3));
const brickGap = 1;
var brickGrid = new Array(brickCols * brickRows);
var bricksLeft = 0;

const paddleW = 100,
  paddleH = 10;
var paddleX = 400,
  paddleY = 600;
const distanceBP = 60;

var mouseX, mouseY;

function updateMousePos(evt) {
  var rect = canvas.getBoundingClientRect(); // this is for adjustments only (getting the mouse coordinates even if the page is scrollable)
  var root = document.documentElement;

  mouseX = evt.clientX - rect.left - root.scrollLeft; // clientX is the X of mouse 
  mouseY = evt.clientY - rect.top - root.scrollTop;

  paddleX = mouseX - paddleW / 2;
  //cheat
  //ballX = mouseX;
  //ballY = mouseY;
}

function brickReset() {
  bricksLeft = 0;
  var i;
  for (i = 0; i < 3 * brickCols; i++) {
    brickGrid[i] = false;
  }
  for (; i < brickCols * brickRows; i++) {
    brickGrid[i] = true;
    bricksLeft++;
  }
  randBrickColor();
}

window.onload = function() {
  canvas = document.getElementById("myCanvas");
  canvasContext = canvas.getContext("2d");

  var fps = 60;
  setInterval(updateAll, 1000 / fps);

  canvas.addEventListener("mousemove", updateMousePos); // everytime the mouse moves we call the function updateMousePos()
  brickReset();
  ballReset();
}

function updateAll() {
  drawAll();
  moveAll();
}

function ballReset() {
  ballX = canvas.width / 2;
  ballY = canvas.height / 2;
}

function ballMove() {
  ballX += ballSpeedX;
  ballY += ballSpeedY;
  //COLLISION

  //left
  if (ballX - ballR < 0 && ballSpeedX < 0.0) {
    ballSpeedX = -ballSpeedX;
  }
  //right
  if (ballX + ballR > canvas.width && ballSpeedX > 0.0) {
    ballSpeedX = -ballSpeedX;
  }
  //top
  if (ballY - ballR < 0 && ballSpeedY < 0.0) {
    ballSpeedY = -ballSpeedY;
  }

  //bottom
  if (ballY > canvas.height) {
    ballReset();
    brickReset();
  }
}

function isBrickAtColRow(col, row) {
  if (col >= 0 && col < brickCols &&
    row >= 0 && row < brickRows) {
    var brickIndexUnderCoord = rowColToArrayIndex(col, row);
    return brickGrid[brickIndexUnderCoord];

  } else {
    return false;
  }

}

function ballBrickHandling() {
  var ballBrickCol = Math.floor(ballX / brickW);
  var ballBrickRow = Math.floor(ballY / brickH);
  var brickIndexUnderBall = rowColToArrayIndex(ballBrickCol, ballBrickRow);

  if (brickIndexUnderBall >= 0 &&
    brickIndexUnderBall < brickCols * brickRows) {

    if (isBrickAtColRow(ballBrickCol, ballBrickRow)) {
      brickGrid[brickIndexUnderBall] = false;
      bricksLeft--;
      //console.log( bricksLeft)

      var prevBallX = ballX - ballSpeedX;
      var prevBallY = ballY - ballSpeedY;
      var prevBrickCol = Math.floor(prevBallX / brickW);
      var prevBrickRow = Math.floor(prevBallY / brickH);

      var bothTestsFailed = true;

      if (prevBrickCol != ballBrickCol) {

        if (isBrickAtColRow(prevBrickCol, ballBrickRow) == false) {
          ballSpeedX = -ballSpeedX;
          bothTestsFailed = false;
        }
      }
      if (prevBrickRow != ballBrickRow) {

        if (isBrickAtColRow(ballBrickCol, prevBrickRow) == false) {
          ballSpeedY = -ballSpeedY;
          bothTestsFailed = false;
        }
      }

      if (bothTestsFailed) {
        ballSpeedX = -ballSpeedX;
        ballSpeedY = -ballSpeedY;
      }
    }
  }
}

function ballPaddleHandling() {
  var paddleTopEdgeY = canvas.height - distanceBP;
  var paddleBottomEdgeY = paddleTopEdgeY + paddleH;
  var paddleLeftEdgeX = paddleX;
  var paddleRightEdgeX = paddleLeftEdgeX + paddleW;
  if (ballY + ballR > paddleTopEdgeY &&
    ballY - ballR < paddleBottomEdgeY &&
    ballX + ballR > paddleLeftEdgeX &&
    ballX - ballR < paddleRightEdgeX) {

    ballSpeedY *= -1;

    var centerOfPaddleX = paddleX + paddleW / 2;
    var ballDistFromPadlleCenterX = ballX - centerOfPaddleX;
    ballSpeedX = ballDistFromPadlleCenterX * 0.2;

    if (bricksLeft == 0) {
      brickReset();
    }
  }

}

function moveAll() {
  //console.log("X: "+ballSpeedX,"Y: "+ballSpeedY);

  ballMove();

  ballBrickHandling();

  ballPaddleHandling();

}

function rowColToArrayIndex(col, row) {
  return col + brickCols * row;
}

// Random COLOR
var brickColors = [];

function randBrickColor() {
  for (var eachRow = 0; eachRow < brickRows; eachRow++) {
    brickColors[eachRow] = [];
    for (var eachCol = 0; eachCol < brickCols; eachCol++) {
      if (Math.random() > 0.7) {
        brickColors[eachRow][eachCol] = "red";
      } else brickColors[eachRow][eachCol] = "blue";
    }
  }
}
//end of Random COLOR

function drawBricks() {
  for (var eachRow = 0; eachRow < brickRows; eachRow++) {
    for (var eachCol = 0; eachCol < brickCols; eachCol++) {

      var arrayIndex = brickCols * eachRow + eachCol;

      if (brickGrid[arrayIndex]) {
        colorRect(brickW * eachCol, brickH * eachRow, brickW - brickGap, brickH - brickGap, brickColors[eachRow][eachCol]);
      }
    }
  }
}

function drawAll() {
  // Black Screen
  colorRect(0, 0, canvas.width, canvas.height, "black");
  // Ball
  colorCircle(ballX, ballY, ballR, "white");
  // Paddle
  colorRect(paddleX, paddleY - distanceBP, paddleW, paddleH, "white");
  // Bricks
  drawBricks();

  colorText(mouseX + "," + mouseY, mouseX, mouseY, "yellow");
}

function colorRect(topLeftX, topLeftY, boxWidth, boxHeight, fillColor) {
  canvasContext.fillStyle = fillColor;
  canvasContext.fillRect(topLeftX, topLeftY, boxWidth, boxHeight);
}

function colorCircle(centerX, centerY, radius, fillColor) {
  canvasContext.fillStyle = fillColor;
  canvasContext.beginPath();
  canvasContext.arc(centerX, centerY, radius, 0, Math.PI * 2, true);
  canvasContext.fill();
}

function colorText(showWords, textX, textY, fillColor) {
  canvasContext.fillStyle = fillColor;
  canvasContext.fillText(showWords, textX, textY);
}
<canvas id="myCanvas" width="800" height="600"></canvas>