Question

我有一个使用position属性和javascript的Player控制器，但是有点活泼。我该怎么办？

我尝试做一个无限循环，然后添加一个超时来减慢它到客户端计算机的帧中的速度，但是它只是输出了相同的结果，即快。另外，我在Atom中编写了此代码，并在Google Chrome浏览器中对其进行了编译。

JavaScript

var player = document.getElementById('Player');
var ctx = player.getContext("2d");
var playerXPos = 0;
var playerYPos = 0;
var playerSpeed = 5;
ctx.fillStyle = "Red";
ctx.fillRect(0,0,50,50);

function animate(key) {
  if (key.keyCode == 39) { //Right Arrow
    playerXPos += playerSpeed;
    player.style.left = playerXPos + "px";
  }
  if (key.keyCode == 37) { //Left Arrow
    playerXPos -= playerSpeed;
    player.style.left = playerXPos + "px";
  }
  if (key.keyCode == 38) { //Up Arrow
    playerYPos -= playerSpeed;
    player.style.top = playerYPos + "px";
  }
  if (key.keyCode == 40) { //Down Arrow
    playerYPos += playerSpeed;
    player.style.top = playerYPos + "px";
  }
  else {
    return false;
  }
}

document.onkeydown = animate;

HTML部分 （大声笑html不是编程语言，而是其他语言）

<!DOCTYPE html>
<html>
<head>
  <title>Player Test</title>
  <style>
    #Player {
      position: relative;
    }
  </style>
<body>
  <canvas id="Player"></canvas>
  <script src="App/playerController.js" type="text/javascript"></script>
</body>
</html>

我希望它平滑。我想我应该使用线性代数，但是我在javascript中没有那么先进。我实际上是一个初学者。

Answer 1

您可以使用CSS过渡属性来获得更平滑的效果。您需要在CSS中设置元素的初始顶部和左侧位置，因为这些是您随JS更改的属性。我已将动画设置为持续0.5秒，但是可以根据需要将其调整为更快或更慢：

var player = document.getElementById('Player');
var ctx = player.getContext("2d");
var playerXPos = 0;
var playerYPos = 0;
var playerSpeed = 5;
ctx.fillStyle = "Red";
ctx.fillRect(0, 0, 50, 50);

function animate(key) {
  if (key.keyCode == 39) { //Right Arrow
    playerXPos += playerSpeed;
    player.style.left = playerXPos + "px";
  }
  if (key.keyCode == 37) { //Left Arrow
    playerXPos -= playerSpeed;
    player.style.left = playerXPos + "px";
  }
  if (key.keyCode == 38) { //Up Arrow
    playerYPos -= playerSpeed;
    player.style.top = playerYPos + "px";
  }
  if (key.keyCode == 40) { //Down Arrow
    playerYPos += playerSpeed;
    player.style.top = playerYPos + "px";
  } else {
    return false;
  }
}

document.onkeydown = animate;

#Player {
  position: relative;
  left: 0;
  top: 0;
  -webkit-transition: all 0.5s;
  /* For Safari 3.1 to 6.0 */
  transition: all 0.5s;
}

<canvas id="Player"></canvas>

Answer 2

您可以尝试以下方法：

var player = document.getElementById('Player');
var ctx = player.getContext("2d");
var playerXPos = 0;
var playerYPos = 0;
var playerXSpeed = 0;
var playerYSpeed = 0;
ctx.fillStyle = "Red";
ctx.fillRect(0,0,50,50);

setInterval(function(){
    playerXPos += playerXSpeed;
    player.style.left = playerXPos + "px";
    playerYPos += playerYSpeed;
    player.style.top = playerYPos + "px";
},5)

function animate(event) {
    let x = event.which || event.keyCode
    switch (x) {
        case 39://Right Arrow
        playerXSpeed = 1
            break
        case 37://Left Arrow
        playerXSpeed = -1
            break
        case 38://Up Arrow
        playerYSpeed = -1;
            break
        case 40://Down Arrow
        playerYSpeed = 1;
            break
    }
}

document.onkeydown = animate;
document.onkeyup = function(){
    let x = event.which || event.keyCode
    switch (x) {
        case 39://Right Arrow
        case 37://Left Arrow
            playerXSpeed = 0
            break
        case 38://Up Arrow
        case 40://Down Arrow
            playerYSpeed = 0;
            break
    }
}

如何使用Javascript使CSS偏移更平滑？

2 个答案: