所以基本上我希望红砖有一个额外的弹跳（但不是蓝色的）。这意味着如果我击中它，一旦红砖反射球没有它消失，但是当我第二次击中它时。提前谢谢。
<!DOCTYPE html>
<html>
<head>
<title>Breakout_Game</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script type="text/javascript">
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;
/* //Cheats Help debugging
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();
// Position of the mouse
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);
}
</script>
</body>
</html>
答案 0 :(得分：1)
在ballBrickHandling()替换
brickGrid[brickIndexUnderBall] = false;
bricksLeft--;
与
if(brickColors[ballBrickRow][ballBrickCol] != "red") {
brickGrid[brickIndexUnderBall] = false;
bricksLeft--;
} else brickColors[ballBrickRow][ballBrickCol] = "blue"