使用JavaScript和Canvas开发游戏
2014-04-09 11:15
260 查看
JavaScript与Canvas元素
HTML是为创建静态页面而生的。HTML所能实现的动态效果,也仅限于显示GIF动画和闪烁的文本。JavaScript改变了这一切,通过它能够动态修改网页。今天,很多Web服务都利用AJAX来创建网页,为用户提供更加流畅的体验,也超越了标准HTML页面中常见的“点击-重新加载-点击”式的交互模式。
然而,JavaScript的某些功能会受到其宿主浏览器的制约。尽管可以在网页中创建和修改任何元素,但JavaScript不能(轻易地)让浏览器显示一种新对象。通过JavaScript修改文本、插入图像或者缩放表格都很容易,因为这些对象本来就是HTML所支持的。如果你想再玩得刺激一点,比如写一个网页游戏,怎么办?那恐怕就得苦心积虑地改变标准HTML元素的用途,克服种种不测才能达到目的。要么,你就得求助于Flash或Silverlight这样的插件。
Canvas元素登场了。这个新HTML元素为JavaScript开发者提供了一种无需插件即可在网页中直接绘图的机制。Canvas元素最早是由苹果公司在其WebKit框架中引入的,Safari浏览器和Dashboard微件都在使用。Canvas元素现在也被建议加入了HTML5规范,得到了最新的Chrome、Firefox、Opera以及Konqueror等浏览器的支持。Internet
Explorer(至少在IE8之前)还不支持Canvas,但ExplorerCanvas项目倒是为IE提供了与Canvas元素类似的功能。
Canvas元素对做过2D图形编程的人是小菜一碟。可以在这个元素上画线、画各种形状、画渐变,甚至可以利用与其他2D API中类似的函数来修改其中的每一个像素。得益于Chrome的V8、Firefox的SpiderMonkey以及Safari的Nitro等最新JavaScript引擎的性能,创建精细且具有交互性的Web应用已经完全没有问题。
我们这一系列文章将教会大家使用JavaScript和Canvas元素创建一个简单的平台游戏。将要涉及的内容包括动画、加载资源、分层渲染、滚动和交互。通过一步一步地展示示例代码和实际效果,你可以很快学会如何驾驭强大的Canvas元素。
准备工作
知道了什么是Canvas元素之后,该学习在屏幕上绘图了。首先,需要一个HTML页面来放置和显示Canvas元素。
?
?
?
这个Canvas元素的ID属性很重要,因为后面的JavaScript将通过它来取得对该元素的引用。而width和height属性指定了画布的宽度和高度,这两个属性跟table或img等其他HTML元素中的同名属性作用一样。
以下是 jsplatformer1.js的代码:
?
首先,定义一些全局变量。
?
?
?
?
?
draw函数
在画布上绘图的操作实际上都是由draw函数来完成的。下面我们就一步一步地说明其中的绘图操作。
??
?
?
最后的效果就是笑脸图像会在画布的范围内反弹往复。此时此刻,有读者可能会想:同样的效果如果通过修改DIV元素的位置来实现可能更容易一些。这一点我不否认。但这个例子只演示了画布元素所能实现的简单效果。下一篇文章我们就会介绍使用画布元素能够实现的高级效果,同样的效果若采用其他方式,恐怕就要困难多了。
原文作者:Matthew Casperson • 编辑:Michele McDonough
原文链接: Game Development with
JavaScript and the Canvas element
转载地址:为之漫谈技术博客 http://www.xyhtml5.com/use-javascript-canvas-development-game.html
相关文章推荐
- 使用JavaScript和Canvas开发游戏(五)
- 使用JavaScript和Canvas开发游戏(一)
- 使用JavaScript和Canvas开发游戏(一)
- 使用JavaScript和Canvas开发游戏
- 使用JavaScript和Canvas开发游戏(二)
- 使用JavaScript和Canvas开发游戏(三)
- 使用JavaScript和Canvas开发游戏(四)
- 使用Lufylegend开发HTML5 Canvas游戏
- HTML5吃豆豆游戏开发实战(一)使用Canvas绘制游戏主角
- HTML5吃豆豆游戏开发实战(一)使用Canvas绘制游戏主角
- J2ME 游戏开发之GameCanvas的使用
- [置顶] Javascript与Canvas游戏场景开发之多彩弹力球
- android游戏开发中图形绘制:Canvas和Paint的使用
- 使用MIDP2.0开发游戏 (1) GameCanvas基础
- 使用MIDP2.0开发游戏(1)GameCanvas基础
- 【收藏】14个非常棒的 JavaScript 游戏开发框架
- 使用javascript开发的编码译码程序
- 【Android游戏开发二十五】在Android上的使用《贝赛尔曲线》!
- 使用WINDOWS的GDI开发游戏(6)完结篇
- 【Canvas】HTML5游戏开发的基本流程+P2.js物理引擎实战开发