Question

我试图做但有两件事情却无法找到方法：

更重要的是 - 当钥匙启动时，在完全停止之前使船舶在keydown的方向上动画更多一点，如果按另一个方向，船舶将等待动画完成，然后再改变方向。

2.使船舶运动更加逼真，而不像文本编辑器。

＆＃13;

$(document).ready(function() {
  //Variables
  var screenWidth = $(window).width(); //Screen width
  var screenHeight = $(window).height(); //Screen height
  var shipWidth = $("#ship").width(); //Ship width
  var y = 0; //Background y position
  var currentShipPos; //ship current position

  setShipPosition(screenWidth / 2 - shipWidth / 2, screenHeight / 1.5 - shipWidth / 2);
  startBackgroundMovement();


  //Start move the screen
  function startBackgroundMovement() {
    setInterval(function() {
      y += 1;
      $('body').css('background-position-y', y + 'px');
    }, 10);
  }


  //Spaceship starting position
  function setShipPosition(posX, posY) {
    $("#ship").css("left", posX);
    $("#ship").css("top", posY);
    currentShipPos = posX;
    //alert(currentShipPos);
  }

  //Move spaceship
  $(document).keydown(function(e) {
    if (!$('#ship').is(':animated')) {
      switch (e.which) {
        case 37: //left
          currentShipPos -= 10;
          $('#ship').animate({
            left: currentShipPos + "px"
          }, 0, 'swing');

          //left edge of screen
          if (currentShipPos < 0) {
            currentShipPos = 0;
          }
          break;
        case 39: //right
          currentShipPos += 10;
          $('#ship').animate({
            left: currentShipPos + "px"
          }, 0, 'swing');
          //right edge of screen
          if (currentShipPos > screenWidth - shipWidth) {
            currentShipPos = screenWidth - shipWidth;
          }
          break;
        default:
          return;
      }
      e.preventDefault(); //not sure if needed
    }

  });


});

＆＃13;

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
body {
  background-image: url('http://www.playmycode.com/dynamic/project_images/495/3495/20888.1363023335.png');
  background-repeat: repeat;
  overflow: hidden;
  background-position: 0 0;
}
#ship {
  position: absolute;
  right: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <img id="ship" src="http://www.clipartbest.com/cliparts/dTr/M8g/dTrM8gnT9.png" width="40px" />
</body>

＆＃13;

jsfiddle.net/icy1337/gw761f5w/

Answer 1

我重构了一点，摆脱了$.animate()，使用这个循环来制作船舶动画：

(function shipLoop() {
    if (ship.goingLeft) {
        ship.lspeed = Math.min(ship.lspeed *1.1 || 1, ship.maxSpeed);
    } else {
        ship.lspeed = Math.max(ship.lspeed - 0.5, 0);
    }
    if (ship.goingRight) {
        ship.rspeed = Math.min(ship.rspeed *1.1 || 1, ship.maxSpeed);
    } else {
        ship.rspeed = Math.max(ship.rspeed - 0.5, 0);
    }
    ship.position = ship.position + (ship.rspeed - ship.lspeed);
    $ship.css('left', ship.position);
    requestAnimationFrame(shipLoop);
}());

关键处理程序设置了这些属性，但从未真正直接更改绘制的位置，现在您还需要关键字事件：

$(document).keydown(function(e){
    switch(e.which){
        case 37://left
            ship.goingLeft= true;                    
            break;
        case 39://right
            ship.goingRight= true;  
        default: return;    
    e.preventDefault();//not sure if needed
    }
}).keyup(function(e){
    switch(e.which){
        case 37://left
            ship.goingLeft= false;                    
            break;
        case 39://right
            ship.goingRight= false;  
        default: return;    
    e.preventDefault();//not sure if needed
    }
});

看看http://jsfiddle.net/gw761f5w/7/

jQuery animate（）用keydown平滑

1 个答案: