<!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>
分享到:
相关推荐
HTML5+css3动画制作简易魔方模板
HTML5+css3动画制作简易雪人滑翔模板
HTML5 简单的动画 数字时钟 解压后 点击这个html文件 html5_canvas_animations3.html 用FireFox4 ,IE9,Chrome访问
08-简单动画.html
HTML-JAVASCRIPT动画基础;包含“动画基础”“渲染技术”“矩阵数学基础”“3D动画”“高级动画”“碰撞检测”“物理运动学”等网页上动态动画以及高级动画的知识
1、3D HTML5 Logo动画 HTML5多视角3D旋转动画 HTML5 3D动画实现起来非常方便,之前介绍过基于jQuery的3D旋转插件是利用多张多视角图片播放来实现的,而今天分享的这款HTML5 3D旋转动画是利用纯HTML5技术实现的,该...
HTML5+CSS3简单动画效果,涉及到transform、box-shadow、transition等等的基本运用
一个简单练习 关于HTML5 Canvas 动画的学习。
下面分享一下这款HTML5 Loading动画的实现过程,主要是HTML代码和CSS3代码,以及初始化的JS代码。 首先是HTML代码,只定义一个Loading容器,非常简单。 ”hold”> 接下来是CSS代码,主要是定义每一个圆圈的动画效果...
今天我们又要来分享一款实现简单的纯CSS3 3D动画效果,这款HTML5/CSS3动画是一个3D波浪形动画特效。利用一堆div加上CSS3对每个div的控制,实现波浪起伏的动画效果。这和之前分享的HTML5/CSS3 3D木块旋转动画的实现...
使用html5与css3实现的动画小车页面,效果不错
简单html学习动画 简单html学习动画PPT版
HTML5 SVG简单的动态绘制轮廓线条动画插件
本人对前端不太了解,对网上代码进行简单修改,完成部署。 粒子动画:https://github.com/kennethcachia/shape-shifter 烟花:网上有许多相关代码,未找到原作者 效果:...
一个用html5模仿flash的动画广告demo,html5富媒体广告构思
十分炫酷的HTML5 3D书本翻页动画,效果相对比较简单,拖拽鼠标模拟用手翻页,更漂亮的是翻页过程中,呈现出逼真的3D立体效果。书本中的文字和图片也会3D展示,非常酷。
一个非常简单的新年庆祝html. 文件main是一次CSS动画,文件main[while]则是无限重复。 本来想在元旦发的,但是忘了 -_-|| 应用css动画,适用人群:入门级
全屏背景动画的实现是由canvas完成
小清新photo摄影工作室html5模板_小清新 非主流 随拍 大气 简洁 简单 极简 儿童摄影 摄影 画廊 相册 相片 工作室 整站 bootstrap 响应式 手机 企业 ft5 css3动画 html5 精品 漂亮 lightbox 菜单 婚纱摄影 menu.rar
8、能够让不懂JS代码的人,经过简单的学习,就能快速的制作HTML5+CSS3动态微网页。 9、相较于上一个版本,在 v1.0.3 中对整个核心代码进行了优化,大大提升了运行速率,使动画播放更流畅。 10、相较于上一个版本,在...