html5-3-1 简略动画
日期：2014-05-17 浏览次数：20731 次
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();">
<
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
