Nesnenin hareketi, herhangi bir işletim sisteminden etkilenmeden mi?

sizin için bir test kodu vardır:Nesnenin hareketi, herhangi bir işletim sisteminden etkilenmeden mi?

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <style> 
     bri { 
      position: absolute; 
      width: 20px; 
      height: 20px; 
     } 
     .dirt { 
      background-color:brown; 
     } 
     .gracz { 
      background-color:red 
     } 
    </style> 
    <script > 
     function makeLevel() { 
      width = 30 
      heigth = 30 

      var bricks = document.getElementById('bricks') 
      bricks.style.width = 20 * heigth + 'px' 
      bricks.style.height = 20 * width + 'px' 
      bricks.innerHTML = '' 

      for (var i = 0; i < width; i++) { 
       for (var j = 0; j < heigth; j++) { 
        var bri = document.createElement("bri"); 
        bricks.appendChild(bri) 
        bri.style.top = i * 20 + "px" 
        bri.style.left = j * 20 + "px" 
        bri.id = i + "_" + j 
        bri.className = 'dirt' 
       } 
      } 
      pos_player_x = Math.floor(Math.random() * width) 
      pos_player_y = Math.floor(Math.random() * heigth) 
      bri = document.getElementById(pos_player_x + '_' + pos_player_y); 
      bri.className = 'gracz' 
     } 

     function moving(event) { 
      var key = event.which 
      //87 - w , 83 -s, 65 -a, 68 - d 
      switch (key) { 
       case 87: 
        var new_x = pos_player_x - 1; 
        var new_y = pos_player_y - 0; 
        break; 
       case 83: 
        var new_x = pos_player_x + 1; 
        var new_y = pos_player_y - 0; 
        break; 
       case 65: 
        var new_x = pos_player_x - 0; 
        var new_y = pos_player_y - 1; 
        break; 
       case 68: 
        var new_x = pos_player_x - 0; 
        var new_y = pos_player_y + 1; 
        break; 
      } 
      var new_pos = document.getElementById(new_x + '_' + new_y) 
      var old_pos = document.getElementById(pos_player_x + '_' + pos_player_y) 
      if (new_pos != null) { 
       new_pos.className = 'gracz'; 
       old_pos.className = 'clean'; 
       pos_player_y = new_y; 
       pos_player_x = new_x; 
      } 
     } 
    </script> 

</head> 
<body onload="makeLevel()" onkeydown="moving(event)">     
      <div id="game"> 
       <div id="bricks" draggable="false"></div> 
      </div> 
</body> 
</html>

Ve biz "hareketli" olarak adlandırılan fonksiyonu üzerine odaklanmak gerekir. 'WASD' düğmesinden birine basıp basılı tutarsak, oynatıcımız bu yönü izleyecektir. Ancak, ilk saniyesinde bir kez taşındı ve bundan sonra duvarlardan birine ulaşıncaya kadar tekrarlanacak.

Ve işte soru şu. Bu düğmeden birini tutarsak, bu küçük duraklama nasıl kaldırılır?

Bu benim ilk yazı, hatalar için çok üzgünüm.

kaynak

2016-04-09 ProPaniusz

Im bahsediyor youre duraklatmak farkında çalışırken ... Bence iyi çalışıyor gibi görünüyor; –

Evet, bu işe bir kez basıldığında tuşuna basarsanız. Ama bir dakika bekle. İlk hamle de iyi, ama biraz duraklama var ve nesne hareket etmeye devam ediyor. – ProPaniusz

Yani yumuşak sıvı bir şekilde değil, adımlarda olduğu gibi hareket ediyor demek? şimdi görüyorum. –

Halihazırda hareketiniz alınan tuş basma sayısına bağlıdır. Bu sadece algıladığınız işletim sistemi sorunu nedeniyle değil (aynı zamanda tekrarlanan anahtarı göndermeye ne zaman başlayacaktır) değil, aynı zamanda daha hızlı bir hareketin daha hızlı bir tuşa basması gerektiğinden, çünkü temel tekrarlanandan daha hızlı ("spam") sorun yaratmaktadır. basılı bir tuşun hızı. Bunun yerine, oyununuzun hareketi ölçen bir iç “kenesi” olmalıdır. Tuşlara basıldığında ve serbest bırakıldığında, bu değişiklikleri bir iç değişkene iletirsiniz ve oyununuz hareket etme zamanına her karar verir, bu değişkenin mevcut durumuna göre hareket eder. Bu, işletim sisteminin tekrarlanan sinyalleri gönderdiği hız ne olursa olsun, birinin anahtarı veya spam'ı tutup tutmadığına bakılmaksızın, bloğun oyununuzun izin verdiği kadar hızlı hareket edeceği anlamına gelir.

