html5-3-1 简略动画 _HTML/CSS

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;//当前播放时间
		}
	},
	//绘制Animation
	draw : 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>