Question

我正在尝试整理一个简单的html游戏，而且我遇到了让角色跳跃的问题。所有的动作，左右都可以正常工作，但是一旦我试图调用跳跃，我的屏幕会冻结并且不会发生任何动作。我可能听的很简单，但我似乎无法得到它。我也尝试在跳转功能中省略了绘制/清除调用，但也没有用。

<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

是的，你没有给处理器时间呼吸。这通常使用setTimeout或setInterval来完成，因为while循环太紧而无法进行连续的屏幕更新

我不确定setTimeout会有多么顺畅 - 我发现这是一个循环动画画布搜索http://script-tutorials.com/html5-animation-patterns-with-loops

HTML 5 Canvas运动

1 个答案: