如何用HTML5 Canvas制作子画面动画


子面画基本原理 我一直很喜欢网页游戏,因为大多数都容易制作,而且容易玩(只要点击一个链接就可以开始玩了)。 Ajax和移动DOM元素是有些意思,但制约了你能制作的游戏...


子面画基本原理
      我一直很喜欢网页游戏,因为大多数都容易制作,而且容易玩(只要点击一个链接就可以开始玩了)。
     Ajax和移动DOM元素是有些意思,但制约了你能制作的游戏类型。对于游戏开发者,技术不仅一直在变化,而且是飞速变化。HTML5为网页游戏开发不断地提供大量新选择,浏览器供应商也为成为新标准的最佳平台而展开激烈竞争。


sprite-animations(from webappers.com)
        所以,从游戏开发者的角度看,一切都朝着正确的方向发展:2D和3D硬件运算速度越来越快、javascript引擎的表现性能越来越好、排错和分析工具高度集成,以及可能最重要的,浏览器供应商正在积极地角逐最佳网页游戏平台。
       所以工具实用了,浏览器强大了,供应商重视了,我们就可以制作出优秀的游戏了,对吧?基本上。
       HTML5/Javascript游戏开发仍然处于发展初期,会遇到许多误区和技术选择。
       在本文中,我将介绍一些开发2D游戏的选择,但愿能让读者对开发HTML5游戏有所了解。

基础
      你要回答的第一个问题是,是使用HTML5 Canvas来绘制图像(场景图像)还是通过修改DOM元素。
      为了用DOM做2D游戏,你基本上要动态地调整元素风格,以便在页面上移动它。虽然有些时候DOM修改是很好的,但这一次我将重点介绍使用HTML5 Canvas来制作图像,因为对于现代浏览器,它是最灵活的。

页面设置
首先,你要创建一个HTML页面,其中包含如下canvas标签:
<!doctype html><html><head><title></title></head><body style=’position: absolute; padding:0; margin:0; height: 100%; width:100%’><canvas id=”gameCanvas”></canvas></body></html>
       如果你载入以上代码,当然什么也不会出现。那是因为虽然我们有一个canvas标签,但我们还没在上面绘制任何东西。我们来添加一些简单的canvas命令来绘制小箱子吧。
