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 时，会调用点火动画，它会分阶段动画，当它到达某个阶段时会调用{{1构造函数用于创建新的Bullet()或项目符号。

在创建项目符号时，构造函数会生成Object并根据<img>变量为其提供唯一ID，然后递增以保持ID唯一。

这个是最重要的部分：

buls

不在没有它的情况下工作，因为代码中的img=document.getElementById('bul'+buls)引用后会引用最后img而不是说： - 'bullet 5 of屏幕上有10个。

创建后，img对象会处理引用它的图像的移动，无需使用任何其他代码移动它...

P.S。 Bullet充当自动火！

Javascript创建一个图像并使其移动

1 个答案: