案例十三、模仿微信打飞机游戏

首先实现微信打飞机游戏，首先会有自己和敌机，采用canvas绘图来生成自己和敌人。
1.生成自己，且可以通过左右键来进行左右移动。

//生成自己，且可以左右移动
//控制飞机向右移动的函数function moveRight(event){context.clearRect(aligh,100,47,47);//防止飞机移除背景外if(aligh < 260){var img = new Image();img.src = "../images/self.png";img.onload = function(){context.drawImage(img, aligh,100);}aligh += 10 ;}//当飞机即将移出背景外时，让它停在最右端if (aligh == 260){var img = new Image();img.src = "../images/self.png";img.onload = function(){context.drawImage(img, 260,100);}}}//控制飞机向左移动的函数function moveLeft(event){context.clearRect(aligh,100,47,47);//防止飞机移出最左边的边界if(aligh > 0){var img = new Image();img.src = "../images/self.png";img.onload = function(){context.drawImage(img, aligh,100);}aligh -= 10 ;}//使其控制在最左侧if (aligh == 0){var img = new Image();img.src = "../images/self.png";img.onload = function(){context.drawImage(img, 0,100);}}}
//判断按下的是哪个键，然后控制飞机左右移动document.onkeydown = function(event){if(event.keyCode == 37){moveLeft();}if(event.keyCode == 39){moveRight();       }}

2.生成敌机。敌机就是在背景上随机生成图片。每隔一秒使其从上面下落。

