我想知道如何创建当被球击中时消失的砖块，而不是手动绘制每一块砖块。手动，我的意思是创建每一块砖，并为每一块砖使用 if 语句来检查球是否击中。我已经完成了所有其他事情，这是我到目前为止的代码：提前谢谢你...... <body> <canvas height="400" width="400" id="myCanvas"></canvas> <script> "use strict" var a=document.getElementById("myCanvas"); var c=a.getContext("2d"); var platformX=170; var speed=0; var ballX=200 var ballY=50; var ballSpeed=0; var ballBounce=0; var ballRadius=10; var interval=window.setInterval(createBall,17); var bullets=[]; c.fillStyle="white"; c.beginPath(); c.rect(platformX,350,40,30); c.fill(); c.closePath(); c.fillStyle="green"; c.beginPath(); c.arc(200,ballY,10,0,2*Math.PI); c.fill(); c.closePath(); window.onkeydown=function(e){ if(e.keyCode==37){ speed=-6; } if(e.keyCode==39){ speed=6; } if(e.keyCode==32){ ballSpeed=2; } } window.onkeyup=function(e){ if(e.keyCode==37){ speed=0; } if(e.keyCode==39){ speed=0; } } function movePlatform(){ platformX+=speed; c.clearRect(0,350,400,50); c.fillStyle="white"; c.beginPath(); c.rect(platformX,350,80,20); c.fill(); c.closePath(); } window.setInterval(movePlatform,17); function createBall(){ ballY+=ballSpeed; ballX+=ballBounce; c.clearRect(0,0,400,350); c.fillStyle="green"; c.beginPath(); c.arc(ballX,ballY,ballRadius,0,2*Math.PI); c.fill(); </script></body>
1 回答
子衿沉夜
TA贡献1828条经验 获得超3个赞
您可以定义将创建砖对象的对象构造函数。然后，您可以从此对象读取砖块的属性以进行渲染。
function Brick(x,y,width,height){ // as inputs you take the position and size
this.x = x; // adding attributes to the object based on the values that were entered
this.y = y;
this.width = width;
this.height = height;
}
当我们要创建一个brick对象时，我们调用函数如下：
var brick = new Brick(x,y,width,height); //whatever values you want it to have
解决方案的第二部分是将所有砖对象存储在一个数组中：
var bricks = [];//initialise the array
var brickWidth = 30;//the default dimensions of the bricks. Change these to be whatever you want
var brickHeight = 10;
var xBrickPadding = 5;//the default spacing between bricks
var yBrickPadding = 5;
var minX = 0; // the dimensions of the area in which you want your bricks to be
var maxX = 100;
var minY = 0;
var maxY = 50;
//when you want to add your bricks to the array, probably at the start of the game or whenever you refresh, use a loop like this:
for(let x = minX; x<maxX; x+= brickWidth+xBrickPadding){ //loop over the x coordinates
for(let y = minY; y<maxY; y+= brickHeight+yBrickPadding){//loop over the y coordinate
bricks.push(new Brick(x,y,brickWidth,brickHeight)); //add our new brick to the array at each x and y position
}
}
我们现在在适当的位置有一个充满砖块的数组，但是我们需要在屏幕上渲染它们。让我们定义一个 renderBricks 函数，这样我们就不必在每个动画帧都渲染它们，只有当我们需要更新它们时：
renderBricks = function(){
for(brick of bricks){//loop over every brick stored in the array
c.beginPath();
c.rect(brick.x,brick.y,brick.width,brick.height);//read the relevant properties from the brick object in order to render it
c.fill();
c.closePath();
}
}
代码的最后一部分是在砖块被击中时移除砖块的逻辑。将此代码添加到您的 createBall 函数中，以便在每次球的位置更改时检查它。
for(brick of bricks){//loop over every brick
if(){//insert your condition here to check if the ball has collided or not. You can use the properties brick.x, brick.y, brick.width and brick.height
bricks.splice(bricks.indexOf(brick),1); //if so, remove the brick from the array
renderBricks(); // then, render the bricks again so the brick no longer appears on the screen
}
}
这是解决您的问题的一种可能方法。希望能帮助到你！
添加回答
举报
0/150
提交
取消