时间：2021-07-01 10:21:17 帮助过：12人阅读
首先实现微信打飞机游戏，首先会有自己和敌机，采用canvas绘图来生成自己和敌人。
1、生成自己，且可以通过左右键来进行左右移动。
2、生成敌机。敌机就是在背景上随机生成图片。每隔一秒使其从上面下落。
3、现在主要是碰撞检测。每隔2.2秒进行一次检测，因为检测台频繁的话，直接长按向左向右键，都可以直接消除。就没有意义了
这个游戏还不太完整，没有生成子弹。大部分功能都已经实现了。
4、效果图如下：
最后附上源代码：
html&css
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8"/ >
<title></title>
<script type="text/javascript" src = "./fightFlight.js"></script>
<script src = "../jQuery/jquery-3.2.0.min.js"></script>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
#main{
width: 300px;
height: 500px;
border:1px solid red;
margin: 0 auto;
}
#my{
position: absolute;
z-index: 2;
top:350px;
}
#background{
position: absolute;
z-index: 1;
width: 300px;
height:500px;
border: 1px solid green;
background-image: url(../images/background.jpg);
}
img{
position: absolute;
z-index: 2;
}
#enmey{
width: 50px;
height: 50px;
}
#score{
position: absolute;
margin-left: 50%;
left: 150px;
top:100px;
width: 160px;
font-size: 20px;
font-family: "微软雅黑";
font-weight: bold;
line-height: 70px;
text-align: center;
}
</style>
</head>
<body>
<p id = "main">
<canvas id = "background"></canvas>
<canvas id = "my"></canvas>
<p id = "score">当前得分：0</p>
</p>
</body>
</html>JavaScript
【相关推荐】
1. 免费js在线视频教程
2. JavaScript中文参考手册
3. php.cn独孤九贱（3）－JavaScript视频教程
以上就是分享一个JavaScript（仿微信）实现打飞机游戏的实例代码的详细内容，更多请关注Gxl网其它相关文章！