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

Javascript create an image and make it move

本文关键字：图像 移动 一个 创建 Javascript      更新时间：2023-10-27

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

我已经这样做了：

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系统，但我无法让它真正工作。

这是我的网页

<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">

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或项目符号。

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

这是最重要的部分： 

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

没有它，它将无法工作img，因为它将引用最后创建的img并且不说：-"屏幕上的 5 个项目符号，共 10 个项目符号"。

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

附言$('html').keydown(...)就像自动射击一样！

相关文章：