使用一个css类jquery显示多个sprite

Question

所以这是我当前的代码设置，当按下空格键时，有一个块移动并射击子弹：

public class Bar<T extends Foo> {
    public void doFooBar(T param) {
// ----------------------^
// Type parameter here

        /* Code here */
    }
}

在CSS中，我将攻击精灵定义如下：

var MoveRate = 3;
var keys = {};
var attackx = 0;
var attacky = 0;
setInterval(loop, 20);

$(document).keydown(function(e) {
    keys[e.which] = true;
});

$(document).keyup(function(e) {
    delete keys[e.which];
});


function move() { // defines character movement
    var pos = $('#p1').position();
    for (var i in keys) {
        if (i == 38) { //up
            if (pos.top - 3 >= 0) {
                $('#p1').css('top', pos.top -= MoveRate);
            }
        }
        if (i == 39) { //right
            if (pos.left - 6 <= $('#main_body').width()) {
                $('#p1').css('left', pos.left += MoveRate);
            }
        }
        if (i == 37) { //left
            if (pos.left - 3 >= 0) {
                $('#p1').css('left', pos.left -= MoveRate);
            }
        }
        if (i == 40) { //down
            if (pos.top + 23 <= $('#main_body').height()) {
                $('#p1').css('top', pos.top += MoveRate);
            }
        }
    }
};


function shoot() { // defines bullet origin point
    var attackPos = $('#p1').offset();
    for (var i in keys) {
        if (i == 32 && attacky <= 0) { //spacebar
            $('#attack').css('left', attackPos.left += 0);
            $('#attack').css('top', attackPos.top -= 15);
            attackx = $('#p1').offset().left;
            attacky = $('#p1').offset().top;

        }

    }
};


function updatePositions() { // defines movement of all non character objects (i.e. attacks, npcs, weather)
    $('#attack').css('top', attacky -= 5);
};

function loop() { // updates game data every 20 ms
    move();
    shoot();
    updatePositions();
};

所以这基本上有一个块可以移动，可以拍摄精灵并等待它离开屏幕再允许再次拍摄。我想做到这一点，它可以拍摄另一个精灵，而另一个仍在旅行，并让他们同时显示。我想我应该将攻击改为一个类，但不确定如何实现jquery方面。