自作JavaScript飞机大战小游戏
不会canvas画板标签小朋友们的福音来啦，用标签也能制作简单小游戏哦！
飞机大战GitHub源码链接：https://github.com/shunyue1320/fjdz.git
做游戏就要有素材的啦 ，以下是在爱给网找到的素材：
首先3个页面的打开我们用div来做，通过更改div的隐藏属性display: none;与显示display: block来达到页面切换的效果：
- 沙丘大战
- 黑夜突袭
- 火焰山战
- 天空之城
- 丘陵战争
就这么短短的几行样式代码足够啦！
设置完css样式后我们就可以开始js代码的编写。
首先我们创建好各个文件，存储相应的材料及代码
var one = document.getElementById('one'),
haemal = one.querySelector("p"),
score = one.getElementsByClassName("score")[0],
tow = document.getElementById('tow'),
three = document.getElementById('three'),
air = tow.querySelectorAll(".plane li"),
start = tow.querySelectorAll(".list li"),
Air = 0, //代表哪架飞机
plane = 0, //第几形态
index;
var arrPlane = [['img/my1.png','img/my11.png','img/my111.png'],['img/my2.png','img/my22.png','img/my222.png'],['img/my3.png','img/my33.png','img/my333.png'],['img/my4.png','img/my44.png','img/my444.png']],
arrBullet = [['img/pd1.png','img/pd11.png','img/pd111.png'],['img/pd2.png','img/pd22.png','img/pd222.png'],['img/pd3.png','img/pd33.png','img/pd333.png'],['img/pd4.png','img/pd44.png','img/pd444.png']];
for (let i=0; istartGame(Air,i)游戏开始函数传递2个参数，Air代表选则的飞机，i代表选则的关卡，接下来我们将写游戏开始函数
//开始游戏
function startGame(Air,index){
one.innerHTML = ""; //清空初始页面
plane = 0;
var haemal = document.createElement("div");
haemal.className = "haemal";
var score = document.createElement("div");
score.className = "score";
var p = document.createElement("p");
haemal.appendChild(p)
one.appendChild(haemal);
one.appendChild(score);
tow.style.display = 'none';
one.style.display = 'block';
one.style.backgroundImage = ['url(img/context1.jpg)','url(img/context2.jpg)','url(img/context3.jpg)','url(img/context4.jpg)','url(img/context5.jpg)'][index];
通过document.createElement(“div”),我们可以在页面上创建相应的标签，图片，可以用来实现生成飞机，通过定时器setInterval我们可以实现，背景的移动效果，从而感觉飞机在移动！
audio()函数为实现背景音乐的生成我们来看看该函数里面有啥
//声音效果
function audio(n){
var music = ["audio/bgm.mp3","audio/boom.mp3","audio/bullet.mp3"],
dio = document.createElement("audio");
if(n != 1){
dio.className = "dio"
}
dio.src = music[n];
dio.autoplay = "autoplay";
dio.loop = "loop";
one.appendChild(dio);
if (n==1) {
setTimeout(function(){
one.removeChild(dio);
},800)
}
}
可见参数n是用与播放哪一个背景音乐而设计的，本游戏一共用了3个背景音乐，分别是 爆炸音效，发射子弹音效， 背景音乐。
如何实现生成我方飞机呢，接下来我们来看看：
function myAir(Air){
var myAirPlane = document.createElement("img");
var speed = 4; //速度
myAirPlane.className = "myplane";
myAirPlane.src = arrPlane[Air][plane];
myAirPlane.width = 70;
myAirPlane.height = 50;
myAirPlane.style.bottom = 5 + 'px';
myAirPlane.style.left = home.clientWidth/2 - myAirPlane.width/2 + 'px';
one.appendChild(myAirPlane);
//键盘移动事件
document.onkeydown = function (e) {
e = e || window.event;
switch (e.keyCode){
case 37:
case 65:
myAirPlane.style.left = Math.max(0,myAirPlane.offsetLeft-5) +'px';
break;
case 39:
case 68:
myAirPlane.style.left = Math.min(home.clientWidth - myAirPlane.width,myAirPlane.offsetLeft+5) +'px';
break;
default:break;
}
}
//触摸移动事件
one.ontouchstart = function(e){
if(e.touches[0].screenX < home.clientWidth/2){
myAirPlane.style.left = Math.max(0,myAirPlane.offsetLeft-5) +'px';
}else{
myAirPlane.style.left = Math.min(home.clientWidth - myAirPlane.width,myAirPlane.offsetLeft+5) +'px';
}
}
让我们来生成子弹吧
//生成子弹
one.bulletTimer = setInterval(function(){
var myAirBullet = document.createElement("img");
myAirBullet.className = "myAirBullet";
myAirBullet.src = arrBullet[Air][plane];
myAirBullet.width = 10*(1+plane);
myAirBullet.height = 20*(1+plane);
myAirBullet.style.top = myAirPlane.offsetTop - myAirBullet.height + 'px';
myAirBullet.style.left = myAirPlane.offsetLeft + myAirPlane.clientWidth/2 - myAirBullet.width/2 + 'px';
one.appendChild(myAirBullet);
//子弹发射
bulletEmit();
function bulletEmit(){
let top = myAirBullet.offsetTop -speed;
myAirBullet.style.top = top + 'px';
if(top <= 0){
//cancelAnimationFrame(motion);//清除运动函数
one.removeChild(myAirBullet);//清除
return false;
}else{
myAirPlane.parentNode && (myAirBullet.timer = requestAnimationFrame(bulletEmit));
}
}
},400);
设置完我方飞机我们就开始制作 生成敌军 啦，这个故事是一个漫长的事情，让我们来简单分析一下：
1.生成敌军，也就是通过创建img标签实现 位置Math.random()实现
2.敌军下落，通过改变img标签的top值可以实现哦
3.敌军与我方子弹碰撞 敌军消失 子弹消失 生成爆炸效果img标签
4.生成我军补给 子弹击中升级我军的 形态 与 子弹形态
4.敌军撞到我方飞机 关闭所有运动函数 背景声音 游戏结束 弹出得分
下面是碰撞判断
//敌军与子弹碰撞
for(let i=0; i接下来我们来了解以下碰撞判断函数： isCollision()
//碰撞过程
function isCollision(obj,enemy){ //obj:我军或子弹 enemy:敌军
var t1 = obj.offsetTop,
b1 = obj.offsetTop + obj.height,
l1 = obj.offsetLeft,
r1 = obj.offsetLeft + obj.width;
var t2 = enemy.offsetTop,
b2 = enemy.offsetTop + enemy.height,
l2 = enemy.offsetLeft,
r2 = enemy.offsetLeft + enemy.width;
return !(t1 > b2 || l1 > r2 || b1 < t2 || r1 < l2);
}
通过一个矩形体左边距离是否大于另一个矩形右边距离的方法来监测是否没有碰撞： return false(没有碰撞) / true（碰撞）
这是比较重要的一步哦 代码并不难好好理解以下吧！
以下是飞机大战小游戏代码连接 永久有效哦 拿去玩玩吧 不过要用谷歌浏览器打开哦 没做兼容呢！