CSS+Java Script+HTML实现打飞机小游戏

实际上我要发的这个小项目是我写崩了的，因为我一直使用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写个飞机小游戏玩玩吧
闲来无事写了个飞机小游戏. 设定很简单,子弹打到飞机就结束游戏. 实现步骤如下,有问题可以评论区讨论: 首先建立一个PlayGame项目和它之下的包: MyGameFrame(游戏实现)类: pack ...
Java飞机小游戏制作简单实现详细小结
567881@ftJava小游戏开发 Java飞机小游戏制作简单实现小结本人原来是个技术小白,寒假我跟着高淇老师的Java300集开始自学Java,跟着做了一个飞机大战小游戏,已经实现了飞机的自由移 ...
Java版打飞机小游戏
放假写的一个Java端打飞机小游戏. 复习到的知识点有:java图形界面,多线程,集合框架等. 主要的收获是知道了处理图层的方式,即JLayeredPane层次面板,主要思路如下: 1. ...
java打飞机小游戏（跟着网上视频写到）
package 飞机小游戏; //如果觉得好的话,给一点积分哦,太痛苦了,平时下一点资料都得需要 import java.awt.Color; import java.awt.Font; import ...
编程语言用 Java 开发一个打飞机小游戏（附完整源码）
编程语言用 Java 开发一个打飞机小游戏(附完整源码) 上图写在前面技术源于分享,所以今天抽空把自己之前用java做过的小游戏整理贴出来给大家参考学习.java确实不适合写桌面应用,这里只是通过 ...
js 实现微信打飞机小游戏小练习
还是想练习js 的内容看见了一个关于微信打飞机小游戏的例子,就照着做了一点,发现看懂和自己写真的是不一样,很多问题都是对函数理解不够透彻. 这次是使用了面向对象的方法创建了敌机类,在学习这个的时候也 ...
C语言射击类打飞机小游戏
使用c语言编写一个打飞机小游戏,使用键盘按键来进行游戏,击中敌机可获得积分,被敌机撞中死亡一次,每次游戏有3次机会. 在网上查询资料并且和同学讨论之后,对原来的代码有了一些改进, 改进:增加了颜色函数 ...
视频教程-JavaScript打飞机小游戏视频教程-JavaScript
JavaScript打飞机小游戏视频教程拥有6年web前端和后端开发经验,4年授课经验,还曾在百度专业培训过网络营销课程,曾就职于联想集团和当当网,不仅有丰富的项目实战经验还有营销经验,综合实力较强 ...
Android 打飞机小游戏的实现 - 画面移动对象封装碰撞效果
打飞机小游戏 *1.画背景 *2.画飞机 *3.画小怪 *4.画子弹 *--背景,飞机.小怪.子弹各有draw和move方法 public class MainActivity extends ...

CSS+Java Script+HTML实现打飞机小游戏

CSS+Java Script+HTML实现打飞机小游戏相关推荐

最新文章

热门文章