射击游戏代码分享

马黑黑

效果请点击一下链接：https://www.huachaowang.com/foru ... p;page=2#pid1643532

射击部分的全部代码：

1. <style>
   
2. #papa { margin: 50px auto 0; width: 1024px; height: 600px; position: relative; background: linear-gradient(165deg, gray, tan, olive); box-shadow: 4px 4px 24px #000; }
   
3. #papa::before { position: absolute; content: ''; width: 100px; height: 100px; left: 10px; top: 260px; border-radius: 50%; background: linear-gradient(120deg, snow, red); }
   
4. #gun { position: absolute; right: 0;  top:300px; width: 190px; height: 130px; transition: .02s; cursor: pointer; }
   
5. .bullet { position: absolute; width: 10px; height: 10px; left: calc(100% - 190px); top: 320px; border-radius: 50%; background: linear-gradient(120deg, white,green); }
   
6. @keyframes shot { to { left: var(--ll); top: var(--tt); } }
   
7. </style>
   
8. 
   
9. <div id="papa">
   
10.         <img id="gun" alt="" src="玩具枪图片地址" />
    
11.         <div id="ball"></div>
    
12. </div>
    
13. <audio id="gunAud" src="https://img.tukuppt.com/newpreview_music/08/98/68/5c88af299e50946800.mp3"></audio>
    
14. 
    
15. <script>
    
16. let total = 10; //子弹数
    
17. let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min;
    
18. //音效速率
    
19. gunAud.playbackRate = 3;
    
20. //鼠标按下
    
21. gun.onmousedown = () => {
    
22.         gun.style.transform = 'rotate(2deg)';
    
23.         gunAud.pause();
    
24. }
    
25. //鼠标松开
    
26. gun.onmouseup = () => {
    
27.         gun.style.transform = 'rotate(0)';
    
28.         gunAud.play();
    
29.         let bullets = document.querySelectorAll('.bullet');
    
30.         if(bullets.length >= total) papa.removeChild(bullets[0]);
    
31.         let bullet = document.createElement('span');
    
32.         bullet.className = 'bullet';
    
33.         bullet.style.cssText = `
    
34.                 --tt: ${num(280,340)}px; --ll: ${num(20,80)}px;
    
35.                 background: linear-gradient(120deg, rgb(${num(0,255)},${num(0,255)},${num(0,255)}), rgb(${num(0,255)},${num(0,255)},${num(0,255)}));
    
36.                 animation: shot .4s linear forwards;`
    
37.         papa.appendChild(bullet);
    
38. }
    
39. </script>

复制代码

小辣椒

黑黑，你真的无所不能

马黑黑

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

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

红影

原来是鼠标松开音效就响了，也就听到了枪声了

马黑黑

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

用单击事件也是可以的

红影

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

没看懂这句：

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

红影

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

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

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

马黑黑

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

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

心算

红影

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

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

马黑黑

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

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

红影

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

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

马黑黑

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

说的有道理

红影

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

不仅仅是说，也去做了

马黑黑

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

还做得挺好

红影

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

套用你的代码而已，让我自己做我哪会啊

马黑黑

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

这不是简单套用

红影

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

但仍然是套用

马黑黑

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

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

红影

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

不是不是，都还是在使用黑黑的代码的呢

马黑黑

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

代码，以织衣服为例，它是一个方法，好比缝纫机。不能说，我发明的一种走线法，然后大家用这个方法，衣服就是我做的。