开始工程

start
2015-12-31 08:09:47 +08:00 · 2015-12-31 08:09:47 +08:00 · 557e045e61
commit 557e045e61
1 changed files with 99 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf8">
+		<title>Eat Beans - 吃豆游戏</title>
+		<style>
+			*{padding:0;margin:0;}
+			canvas{display:block;background: #000;margin:0 auto;}
+		</style>
+	</head>
+	<body>
+		<canvas id="canvas"></canvas>
+		<script>
+			//活动对象构造
+			function Item(options){
+				options = options||{};
+				var _ = this;
+				var settings = {
+					x:0,					//横坐标
+					y:0,					//纵坐标
+					width:20,				//宽
+					height:20,				//高
+					type:1,					//对象类型
+					status:1,				//对象状态,1表示正常
+					orientation:0,			//当前定位方向,0表示上,1表示右,2表示下,3表示左
+					vector:{				//目标坐标
+						x:0,
+						y:0
+					},
+					speed:1,				//速度等级,1表示与刷新频率一致
+					update:function(){},	//更新参数信息
+					draw:function(){}		//绘制
+				};
+				for(var i in settings){
+					_[i] = options[i]||settings[i];
+				}
+			}
+			//游戏对象
+			function Game(id,options){
+				var _ = this;
+				var settings = {
+					width:960,		//画布宽度
+					height:640,		//画布高度
+					view:{			//视图
+						x:0,
+						y:0,
+						width:640,
+						height:640
+					},
+					fresh:125,		//画布刷新频率,一秒8帧
+					map:[],			//地图信息
+					audio:[],		//音频资源
+					images:[],		//图片资源
+				};
+				for(i in options){
+					settings[i] = options[i];
+				}
+				var $canvas = document.getElementById(id);
+				$canvas.width = settings.width;
+    			$canvas.height = settings.height;
+    			var _context = $canvas.getContext('2d');	//画布上下文环境
+    			var _items = [];		//对象队列
+    			var _t = 0;				//内部计算器,交替帧数更新动画
+    			var _hander = null;  	//画布更新
+    			//动画停止
+    			this.stop = function(){
+    				_hander&&clearInterval(_hander);
+    			};
+    			//动画开始
+    			this.start = function(){
+    				_.stop();
+    				_hander = setInterval(function(){  //定时刷新画布
+	    				_t++;
+	    				_items.forEach(function(item,index){
+	    					item.update(_t);
+	    				});
+	    			},settings.fresh);
+    			};
+    			//添加对象
+    			this.addItem = function(item){
+    				_items.push(item);
+    			};
+    			//条件嗅探
+    			this.render = function(){
+
+    			};
+    			//绘图
+    			this.draw = function(){
+
+    			};
+			}
+			//主程序,业务逻辑
+			(function(){
+				var game = new Game('canvas');
+				game.start();
+			})();
+		</script>
+	</body>
+</html>