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 に答える