当前位置:Gxlcms > JavaScript > 分享一个JavaScript(仿微信)实现打飞机游戏的实例代码

分享一个JavaScript(仿微信)实现打飞机游戏的实例代码

时间:2021-07-01 10:21:17 帮助过:12人阅读

这篇文章主要为大家详细介绍了JavaScript仿微信打飞机游戏的相关代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

首先实现微信打飞机游戏,首先会有自己和敌机,采用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网其它相关文章!

人气教程排行