2015-09-05 46 views
0

我正在用HTML5畫布製作二維平臺遊戲風格的遊戲。在角色中,角色可以使用箭頭鍵跳轉並左右移動,除了一個問題外,它可以很好地工作。當我跳到一邊的同時,精靈上升,不會移動到一邊。只有當它下降時,它才能正常移動。有沒有辦法解決它?我已經完成了其他「移動精靈對角」問題的研究,但根據我的代碼;當我放開'向上'鍵時,精靈應該移動到一側,對吧?看看我的代碼,看看你的想法...如何用javascript對角地移動精靈?

**注:表現得好像我已經定義的變量,因爲我有

 window.addEventListener("keydown", checkKeyPressed, false); 
     //^don't proceed if you don't know what this means^ 

     function checkKeyPressed(e) { 

      if (e.keyCode == "38" && jumpTime == 0) { 
       //checks if 'up' key is pressed then initiates the 'jump' sequence 

       refreshIntervalId = setInterval(jumpUp, 5);//calls the jump function 

       setTimeout(stopRefresh, 500);//sets time until character stops jumping 

       jumpCal();//temporarily disables jumping, and therefore a double-jump 

      }else if (e.keyCode == "37") { 
       //checks if 'left' key is pressed then moves sprite to the side 
       charX = charX - 8;//piece 1, 
       a = a - 8;//2, 
       c = c - 8;//and 3 
      }else if (e.keyCode == "39") { 
       //same thing, except to the right... 
       charX = charX + 8; 
       a = a + 8; 
       c = c + 8; 
      } 
     } 

     function jumpUp() { 
      charY = charY - 5;//moves up pieces 1, 
      b = b - 5;//2, 
      d = d - 5;//and 3, since the sprite is composed of three images 
     } 

     function stopRefresh() { 
      clearInterval(refreshIntervalId); 
      //stops the character from jumping 
     } 

     function jumpCal() { 
      jumpTime = 1; 
      setTimeout(jumpRes, 1750); 
      //times out the jumping action 
     } 

     function jumpRes() { 
      jumpTime = 0; 
      //resets the jumping action 
     } 

     function gravityControl() { 

      if (charY <= platformDetect) { 
       //checks if touching platform then moves all pieces down 
       charY = charY + 3;//piece 1 
       b = b + 3;//piece 2 
       d = d + 3;//piece 3 
       //this function is called multiple times in an unspecified piece of code, so no, I did not make an error here 
      } 
     } 

     function detectPlatform() { 

      platformDetect = 160; 
      //I've added this function because there will be platforms later in the game 
     } 

你明白我的代碼?我有沒有留下什麼?這是不是馬虎?如果您有任何與問題無關的建議,請隨時將其添加到評論中,我會很樂意接受。

回到手邊的話題,我的代碼是否正確?因爲當我點擊「向上」鍵,然後放開並按住「正確」的關鍵,我的性格的軌跡如下:

第1步:

  ^
       | 
       | 
       | 
       | 
       | 
       | 
       | 

**去了罰款,但不會移動到側面,如預期

第2步:

   |_ 
       |_ 
        |_ 
        |_ 
         | 
         |_ 
         | 
         \/

**下來,並移動到另一邊像它應該

你能幫我嗎?如果你不明白我的解釋的任何部分,我會接受評論中的批評,畢竟我想變得更好。

     _    _ 
         |@|    |@| 

           /_ 

        ---___    ___--- 
         ---_______--- 

** thnx提前!!!

回答

1

我不明白你的代碼很容易,我決定從頭開始寫一些東西,希望它能提供幫助。您也可能對此答案感興趣:https://gamedev.stackexchange.com/a/29618/34073和相關演示:http://jsfiddle.net/LyM87/

// ex: if pressed[39] == true, walk to the right 
 

 
var pressed = []; 
 

 
// keyboard mapping 
 

 
var keys = { 
 
    JUMP: 38, 
 
    RIGHT: 39, 
 
    LEFT: 37 
 
}; 
 

 
// states of the black pixel 
 

 
var pixor = { 
 
    el: $('#pixor'), 
 
    isJumping: false, 
 
    x: 10, 
 
    y: 0, 
 
    vy: 0, 
 
    vx: 0 
 
} 
 

 
// record user keystrokes 
 

 
$(document).on('keydown keyup', function (e) { 
 
    pressed[e.which] = e.type === 'keydown'; 
 
    e.preventDefault(); 
 
}); 
 

 
// classical game loop: update, render, redo after 1/60 sec 
 

 
function loop() { 
 
    update(); 
 
    render(); 
 
    setTimeout(loop, 17); 
 
} 
 

 
// updates the states of the black pixel 
 

 
function update() { 
 
    
 
    // vertical moves 
 
    
 
    if (!pixor.isJumping && pressed[keys.JUMP]) { 
 
    pixor.isJumping = true; 
 
    pixor.vy = 10; 
 
    } 
 
    if (pixor.isJumping) { 
 
    pixor.y += pixor.vy; 
 
    if (pixor.vy >= 0 && pixor.vy <= 0.5) { 
 
     pixor.vy = -0.5; 
 
    } 
 
    if (pixor.vy > 0) { 
 
     pixor.vy /= 1.25; 
 
    } 
 
    else { 
 
     pixor.vy *= 1.25; 
 
    } 
 
    if (pixor.y <= 0) { 
 
     pixor.isJumping = false; 
 
     pixor.y = 0; 
 
     pixor.vy = 0; 
 
    } 
 
    } 
 
    
 
    // horizontal moves 
 
    
 
    if (pressed[keys.RIGHT]) { 
 
    pixor.vx = 5; 
 
    } 
 
    else if (pressed[keys.LEFT]) { 
 
    pixor.vx = -5; 
 
    } 
 
    else { 
 
    pixor.vx = 0; 
 
    } 
 
    pixor.x += pixor.vx; 
 
} 
 

 
// repaints the screen based on the states of the black pixel 
 

 
function render() { 
 
    pixor.el.css({ 
 
    bottom: pixor.y, 
 
    left: pixor.x 
 
    }); 
 
}
body { 
 
    overflow: hidden; 
 
} 
 

 
#pixor { 
 
    position: absolute; 
 
    width: 40px; 
 
    height: 40px; 
 
    bottom: 0px; 
 
    left: 10px; 
 
    background: black; 
 
} 
 

 
#calltoaction { 
 
    position: absolute; 
 
    top: 0; right: 0; 
 
    bottom: 0; left: 0; 
 
    background: rgba(0,0,0,.5); 
 
    color: white; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    font: bold 24px Arial; 
 
} 
 

 
#calltoaction:after { 
 
    content: " "; 
 
    height: 100%; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="pixor"></div> 
 
<div id="calltoaction" onclick="$(this).remove();loop()"> 
 
    Click here to start, then use UP, LEFT and RIGHT. 
 
</div>

+0

哇!棒極了!我會嘗試在我的代碼中實現它... –

1

因爲我沒有完整的代碼,所以我不能確定,但​​是在哪裏有else if (e.keyCode == "37") else關鍵字可以防止在跳轉時左右移動。 此外,我建議有一個處理移動而不是按鍵事件的常量循環。

window.addEventListener("keydown", checkKeyPressed, false); 
window.addEventListener("keyup", keyUp, false); 
var jumpStarted = false; 
var moveLeft = false; 
var moveRight = false; 
setInterval(function(){ 
    if(leftDown === true) 
     //move Left 
    else if(rightDown === true) 
     //move Left 
    if(jumpStarted) 
     //Jump code 
}, 10); 
    function checkKeyPressed(e) { 

     if (e.keyCode == "38" && jumpTime == 0) { 
      jumpStarted = true; 
     }if (e.keyCode == "37") { 
      moveLeft = true; 
     }else if (e.keyCode == "39") { 
      moveRight = true; 
     } 
    } 
    function keyUp(e){ 
     if (e.keyCode == "37") { 
      moveLeft = false; 
     }else if (e.keyCode == "39") { 
      moveRight = false; 
     } 
    } 

這樣做的好處是您可以在整個過程中移動按鍵,而不僅僅是按下按鍵。它也將相關代碼組合在一起。