我需要做砖随机红色或蓝色

问题描述：

这里的所有代码（变量都是正确的，所以你应该明白吧）我需要做砖随机红色或蓝色

的问题是，它随机重置所有砖头颜色为红色或蓝色，但我想它给一个随机的颜色每个砖代替（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

答

你每砖颜色设置一次，但你覆盖全局变量，你做任何绘图之前。因此，当它到达drawBricks时，设置砖颜色的循环已经完成，并且变量在整个图形中保持不变。

由于您连续重新绘制砖块（我不确定是否有必要）我建议您在随机颜色中保存一个二维数组，而不是仅仅是一个变量。

的更改摘要：

把randBrickColor();通话外循环中brickReset()。
以数组形式初始化变量brickColors（而不是brickColor）。例如：
更改功能randBrickColor，以便通过brickRows和brickCols循环并将随机颜色存储在brickColors[eachRow][eachCol]下。
在drawBricks函数中使用brickColors[eachRow][eachCol]来选取每块砖的颜色。

查看下面的代码片段。

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>

我需要做砖随机红色或蓝色

相关推荐