HTML 5 캔버스 이동

Question

나는 간단한 HTML 게임을 만들려고 노력하고 있으며 캐릭터가 점프하는 데 문제가 있습니다. 모든 것이 모든 움직임에서 정상적으로 작동합니다. 왼쪽이나 오른쪽으로 움직이면 점프를 호출하려고하면 화면이 멈추고 아무런 조치도 취하지 않습니다. 나는 아마 무언가를 듣는 것은 정말로 간단하지만, 나는 그것을 얻지 못하는 것 같습니다. 또한 점프 기능에서 draw/clear 호출을 생략하려고 시도했지만 그 중 하나도 작동하지 않았습니다.

<script> 
var isJumping = false; 
var isFalling = false; 
var recwidth = 400; 
var recheight = 400; 
var xpos = 200; 
var ypos = 200; 
window.onload = function() { 
var FPS = 30; 
setInterval(function() { 
    clear(); 
    draw(); 
}, 1000/FPS); 
}; 
function jump() 
{ 
isJumping=true; 
while (isJumping == true) 
{ 
    ypos=ypos-3; 
    clear(); 
    draw(); 
    if(ypos==297) 
    { 
     isJumping == false; 
    } 

} 

} 



function changex(x){ 
xpos = xpos + (x); 
} 
function changey(y){ 
ypos = ypos + (y); 
} 



function draw(){ 
var canvas = document.getElementById('canvas') 
var context = canvas.getContext('2d'); 
var img=new Image() 
    img.src="character.png" 
    img.onload = function() { 
    context.drawImage(img,xpos,ypos)} 
} 

function clear(){ 
var canvas = document.getElementById('canvas') 
var context = canvas.getContext('2d'); 
context.clearRect(0,0,); 
} 


    document.onkeydown = function(event) { 
var keyCode; 

if(event == null) 
{ 
    keyCode = window.event.keyCode; 
} 
else 
    { 
keyCode = event.keyCode; 
    } 

    switch(keyCode) 
    { 
    // left 
    case 37: 
    //left 
    changex(-5); 
     break; 

// up 
case 38: 
// action when pressing up key 
jump(); 
    break; 

// right 
case 39: 
// action when pressing right key 
changex(5); 
    break; 

// down 
case 40: 
// action when pressing down key 
changey(5); 
    break; 

default: 
    break; 
    } 
} 

Answer 1

예, 호흡 할 수있는 프로세서 시간을 제공하지 않습니다. 내가 루프 애니메이션 캔버스 검색 http://script-tutorials.com/html5-animation-patterns-with-loops