<head><title></title><script type=’text/javascript’>var canvas = null;function onload() {canvas = document.getElementById(‘gameCanvas’);var ctx = canvas.getContext(“2d”);ctx.fillStyle = ‘#000000′;ctx.fillRect(0, 0, canvas.width, canvas.height);ctx.fillStyle = ‘#333333′;ctx.fillRect(canvas.width / 3, canvas.height / 3, canvas.width / 3,canvas.height / 3);}</script></head><body onload=’onload()’ …

      在这个例子中,我已经在body标签中添加了一个onload事件,然后执行功能获得画布元素,并绘制几个箱子。非常简单。


result 1(from webappers.com)
       这个箱子不错,但你会注意到,画布没有铺满整个浏览器窗口。为了解决这个问题,我们可以增加画布的宽度和高度。我是指根据画布所包含的文件元素的大小来灵活地调整画布尺寸。
var canvas = null;function onload() {canvas = document.getElementById(‘gameCanvas’);canvas.width = canvas.parentNode.clientWidth;canvas.height = canvas.parentNode.clientHeight;…
      加载后,你会看到画布铺满整个屏幕了。太好了。
      再进一步,如果浏览器窗口大小是由用户调整的,我们还要重置画布的尺寸。
var canvas = null;function onload() {canvas = document.getElementById(‘gameCanvas’);resize();}function resize() {canvas.width = canvas.parentNode.clientWidth;canvas.height = canvas.parentNode.clientHeight;var ctx = canvas.getContext(“2d”);ctx.fillStyle = ‘#000000′;ctx.fillRect(0, 0, canvas.width, canvas.height);ctx.fillStyle = ‘#333333′;ctx.fillRect(canvas.width/3, canvas.height/3, canvas.width/3, canvas.height/3);}
      添加onresize命令到body标签。
<body onresize=’resize()’ …
      现在,如果你调整浏览器的大小,矩形应该如下图所示。

result 2(from webappers.com)
载入图像
       大部分游戏都需要动画的子画面,所以我来添加一些图像吧。
       首先,你需要图像资源。因为我们要用javascript绘制它,所以我觉得先声明图像然后设置它的src属性为你想载入的图像的URL,比较合理。
标签: html5canvas

更多 html5 相关资讯

用绳子原理制作的一款简单的html5小游戏

用绳子原理制作的一款简单的html5小游戏

     前天公司聚会,在一起玩游戏,游戏虽然及其简单,但是却很适合在活动中玩,因为公司参加聚会的人比较多,所以只有一部分人玩到了。晚上回家后我试着将其中一款游戏用html5还

制作HTML5视觉游戏编程工具DASH的经验

制作HTML5视觉游戏编程工具DASH的经验

    本文由两部分内容混合而成,一是简短的开发者日志,二是对我们开发HTML5可视化编程工具DASH时面临的挑战的总结。   DASH是一个用于制作游戏的HTML5可视化编程工具。

创造一款成功HTML5游戏的完整指南

创造一款成功HTML5游戏的完整指南

     现在,我会花大量时间向学生,业余爱好者,专业开发者以及老师解释如何使用HTML5创造。而最近我也一直纠结着是否应该将这些观点与所有人分享。   为什么现在有这么多

一个HTML5的视频智力游戏

一个HTML5的视频智力游戏

这是一个可定制的HTML5视频/图像难题。祝你好运试图解决它;

HTML5 canvas DEMO:生长的树

HTML5 canvas DEMO:生长的树

简介:一个简单的HTML5演示实例,所有的动态画面和色彩效果完全由HTML5技术实现。

HTML5 3D游戏:球撞球

HTML5 3D游戏:球撞球

简介:一个完全由HTML5技术实现的在线小游戏,在这个游戏,你只需控制蓝色的球球把绿色的球撞出这个平台即可。

HTML5 Blackjack

HTML5 Blackjack

简介:一个完全由HTML5技术打造的21点游戏,你的本金是$100,每10美元一手。游戏的设计是主要以快打为主。

HTML5塔防游戏

HTML5塔防游戏

简介:一款基于HTML5技术的塔防小游戏,你只需阻止你的敌人走到终点即可。期间你可以安装障碍物或者安装大炮将他们击毙,当然,你不能把从起点到终点的露给堵死。

HTML5版扫雷

HTML5版扫雷

简介:一个完全由HTML5技术开发的在线扫雷小游戏。规则很简单-点击方块来清除它们,但要提防致命的炸弹。编号是告诉你周边有几个炸弹,用这些信息来计算你下一步。用右键点击

又见HTML5版的俄罗斯方块

又见HTML5版的俄罗斯方块

简介:完全基于HTML5+Javascript技术开发的在线俄罗斯方块,虽然没有之前的3d效果,但是画面效果还是值得一玩。

更多 canvas 相关资讯

创造一款成功HTML5游戏的完整指南

创造一款成功HTML5游戏的完整指南

     现在,我会花大量时间向学生,业余爱好者,专业开发者以及老师解释如何使用HTML5创造。而最近我也一直纠结着是否应该将这些观点与所有人分享。   为什么现在有这么多

Canvas Rider – 极其着迷的单车动作游戏

Canvas Rider – 极其着迷的单车动作游戏

上班无聊?跷课无聊?试试这款用 JS 和 Html5 写出来的在线小游戏 Canvas Rider 吧,你能真正体会到白驹过隙的感觉。@Appinn 操作非常简单,上是加速,下是刹车,左右是保持平衡。