/*** author yh* @param imgCount 图片数组 必须有id和src* @param callback 回调函数* @returns 每个精灵的canvas和context*/
function getImg(imgCount,callback){var total = imgCount.length,load = 0,img = {},w = 0,h = 0;for(var i = 0;i < total;i++){var id = imgCount[i].id;var imgs = new Image();imgs.src = imgCount[i].src;//设置canvas的width和heightif(imgCount[i].width && imgCount[i].height){w = imgCount[i].width;h = imgCount[i].height;}else{w = imgs.width;h = imgs.height;}img["cvs"+id] = document.createElement("canvas");img["cvs"+id].width = w;img["cvs"+id].height = h;img["ct"+id] = img["cvs"+id].getContext("2d");img["ct"+id].drawImage(imgs,0,0,imgs.width,imgs.height,0,0,w,h);imgs.onload = function(){load++;　　　　　　　delete imgs;　　　　　　　imgs = undefined;};};if(typeof callback == "function"){var me = this;function check(){if(load >= total)callback.call(me,arguments);elsesetTimeout(check,300);}check();};return img;
}

var global = getImg([{id:"bg",src:"img/bg.png",width:game.width,height:game.height},{id:"over",src:"img/over.jpg",width:game.width,height:game.height},{id:"di1",src:"img/1.png",width:w-20,height:h-20},{id:"di2",src:"img/2.png",width:w-20,height:h-20},{id:"di3",src:"img/3.png",width:w-20,height:h-20},{id:"di4",src:"img/4.png",width:w-20,height:h-20},{id:"di5",src:"img/5.png",width:w-20,height:h-20},{id:"di6",src:"img/6.png",width:w-20,height:h-20},{id:"di7",src:"img/7.png",width:w-20,height:h-20},{id:"di8",src:"img/8.png",width:w-20,height:h-20},{id:"di9",src:"img/9.png",width:w-20,height:h-20},{id:"hand",src:"img/hand.png",width:w-20,height:h-20},],callback);

/*** 根据id来获取global中的canvas和context，进行get和put ImageDa* target放所有canvas的对象，上面的global * context为目标画布的上下文* x y 为初始坐标* id 为精灵的id*/
function draw(target,context,x,y,id){var canvas = target["cvs" + id],ct = target["ct" + id],data = ct.getImageData(0,0,canvas.width,canvas.height);context.putImageData(data,x,y);
}

function Game(option){//对象扩展for(var attr in option)this[attr]  = option[attr];
}
Game.prototype = {canvas:null,ct:null,width:999,height:999,x:0,y:0,n:4,m:6,FPS:30,sleep:0,arr:[],dinoArr:[],click:0,init : function(){this.canvas = document.createElement("canvas");this.canvas.width = this.width;this.canvas.height = this.height;document.body.appendChild(this.canvas);this.ct = this.canvas.getContext("2d");this.sleep = (1000/this.FPS)|0;this.time = Date.now();this.moused = false;},update:function(){this.initDraw();this.move();},initDraw : function(){this.drawImg(global,this.ct,0,0,"bg");var y = 0;for(var i = 0;i<this.m;i++){var x = 0;var ran = ((Math.random()*4)|0);for(var j = 0;j<this.n;j++){this.ct.fillStyle = "#fff";this.ct.fillRect(x,y,97,97);if(j == ran && i != this.m-1){this.drawImg(global,this.ct,x+10,y+10,"hand");this.arr.push(j);}else if(j == ran && i == this.m-1){this.drawImg(global,this.ct,x+10,y+10,"di6");}x += 100;}y += 100;}this.listener(this.arr);},drawImg : function(target,context,x,y,id){var canvas = target["cvs" + id];var    ctx = target["ct" + id];var data = ctx.getImageData(0,0,canvas.width,canvas.height);context.putImageData(data,x,y);}
}

listener : function(arr,reloadImg){this.arr = arr;//获取边界var me = this,index = this.arr.pop();this.dinoArr.push(index);this.reloadImg = reloadImg;if(this.reloadImg){console.log(this.dinoArr)var dinoIndex = this.dinoArr.shift();this.y = 500 + 10;this.x = dinoIndex*100 + 10;}var targetX = index*100 + 50,targetY = 450;//添加鼠标事件，判断范围this.canvas.onmouseup = function(event){var    cx =  event.clientX - me.canvas.offsetLeft - targetX,cy = event.clientY - me.canvas.offsetTop - targetY;if(-50<=cx&& cx <= 50 && -50<= cy && cy<= 50){me.moused = true;}};},move : function(){var me = this;this.mainLoop = setInterval(function(){me.loop();},this.sleep);},loop : function(){var time = document.getElementById("time");Time = (Date.now() - this.time)/1000;time.innerHTML = Time;document.getElementById("grade").innerHTML = this.click;if(this.moused){this.moused = false;this.click++;this.reload();}if(Time >= 20){this.drawImg(global,this.ct,0,0,"over");clearInterval();alert("你一共抓了"+this.click+"只恐龙");}},reload:function(){var data = this.ct.getImageData(0,0,this.width,this.height);this.ct.clearRect(0,0,this.width,this.height);this.reDraw();this.ct.putImageData(data,0,100);this.reDino();},reDino:function(){var random = (Math.random()*9+1)|0,id = null;switch(random){case 1:id = "di1";break;case 2:id = "di2";break;case 3:id = "di3";break;case 4:id = "di4";break;case 5:id = "di5";break;case 6:id = "di6";break;case 7:id = "di7";break;case 8:id = "di8";break;case 9:id = "di9";break;}this.drawImg(global,this.ct,this.x,this.y,id);},reDraw:function(){this.drawImg(global,this.ct,0,0,"bg");var y = 0;var x = 0;var ran = ((Math.random()*4)|0);for(var j = 0;j<this.n;j++){this.ct.fillStyle = "#fff";this.ct.fillRect(x,y,97,97);if(j == ran){this.drawImg(global,this.ct,x+10,y+10,"hand");this.arr.unshift(j);}x += 100;}this.reloadImg = true;this.listener(this.arr,this.reloadImg);}