Question

我正在使用HTML5画布制作二维平台游戏风格的游戏。在其中，角色可以使用箭头键跳转并左右移动，除了一个问题外，它可以正常工作。当我跳跃并同时向侧面移动时，精灵会上升并且不会向侧面移动。只有当它下来时才会正常运动。有办法解决吗？我已经对其他＆＃34;对角移动精灵进行了研究＆＃34;问题，但根据我的代码;当我放开＆＃39; up＆＃39;关键精灵应该移到一边，对吗？看看我的代码，看看你的想法......

**注意：好像我已经定义了变量，因为我有

        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
        }

你了解我的代码吗？我有什么东西出去了吗？太邋??了吗？如果您有任何与该问题无关的建议，请随时将其添加到评论中，我会很乐意接受。

回到手头的话题，我的代码是对的吗？因为当我点击“向上”时然后放开并按住右键＆＃39;关键，我的角色的轨迹如下：

第1步：

**上升很好，但没有像预期的那样移到一边

第2步：

**下来并像它应该移动到一边

你能帮帮我吗？如果你不理解我解释的任何部分，我会在评论中接受批评，毕竟我想要变得更好。

                       _                _
                      |@|              |@|

                              /_

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

** thnx提前!!!

Answer 1

我没有轻易理解你的代码，我决定从头开始写一些东西，希望它可以提供帮助。您可能也对此答案感兴趣：https://gamedev.stackexchange.com/a/29618/34073以及相关演示：http://jsfiddle.net/LyM87/。

＆＃13;

// 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
  });
}

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

由于我没有完整的代码，我无法确定，但是你有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;
        }
    }

这样做的好处是，您可以在按键关闭时移动整个时间，而不仅仅是按下它时。它还将相关代码组合在一起。

如何使用javascript对角移动精灵？

2 个答案: