javascript - 如何使用 javascript 渲染数组？

Question

我目前正在为大学构建 Atari 突破的复制品。我目前有一个工作球、一个 Racket 和(可能)一些积木。目前，由于 Canvas 在运行时保持空白，因此砖 block 渲染不正确。谁能告诉我哪里出错了(使用“bricks”变量或渲染函数的 bricks 部分)。代码如下:

var canvas = document.getElementById("breakout");
var ctx = canvas.getContext("2d");
var PADDLE_WIDTH_PX = canvas.width / 5;
var PADDLE_HEIGHT_PX = 10;
var PADDLE_SPEED = 450;

var ball = {
  x: canvas.width / 2,   //pixels
  y: canvas.height / 2,  //pixels
  xSpeed: 500,           //pixels per second
  ySpeed: 500,           //pixels per second
  radius: 100  //pixels
}

var paddle = {
//radius: 5,
/*speed: 500,
TopRight: ctx.moveTo(canvas.width / 1.35, canvas.height - (canvas.height / 12.5)),
TopSide: ctx.lineTo(canvas.width / 2, canvas.height - (canvas.height / 12.5)),
RightSide: ctx.lineTo(canvas.width / 1.35, canvas.height - (canvas.height / 27.5)),
BottomLeft: ctx.moveTo(canvas.width / 2, canvas.height - (canvas.height / 27.5)),
LeftSide: ctx.lineTo(canvas.width / 2, canvas.height - (canvas.height / 12.5)),
BottomSide: ctx.lineTo(canvas.width / 1.35, canvas.height - (canvas.height / 27.5))*/
xSpeed: 450,
x: (canvas.width - PADDLE_WIDTH_PX) / 2,
y: canvas.height - PADDLE_HEIGHT_PX
}

var Brick = function() { 
canvas.width / 30 = x;
canvas.height / 50 = y;
var bricks(750);
var location_X(750);
var location_Y(750);
for (int b = 0; b <= 749; b++)
{
    if (b == 0)
    {
        location_X[b] = 0;
        location_Y[b] = 0;
    }
    if (b != 0)
    {
        while (b <= 29)
        {
            location_X[b] = (location_X[b - 1]) + Brick.x;
        }
        while (b <= 49)
        {
            location_Y[b] = (location_Y[b - 1]) + Brick.y;
        }
    }
    switch (b % 10) {
    case 0:
        bricks[b] = firebrick;
    break;
    case 1:
        bricks[b] = gold;
    break;
    case 2:
        bricks[b] = yellow;
    break;
    case 3:
        bricks[b] = green;
    break;
    case 4:
        bricks[b] = fuschia;
    break;
    case 6:
        bricks[b] = palevioletred;
    break;
    case 7:
        bricks[b] = goldenrod;
    break;
    case 8:
        bricks[b] = turquoise;
    break;
    case 9:
        bricks[b] = white;
    break;
    default:
        bricks[b] = thistle;
    break;
    }
}
} 
}

var keysDown = {};
window.addEventListener("keydown",function(e) {
keysDown[e.keyCode] = true;
});
window.addEventListener("keyup",function(e) {
delete keysDown[e.keyCode];
});


function render() {
  //clear the canvas
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  // draw the ball
  ctx.fillStyle = "white";
  ctx.beginPath();
  ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
  ctx.closePath();
  ctx.fill();
  ctx.beginPath();
  //ctx.fillStyle = "red";
  /*ctx.moveTo(canvas.width - (2*paddle.x), canvas.height - (2*paddle.y));
  /*ctx.lineTo(canvas.width / 2, canvas.height - (canvas.height / 12.5));
  ctx.lineTo(canvas.width / 1.35, canvas.height - (canvas.height / 27.5));
  ctx.moveTo(canvas.width / 2, canvas.height - (canvas.height / 27.5));
  ctx.lineTo(canvas.width / 2, canvas.height - (canvas.height / 12.5));
  ctx.lineTo(canvas.width / 1.35, canvas.height - (canvas.height / 27.5));
  ctx.fill();
  ctx.closePath();*/
  /*ctx.lineTo(canvas.width - (2*paddle.x), canvas.height - paddle.y);
  ctx.moveTo(canvas.width - paddle.x, canvas.height - paddle.y);
  ctx.lineTo(canvas.width - paddle.x, canvas.height - (2*paddle.y));
  ctx.lineTo(canvas.width - (2*paddle.x), (canvas.height -paddle.y));*/
  ctx.fillRect(paddle.x, paddle.y, PADDLE_WIDTH_PX, PADDLE_HEIGHT_PX);
  for (int b = 0; b <= 749; b++)
{
    ctx.fillStyle = "Brick.bricks[b]";
    ctx.fillRect(Bricks.location_X[b], Bricks.location_Y[b], Bricks.x, Bricks.y);
}
  /*ctx.closePath();
  ctx.fill();*/
}

