游戏引擎

分离代码，构建建议游戏引擎
2016-01-01 00:41:40 +08:00
parent f85907d46d
commit f202f1f707
4 changed files with 228 additions and 158 deletions
--- a/game.js
+++ b/game.js
@@ -0,0 +1,160 @@
+'use strict';
+/*
+* 小型游戏引擎
+*/
+function Game(id,options){
+	var _ = this;
+	options = options||{};
+	var settings = {
+		width:960,						//画布宽度
+		height:640						//画布高度
+	};
+	for(var i in settings){
+		this[i] = options[i]||settings[i];
+	}
+	var $canvas = document.getElementById(id);
+	$canvas.width = _.width;
+	$canvas.height = _.height;
+	var _context = $canvas.getContext('2d');	//画布上下文环境
+	var _stages = [];							//布景对象队列
+	var _events = {};							//事件集合
+	var _index,									//当前布景索引					
+		_hander;  								//帧动画控制
+	//活动对象构造
+	var Item = function(options){
+		options = options||{};
+		var settings = {
+			x:0,					//横坐标
+			y:0,					//纵坐标
+			width:20,				//宽
+			height:20,				//高
+			type:1,					//对象类型
+			status:1,				//对象状态,1表示正常,0表示隐藏
+			orientation:0,			//当前定位方向,0表示上,1表示右,2表示下,3表示左
+			vector:{				//目标坐标
+				x:0,
+				y:0
+			},
+			speed:1,				//速度等级,内部计算器times多少帧变化一次
+			update:function(){} 	//更新参数信息
+		};
+		for(var i in settings){
+			this[i] = options[i]||settings[i];
+		}
+	};
+	Item.prototype.bind = function(eventType,callback){
+		if(!_events[eventType]){
+			_events[eventType] = {};
+			$canvas.addEventListener(eventType,function(e){
+				var position = _.getPosition(e);
+				_stages[_index].items.forEach(function(item){
+					if(Math.abs(position.x-item.x)<item.width/2&&Math.abs(position.y-item.y)<item.height/2){
+						var key = 's'+_index+'i'+item.index;
+						if(_events[eventType][key]){
+							_events[eventType][key](e);
+						}
+					}
+				});
+			});
+		}
+		_events[eventType]['s'+this.stage.index+'i'+this.index] = callback;
+	};
+	//布景对象构造器
+	var Stage = function(options){
+		options = options||{};
+		var settings = {
+			map:{							//地图信息
+				x:0,						//地图起点坐标
+				y:0,		
+				size:20,					//地图单元的宽度
+				data:[]						//地图数据
+			},
+			status:1,						//布景状态
+			audio:[],						//音频资源
+			images:[],						//图片资源
+			items:[]						//对象队列
+		};
+		for(var i in settings){
+			this[i] = options[i]||settings[i];
+		}
+	}
+	//动画开始
+	Stage.prototype.start = function() {
+		var requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame ||window.mozRequestAnimationFrame ||window.msRequestAnimationFrame;
+		var f = 0;		//帧数计算
+		var stage = this;
+		var fn = function(){
+			_context.clearRect(0,0,_.width,_.height);	//清除画布
+			if(stage.items.length){
+				f++;
+				stage.items.forEach(function(item,index){
+					if(!(f%item.speed)){
+						item.times = f/item.speed;							//计数器
+					}
+					item.update(_context);
+				});
+				_hander = requestAnimationFrame(fn);
+			}
+		};
+		this.stop();
+		_hander = requestAnimationFrame(fn);
+	};
+	//动画结束
+	Stage.prototype.stop = function(){
+		var cancelAnimationFrame = window.cancelAnimationFrame || window.webkitCancelAnimationFrame||window.mozCancelAnimationFrame ||window.msCancelAnimationFrame;
+		_hander&&cancelAnimationFrame(_hander);
+	};
+	//添加对象
+	Stage.prototype.createItem = function(options){
+		var item = new Item(options);
+		//对象动态属性
+		item.stage = this;					//绑定对象与所属布景绑定
+		item.index = this.items.length;		//对象层级
+		this.items.push(item);
+		return item;
+	};
+	//绑定事件
+	Stage.prototype.bind = function(eventType,callback){
+		if(!_events[eventType]){
+			_events[eventType] = {};
+			window.addEventListener(eventType,function(e){
+				var key = 's' + _index;
+				if(_events[eventType][key]){
+					_events[eventType][key](e);
+				}
+			});
+		}
+		_events[eventType]['s'+this.index] = callback;
+	};
+	//事件坐标
+	this.getPosition = function(e){
+		var box = $canvas.getBoundingClientRect();
+		return {
+			x:e.clientX-box.left*(_.width/box.width),
+			y:e.clientY-box.top*(_.height/box.height)
+		};
+	}
+	//创建布景
+	this.createStage = function(options){
+		var stage = new Stage(options);
+		stage.index = _stages.length;
+		_stages.push(stage);
+		return stage;
+	};
+	//下个布景
+	this.nextStage = function(){
+		if(_stages[_index+1]){
+			_index++;
+			_stages[_index].start();
+		}else{
+			throw new Error('unfound new stage.');
+		}
+	};
+	//初始化游戏引擎
+	this.init = function(){
+		_index = 0;
+		if(_stages[_index]){
+			_stages[_index].start();
+		}
+	};
+}