切換箭頭鍵時圖像停止一秒

Question

我還有一個問題。當我將主播放器的圖像向左或向右移動時，除非您向右移動然後快速按左鍵而右鍵仍然向下時，則移動很好，圖像停止一秒，然後決定向左移動。反之亦然。

Main.js

var getPlatF1POSX = 0; 
var getPlatF1POSY = 0; 
var addVar = 0; 
var addVar2 = 0; 
var addVar3 = 0; 
function loadGame() { 
    document.getElementsByTagName("DIV")[4].style.visibility = "visible"; 
    addEventListener('mousemove', getData, false); 
    addEventListener('keydown', movePlayer, false); 
    addEventListener('keyup', stopPlayer, false); 
    movePlat(); 
    moveP(); 

    document.getElementById("player").style.left = xPos + "px"; 
    document.getElementById("player").style.top = yPos + "px"; 
} 

function getData(gData) { 

} 

var thisThis = 1; 
var moveBlock1 = 350; 
var stLandT = 0; 
var gPos = ""; 
var rightPos = false; 
var leftPos = false; 
function movePlat() { 

} 

function movePlayer(mPlayer) { 
    switch (mPlayer.keyCode) { 
     case 39: // RIGHT 
      if (stLandT == 0 && gPos == "" && rightPos == false) { 
       setThis = setTimeout(landT, 500); 
       thisSet = setTimeout(moveLand, 30); 
       stLandT = 1; 
      } 
      gPos = "RIGHT"; 
      rightPos = true; 
      leftPos = false; 
     break; 

     case 37: // LEFT 
      if (stLandT == 0 && gPos == "" && leftPos == false) { 
       setThis = setTimeout(landT, 500); 
       thisSet = setTimeout(moveLand, 30); 
       stLandT = 1; 
      } 
      gPos = "LEFT"; 
      rightPos = false; 
      leftPos = true; 
     break; 

     case 38: // UP 

     break; 

     case 40: // DOWN 

     break; 
    } 
} 

function stopPlayer(sPlayer) { 
    switch (sPlayer.keyCode) { 
     case 39: 
      clearTimeout(setThis); 
      clearTimeout(thisSet); 
      stLandT = 0; 
      gPos = ""; 
      rightPos = false; 
      leftPos = false; 
     break; 
     case 37: 
      clearTimeout(setThis); 
      clearTimeout(thisSet); 
      stLandT = 0; 
      gPos = ""; 
      rightPos = false; 
      leftPos = false; 
     break; 
    } 
} 

移動土地和球員

var cTAdd = 0; 
var setThis = 1; 
var GAPlayer = 3; 
function landT() { 
    setThis = setTimeout(landT, 500); 

    if (xPos >= 500) { 
     cTAdd = Math.floor(Math.random() * 100 + 1); 

     var block00 = document.createElement("img"); 

     if (cTAdd > 0 && cTAdd < 25) { 
      block00.src = "images/sep2.png"; 
     } 
     if (cTAdd > 25 && cTAdd < 50) { 
      block00.src = "images/sep1.png"; 
     } 
     if (cTAdd > 50 && cTAdd < 100) { 
      block00.src = "images/platform00.png"; 
     } 

     document.getElementById("land01").appendChild(block00); 

     var block01 = document.createElement("img"); 
     var getB = block01.getBoundingClientRect(); 


     if (cTAdd > 0 && cTAdd < 25) { 
      block01.src = "images/platform00.png"; 
     } 
     if (cTAdd > 25 && cTAdd < 50) { 
      block01.src = "images/sep2.png"; 
     } 
     if (cTAdd > 50 && cTAdd < 100) { 
      block01.src = "images/sep1.png"; 
     } 

     document.getElementById("land00").appendChild(block01); 

     GAPlayer = GAPlayer + 2; 
    } 

} 

var thisSet = 1; 
var cPlayer = 0; 
var moveSpeed = 5; 
var xPos = 50; 
var yPos = 300; 
function moveLand() { 

    thisSet = setTimeout(moveLand, 30); 

    if (xPos >= 500) { 
     moveBlock1 = moveBlock1 - 10; 
     document.getElementById("land00").style.left = moveBlock1 + "px"; 
     document.getElementById("land01").style.left = moveBlock1 + "px"; 
    } 

    cPlayer++; 
    if (cPlayer >= 4) 
     cPlayer = 0; 
    document.images[GAPlayer].src = gPlayer[cPlayer].src; 

} 

function moveP() { 
    var setThis = setTimeout(moveP, 10); 

    if (leftPos == false) { 
     xPos = xPos + moveSpeed; 
    } 

    if (rightPos == false) { 
     xPos = xPos - moveSpeed; 
    } 

    document.getElementById("player").style.left = xPos + "px"; 
    document.getElementById("player").style.top = yPos + "px"; 


    if (xPos >= 500) { 
     xPos = 500; 
    } 
    if (xPos <= 50) { 
     xPos = 50; 
    } 
} 

Answer 1

這是你如何做到這一點的Javascript/HTML5

theGame.js

var getPlatF1POSX = 0; 
var getPlatF1POSY = 0; 
var addVar = 0; 
var addVar2 = 0; 
var addVar3 = 0; 

var thisThis = 1; 
var moveBlock1 = 350; 
var stLandT = 0; 

var moveRight = false; 
var moveLeft = false; 
var movePL = 0; 
var movePR = 0; 

////////////////////////////////////////////////////////// 
// 
// LOAD PLATFORMS/SET KEY UP AND DOWN/SET PLAYER POS 


function loadGame() { 
    document.getElementsByTagName("DIV")[4].style.visibility = "visible"; 
    addEventListener('mousemove', getData, false); 
    addEventListener('keydown', movePlayer, false); 
    addEventListener('keyup', stopPlayer, false); 
    moveP(); 

    document.getElementById("player").style.left = xPos + "px"; 
    document.getElementById("player").style.top = yPos + "px"; 
} 

function getData(gData) { 

} 

////////////////////////////////////////////////////////// 
// 
// KEY DOWN TO MOVE PLAYER 

function movePlayer(mPlayer) { 
    switch (mPlayer.keyCode) { 
     case 39: // RIGHT 
      if (stLandT == 0) { 
       setThis = setTimeout(landT, 500); 
       thisSet = setTimeout(moveLand, 30); 
       stLandT = 1;  
      } 

       movePL = 0; 
       movePR = 1; 

     break; 

     case 37: // LEFT 
      if (stLandT == 0) { 
       setThis = setTimeout(landT, 500); 
       thisSet = setTimeout(moveLand, 30); 
       stLandT = 1;  
      } 

       movePL = 1; 
       movePR = 0; 

     break; 

     case 38: // UP 

     break; 

     case 40: // DOWN 

     break; 
    } 
} 


////////////////////////////////////////////////////////// 
// 
// KEY UP TO STOP PLAYER/VOID STOP AND GO GLITCH 

function stopPlayer(sPlayer) { 
    if (sPlayer.keyCode == 39) { 
     clearTimeout(setThis); 
     clearTimeout(thisSet); 
     stLandT = 0; 
     movePR = 0; 
    } 

    if (sPlayer.keyCode == 37) { 
     clearTimeout(setThis); 
     clearTimeout(thisSet); 
     stLandT = 0; 
     movePL = 0; 
    } 
} 

landThis.js /移動播放器和平臺

var cTAdd = 0; 
var setThis = 1; 
var GAPlayer = 3; 

////////////////////////////////////////////////////////// 
// 
// SHOW PLATFORMS TO MOVE 

function landT() { 
    setThis = setTimeout(landT, 500); 

    if (xPos >= 500) { 
     cTAdd = Math.floor(Math.random() * 100 + 1); 

     var block00 = document.createElement("img"); 

     if (cTAdd > 0 && cTAdd < 25) { 
      block00.src = "images/sep2.png"; 
     } 
     if (cTAdd > 25 && cTAdd < 50) { 
      block00.src = "images/sep1.png"; 
     } 
     if (cTAdd > 50 && cTAdd < 100) { 
      block00.src = "images/platform00.png"; 
     } 

     document.getElementById("land01").appendChild(block00); 

     var block01 = document.createElement("img"); 
     var getB = block01.getBoundingClientRect(); 


     if (cTAdd > 0 && cTAdd < 25) { 
      block01.src = "images/platform00.png"; 
     } 
     if (cTAdd > 25 && cTAdd < 50) { 
      block01.src = "images/sep2.png"; 
     } 
     if (cTAdd > 50 && cTAdd < 100) { 
      block01.src = "images/sep1.png"; 
     } 

     document.getElementById("land00").appendChild(block01); 

     GAPlayer = GAPlayer + 2; 
    } 

} 

////////////////////////////////////////////////////////// 
// 
// MOVE PLATFORMS 

var thisSet = 1; 
var cPlayer = 0; 
var moveSpeed = 5; 
var xPos = 50; 
var yPos = 300; 
function moveLand() { 

    thisSet = setTimeout(moveLand, 30); 

    if (xPos >= 500) { 
     moveBlock1 = moveBlock1 - 10; 
     document.getElementById("land00").style.left = moveBlock1 + "px"; 
     document.getElementById("land01").style.left = moveBlock1 + "px"; 
    } 

} 


////////////////////////////////////////////////////////// 
// 
// MOVE PLAYER 

var setP = 1; 
function moveP() { 
    setP = setTimeout(moveP, 10); 


    if (movePR == 1) { 
     xPos = xPos + moveSpeed; 

     cPlayer++; 
     if (cPlayer >= 4) 
      cPlayer = 0; 
      document.images[GAPlayer].src = gPlayer[cPlayer].src; 
    } 


    if (movePL == 1) { 
     xPos = xPos - moveSpeed; 

     cPlayer++; 
     if (cPlayer >= 4) 
      cPlayer = 0; 
      document.images[GAPlayer].src = gPlayer[cPlayer].src; 
    } 

    document.getElementById("player").style.left = xPos + "px"; 
    document.getElementById("player").style.top = yPos + "px"; 


    if (xPos >= 500) { 
     xPos = 500; 
    } 
    if (xPos <= 50) { 
     xPos = 50; 
    } 
} 

Answer 2

這是因爲你停止播放無論什麼關鍵是高達。您應該存儲最後一次按下的按鍵，而不是按鍵，您需要檢查最後一個按鍵是否被釋放。

這是很難我調試代碼，所以我的jQuery做它（並有同樣的煩惱，你有）：

var game = { 
 
    settings: { 
 
    \t moveSpeed: 5, // 5 milliseconds, 200fps 
 
     moveBy: 2 // 2 pixels 
 
    }, 
 
    land: null, 
 
    landWidth: null, 
 
    landLeft: null, 
 
    viewport: null, 
 
    viewportWidth: null, 
 
    landMinLeft: null, 
 
    init: function() { 
 
     game.land = $('.land'); 
 
     game.landWidth = game.land.width(); 
 
     game.landLeft = game.land.position().left; 
 
     game.viewport = $('.viewport'); 
 
     game.viewportWidth = game.viewport.width(); 
 
     game.landMinLeft = -(game.landWidth-game.viewportWidth); 
 
    }, 
 
    movingInterval: null, 
 
    lastKey: null, 
 
    keyDown: function (e) { 
 
\t \t switch (e.keyCode) { 
 
     \t case 39: // RIGHT 
 
       game.lastKey = e.keyCode; 
 
       clearInterval(game.movingInterval); 
 
       game.movingInterval = setInterval(function() { 
 
        game.move('right'); 
 
       }, game.settings.moveSpeed); 
 
       break; 
 
      case 37: // LEFT 
 
       game.lastKey = e.keyCode; 
 
       clearInterval(game.movingInterval); 
 
       game.movingInterval = setInterval(function() { 
 
        game.move('left'); 
 
       }, game.settings.moveSpeed); 
 
       break; 
 
     } 
 
    }, 
 
    keyUp: function(e) { 
 
     if(e.keyCode==game.lastKey) { 
 
     \t game.stopMoving(); 
 
     }; 
 
    }, 
 
    move: function(direction) { 
 
    \t switch(direction) { 
 
      case 'left': 
 
       var newLeft = game.land.position().left+game.settings.moveBy; 
 
       if(newLeft>0) newLeft=0; 
 
       game.land.css({ 
 
        'left': newLeft+'px' 
 
       }); 
 
       break; 
 
      case 'right': 
 
       var newLeft = game.land.position().left-game.settings.moveBy; 
 
       if(newLeft<game.landMinLeft) newLeft=game.landMinLeft; 
 
       game.land.css({ 
 
        'left': newLeft+'px' 
 
       }); 
 
       break; 
 
     }; 
 
    }, 
 
    stopMoving: function() { 
 
    \t clearInterval(game.movingInterval); 
 
    } 
 
}; 
 
game.init(); 
 
$(window).on('keydown', game.keyDown); 
 
$(window).on('keyup', game.keyUp);

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
} 
 
body, html, .viewport { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.viewport { 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 
.land { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: 2300px; 
 
    height: 200px; 
 
    background: url('//dummyimage.com/2300x400/000/fff&text=Mario+is+great!+Mario+is+our+hero!+We+love+you+mario!') no-repeat center center; 
 
    background-size: cover; 
 
    will-change: left; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="viewport"> 
 
    <div class="land"></div> 
 
</div>

同樣在Playground。