html5-3-1 简单动画
<!doctype html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><meta http-equiv="Pragma" content="no-cache" /><meta http-equiv="Expires" content="-1" /><meta http-equiv="Cache-Control" content="no-cache" /><title>My first Game</title><style type="text/css">body {border:none 0px;margin:0px;padding:10px;font-size : 16px;background-color : #f3f3f3;}canvas {border : 1px solid blue; }</style><script type="text/javascript">//简单初始化类var initGame = function(obj){this.imgcache = null;this.context = null;this.callback = obj.callback || function(){};};initGame.prototype = {constructor:Animation ,init:function(){var canvas = document.createElement("canvas");canvas.width = 600;canvas.height = 400;document.body.appendChild(canvas);this.context = canvas.getContext("2d");var imgs = [{id:"player",url:"../res/player.png"},{id:"bg",url:"../res/bg.png"}];this.imgcache = this.loadImage(imgs);},loadImage:function(imglist){var imgs = {};var imgcount = imglist.length;var loadedcount = 0;for(var i =0 ; i<imgcount; i++){var img = imglist[i]var image = imgs[img.id] = new Image();image.src = img.url;image.onload=function(){loadedcount++;}}if(typeof this.callback == "function"){var t = this;function check(){if(loadedcount >= imgcount){t.callback.apply(t,arguments);}else{setTimeout(check,100);}}check();}return imgs;}};//动画类function Animation(obj){for(var attr in obj){this[attr] = obj[attr];}};Animation.prototype={constructor:Animation,frames:null,//动画画面framecount:0,//动画帧数img:null,//动画图片currentframe:null,//当前动画对象currentframeindex:0,//动画下标currentframetime:0,//动画时间init:function(){this.frames = this.frames ||[];this.framecount = this.frames.length;this.img = this.imgcache[this.img] || this.img;this.currentframe = this.frames[0];this.currentframeindex = 0;this.currentframetime = 0;},// 更新Animation状态. deltaTime表示时间的变化量.update:function(deltatime){//判断当前帧播放时间if(this.currentframetime >= this.currentframe.duration){//播放下一帧if(this.currentframeindex >= this.framecount-1){this.currentframeindex = 0;//当前是最后一帧,则播放第0帧}else{this.currentframeindex ++;//播放下一帧}//设置当前帧信息this.currentframe = this.frames[this.currentframeindex];this.currentframetime=0;}else{this.currentframetime += deltatime;//当前播放时间}},//绘制Animationdraw : function(gc,x,y){var f = this.currentframe;gc.drawImage(this.img, f.x , f.y, f.w, f.h , x, y, f.w, f.h );//图片，f.x,f.y 图片坐标 f.w,f.h 图片大小 x,y 画布坐标 f.w,f.h 图片在画布中的大小(一般很 图片大小一样)}};//启动函数function startDemo(){var fps=30;var sleep = Math.floor(1000/fps);//初始坐标var x=0,y=284;var speedx = 65/1000, speedy = -45/1000;//speedy < 0 往上移动 var minx=0,maxx=500,miny=0,maxy=284;//限定移动范围var animation = new Animation({imgcache:this.imgcache,context:this.context,img:"player",//动画帧数frames:[{x:0, y:0, w:50, h:60, duration:100},{x:50, y:0, w:50, h:60, duration:100},{x:100, y:0, w:50, h:60, duration:100}]});animation.init();var t = this;var mainloop = setInterval(function(){var deltatime = sleep;animation.update(deltatime);//更新动画状态t.context.drawImage(t.imgcache["bg"],0,0);//使用背景覆盖的方式 清空之前绘制的图片 x = x + speedx*deltatime; y = y + speedy*deltatime; x=Math.max(minx,Math.min(x,maxx));y=Math.max(miny,Math.min(y,maxy));//x = Math.min(x,maxx);//当x , y或 出现 负值 就会有问题。以上更严谨//y = Math.max(y,miny);animation.draw(t.context,x,y);//绘制Animation},sleep);};//初始化var game = new initGame({callback:startDemo});</script></head> <body onload="game.init();"> </body> </html>