2
这里的所有代码（变量都是正确的，所以你应该明白吧）我需要做砖随机红色或蓝色
的问题是，它随机重置所有砖头颜色为红色或蓝色，但我想它给一个随机的颜色每个砖代替（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);
}<canvas id="myCanvas" width="800" height="600"></canvas>
提供更多的细节，这些是什么砖？你希望他们被展示在哪里？ –
你必须遍历每一块砖块 –
如果没有看到更多的代码，很难说，但是你对于你返回的brickColor做什么？看起来您在调用randBrickColor时设置了全局颜色，但实际上并未在循环中使用它。 – Forklift