DÜZENLEME: İşte kodunuzun düzeltilmiş bir sürümü. Yeni tanıtılan startGameLoop işlevini ve onkeydown ve onkeyup olaylarını nasıl kullandığımı unutmayın. Bu versiyonda, bir tuşa basıldığında yılan sürekli olarak hareket eder ve serbest bırakıldıktan sonra hareket etmez.

HTML: <body onload="makeLevel()" onkeydown="registerKey(event)" onkeyup="releaseKey()">

JavaScript:

var currentlyPressedKey; 

    function makeLevel() { 
     width = 30 
     heigth = 30 

     var bricks = document.getElementById('bricks') 
     bricks.style.width = 20 * heigth + 'px' 
     bricks.style.height = 20 * width + 'px' 
     bricks.innerHTML = '' 

     for (var i = 0; i < width; i++) { 
      for (var j = 0; j < heigth; j++) { 
       var bri = document.createElement("bri"); 
       bricks.appendChild(bri) 
       bri.style.top = i * 20 + "px" 
       bri.style.left = j * 20 + "px" 
       bri.id = i + "_" + j 
       bri.className = 'dirt' 
      } 
     } 
     pos_player_x = Math.floor(Math.random() * width) 
     pos_player_y = Math.floor(Math.random() * heigth) 
     bri = document.getElementById(pos_player_x + '_' + pos_player_y); 
     bri.className = 'gracz'; 
     startGameLoop(); 
    } 

    function startGameLoop(){ 
     setInterval(move,250); 
    } 

    function registerKey(event){ 
     currentlyPressedKey = event.which; 
    } 

    function releaseKey(){ 
     currentlyPressedKey = null; 
    } 

    function move() { 
     var key = currentlyPressedKey; 
     //87 - w , 83 -s, 65 -a, 68 - d 
     switch (key) { 
      case 87: 
       var new_x = pos_player_x - 1; 
       var new_y = pos_player_y - 0; 
       break; 
      case 83: 
       var new_x = pos_player_x + 1; 
       var new_y = pos_player_y - 0; 
       break; 
      case 65: 
       var new_x = pos_player_x - 0; 
       var new_y = pos_player_y - 1; 
       break; 
      case 68: 
       var new_x = pos_player_x - 0; 
       var new_y = pos_player_y + 1; 
       break; 
     } 
     var new_pos = document.getElementById(new_x + '_' + new_y) 
     var old_pos = document.getElementById(pos_player_x + '_' + pos_player_y) 
     if (new_pos != null) { 
      new_pos.className = 'gracz'; 
      old_pos.className = 'clean'; 
      pos_player_y = new_y; 
      pos_player_x = new_x; 
     } 
    }

kaynak

2016-04-09 10:33:08 doldt

Tamam, bu çalışır. Ama yine de benzer bir sorun var. Tuşları çok hızlı değiştirdiğimde, nesneyim biraz kalır ve hareket eder. Bu gecikmeye sahip olmak istemiyorum. – ProPaniusz

Nihayetinde bu kodu tam ihtiyaçlarınıza göre uyarlamanız gerekecek. Örneğin, 'releaseKey' işlevini kaldırırsanız, klasik yılan oyunu benzeri bir davranış elde edersiniz. Tuşa basmalarda hemen hareket etmek isterseniz, bir tuşun kullanıcı veya işletim sistemi tarafından tekrarlanıp tekrarlanmayacağını belirlemek için 'keyup 'olaylarını kontrol ettiğiniz bir sistemi uygulayabilirsiniz - ancak açılış paramda özetlediğim gibi, sanmıyorum Bu iyi bir yaklaşım. – doldt

@ProPaniusz: başka bir tuşa bastıktan sonra herhangi bir tuş bıraktığınızda, kod tuşu 'keydown' tekrar gönderene kadar durdurur ve bu da yaşadığınız gecikmenin sebebidir. Olası çözümlerden biri, sadece tuşa basılmadığında oynatıcının durdurulmasıdır. Bunu yapmanın en basit yolu, basılan tuşları takip etmek için 'Set'' kullanmaktır (' keydown'da keycode'u, 'keyup' üzerinde kaldırmak ') ve sadece set boşsa oyuncuyu durdurur. – GingerPlusPlus

Nesnenin hareketi, herhangi bir işletim sisteminden etkilenmeden mi?

cevap

İlgili konular