Question

我正在使用jquery从屏幕左侧向右侧制作一个简单的射击游戏。当子弹射击时，它将永远向右移动。当它到达页面末尾的某个坐标时，如何将其删除？

这使子弹移动......

var flyingBullet = function(){

      $(".bullet").each(function() {
            var oldLeft = $(this).offset().left;
            $(this).css("left", oldLeft + 10 + "px");
        });
}

setInterval(flyingBullet, 200);

Answer 1

<强> jsBin demo

（子弹在 .remove() 时使用jQuery＆＃39; leftPosition === worldWidth方法。

^{（我会在画布中完成所有操作，以获得更好的性能结果，视觉效果和重新绘制，但是在这里：）}

我发现一个非常糟糕的主意来循环未缓存的 $()类选择器元素。

创建其他变量，例如......

var world = {$el:$("body"), width: $('body').width()};
var $player = $('#player');
var mousePosY = 0;

...将保留所有已创建的项目符号

的数组

var allBullets = [];

跟踪所有活跃的项目符号并删除。

比创建子弹对象与子弹属性（具有位置，颜色，形状，速度等的内部处理程序等）并将该对象附加到我们的子弹阵列并插入进入DOM：

function Bullet() {
  var obj = {
    $el : $('<div/>',{'class':'bullet'}),
    css : {top: 100, left:0},   // Start at left 0
    speed : 10,
    move : function() { // This method will be used inside the animation loop!
      obj.css.left += obj.speed;      // Advance Bullet
      if(obj.css.left > world.width){ // Notice this!!!!
        var i = allBullets.indexOf(obj); // !! Use of indexOf (xBr. support).
        allBullets.splice(i, 1);
        obj.$el.remove();
      }else{
        return obj.$el.css( obj.css );
      }
    }
  };
  allBullets.push( obj );
  $('body').prepend( obj.$el );
  return obj;      
}

删除项目符号（正如您在上面的代码中看到的那样），只需：

var i = allBullets.indexOf(obj); // Find the index of that object inside Array
allBullets.splice(i, 1); // Remove it from Array
obj.$el.remove();        // Remove it from the DOM

请注意，indexOf()是在ES5中引入的，而在旧浏览器中不存在。您可能希望使用Polyfill或将其替换为将收集项目符号ID的对象...（我不会在此答案中涵盖该主题）。

玩家点击＆＃34; Fire＆＃34;您只需创建该子弹的new实例，如：

$("body").on('click', function(){
  new Bullet(); // Create a new Bullet with all the properties, move etc.
});

，它将立即收集到allBullets数组中。

要移动子弹，请通过window.requestAnimationFrame：

function moveBullets(){
  if(allBullets.length>0) // Only if we have bullets in Array!
  for(var i=0; i<allBullets.length; i++) allBullets[i].move(); // Move it using
                                                               // his own method.
}

我不知道那颗子弹应该飞得好吗？每200毫秒20 x 20px？
同样出于动画目的，我会使用window.requestAnimationFrame代替setInterval，以允许浏览器指示重新绘制的速度。

// ::: FRAME RATE
window.requestAnimFrame = (function() {
  return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    function( callback ){
      window.setTimeout(callback, 1000 / 60);
    };
}());

// ::: ENGINE
(function engine() {
  // ----- Insert here functions you want to loop in framerate:
  moveBullets();
  // -----
  requestAnimFrame(engine); // request a new frame
})();

如果你真的想使用DOM元素，我还建议使用增强的CSS3过渡并使用translate3d(x, y, z)移动元素。您不必每次都移动元素，但浏览器会为您移动它！您可以预先计算它的轨迹，以便跟踪与动画帧速率和内部时钟相关的元素位置。（在我的回答中，我也不会涵盖这个例子。）

以上是为了指导，看看结果
in this DEMO (with random bullets speed)

如何在到达屏幕边缘时删除元素

1 个答案: