目录
前言:
前言：
在工作学习之余玩一会游戏既能带来快乐，还能缓解生活压力，跟随此文一起制作一个小游戏吧。
描述：
飞机大战（打飞机）游戏是一款休闲益智类游戏，有PC和手机等多平台版本。既简单又耐玩。该游戏通过控制我方飞机打敌方飞机。
功能按键：
W：向上
S：向下
A：向左
D：向右空格：发射炮弹
效果图展示：
代码实现思路：
我方飞机：
1.上下左右移动, 不可以出边界
2.设置一个函数用于我方子弹飞行
3.绑定事件，射子发弹
4.设置键盘按下事件
5.判断需要的几个按键，w，s，a，d， 空格（上，下，左，右，发射炮弹）
6.判断我方飞机发射的炮弹，是否打到敌方飞机，如果打到则出现爆炸图片
敌方飞机：
1.设置一个函用于生成敌方飞机
2.设置一个函数用于所有敌方飞机的移动
3.设置每过3秒生成, x轴随机
使用说明：
新建一个后缀为 HTML 的文件，然后把下面的代码复制进去，然后双击打开。
图片在百度网盘里面，复制下面链接下载images这个文件夹，这个文件夹跟后缀为HTML的文件是同级
百度网盘：
链接: https://pan.baidu.com/s/1KOzSFbPDa2o9kch6UlG9hQ
提取码: smbt
如果图片压缩包打不开，请往最后看，图片放到了最后
实现代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>打飞机</title>
<style>
*{
margin:0px;
padding:0px;
}
@keyframes go{
form{
background-position: 0px 0px;;
}
to{
background-position: 0px 768px;
}
}
#center{
width:512px;
height:768px;
border:1px solid blue;
margin:0 auto;
background-image: url(./images/bg.jpg);
background-position: 0px 0px;
position: relative;
overflow: hidden;
animation:go 5s linear infinite;
}
#myfly{
width:106px;
height:76px;
background:url(./images/me.png);
/* border:1px solid red; */
position: absolute;
bottom:100px;
left:50%;
}
.dan{
width:10px;
height:35px;
/* background-size: 100px 350px; */
background: url(./images/b.png);
/* border:1px solid red; */
position: absolute;
}
.di{
width:116px;
height:82px;
/* border:1px solid blue; */
background:url('./images/e2.png') no-repeat;
background-size: 100%;
position:absolute;
}
</style>
</head>
<body>
<div id='center'>
<div id='myfly'></div>
</div>
</body>
<script>
//准备元素节点
//我方飞机
var myfly = document.getElementById('myfly');
//获取屏幕的宽度
var maxwidth = document.getElementById('center').offsetWidth
//获取我方飞机的宽度
var myflywidth = myfly.offsetWidth;
//加入键盘事件
window.onkeydown = function(e){
//兼容事件对象
var e = e || window.event
//keyCode
console.log(e.keyCode);
switch(e.keyCode){
case 65://左
console.log('左左')
ydleft(-5)
break;
case 68://右
console.log('右右')
ydleft(5)
break;
case 87://上
console.log('上上')
ydtop(-5)
break;
case 83://下
console.log('下下')
ydtop(5)
break;
case 32://空
console.log('空空')
var dan = document.createElement('div');
dan.setAttribute('class','dan');
center.appendChild(dan);
//获取我方飞机当前的距离
var mleft = myfly.offsetLeft;
var mtop = myfly.offsetTop;
//子弹的宽度
var zw = dan.offsetWidth;
var zh = dan.offsetHeight;
//计算位置
var zl = mleft + myflywidth/2 - (zw/2)
var zt = mtop - zh
//更改
dan.style.left = zl + 'px';
dan.style.top = zt + 'px';
//调用子弹飞行
danfly();
break;
}
}
//角色
//1.我方飞机
// 1. 上下左右移动, 不可以出边界
// 2. 发射子弹
//2.敌人飞机 移动
//3.我方子弹 移动
//设置一个变量用于子弹移动的防抖
var ismytime = false;
/*设置一个函数用于我方子弹飞行*/
function danfly(){
if(ismytime){
return false;
}
//说明原来没有定时器,创建定时器
ismytime = setInterval(function(){
//获取所有的子弹
var dans = document.querySelectorAll('.dan');
if(dans.length <=0){
//满足这个条件说明没有子弹了
clearInterval(ismytime);
//初始化防抖的变量
ismytime=false;
}
//遍历每一个子弹
dans.forEach(function(v,k){
var oldtop = v.offsetTop;
var newtop = oldtop - 5;
var newleft = v.offsetLeft;
v.style.top = newtop+'px'
//判断当前子弹是否打中飞机
var dis = document.querySelectorAll('.di');
dis.forEach(function(val,key){
var x1 = val.offsetLeft;
var x2 = x1 + val.offsetWidth;
var y1 = val.offsetTop;
var y2 = y1 + val.offsetHeight;
//1 子弹x 大于飞机最小值x1 小于飞机的最大值x2
//2 子弹y 大于y1 小于y2
if((newleft >= x1 && newleft <= x2) && (newtop<=y2 && newtop>=y1) ){
console.log('我打中了');
//删除子弹
center.removeChild(v);
val.style.backgroundImage='url(images/boom.gif)';
//延时删除飞机
setTimeout(function(){
center.removeChild(val);
},200)
}
})
//加入一个删除子弹
if(newtop <= 0 - v.offsetHeight){
center.removeChild(v);
}
})
},30)
}
/*设置一个函用于生成敌方飞机
每过3秒生成, x轴随机
*/
createdi();//第一次调用
function createdi(){
ditime = setInterval(function(){
var di = document.createElement('div');
di.setAttribute('class','di');
var num = random(1,3);
center.appendChild(di);
//随机出x座标
var x = random(0,maxwidth-di.offsetWidth);
di.style.left = x + 'px'
di.style.backgroundImage='url(./images/e'+num+'.png)';
//调用移动
difly();
},2000)
}
var isdi = false;
/*设置一个函数用于所有敌方飞机的移动*/
function difly(){
if(isdi){
return false
}
isdi = setInterval(function(){
var dis = document.querySelectorAll('.di');
dis.forEach(function(v,k){
var oldtop = v.offsetTop;
var newtop = oldtop + 5;
v.style.top = newtop+'px';
if(newtop>= center.offsetHeight + v.offsetHeight){
center.removeChild(v);
}
})
},50)
}
/*设置一个函数用于我方飞机的左右移动
a用于接收的步数
*/
function ydleft(a){
//获取当前飞机的位置
var oldleft = myfly.offsetLeft;
var newleft = oldleft + a
//边界判断
if(newleft <= 0 || newleft >= maxwidth-myflywidth){
return false;
}
//更改
myfly.style.left = newleft + 'px'
}
//控制和判断飞机上下
function ydtop(you){
var oldtops = myfly.offsetTop
var newtop = oldtops + you
if(newtop<=0 || newtop>=center.offsetHeight - myfly.offsetHeight){
return false;
}
myfly.style.top = newtop + 'px'
}
//设置一个函数,用于随机
function random(min,max){
return Math.ceil(Math.random()*(max-min+1)+min-1);
}
</script>
</html>总结：
以上就是 基于 js 制作一个飞机大战，不懂得也可以在评论区里问我或私聊我询问，以后会持续发布一些新的功能，敬请关注。
图片：
869
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
