JavaScript仿微信打飞机游戏


Posted in Javascript onJuly 05, 2020

本文实例为大家分享了js微信打飞机游戏的具体代码,供大家参考,具体内容如下

首先实现微信打飞机游戏,首先会有自己和敌机,采用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、效果图如下:

JavaScript仿微信打飞机游戏

JavaScript仿微信打飞机游戏

最后附上源代码:

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");//找到最后一个span
 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);
 })();


 //碰撞检测
 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();

}

更多有趣的经典小游戏实现专题,分享给大家:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
不用写JS也能使用EXTJS视频演示
Dec 29 Javascript
jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)
Feb 05 Javascript
jQuery获得内容和属性方法及示例
Dec 02 Javascript
js实现点击图片将图片地址复制到粘贴板的方法
Feb 16 Javascript
jQuery实现页面内锚点平滑跳转特效的方法总结
May 11 Javascript
JavaScript字符串对象
Jan 14 Javascript
AngularJS实现使用路由切换视图的方法
Jan 24 Javascript
微信小程序实现图片预览功能
Jan 31 Javascript
create-react-app修改为多页面支持的方法
May 17 Javascript
Electron-vue开发的客户端支付收款工具的实现
May 24 Javascript
element-ui中Table表格省市区合并单元格的方法实现
Aug 07 Javascript
vue2.0 获取从http接口中获取数据,组件开发,路由配置方式
Nov 04 Javascript
fullPage.js和CSS3实现全屏滚动效果
May 05 #Javascript
jquery dataTable 获取某行数据
May 05 #jQuery
js实现数字递增特效【仿支付宝我的财富】
May 05 #Javascript
js和jquery中获取非行间样式
May 05 #jQuery
值得分享和收藏的xmlplus组件学习教程
May 05 #Javascript
微信小程序中多个页面传参通信的学习与实践
May 05 #Javascript
微信小程序 开发之全局配置
May 05 #Javascript
You might like
PHP远程连接MYSQL数据库非常慢的解决方法
2008/07/05 PHP
dedecms 批量提取第一张图片最为缩略图的代码(文章+软件)
2009/10/29 PHP
PHP array_flip() 删除重复数组元素专用函数
2010/05/16 PHP
有关PHP中MVC的开发经验分享
2012/05/17 PHP
基于header的一些常用指令详解
2013/06/06 PHP
PHP关联数组实现根据元素值删除元素的方法
2015/06/26 PHP
浅谈laravel数据库查询返回的数据形式
2019/10/21 PHP
window.onresize 多次触发的解决方法
2013/11/08 Javascript
jquery.validate使用时遇到的问题
2015/05/25 Javascript
JQuery中DOM事件绑定用法详解
2015/06/13 Javascript
EasyUI布局 高度自适应
2016/06/04 Javascript
zTree节点文字过多的处理方法
2017/11/24 Javascript
jQuery解析json格式数据示例
2018/09/01 jQuery
一步步教你利用Docker设置Node.js
2018/11/20 Javascript
Laravel admin实现消息提醒、播放音频功能
2019/07/10 Javascript
Vue v-text指令简单使用方法示例
2019/09/19 Javascript
如何利用vue实现波谱拟合详解
2020/11/05 Javascript
[03:40]2014DOTA2国际邀请赛 B神专访:躲箭真的很难
2014/07/13 DOTA
Python re模块介绍
2014/11/30 Python
Python 3中print函数的使用方法总结
2017/08/08 Python
解决python3 安装不了PIL的问题
2019/08/16 Python
Python + Requests + Unittest接口自动化测试实例分析
2019/12/12 Python
Python图像处理库PIL的ImageEnhance模块使用介绍
2020/02/26 Python
基于Python词云分析政府工作报告关键词
2020/06/02 Python
opencv 图像轮廓的实现示例
2020/07/08 Python
python高级特性简介
2020/08/13 Python
PyQT5速成教程之Qt Designer介绍与入门
2020/11/02 Python
墨西哥巴士车票在线购买:ClickBus
2018/03/27 全球购物
Linux开机引导的步骤是什么
2014/02/26 面试题
主管职责范文
2013/11/09 职场文书
医学专业五年以上个人求职信
2013/12/03 职场文书
酒店个人求职信范文
2014/01/25 职场文书
8和9的加减法教学反思
2014/05/01 职场文书
小学优秀班集体申报材料
2014/05/25 职场文书
Python 实现定积分与二重定积分的操作
2021/05/26 Python
Vue的过滤器你真了解吗
2022/02/24 Vue.js