function update(elapsed) {
  //update the ball position according to the elapsed time
  ball.y += ball.ySpeed * elapsed;
  ball.x += ball.xSpeed * elapsed;
  /*paddle.TopRight += paddle.speed * elapsed;
  paddle.BottomLeft += paddle.speed * elapsed;
  paddle.RightSide += paddle.speed * elapsed;
  paddle.LeftSide += paddle.speed * elapsed;
  paddle.TopSide += paddle.speed * elapsed;
  paddle.BottomSide += paddle.speed * elapsed;*/
  /*paddle.x += paddle.xSpeed * elapsed;
  paddle.y += paddle.xSpeed * elapsed;*/

  //bounce the ball of all edges
if (37 in keysDown && paddle.x > 0)
  paddle.x -= PADDLE_SPEED * elapsed;
if (39 in keysDown && paddle.x + PADDLE_WIDTH_PX < canvas.width)
  paddle.x += PADDLE_SPEED * elapsed;

  if (ball.x+(ball.x/7) >= canvas.width) {
    ball.x -= 5;
    ball.xSpeed *= -1;
  }
  if (ball.x-(ball.x/7) <= 0) {
      ball.x += 5;
      ball.xSpeed *= -1;
  }
  if (ball.y+(ball.y/100) <= 0) {
    ball.y += 5;
    ball.ySpeed *= -1;
  }
  if (ball.y+(ball.y/3) >= canvas.height) {
    ball.y -= 5;
    ball.ySpeed *= -1;
    }

  /*
  The problem here is that sometimes the ball gets 'stuck' to an edge.

  This can occur when the ball passes beyond an edge in a frame when the
  elapsed time is relatively large. In some cases, when the elapsed time in the
  next frame is relatively short, the ball doesn't reach the edge to get back
  into play. This results in another flip of the velocity and the ball becomes
  'trapped' on the edge.

  e.g.
  xSpeed = -500, x = 10, elapsed = 0.2 => xSpeed = 500, x = -90 (xMovement = -100)
  xSpeed = 500, x = -90, elapsed = 0.1 => xSpeed = -500, x = -40 (xMovement = +50)
  xSpeed = -500, x = -40, elapsed = 0.1 => xSpeed = 500, x = -40 (xMovement = -50)
  and so on ...until a larger elapsed time occurs in the right direction

  The fix for this is to move the ball to the edge when the velocity is flipped.
  */
}

var previous;
function run(timestamp) {
  if (!previous) previous = timestamp;          //start with no elapsed time
  var elapsed = (timestamp - previous) / 1000;  //work out the elapsed time
  update(elapsed);                              //update the game with the elapsed time
  render();                                     //render the scene
  previous = timestamp;                         //set the (globally defined) previous timestamp ready for next time
  window.requestAnimationFrame(run);            //ask browser to call this function again, when it's ready
}

//trigger the game loop
window.requestAnimationFrame(run);

感谢您花时间阅读本文，

--ConfusedStudent

Answer 1

跳出来的第一件事是有很多语法错误(例如，一些变量赋值是向后的)，所以你的脚本不会执行。如果你通过 JSLint 运行你的 JavaScript ，您会看到几个需要先修复的错误。如果您清除这些错误并更新您的帖子，其他人将能够更轻松地帮助您。