<!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-css动画实例1”着重于利用CSS3的动画特性来创建动态效果，使网页元素更加生动活泼，提升用户体验。 在HTML5中，我们不再依赖Flash等外部插件来实现动画效果，而是通过内联的SVG图形或者新的标签...
1. **动画基础**： - CSS动画：通过CSS3的`transition`和`animation`属性实现元素的平滑过渡和关键帧动画。 - JavaScript动画：利用JavaScript的`requestAnimationFrame`或定时器（如`setInterval`、`setTimeout`...
3. **CSS3动画**：HTML5结合CSS3可以实现无需JavaScript的简单动画效果，如过渡（transitions）和关键帧动画（keyframe animations）。图片资源可能包含了设计用于CSS动画的图像序列，例如帧动画。 4. **WebGL**：...
在本主题"HTML5+css3动画制作简易魔方模板"中，我们将深入探讨如何利用这两种技术创建一个动态的、视觉吸引人的魔方模板。 HTML5作为新一代的超文本标记语言，引入了许多新的元素和API，使得网页结构更加清晰，同时...
3. **动画原理**：通过定时器（如`requestAnimationFrame`）来重复执行绘制函数，每次更新烟花的位置、大小、颜色等属性，实现连续的动画效果。这需要对时间和速度有良好的控制，以模拟真实的物理运动。 4. **碰撞...
HTML5+css3动画制作简易雪人滑翔模板
在这个“html5-实现canvas宇宙黑洞炫酷粒子动画特效.rar”压缩包中，包含的代码示例正是利用Canvas API创建了一个令人惊叹的宇宙黑洞粒子动画特效。下面我们将深入探讨这个特效背后的HTML5 Canvas技术及其实现原理。...
在这个"HTML5_CSS3 奔跑动画动画效果非常逼真"的主题中，我们将深入探讨如何利用这两种技术制作出栩栩如生的奔跑动画。 HTML5是超文本标记语言的第五个版本，它引入了许多新的元素和功能，旨在提高网页的语义化、可...
4. 复杂度：CSS3动画通常最简单，其次是SVG，而Canvas动画可能需要更多的JavaScript知识。 5. 可维护性和可读性：CSS3和SVG的动画更易于理解和维护，而Canvas动画需要编写更多代码，可能更难理解和调试。 综上，...
在“html5-css3-car-animation”这个项目中，我们主要关注的是如何利用这两种技术来实现一个动画小车的展示。 首先，HTML5（HyperText Markup Language第五版）是网页内容的主要结构标准，它引入了许多新元素，如`...
CSS3也被广泛应用于HTML5动画中，尽管在这个特定的项目中可能不是主要部分。CSS3的transform和animation属性可以用于添加简单的动画效果，比如平移、旋转或缩放。不过，由于描述中提到的是复杂的行为动画（鲨鱼跟随...
在“HTML5+CSS3简单动画效果之照片”这个主题中，我们将深入探讨如何利用这两种技术来实现富有创意的照片动画效果。 首先，HTML5引入了一系列新的元素和API，使得网页结构更清晰，功能更强大。比如`<figure>`和`...
- **CSS3动画**：通过CSS3的`animation`和`transition`属性来实现简单的动画效果。 - **JavaScript库**：如jQuery、GSAP等，可以用来创建复杂的动画效果，同时支持更多的自定义选项。 #### 四、案例分析：逐浪CMS的...
HTML5和CSS3是现代网页开发的两大核心技术，它们为开发者提供了丰富的功能和优雅的样式控制。在本项目“Html5炫酷进度条-...同时，此项目也提供了进一步学习和探索HTML5和CSS3动画、响应式设计以及交互性开发的机会。
这个“html5 canvas模仿flash的简单动画banner Demo”就是利用Canvas API来实现类似Flash的动态广告效果的一个实例。下面将详细探讨相关的知识点。 1. HTML5 Canvas API： - `canvas`元素：HTML5中的`<canvas>`...
08-简单动画.html
HTML5千纸鹤动画特效是一种利用现代Web技术实现的交互式网页元素，它结合了HTML5、CSS3和JavaScript（通常使用Canvas API）的力量，为用户提供动态、视觉上吸引人的体验。HTML5作为下一代Web标准，引入了许多新的...
cocos2d-html5的核心特性在于其强大的2D渲染引擎，它提供了丰富的图形绘制功能，如精灵、动画、粒子系统、物理引擎等，极大地简化了游戏场景的构建。此外，该框架还支持事件处理、触摸输入、定时器、音频播放，以及...
HTML新年庆祝示例是一个非常适合初学者的项目，它利用了HTML和CSS技术来创建一个简易的新年庆祝页面，同时还融入了CSS动画效果，为页面增添动态的视觉体验。在这个项目中，有两个主要的文件——`main`和`main[while]...
1. **CSS3 Keyframes 动画简介** - CSS3中的`@keyframes`规则允许创建动画，这些动画可以使元素的属性（例如颜色、大小等）随时间变化。 - 该规则定义了动画的关键帧，即动画过程中特定时刻的状态。 - 例如，我们...