자바 스크립트에서 호를 그린다. 그러나 나타나지 않는다.

Question

공을 쏠 수있는 캔버스에서 움직이는 상자를 얻으려면 간단한 html/js 프로젝트를 진행하고있다. 나는 박스를 움직이게했다. 그러나 나는 볼을 나타낼 수 없다. 프로그램은 drawBall() 및 moveBall() (경고를 사용하여 테스트 됨) 함수를 만들지 만 아무 것도하지 않습니다. 나는 지난 1 시간 동안이 일을 해왔고, 나는 그걸 작동시킬 수 없다. 여기 상자를 움직이고 스페이스 바를 놓을 때마다 공을 그려야하는 자바 스크립트 코드가 있습니다. 난 당신의 코드 내가 볼 수있는 문제를 시도

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)에 값을 입력 할 때; 기능을 다음 그것은 나를 위해 잘 작동합니다. 모든 변수를 정의하고 초기화했는지 확인하십시오.