Javascript 创建图像并使其移动

Question

我正在尝试制作一个可以射击子弹的小型浏览器游戏。 现在我可以制造子弹，但我不知道如何移动。

我已经这样做了：

var bullet_id = 1;

                var timer_id; // reference of the timer, needed to stop it
                var speed = 350; // pixels/second
                var period = 10; // milliseconds
                var sprite; // the element that will move
                var sprite_speed = 0; // move per period
                var sprite_position = 315; // pixels

                function createbullet() {
                    var img = document.createElement("img");
                    img.src = "images/bullet.png";
                    img.id = "bullet";
                    img.name = "bullet";
                    var foo = document.getElementById("fooBar");
                    foo.appendChild(img);
                    move(1);
                    bullet_id++;
                }

                function animate ()
                {
                    document.getElementById("bullet").style.left=340 + "px";
                    sprite_position += sprite_speed;
                    sprite.style.left = sprite_position+'px';
                }

                function move(direction)
                {
                    if (timer_id) stop();
                    sprite_speed = speed * period/1000 * direction;
                    timer_id = setInterval (animate, period);
                }

                function stop()
                {
                    clearInterval (timer_id);
                    timer_id = null;
                }

                function init()
                {
                   sprite = document.getElementById ("bullet"); // the HTML element we will move
                   animate(); // just to initialize sprite position
                }

                window.onload = init; // start doing things once the page has loaded    */              

我尝试添加一个 bullet_id 系统，但我无法让它真正发挥作用。

这是我的html

<a onmousedown="document.jack.src=image2.src;" onmouseup="document.jack.src=image1.src;" onclick="createbullet()"><img id="jack" name="jack" src="/images/jack1.png" /></a>

            <div id="fooBar"></div>
            <script type="text/javascript" src="js/jquery.min.js"></script>
            <script type="text/javascript">

Answer 1

document.getElementById('jack').addEventListener('click',function(){...})

好吧，也许我没有想到这一点，刚刚设计了一个看看我是否可以并且它有效，希望它有所帮助：

/********************************************************/
stg=0
bgx=0
spd=70
buls=0
act=false
/********************************************************/
function ani(){
    var int
    act=true
    bgx-=52
    stg++
    $('#jack').css('background-position','-52px 0px')
    int=setInterval(function(){
        if(stg<4){bgx-=52;  stg++}
            else{   bgx=0;      stg=0 }
        $('#jack').css('background-position',bgx+'px 0px')
        if(stg==4)  new Bullet();
        if(!stg){
            act=false
            clearInterval(int)
        }
    },spd)
}
/********************************************************/
function Bullet(){
    var x,img,int
    x=52
    img=document.createElement('img')
        img.src='bullet.png'
        img.setAttribute('class','mh posAbs')
        img.setAttribute('style','top:0px;left:'+x+'px')
        img.setAttribute('id','bul'+buls)
    scre.appendChild(img)
    img=document.getElementById('bul'+buls)
    buls++
    int=setInterval(function(){
        if(x<300){
            x+=13
            img.setAttribute('style','top:0px;left:'+x+'px')
        }
            else{
                img.src='exp.png'
                clearInterval(int)
                setTimeout(function(){ scre.removeChild(img) },100)
            }
    },spd)
}
/********************************************************/
$(document).ready(function(){
    $('html').keydown(function(){
        if(!act){
            if(event.keyCode==13)   ani();
        }
    })
    $('html').click(function(){
        if(!act)    ani();
    })
})
/********************************************************/

---

<div id="scre" class="posRel">
    <div id="jack"></div>
</div>

---

<style>
    #jack{
        width:52px;
        height:37px;
        background:url('02.png') no-repeat;
        background-position:0px 0px;
        background-size:auto 100%
    }
</style>

---

好的，所以上面发生的情况是每次单击或按 Enter 时，都会调用触发动画，该动画分阶段进行动画处理，当它到达某个阶段时，它会调用 Bullet()构造函数来创建一个新的Object 或项目符号。

在创建 bullet 时，构造函数会生成一个 <img> 并根据 buls 变量为其赋予唯一的 id，然后递增以保持 id 的唯一性。

这是最重要的部分：

img=document.getElementById('bul'+buls)

如果没有它，它将不工作，因为代码中对img 的任何引用在它引用最后一个创建的img 之后不会说：-'bullet 5 of 10 that are on屏幕”。

一旦创建 Bullet 对象，它就会处理它所引用的图像的移动，无需使用任何其他代码移动它...

---

P.S.$('html').keydown(...) 充当自动发射器！

---