2015-09-05 48 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; 
     } 
    } 

这样做的好处是您可以在整个过程中移动按键,而不仅仅是按下按键。它也将相关代码组合在一起。