캔버스 게임의 느린 움직임

Question

내가 뭘 잘못하고 있는지 잘 모르겠다. 몇 가지 HTML5 게임을 해봤는데 다른 문제로 고통 받고있는 것 같습니다. 드로잉은 움직임에 뒤쳐져 이상하게 보입니다. 이것은 여기에 해당하지 않는 것 같습니다.

내 게임에서는 그림이 잘 보이지만 그가 움직일 때마다 초마다 느리게 진행됩니다. (동작은 화살표 키입니다). 자동으로 움직 이도록 설정하면 화살표 키도없이 작동하므로 중요한 탐지 문제는 아닌 것 같습니다.

가비지 수집기가 매초마다 실행중인 것과 거의 같습니다. 나는 많은 것들을 뿌리고 있다고 생각하지 않는다.

나는 또한 크롬 21 (에서라도)와 파이어 폭스 (14)

http://tempdrew.dreamhosters.com/spine/

를 사용하고 여기에 관련 코드와 JS 바이올린입니다.

http://jsfiddle.net/ju3ag/

이 크롬 카나리아에 괜찮습니다. 자바 스크립트가 카나리아에서 표준 크롬보다 훨씬 빠르기 때문에 그게 맞는지 모르겠습니다. 최신 Firefox에서 끔찍한 일입니다. 내가 뭘 잘못하고 있는지 모르겠다. 나는 시간에 따라 운동을 업데이트하고있다. 내가 여전히 그걸 꺼내더라도 여전히 나쁘다.

아무에게도 눈에 띄는 것이 있는지 궁금합니다. 어떤 도움을 주셔서 감사합니다.

sg = Class.extend({ 


}); 

sg.entities = []; 
sg.buttonStates = []; 

sg.createEntity = function (entity) {  
    this.entities.push(entity);  
}; 


window.requestAnimFrame = (function() { 
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || 
    function (callback, element) { 
     window.setTimeout(callback, 1000/60); 
    }; 

})(); 


(function defineUtil() { 

    sg.util = {}; 

    sg.util.getRandomInt = function getRandomInt(min, max) { 
     return Math.floor(Math.random() * (max - min + 1)) + min; 
    }; 

    sg.util.getRandomNumber = function getRandomNumber(min, max) { 
     return Math.random() * (max - min) + min; 
    }; 

})(); 


/*************************/ 
(function createEntity() { 

    var Entity = Class.extend({ 

     init: function (x, y) { 

      this.name = 'Entity'; 
      this.health = 100; 

      this.pos = { 
       x: x, 
       y: y 
      }; 

      this.vel = { 
       x: 0, 
       y: 0 
      }; 

      this.accel = { 
       x: 0, 
       y: 0 
      } 

      console.log(this.name + ' created ' + x + ' ' + y); 
     }, 

     update: function (elapsed) { 

     }, 

     draw: function (ctx) { 

     } 

    }); 

    sg.Entity = Entity; 

})(); 





/************************/ 

// -- player.js 
(function createPlayer() { 

    var Player = sg.Entity.extend({ 

     x: 0, 
     y: 0, 
     moveLeft: false, 
     moveRight: false, 
     speed : 5, 

     init: function (x, y) { 

      this.x = x; 
      this.y = y; 
      this.name = 'Player'; 
     }, 

     draw: function (ctx) { 

      var x = this.x, 
       y = this.y; 

      ctx.beginPath(); 
      ctx.rect(x, y, 40, 50); 
      ctx.fillStyle = 'white'; 
      ctx.fill(); 
      ctx.lineWidth = .5; 
      ctx.strokeStyle = 'rgba(0,0,0,.3)'; 
      ctx.stroke(); 
      ctx.fillStyle = 'rgba(0,0,0,.5)'; 
      ctx.fillRect(x + 25, y + 15, 5, 5); 
     }, 

     update: function (elapsed) { 
      var distance = (60/1000) * elapsed; 
      if (this.moveLeft) { 
       this.x += this.speed * distance; 
      } else if (this.moveRight) { 
       this.x -= this.speed * distance; 
      } 
     }, 

     keyDown: function (e) { 

      if (e.keyCode === 39) { 
       this.moveLeft = true; 
      } else if (e.keyCode === 37) { 
       this.moveRight = true; 
      } else { 
       this.moveLeft = false; 
       this.moveRight = false; 
      } 
     }, 

     keyUp: function (e) { 

      if (e.keyCode === 39) { 
       this.moveLeft = false; 
      } else if (e.keyCode === 37) { 
       this.moveRight = false; 
      } 
     } 

    }); 


    sg.Player = Player; 

})(); 




/**********************************/ 


(function createGame() { 

    var Game = Class.extend({ 

     canvas: null, 
     context: null, 
     width: null, 
     height: null, 

     init: function (width, height) { 

      this.canvas = document.getElementById('canvas'); 
      this.context = this.canvas.getContext('2d'); 

      this.width = width || 800; 
      this.height = height || 600; 

      this.canvas.width = this.width; 
      this.canvas.height = this.height; 
     }, 

     clear: function() { 
      this.context.clearRect(0, 0, this.width, this.height); 
     }, 

     draw: function() { 

      this.clear();  

      for (var i = 0; i < sg.entities.length; i++) { 
       sg.entities[i].draw(this.context); 
      } 
     }, 

     update: function (elapsed) { 

      for (var i = 0; i < sg.entities.length; i++) { 
       sg.entities[i].update(elapsed); 
      } 
     }, 

     keyDown: function (e) { 

      for (var i = 0; i < sg.entities.length; i++) { 

       if (typeof sg.entities[i].keyDown === 'function') { 
        sg.entities[i].keyDown(e); 
       } 
      } 
     }, 


     keyUp: function (e) { 

      for (var i = 0; i < sg.entities.length; i++) { 
       if (typeof sg.entities[i].keyUp === 'function') { 
        sg.entities[i].keyUp(e); 
       } 
      } 
     } 

    }); 

    sg.Game = Game; 

    var game = sg.currentGame = new sg.Game(800, 600); 


    var player = new sg.Player(200, 459); 

    sg.createEntity(player); 

    function update(elapsed) { 

     game.update(elapsed); 
    } 

    var lastUpdate = Date.now(); 

    function draw() { 

     var now = Date.now(); 
     var elapsed = (now - lastUpdate); 
     lastUpdate = now; 

     game.draw(); 
     update(elapsed); 
     requestAnimFrame(draw); 
    } 

    window.addEventListener('keydown', sg.currentGame.keyDown, false); 
    window.addEventListener('keyup', sg.currentGame.keyUp, false); 

    draw(); 

})(); 

Answer 1

keydown/keyup 이벤트가 한 번에 한 번씩 누를 때까지 기다리는 중입니다.

내 사건을 해결 한 방법은 다음과 같습니다 (정확한 문제인지는 확실하지 않습니다). 20ms마다 키 다운이 있는지를 확인하는 setInterval을 추가합니다 (대각선 동작의 경우 둘 이상). 도움이 :)