0

我正在尝试制作一个简单的 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; 
   } 
 }

4

1 回答 1

0

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

我不确定使用 setTimeout 会有多顺利 - 我通过循环动画画布搜索找到了这个http://script-tutorials.com/html5-animation-patterns-with-loops

于 2013-04-21T06:09:37.857 回答