使用JavaScript和Canvas开发游戏
原文作者:Matthew Casperson o 编辑:Michele McDonough
原文链接: http://www.brighthub.com/internet/web-development/articles/38364.aspx
1、认识一下Canvas
2、在Canvas上绘图
3、基于Canvas的高级图像操作
4、通过Canvas实现视差滚动
5、写一个游戏框架(一)
6、写一个游戏框架(二)
7、动画
8、JavaScript键盘输入
9、综合运用
10、定义级别
11、跳跃与坠落
12、添加道具
13、加载资源
14、添加主菜单
1、认识一下Canvas
http://www.brighthub.com/internet/web-development/articles/38364.aspx
Canvas元素以及JavaScript引擎中新增的一些特性,让Web开发人员不必借助第三方插件,即可设计开发出精细且具有交互性的2D网页。这篇文章就向大家介绍一下Canvas元素,以及它的一些可能的用途。
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,但ExlporerCanvas项目倒是为IE提供了与Canvas元素类似的功能。
Canvas元素对做过2D图形编程的人是小菜一碟。可以在这个元素上画线、画各种形状、画渐变,甚至可以利用与其他2D API中类似的函数来修改其中的每一个像素。得益于Chrome的V8、Firefox的SpiderMonkey以及Safari的Nitro等最新JavaScript引擎的性能,创建精细且具有交互性的Web应用已经完全没有问题。
我们这一系列文章将教会大家使用JavaScript和Canvas元素创建一个简单的平台游戏。将要涉及的内容包括动画、加载资源、分层渲染、滚动和交互。通过一步一步地展示示例代码和实际效果,你可以很快学习如何驾驭强大的Canvas元素。
2、在Canvas上绘图
http://www.brighthub.com/internet/web-development/articles/38364.aspx
下面,我们就通过一个循序渐进的示例及实时演示,来介绍如何使用JavaScript在Canvas元素上绘图及实现动画。
准备工作
知道了什么是Canvas元素之后,该学习在屏幕上绘图了。首先,需要一个HTML页面来放置和显示Canvas元素。
这些HTML代码很直观。其中有两个重要的元素。
这里包含的是将会修改Canvas元素的JavaScript代码,对应的Canvas元素的标记如下:
以上代码创建了一个Canvas元素。不支持Canvas的浏览器,比如Internet Explorer(IE8之前的版本),会忽略这个元素,而只显示其子元素。在这个简单的例子中,这个子元素就是一个段落,其中的文本告诉用户他们的浏览器不支持Canvas元素。而对于那些支持Canvas元素的浏览器,如Chrome、Opera和Firefox,则会忽略Canvas元素的子元素。
这个Canvas元素的ID属性很重要,因为后面的JavaScript将通过它来取得对该元素的引用。而width和height属性指定了画布的宽度和高度,这两个属性跟table或img等其他HTML元素中同名属性作用一样。
以下是 jsplatformer1.js的代码:
//每秒钟target帧 const FPS = 30; var x = 0; var y = 0; var xDirection = 1; var yDirection = 1; var image = new Image(); image.src = "jsplatformer1-smiley.jpg"; var canvas = null; var context2D = null; window.onload = init; function init(){ canvas = document.getElementById('canvas'); context2D = canvas.getContext('2d'); setInterval(draw, 1000/FPS); } function draw(){ context2D.clearRect(0, 0, canvas.width, canvas.height); context2D.drawImage(image, x, y); x += 1* xDirection; y += 1* yDirection; if (x >= 450) { x = 450; xDirection = -1; }else if(x <= 0){ x = 0; xDirection = 1; } if (y >= 250) { y = 250; yDirection = -1; }else if(y <= 0){ y = 0; yDirection = 1; } }
如果只是一个Canvas元素,也没有什么用。JavaScript必须要在这块画布上面画点什么,相当的代码保存在 jsplatformer1.js中。简单来说,JavaScript在这里先加载了一幅图像,然后将其画在画布上面,最后让它在画布上移动。
首先,定义一些全局变量。
constFPS = 30;
FPS定义的是画布重绘的频率。
var x = 0; var y = 0; var xDirection = 1; var yDirection = 1;
变量x、y、xDirection和yDirection用于定义图像(相对于画布左上角)的位置,以及它在任意一时刻移动的方向。
var image = new Image(); image.src = "http://javascript-tutorials.googlecode.com/files/jsplatformer1-smiley.jpg";
要把图像画到画布上,必须先加载一幅图像。为此,我们创建 一个Image对象,将其src属性设置为一幅图像文件的URL。
var canvas = null; var context2D = null;
我们还需要取得对Canvas元素以及绘图上下文(稍后再详细介绍绘图上下文)的引用。随后我们会把正确的值赋给这两个变量,现在先把它们设置为null。
window.onload = init;
最后,当页面加载完成后,我们必须知道立即运行绘制画布的代码;因此,在window对象的onload事件发生时,立即调用init函数。
建议继续学习:
- 《部落冲突》的设计 (阅读:3493)
- Canvas学习教程 : Canvas介绍 (阅读:3152)
- 使用canvas绘制时钟 (阅读:2855)
- 手机游戏设计初体验 (阅读:3006)
- 游戏多服务器架构的一点想法 (阅读:2840)
- HTML5 Canvas(画布)教程 (阅读:2609)
- 游戏程序守护进程-Windows版 (阅读:2513)
- 游戏动作感设计初探 (阅读:2412)
- 使用JavaScript和Canvas开发游戏(一) (阅读:2289)
- 网络游戏的社会化 (阅读:2314)
扫一扫订阅我的微信号:IT技术博客大学习
- 作者:为之漫笔 来源: 为之漫笔
- 标签: Canvas 游戏
- 发布时间:2011-08-09 08:06:05
- [67] 如何拿下简短的域名
- [65] Go Reflect 性能
- [62] Oracle MTS模式下 进程地址与会话信
- [60] IOS安全–浅谈关于IOS加固的几种方法
- [58] 图书馆的世界纪录
- [57] android 开发入门
- [56] 【社会化设计】自我(self)部分――欢迎区
- [50] 视觉调整-设计师 vs. 逻辑
- [50] 界面设计速成
- [46] 读书笔记-壹百度:百度十年千倍的29条法则