马黑黑 发表于 2022-7-13 20:50

射击游戏代码分享

效果请点击一下链接：https://www.huachaowang.com/forum.php?mod=viewthread&tid=61142&page=2#pid1643532

射击部分的全部代码：

<style>
#papa { margin: 50px auto 0; width: 1024px; height: 600px; position: relative; background: linear-gradient(165deg, gray, tan, olive); box-shadow: 4px 4px 24px #000; }
#papa::before { position: absolute; content: ''; width: 100px; height: 100px; left: 10px; top: 260px; border-radius: 50%; background: linear-gradient(120deg, snow, red); }
#gun { position: absolute; right: 0;top:300px; width: 190px; height: 130px; transition: .02s; cursor: pointer; }
.bullet { position: absolute; width: 10px; height: 10px; left: calc(100% - 190px); top: 320px; border-radius: 50%; background: linear-gradient(120deg, white,green); }
@keyframes shot { to { left: var(--ll); top: var(--tt); } }
</style>

<div id="papa">
        <img id="gun" alt="" src="玩具枪图片地址" />
        <div id="ball"></div>
</div>
<audio id="gunAud" src="https://img.tukuppt.com/newpreview_music/08/98/68/5c88af299e50946800.mp3"></audio>

<script>
let total = 10; //子弹数
let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min;
//音效速率
gunAud.playbackRate = 3;
//鼠标按下
gun.onmousedown = () => {
        gun.style.transform = 'rotate(2deg)';
        gunAud.pause();
}
//鼠标松开
gun.onmouseup = () => {
        gun.style.transform = 'rotate(0)';
        gunAud.play();
        let bullets = document.querySelectorAll('.bullet');
        if(bullets.length >= total) papa.removeChild(bullets);
        let bullet = document.createElement('span');
        bullet.className = 'bullet';
        bullet.style.cssText = `
                --tt: ${num(280,340)}px; --ll: ${num(20,80)}px;
                background: linear-gradient(120deg, rgb(${num(0,255)},${num(0,255)},${num(0,255)}), rgb(${num(0,255)},${num(0,255)},${num(0,255)}));
                animation: shot .4s linear forwards;`
        papa.appendChild(bullet);
}
</script>

小辣椒 发表于 2022-7-13 20:59

黑黑，你真的无所不能{:4_178:}

马黑黑 发表于 2022-7-13 21:09

小辣椒 发表于 2022-7-13 20:59
黑黑，你真的无所不能

这个不复杂的，绝大多数会CSS和JS的人都可以做出来

红影 发表于 2022-7-13 21:47

原来是鼠标松开音效就响了，也就听到了枪声了{:4_204:}

马黑黑 发表于 2022-7-13 21:49

红影 发表于 2022-7-13 21:47
原来是鼠标松开音效就响了，也就听到了枪声了

用单击事件也是可以的

红影 发表于 2022-7-14 11:01

马黑黑 发表于 2022-7-13 21:49
用单击事件也是可以的

没看懂这句：

--tt: ${num(280,340)}px; --ll: ${num(20,80)}px;这个范围是怎么得出的。看各个素材的大小和定位，貌似得不出这样的范围啊{:4_203:}

红影 发表于 2022-7-14 11:20

红影 发表于 2022-7-14 11:01
没看懂这句：

--tt: ${num(280,340)}px; --ll: ${num(20,80)}px;这个范围是怎么得出的。看各个素材 ...

没事了，我把tt和ll看反了，原来ll才是左右，以为是上下了{:4_173:}

马黑黑 发表于 2022-7-14 12:08

红影 发表于 2022-7-14 11:01
没看懂这句：

--tt: ${num(280,340)}px; --ll: ${num(20,80)}px;这个范围是怎么得出的。看各个素材 ...

心算

红影 发表于 2022-7-14 12:56

马黑黑 发表于 2022-7-14 12:08
心算

现在已经知道了，问的时候还没去动手，动手一试就知道了{:4_173:}

马黑黑 发表于 2022-7-14 18:18

红影 发表于 2022-7-14 12:56
现在已经知道了，问的时候还没去动手，动手一试就知道了

有时候凭空想象的确不得要领

红影 发表于 2022-7-14 19:36

马黑黑 发表于 2022-7-14 18:18
有时候凭空想象的确不得要领

用具体的数据去验证，比凭空想象好。

马黑黑 发表于 2022-7-14 19:55

红影 发表于 2022-7-14 19:36
用具体的数据去验证，比凭空想象好。

说的有道理

红影 发表于 2022-7-14 21:28

马黑黑 发表于 2022-7-14 19:55
说的有道理

不仅仅是说，也去做了{:4_173:}

马黑黑 发表于 2022-7-14 21:28

红影 发表于 2022-7-14 21:28
不仅仅是说，也去做了

还做得挺好

红影 发表于 2022-7-14 21:53

马黑黑 发表于 2022-7-14 21:28
还做得挺好

套用你的代码而已，让我自己做我哪会啊{:4_173:}

马黑黑 发表于 2022-7-14 22:08

红影 发表于 2022-7-14 21:53
套用你的代码而已，让我自己做我哪会啊

这不是简单套用

红影 发表于 2022-7-14 22:15

马黑黑 发表于 2022-7-14 22:08
这不是简单套用

但仍然是套用{:4_173:}

马黑黑 发表于 2022-7-14 22:16

红影 发表于 2022-7-14 22:15
但仍然是套用

不能这么说的，这是再创作

红影 发表于 2022-7-15 20:47

马黑黑 发表于 2022-7-14 22:16
不能这么说的，这是再创作

不是不是，都还是在使用黑黑的代码的呢{:4_187:}

马黑黑 发表于 2022-7-15 21:00

红影 发表于 2022-7-15 20:47
不是不是，都还是在使用黑黑的代码的呢

代码，以织衣服为例，它是一个方法，好比缝纫机。不能说，我发明的一种走线法，然后大家用这个方法，衣服就是我做的。
页: [1] 2
查看完整版本: 射击游戏代码分享