参数更新和绘制分离

game.js

@@ -36,7 +36,8 @@ function Game(id,options){
 				y:0
 			},
 			speed:1,				//速度等级,内部计算器times多少帧变化一次
-			update:function(){} 	//更新参数信息
+			update:function(){}, 	//更新参数信息
+			draw:function(){}		//绘制
 		};
 		for(var i in settings){
 			this[i] = options[i]||settings[i];
@@ -89,9 +90,10 @@ function Game(id,options){
 				f++;
 				stage.items.forEach(function(item,index){
 					if(!(f%item.speed)){
-						item.times = f/item.speed;		//计数器
+						item.frames = f/item.speed;		//计数器
 					}
-					item.update(_context);
+					item.update();
+					item.draw(_context);
 				});
 				_hander = requestAnimationFrame(fn);
 			}

index.js

@@ -19,10 +19,10 @@
 			width:100,
 			height:100,
 			speed:10,
-			update:function(context){
+			draw:function(context){
 				context.fillStyle = '#FC3';
 				context.beginPath();
-				if(this.times%2){
+				if(this.frames%2){
 					context.arc(this.x,this.y,this.width/2,.20*Math.PI,1.80*Math.PI,false);
 				}else{
 					context.arc(this.x,this.y,this.width/2,.01*Math.PI,1.99*Math.PI,false);
@@ -41,7 +41,7 @@
 		stage.createItem({
 			x:game.width/2,
 			y:game.height*.6,
-			update:function(context){
+			draw:function(context){
 				context.font = 'bold 42px Helvetica';
 				context.textAlign = 'center';
 				context.textBaseline = 'middle';
@@ -53,7 +53,7 @@
 		stage.createItem({
 			x:game.width-12,
 			y:game.height-5,
-			update:function(context){
+			draw:function(context){
 				context.font = '14px Helvetica';
 				context.textAlign = 'right';
 				context.textBaseline = 'bottom';