JavaScript仿微信打飞机游戏示例代码

来源：动视网责编：小OO 时间：2020-11-27 20:16:58

JavaScript仿微信打飞机游戏示例代码

首先实现微信打飞机游戏，首先会有自己和敌机，采用canvas绘图来生成自己和敌人。1、生成自己，且可以通过左右键来进行左右移动。2、生成敌机。敌机就是在背景上随机生成图片。每隔一秒使其从上面下落。3、现在主要是碰撞检测。每隔2.2秒进行一次检测，因为检测台频繁的话，直接长按向左向右键，都可以直接消除。就没有意义了。这个游戏还不太完整，没有生成子弹。大部分功能都已经实现了。4、效果图如下：最后附上源代码。html&css；

推荐度：

点击下载本文 文档为doc格式

导读首先实现微信打飞机游戏，首先会有自己和敌机，采用canvas绘图来生成自己和敌人。1、生成自己，且可以通过左右键来进行左右移动。2、生成敌机。敌机就是在背景上随机生成图片。每隔一秒使其从上面下落。3、现在主要是碰撞检测。每隔2.2秒进行一次检测，因为检测台频繁的话，直接长按向左向右键，都可以直接消除。就没有意义了。这个游戏还不太完整，没有生成子弹。大部分功能都已经实现了。4、效果图如下：最后附上源代码。html&css；

这篇文章主要为大家详细介绍了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

JavaScript仿微信打飞机游戏示例代码

推荐度：

点击下载本文 文档为doc格式

标签： js 代码实例

热门焦点

JavaScript仿微信打飞机游戏示例代码

JavaScript仿微信打飞机游戏示例代码

JavaScript仿微信打飞机游戏示例代码

最新推荐

猜你喜欢

热门推荐