Question

我正在开发一个简单的html / js项目，让一个盒子在一个可以射球的画布上移动。我让盒子移动但我不能让球出现。该程序使它成为drawBall（）和moveBall（）（使用警报测试）功能，但它们不做任何事情。过去一小时我一直在研究这个问题而且我无法让它发挥作用。这是我的javascript代码移动框，每当空格键被释放时都应该绘制一个球。

function init() {
//canvas = document.getElementById('canvas');
context = $('#canvas')[0].getContext('2d');
WIDTH = $('#canvas').width();
HEIGHT = $('#canvas').height();
block_x = WIDTH / 2;
block_y = HEIGHT / 2;
setInterval('draw()', 25);
}

function clearCanvas() {
  context.clearRect(0,0,WIDTH,HEIGHT);
}

function draw() {
  clearCanvas();
  if(shotBall)
  {
        drawBall();
        moveBall();
  }
  if (rightKey) block_x += 5;
  else if (leftKey) block_x -= 5;
  if (upKey) block_y -= 5;
  else if (downKey) block_y += 5;
  if (block_x <= 0) block_x = 0;
  if ((block_x + block_w) >= WIDTH) block_x = WIDTH - block_w;
  if (block_y <= 0) block_y = 0;
  if ((block_y + block_h) >= HEIGHT) block_y = HEIGHT - block_h;
  context.fillRect(block_x, block_y, block_w, block_h);
 }

function drawBall() {
         context.beginPath();
     context.arc(ball_x, ball_y, ball_radius, 0, Math.PI * 2, false);
}

function moveBall() {
    ball_y += 1;
    ball_x -= 1;
}

function onKeyDown(evt) {
  if (evt.keyCode == 68) rightKey = true;
  else if (evt.keyCode == 65) leftKey = true;
  if (evt.keyCode == 87) upKey = true;
  else if (evt.keyCode == 83) downKey = true;
}

function onKeyUp(evt) {
  if (evt.keyCode == 68) rightKey = false;
  else if (evt.keyCode == 65) leftKey = false;
  if (evt.keyCode == 87) upKey = false;
  else if (evt.keyCode == 83) downKey = false;
  if(evt.keyCode == 32) createBall();
}

function createBall() 
{
        ball_x = block_x + (block_w / 2); 
        ball_y = block_y + (block_y / 2);
    radius = 20;
    shotBall = true;
}
$(document).keydown(onKeyDown);
$(document).keyup(onKeyUp);

Answer 1

当我尝试你的代码时我能看到的问题是你没有初始化 block_w 和 block_h 以及 ball_radius 变量，因为这些值似乎是正如我在firebug工具中看到的那样，未定义。

因此，您必须确保已定义并初始化您使用的每个变量。此外，您必须确保调用已定义的每个函数。

当我手动将值放在context.arc中时（23,34,45,0，Math.PI * 2，false）;功能那对我来说很好。因此，请确保已定义并初始化每个变量。

在java脚本中绘制弧但不会出现

1 个答案: