0

私は単純なhtml/jsプロジェクトに取り組んでおり、ボールを撃つことができるキャンバス内でボックスを動かしています。ボックスを動かしたのですが、ボールが出てきません。プログラムは drawBall() および moveBall() (アラートを使用してテスト済み) 関数に到達しますが、何もしません。私は過去1時間これに取り組んできましたが、それを機能させることができません。ボックスを移動し、スペースバーが離されるたびにボールを描画する必要がある私の 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);
4

1 に答える 1

1

私があなたのコードを試したとき、私が見ることができる問題は、あなたがblock_w、 block_h、およびball_radius変数を初期化していないことです。これらの値は、 firebugツールで見られるように未定義のようです。

したがって、使用するすべての変数を定義して初期化したことを確認する必要があります。また、定義したすべての関数を呼び出していることを確認する必要があります。

context.arc（23、34、45、0、Math.PI * 2、false）;に手動で値を入力すると、機能すればそれは私にとってはうまくいきます。したがって、すべての変数を定義して初期化したことを確認してください。

于 2012-03-21T05:06:17.107 に答える