实际上我要发的这个小项目是我写崩了的，因为我一直使用C语言，所以写各个模块都用了函数，等到我把这个小项目做到稍微有点样子，我才发现，要做成雷电的样子，这他喵的应该用对象才对吧⊙﹏⊙b
于是我选择把这个小项目改了一下，变成了类似打飞镖的小游戏。
因为刚开始学习JS，所以代码肯定是瑕疵很多，主要是希望想要做点小项目的新手可以有一些参考。（比较我去网上找飞机大战的项目都是天花乱坠复杂的一批，作为一名萌新只能说是脑阔疼）
话不多说，放代码
<!DOCTYPE html><html><head><title>方块移动</title><!-- 至于为啥名字叫方块移动，其实刚开始我就只写了一个键盘事件，控制方块移动，后来我把方块换了个飞机皮然后一直增加内容，最后有了这副身躯。所以这刚开始是一个很小的程序，这也就是为啥我把CSS和JS都写在一个文件里的原因--><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>#ammo{width: 3px;height: 10px;background-image:url("ammo.png") ;background-size: cover;position: absolute;border: red 1px solid;}.blockL{width: 800px;height: 800px;background-color: aquamarine;border: 2px red solid;}#blockS{width: 50px;height: 50px;background-image: url("plane.png");background-size: cover;position: absolute;left: 500px;top: 700px;}#enemy01{width: 50px;height: 50px;background-image: url("enemy01.png");background-size: cover;position: absolute;left: 400px;top: 100px;}</style></head><body><div class="blockL" id='borde'><p id="blockS"></p><p id='enemy01'></p></div><script>var a=0;var ammop;var big;var enemy01=document.getElementById("enemy01");function enemymove(){var moveto = 10*Math.random();//使用math.random来产生一个随机数，让他移动if(moveto>=5)enemy01.style.left=enemy01.offsetLeft + 20+'px';elseenemy01.style.left=enemy01.offsetLeft - 20+'px';}function enemyc(){if(hit!=1){var emove = setInterval( enemymove,200);//setInterval随时间调用函数}}//该函数调用随机移动函数控制敌机移动function leftmove(){if(blockS.offsetLeft>=0)blockS.style.left=blockS.offsetLeft-30+'px';}function rightmove(){if(blockS.offsetLeft<=750)blockS.style.left=blockS.offsetLeft+30+'px';}function topmove(){if(blockS.offsetTop>=0)blockS.style.top=blockS.offsetTop-30+'px';}function buttommove(){if(blockS.offsetTop<=730)blockS.style.top=blockS.offsetTop+30+'px';}function hit(){if(ammop.offsetTop<=enemy01.offsetTop+50&&ammop.offsetLeft<=enemy01.offsetLeft+50&&ammop.offsetLeft>=enemy01.offsetLeft+0){a=0;big.removeChild(ammop);big.removeChild(enemy01);return 1;}//使用if语句判断是否击中}function shoot(){a=1;big = document.getElementById('borde');ammop = document.createElement('p'); //创建一个P标签ammop.id='ammo'; //给P设置CSS属性big.appendChild(ammop); //在DIV中生成Pammop.style.top=blockS.offsetTop - 30+'px';ammop.style.left=blockS.offsetLeft + 15+'px';var int = setInterval(function(){if(hit()==1){clearInterval(int);alert("你赢了");window.location.reload();}if(ammop.offsetTop>=10)ammop.style.top = ammop.offsetTop - 25 + 'px';else{a=0;big.removeChild(ammop);clearInterval(int);}},20);//if(ammop.offsetTop<200)//big.removeChild(ammop);//var ammo = document.getElementById("ammo");//ammo.style.top=blockS.offsetTop - 30+'px';//ammo.style.left=blockS.offsetLeft + 15+'px';};window.onload = function(){var blockS = document.getElementById('blockS');enemyc();document.onkeydown=function(event){console.log(event.keyCode);//键盘事件switch(event.keyCode){case 65:leftmove();break;case 68:rightmove();break;case 83:buttommove();break;case 87:topmove();break;case 32:if(a==0)shoot();break;}//65 A;68 D;83 S;87 W;32 空格;};}; </script></body></html>
其实这个小游戏只有三点比较复杂，第一个是键盘事件，第二个是setInterval() 方法，第三个是使用JS创建HTML标签
这三点网上的大佬肯定比我讲的更清楚，大家如果不明白还是问问度娘吧~
不过还是提示一点，要注意一下clearInterval()和removeChild()这两种方法，要知道如果不加注意的话，很容易创建容易删除难呀。
这篇文章就到这里了，希望能够给需要的朋友一点帮助吧。作为一名萌新欢迎大佬指正，也希望能和大家一起进步=w=
如果觉得《CSS+Java Script+HTML实现打飞机小游戏》对你有帮助，请点赞、收藏，并留下你的观点哦！
![[Java] java打飞机小游戏](https://sm.tqys.net/uploadfile/pic/400.jpg)
