【游戏】——微信打飞机

原创 2017年05月30日 15:53:10

点击这里去下载源码

这是挺早之前的代码了,当时刚接触到js的面向对象,觉得用面向对象写游戏巨简单,于是尝试着写了这个游戏,喜欢的朋友可以star一下,谢谢。

这里我稍微讲解一下实现的过程

  • 界面切换就不详细说了,是基本的dom操作,相信大家也是非常的熟练了。
  • 飞机基本类

	// 飞机的类
	var plane = function(){
		this.stop = 0;
		this.state = 1;
		this.plane;
		this.timmer;
		this.x;
		this.y;
		this.width;
		this.height;
		this.score;
		this.blood;
		// 改变坐标的方法
		this._init = function(){
			this.createPlane();
			this.setPos();
		}
		// 被摧毁
		this.beDistoryed = function(){
			this.plane.src = this.plane.getAttribute("boom");
			this.stop = 1;
			score+=this.score;
			document.getElementById("score").innerHTML=score;
			var _this = this
			setTimeout(function(){
				_this.removeIt();
				_this.state = 0;
			},800)
		}
		// 飞机出界后销毁的方法
		this.removeIt = function(){
			this.plane.parentNode.removeChild(this.plane);
		}
		// 被攻击
		this.beAttacked = function(){
			var oldPic = this.plane.src
			var _this = this.plane;
			this.plane.src = this.plane.getAttribute("attacked");
			clearTimeout(this.timmer);
			this.timmer = setTimeout(function(){
				_this.src = oldPic;
			},300)
		}
		this.setPos = function(){
			this.plane.style.top = -this.height + "px";
			this.plane.style.left = (box_W-this.width)*Math.random() + "px"
		}
		// 飞机移动的方法
		this.move=function(user){
			if(!this.stop){
				this.plane.style.top = parseInt(this.plane.style.top) + this.speed + "px"
				if(this.checkUserPlane(user)){
					user.die();
				}
			}
		}
		// 判断是否出界
		this.checkOut = function(){
			if(parseInt(this.plane.style.top)>box.clientHeight){
				return true;
			}else{
				return false;
			}
		}
		// 检测是否与用户飞机相撞
		this.checkUserPlane = function(user){
			var u_T = parseInt(user.plane.style.top)
			var u_L = parseInt(user.plane.style.left)
			var u_W = parseInt(user.width)
			var u_H = parseInt(user.height)
			var p_T = parseInt(this.plane.style.top)
			var p_L = parseInt(this.plane.style.left)
			var p_W = parseInt(this.width)
			var p_H = parseInt(this.height)
			if(u_T+u_H>p_T && u_T<p_T+p_H && u_L+u_W>p_L && u_L < p_L+p_W){
				return true;
			}
			return false;
		}
	}
上面这个类定义了所有的飞机所需要的基本方法,用户和敌机都将继承这个类,js由于es5对面向对象的的继承的概念不是非常的清晰,多以模拟类继承的方法也五花八门,作用各不同,想深入了解的同学可以自行百度或者谷歌。

  • 用户飞机类,继承通用飞机类
	// 用户飞机的类
	var userPlane = function(){
		this.createPlane=function(){
			this.plane = document.createElement("img");
			this.plane.src="./image/我的飞机.gif";
			// 这边我直接将飞机爆炸的图片信息存入img中方便读取,其实直接存入对象的某个属性也是可以的
			this.plane.setAttribute("attacked","");
			this.plane.setAttribute("boom","./image/本方飞机爆炸.gif");
			this.blood = 1;
			this.width = 66;this.height=80;
			box.appendChild(this.plane);
		}
		this.setPos = function(){
			this.plane.style.top = box_H-this.height + "px"
			this.plane.style.left = (box_W-this.width)/2 + "px"
		}
		this.moveTo = function(x,y){
			if(x>this.width/2 && x<box.clientWidth-this.width/2){
				this.plane.style.left = x-this.width/2 + "px"
			}
			if(y>this.height/2 && y<box.clientHeight-this.height/2){
				this.plane.style.top = y-this.height/2 + "px"
			}
		}
		this.die = function(){
			state = 0;
			this.beDistoryed();
			box.onmousemove = null;
		}
		this.beDistoryed = function(){
			this.plane.src = this.plane.getAttribute("boom");
			document.getElementById("score2").innerHTML = score;
			document.getElementById("board").style.display="block";
		}
		this._init();
	}
