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中将多个语句写成一个语句的两种方法小结
Dec 08 Javascript
番茄的表单验证类代码修改版
Jul 18 Javascript
jquery 学习笔记 传智博客佟老师附详细注释
Sep 12 Javascript
jQuery select控制插件
Aug 17 Javascript
用js模拟struts2的多action调用示例
May 19 Javascript
js实现图片无缝滚动特效
Mar 19 Javascript
Angular 中 select指令用法详解
Sep 29 Javascript
javascript轮播图算法
Oct 21 Javascript
vue.js+element-ui动态配置菜单的实例
Sep 07 Javascript
JavaScript禁用右键单击优缺点分析
Jan 20 Javascript
vue+element导航栏高亮显示的解决方式
Nov 12 Javascript
JS中数组实现代码(倒序遍历数组,数组连接字符串)
Dec 29 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 curl基本操作详解
2013/07/23 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十三)
2014/06/26 PHP
yii操作cookie实例简介
2014/07/09 PHP
Zend Framework连接Mysql数据库实例分析
2016/03/19 PHP
Laravel框架模板继承操作示例
2018/06/11 PHP
对JavaScript的eval()中使用函数的进一步讨论
2008/07/26 Javascript
JavaScript高级程序设计(第3版)学习笔记11 内建js对象
2012/10/11 Javascript
jQuery实现公告文字左右滚动的实例代码
2013/10/29 Javascript
JS操作JSON方法总结(推荐)
2016/06/14 Javascript
解析JavaScript实现DDoS攻击原理与保护措施
2016/12/26 Javascript
angularjs实现下拉列表的选中事件示例
2017/03/03 Javascript
基于JSON数据格式详解
2017/08/31 Javascript
jQuery实现的页面遮罩层功能示例【测试可用】
2017/10/14 jQuery
微信小程序promsie.all和promise顺序执行
2017/10/27 Javascript
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
2018/04/28 Javascript
Vuex 使用 v-model 配合 state的方法
2018/11/13 Javascript
[01:36]DOTA2完美大师赛趣味视频之与队友相处的十万个技巧
2017/11/19 DOTA
小结Python用fork来创建子进程注意事项
2014/07/03 Python
收集的几个Python小技巧分享
2014/11/22 Python
Python简单实现两个任意字符串乘积的方法示例
2018/04/12 Python
numpy.ndarray 交换多维数组(矩阵)的行/列方法
2018/08/02 Python
python实现对任意大小图片均匀切割的示例
2018/12/05 Python
python多线程共享变量的使用和效率方法
2019/07/16 Python
Django中间件基础用法详解
2019/07/18 Python
pycharm无法导入本地模块的解决方式
2020/02/12 Python
Python使用扩展库pywin32实现批量文档打印实例
2020/04/09 Python
如何在scrapy中集成selenium爬取网页的方法
2020/11/18 Python
HTML5高仿微信聊天、微信聊天表情|对话框|编辑器功能
2018/04/23 HTML / CSS
.net面试题
2015/12/22 面试题
领导干部作风整顿个人剖析材料
2014/10/11 职场文书
新员工辞职信范文
2015/05/12 职场文书
离婚案件被告代理词
2015/05/23 职场文书
环保宣传语大全
2015/07/13 职场文书
工作简历的自我评价
2019/05/16 职场文书
护士年终工作总结不会写?各科护士模板总结
2020/01/02 职场文书
Python中zipfile压缩包模块的使用
2021/05/14 Python