在 javascript 上制作“Atari Breakout”类型的游戏。
我想知道如何创建当被球击中时消失的砖块，而不是手动绘制每一块砖块。手动，我的意思是创建每一块砖，并为每一块砖使用 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>
DIEA1回答
-
子衿沉夜
您可以定义将创建砖对象的对象构造函数。然后，您可以从此对象读取砖块的属性以进行渲染。function Brick(x,y,width,height){ // as inputs you take the position and sizethis.x = x; // adding attributes to the object based on the values that were enteredthis.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 arrayvar brickWidth = 30;//the default dimensions of the bricks. Change these to be whatever you wantvar brickHeight = 10;var xBrickPadding = 5;//the default spacing between bricksvar yBrickPadding = 5;var minX = 0; // the dimensions of the area in which you want your bricks to bevar 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 }}这是解决您的问题的一种可能方法。希望能帮助到你！
随时随地看视频慕课网APP
相关分类
JavaScript