以上是用户飞机类,用户想比较与敌机,不同的是,飞机的移动是有用户自己控制的,所以写了moveTo的方法,当然还要实现用户被摧毁的方法。

接下来是三个不同等级的飞机
1.敌机1,小飞机
	// 敌机1的类
	var dj1 = function(){
		this.score = 10;
		this.speed = 5+Math.floor(3*Math.random());
		this.createPlane=function(){
			this.plane = document.createElement("img");
			this.plane.src="./image/enemy1_fly_1.png";
			this.plane.setAttribute("attacked","");
			this.plane.setAttribute("boom","./image/小飞机爆炸.gif");
			this.blood = 1;
			this.width = 34;this.height=24;
			box.appendChild(this.plane);
		}
		this._init();
	}
2.中型敌机
	//敌机2的类
	var dj2 = function(){
		this.score = 30;
		this.speed = 3+Math.floor(3*Math.random());
		this.createPlane=function(){
			this.plane = document.createElement("img");
			this.plane.src="./image/enemy3_fly_1.png";
			this.plane.setAttribute("attacked","./image/中飞机挨打.png");
			this.plane.setAttribute("boom","./image/中飞机爆炸.gif");
			this.blood = 8;
			this.width = 46;this.height=60;
			box.appendChild(this.plane);
		}
		this._init();
	}
3.大型敌机
	//敌机3的类
	var dj3 = function(){
		this.score = 100;
		this.speed = 1+Math.floor(3*Math.random());
		this.createPlane=function(){
			this.plane = document.createElement("img");
			this.plane.src="./image/enemy2_fly_1.png";
			this.plane.setAttribute("attacked","./image/大飞机挨打.png");
			this.plane.setAttribute("boom","./image/大飞机爆炸.gif");
			this.blood = 20;
			this.width = 110;this.height=164;
			box.appendChild(this.plane);
		}
		this._init();
	}
PS:三个敌机的不同点是,他们的血量与飞行速度都是不同的,虽然飞行速度都是随机的,但是是要基于一定速度的一定范围内的随机变化,不然会影响游戏性。

写完所有的飞机类,还需要补充写一个子弹类,每一个子弹都是一个对象,在循环遍历中去判断子弹与飞机是否重合(其实这个算法不对,应该是计算敌机是否经过子弹的相邻两次位移的弹道上,由于是很早之前写的了就不想去做修改了)

  • 子弹的类
	// 子弹的类
	var zidan = function(plane){
		this.state = 1;
		this.zidan;
		this.width=6;
		this.height=14;
		this.x;
		this.y;
		this.speed = 40;
		// 子弹的构造方法
		this._init = function(){
			this.create();
			this.setPos();
		}
		// 子弹创建的方法
		this.create = function(){
			this.zidan = document.createElement("img");
			this.zidan.src="./image/bullet1.png";
		}
		// 给子弹定位的方法
		this.setPos = function(){
			this.zidan.style.left = parseInt(plane.plane.style.left)+plane.width/2-this.width/2 +"px";
			this.zidan.style.top = parseInt(plane.plane.style.top)-this.height + "px";
			box.appendChild(this.zidan)
		}
		// 子弹飞行的方法
		this.move = function(){
			this.zidan.style.top = parseInt(this.zidan.style.top)-this.speed + "px";
			this.checkDj();
		}
		// 子弹检测出界的方法
		this.checkOut = function(){
			if(parseInt(this.zidan.style.top)<box.offsetTop-this.height){
				return true
			}else{
				return false
			}
		}
		// 子弹消失的方法
		this.removeIt = function(){
			this.zidan.parentNode.removeChild(this.zidan);
		}
		// 检测是否装机到敌机的方法
		this.checkDj = function(){
			if(!this.state)return
			var djL,djT,djW,djH;
			for(var i in djArr){
				djL = parseInt(djArr[i].plane.style.left);
				djT = parseInt(djArr[i].plane.style.top);
				djW = parseInt(djArr[i].width);
				djH = parseInt(djArr[i].height);
				if(parseInt(this.zidan.style.left)>djL && 
				   parseInt(this.zidan.style.left)<djL+djW-this.width &&
				   parseInt(this.zidan.style.top)>djT &&
				   parseInt(this.zidan.style.top)<djT+djH){
					if(djArr[i].blood<=1){
						if(!djArr[i].stop){
							djArr[i].beDistoryed();
							this.removeIt()
							this.state = 0;
							break;
						}
					}else{
						djArr[i].blood--;
						djArr[i].beAttacked();
						this.removeIt()
						this.state = 0;
						break;
					}
				}
			}
		}
		this._init();
	}

继承:这里使用的是
	// 继承
	userPlane.prototype =new plane();
	dj1.prototype =new plane();
	dj2.prototype =new plane();
	dj3.prototype =new plane();
当然还有call和apply或者其他的方法,我这里就用一个能实现就行
接下来就是开始通过每一帧去改变子弹飞机的位置,实现动画的启动,一级判断飞机的各个事件。

效果图就是




版权声明:本文为博主原创文章,转载请注明出处。

android游戏——微信打飞机

  • 2013年10月10日 10:52
  • 4.06MB
  • 下载

JavaSE实战——GUI简述、用户登录注册最终版、模拟微信打飞机游戏实例

本文简述了JavaSE的GUI开发。

使用3.0实现微信打飞机——1.游戏开始场景

这个demo我们先来写个游戏开始场景,使用3.0的方法搭建我们的工程,下载资源文件放到resource目录下,我这里逐一介绍。首先用cocos new新建一个工程,用vs2012打开工程文件,然后删除...

使用3.0实现微信打飞机——12.游戏结束场景

如果玩家不死的话,对于玩家来说就没有什么挑战性了,所以我们必须得让玩家“死”。条件就是玩家飞机和敌机碰撞的时候或者碰撞到了炸弹道具的时候,然后切换到游戏结束场景,所以,我们必须实现一个游戏结束场景。在...

Python编写微信打飞机小游戏(八)

现在飞机已经能够带着血条突突突飞下来让玩家虐,于是我们给用户一点打飞机的成就感——计分系统以及难度递增机制。   1、计分系统   首先,我们在main()函数中添加全局变量(score)并初始化...

仿微信打飞机小游戏GamePlane(1)----概述

去公司面试的时候,公司要求做一个Homework,实现类似于微信打飞机的游戏,...

JS微信打飞机游戏(一)

Hit Flyer canvas#mycanvas { position: absolute; margin: auto auto; top: 5px; left: 5px; right...

Crossin先生的微信打飞机游戏(1)

前几天在Crossin先生的微信号上看到了这个用Pygame写的微信飞机大战游戏,因为之前有玩过,而且和好友打榜打的厉害,所以有兴趣来用python复现一下。...

微信打飞机游戏思路复习

1、 图片素材放supporting files 2、添加背景移动 for循环加两张背景图片,坐标不同。 注意Y轴坐标设定要和for循环的i关联。开timer 使得背景图移动。 两图都需要移动...
  • lzy641
  • lzy641
  • 2015年09月08日 21:23
  • 376

JS微信打飞机游戏(四)

等朋友微信打飞机游戏图片,不然判断碰撞,擦除等写的不规范,后期难维护。 这个版本里更新了如下功能: 1.修复子弹移除但没有在canvas里擦除的bug. 2.随机生成敌人飞机,并下降 3.判断...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:【游戏】——微信打飞机
举报原因:
原因补充:

(最多只允许输入30个字)