var createId = setInterval(function(){var top = 0+'px'; var enemy  = document.createElement("img");enemy.src = "../images/enemy.png";//生成随机的位置var randomleft = Math.floor(Math.random() * 300) ;//如果生成的位置出现在背景外，则就取260
left = randomleft > 260 ? 260 + 'px': randomleft + 'px';leftArr.push(left); //保存每个敌机的距左边的距离，方便碰撞检测的计算arrPic.push(enemy); //将每个敌机的图片保存在数组中，方便碰撞检测后移除main.appendChild(enemy);enemy.style.paddingLeft = left ;enemy.style.paddingTop = top;var spandom = $("#main>img:last-child");//这儿利用jquery找到最后一个img//让最后一个img动起来。则就相当于为每一个img都绑定了动画
spandom.animate({"paddingTop":420},6000,function(){//当下落到底部时移除元素this.remove();arrPic.splice(0,1);  //从数组中移除图片leftArr.splice(0,1);  //从数组中移除距离fallCount ++;   //检测下落了多少个飞机，超过十个没被打中，游戏就结束});//如果落下的飞机数超过十个没有被打中，则游戏结束if(fallCount > 10){clearInterval(createId);clearInterval(crashId);alert("当前得分 ："+count+" , 很遗憾，游戏结束!")}},1000);

3。现在主要是碰撞检测。每隔2.2秒进行一次检测，因为检测台频繁的话，直接长按向左向右键，都可以直接消除。就没有意义了

function checkCrash(){crashId = setInterval(function(){//由于每次自由落下的飞机在上面函数中都被移除了。所以leftArr数组中保存的就是当前页面存在的飞机的左距离数组。for(var i = 0; i < leftArr.length; i++){//首先将两种都转换成int型进行比较var tempL = parseInt(leftArr[i]);var tempA = parseInt(aligh); //表示自己距左侧的位置//当自己的中心距离处于敌机的左右两侧范围内，则表示被击中if(tempL <= (tempA + 20)  && (tempA + 20) <= (tempL + 40)){arrPic[i].remove(); //碰撞检测，移除敌机的图片arrPic.splice(i,1); //从图片数组中移除图片leftArr.splice(i,1); //从记录敌机左侧距离数组中移除该敌机的距离count++;score.innerHTML = "当前得分 "+count;                        break; //检测到之后直接跳出循环，进行下一个2.2秒的碰撞检测}    }       },2200);}checkCrash();

这个游戏还不太完整，没有生成子弹。大部分功能都已经实现了。

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>
<div id = "main">
<canvas id = "background"></canvas>
<canvas id = "my"></canvas>
<div id = "score">当前得分：0</div>
</div></body>
</html>

JavaScript

    var main = document.getElementById('main');var my = document.getElementById('my');var score = document.getElementById("score");var context = my.getContext('2d');var crashId;var fallCount = 0;  //记录没被打中的飞机数，如果超过10，游戏结束var aligh = 0 ;var count = 0;  //记录打中的飞机数，即当前得分var leftArr = [];var arrPic = [];var left;var img = new Image();img.src = "../images/self.png";img.onload = function(){context.drawImage(img,aligh,100);}//生成自己，且可以左右移动function move(event){event = EventUtil.getEvent(event);context.clearRect(aligh,100,47,47);if(event.keyCode == 39 && aligh < 260 ){var img = new Image();img.src = "../images/self.png";img.onload = function(){context.drawImage(img, aligh,100);}aligh += 10 ;}if (aligh == 260){var img = new Image();img.src = "../images/self.png";img.onload = function(){context.drawImage(img, 260,100);}}}document.onkeypress = move;//随机生成敌机(function(){var createId = setInterval(function(){var top = 0+'px'; var enemy  = document.createElement("img");enemy.src = "../images/enemy.png";var randomleft = Math.floor(Math.random() * 300) ;left = randomleft > 260 ? 260 + 'px': randomleft + 'px';leftArr.push(left); //保存每个敌机的距左边的距离，方便碰撞检测的计算arrPic.push(enemy); //将每个敌机的图片保存在数组中，方便碰撞检测后移除main.appendChild(enemy);enemy.style.paddingLeft = left ;enemy.style.paddingTop = top;var spandom = $("#main>img:last-child");//找到最后一个spanspandom.animate({"paddingTop":420},6000,function(){//移除元素this.remove();arrPic.splice(0,1);  //移除图片leftArr.splice(0,1);  //从数组中移除距离fallCount ++;});//如果落下的飞机数超过十个没有被打中，则游戏结束if(fallCount >= 10){clearInterval(createId);clearInterval(crashId);alert("当前得分 ："+count+" , 很遗憾，游戏结束!")}},1000);})();//碰撞检测function checkCrash(){crashId = setInterval(function(){for(var i = 0; i < leftArr.length; i++){var tempL = parseInt(leftArr[i]);var tempA = parseInt(aligh);if(tempL <= (tempA + 20)  && (tempA + 20) <= (tempL + 40)){arrPic[i].remove(); //碰撞检测，移除敌机的图片count++;score.innerHTML = "当前得分 "+count;continue;}}console.log(count);},2200);}checkCrash();}

案例十三、模仿微信打飞机游戏相关推荐

js模仿微信打飞机游戏代码
效果: 部分代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://ww ...
pygame开发PC端微信打飞机游戏
pygame开发PC端微信打飞机游戏一.项目简介1. 介绍本项目类似曾经火爆的微信打飞机游戏.游戏将使用Python语言开发,主要用到pygame的API.游戏最终将会以python源文件game ...
JS微信打飞机游戏（一）
模拟微信打飞机游戏,JavaScript+HTML5+css实现,随后版本可能移植到Android和IOS. 首个版本里,仅实现按住键盘移动飞机移动. 不必解释过多,代码里面有注释. <!DOC ...
[GitHub开源]Android自定义View实现微信打飞机游戏
之前写了很多自定义View理论方面的文章,具体可以参见<Android中自定义View.ViewGroup理论基础详解> . 理论指导实践,本博文演示了如何通过自定义View实现微信打飞机 ...
【软件教程 §微信打飞机游戏无敌补丁：无敌模式开启方法】
[软件教程 §微信打飞机游戏无敌补丁:无敌模式开启方法] 微信5.0上线,游戏中心内置游戏<经典飞机大战>(俗称打飞机游戏)一天之内便遭遇破解,已越狱手机可开启无敌模式. 小编整理了微信 ...
Bluemix开发作品：微信打飞机游戏-Bluemix-专题视频课程
Bluemix开发作品:微信打飞机游戏-3248人已学习课程介绍使用Bluemix提供的服务开发作品"微信打飞机",更多技术内容请关注IBM新兴技术大学:htt ...
Python微信打飞机游戏编程学习笔记01
刚学习Python,看别人写的小游戏,照搬照学照写,纯手工手打,一步步,加深印象,加深学习运行环境是: Python 3.7.1 pygame 1.9.4 微信很火的打飞机游戏拿了学习下第一步 ...
Python微信打飞机游戏编程学习笔记02
继上一段的代码.继续完善中此段代码主要 1.增加了主飞机的载入,并且是动态效果的主飞机 2.增加了主飞机的移动控制终于有了游戏互动的感觉...继续加油 import pygame #导入pygam ...
cocos2d-x的初步学习二十三之模仿微信打飞机二
在这篇文章中,我们将把剩下的功能完成,首先,我们加入换子弹或是炸弹的功能,它的原理大体是这样的,设置物品出现的时间间隔,会随机出现物品的种类,然后判断物品跟飞机所在区域,碰撞检测,在一起就算是吃到这个 ...

案例十三、模仿微信打飞机游戏

案例十三、模仿微信打飞机游戏相关推荐

最新文章

热门文章