Question

我正在尝试使用JavaScript / jQuery制作太空入侵者的游戏。现在我的问题是我不能让飞船在屏幕上顺利移动。

我正在使用keydown事件通过 n 像素更改精灵的CSS位置。当我给它一个高值时，精灵移动得很快但不顺畅。当我选择将精灵移动1px时，它看起来更平滑，但速度很慢。任何想法如何处理它？</ p>

PS我不是要求动画库。我想用JavaScript / jQuery来实现它。

$(document).ready(function() {
  var xPos, yPos;

  var height = $(document).height();
  var width = $(document).width();

  function move(dir) {
          console.log(height + "," + width);
    xPos = parseInt($('#sprite').css('left'));
    yPos = parseInt($('#sprite').css('top'));

    switch (dir) {
      case 'up':
      if (yPos > 10) { $('#sprite').css('top', yPos - 10 + "px"); }
      break;
      case 'down':
      if (yPos < height-140) { $('#sprite').css('top', yPos + 10 + "px"); }
      break;
      case 'left':
      if (xPos > 10) { $('#sprite').css('left', xPos - 10 + "px"); }
      break;
      case 'right':
      if (xPos < width-140) { $('#sprite').css('left', xPos + 10 + "px"); }
      break;
    }
  }

    $(document).keydown(function(event) {
      var mykey = String.fromCharCode(event.which);          
      if (mykey == "W" || mykey == "w") { move('up'); }
      if (mykey == "S" || mykey == "s") { move('down') }
      if (mykey == "A" || mykey == "a") { move('left') }
      if (mykey == "D" || mykey == "d") { move('right') }          
    });

});

Answer 1

只需将CSS3 transition添加到您的船上：

#sprite{
    -webkit-transition : all 0.4s ease-in-out;
    -moz-transition : all 0.4s ease-in-out;
    -o-transition : all 0.4s ease-in-out;
    transition : all 0.4s ease-in-out;
}

然而，animating with translate is better than position top/left（Paul Irish的文章）。

此外，通过使用

缓存$('#sprite')来优化您的代码

 var $sprite = $('#sprite');

function move(dir) {
    xPos = parseInt($sprite.css('left'));
    yPos = parseInt($sprite.css('top'));
    ...

如果你不这样做（因为代码是当前的），你每次按下一个键时都会强制jQuery遍布整个DOM多次。如果你这样做，那么这个船就会被缓存，所以每次jQuery都不必查找它。我建议您查看jQache以便轻松缓存。

Answer 2

我为您提供了一个尽可能简单的纯Javascript代码段，因此您可以轻松地用图片或animated sprites替换div。

您还可以完全根据需要使用Javascript控制位置。

对于太空侵略者来说，这是理想的选择，因为所有船只都可以从一个位置平稳地移动到另一个位置。相信使用Javascript会变慢，这是从旧的补间体验中得出的一个错误，但是不需要中间像素来补间。 GPU由CSS transitions处理。

这里是100个移动div ...

let d = document, html = "", css3 = "", x, y, z, t = 10, n = 100

for (let i = 0; i < n; i++) {
  css3 += "#sprite" + i + " {display:inline-box; position:absolute; width:10px; height:10px; background-color:red; transition:top " + t + "s, left " + t + "s;}"
  html += "<div id='sprite" + i + "'></div>"
}

var e = d.createElement('style')
e.innerHTML = css3
d.head.appendChild(e)

var e = d.createElement('div')
e.innerHTML = html
d.body.appendChild(e)

move();
setTimeout(move, 0)
setInterval(move, 1000*t)

function move() {
  for (let i = 0; i < n; i++) {
    x = 600*Math.random()
    y = 200*Math.random()
    z = d.getElementById("sprite" + i)
    if (z) {
      z.style.top = y + "px"
      z.style.left = x + "px"
    }
  }
}

这更像是《太空入侵者》，但是代码变得混乱了……

let d = document, html = "", css3 = "", t = 2, n = 300
let  x, y, z, xx = 40, yy = 40, xxx = 30, yyy = 30
document.write(n + " space invaders, " + t + "s moves by " + xxx + "px")

for (let i = 0; i < n; i++) {
  css3 += "body {background:black; color:pink;} #sprite" + i + " {display:inline-box; position:absolute; width:30px; height:30px; background-color:blue; transition:top 1s, left " + t + "s;}"
  html += "<img id='sprite" + i + "' src='https://i.gifer.com/PCTg.gif'></img>"
}

var e = d.createElement('style')
e.innerHTML = css3
d.head.appendChild(e)

var e = d.createElement('div')
e.innerHTML = html
setTimeout(function(){d.body.appendChild(e)}, 100)

setInterval(move, 1000*t)

function move() {
  if (xxx > 0? xx > 100: xx < 40) {
    xx += xxx
    xxx = -xxx
    yy += 10
  }
  xx += xxx
  for (let i = 0; i < n; i++) {
    x = 30*(i % 30) + xx
    y = 30*parseInt(i / 30) + yy
    z = d.getElementById("sprite" + i)
    if (z) {
      z.style.top = y + "px"
      z.style.left = x + "px"
    }
  }
}

平滑快速的精灵动画（CSS）

2 个答案: