使用JavaScript和Canvas开发游戏（一）

标签： HTML5学习资源 canvas JavaScript | 发表时间：2011-08-10 15:38 | 作者：admin Alex
出处：http://www.mhtml5.com

原文作者：Matthew Casperson • 编辑：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元素。

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
  <html lang="en">
     <head>
        <title>JavaScript Platformer 1</title>
        <script type="text/javascript" src="jsplatformer1.js"></script>
        <style type="text/css">
           body { font-family: Arial,Helvetica,sans-serif;}
        </style>
     </head>
    <body>
       <p>
          <a href="http://www.brighthub.com/internet/web-development/articles/38364.aspx">
             Game Development with Javascript and the canvas element
          </a>
       </p>
       <canvas id="canvas" width="600" height="400">
          <p>Your browser does not support the canvas element.</p>
       </canvas>
    </body>
 </html>

这些HTML代码很直观。其中有两个重要的元素。

<script type="text/javascript" src="jsplatformer1.js"></script>

这里包含的是将会修改Canvas元素的JavaScript代码，对应的Canvas元素的标记如下：

<canvas id="canvas" width="600" height="400">
	<p>Your browser does not support the canvas element.</p>
</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在这里先加载了一幅图像，然后将其画在画布上面，最后让它在画布上移动。

首先，定义一些全局变量。

const FPS = 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函数。

来源：李松峰-为之漫笔（译）

相关 [javascript canvas 开发] 推荐：

使用JavaScript和Canvas开发游戏（一）

- iVane - 为之漫笔
原文作者：Matthew Casperson • 编辑：Michele McDonough. 原文链接: Game Development with JavaScript and the Canvas element. 3、通过Canvas元素实现高级图像操作. 4、通过Canvas实现视差滚动. 8、JavaScript键盘输入.

使用JavaScript和Canvas开发游戏（三）

- weslleywang - 为之漫笔
原文作者：Matthew Casperson • 编辑：Michele McDonough. 原文链接: Game Development with JavaScript and the Canvas element. 3、通过Canvas元素实现高级图像操作. 6、通过Canvas实现视差滚动. 8、JavaScript键盘输入.

使用JavaScript和Canvas开发游戏（四）

- weslleywang - 为之漫笔
原文作者：Matthew Casperson • 编辑：Michele McDonough. 原文链接: Game Development with JavaScript and the Canvas element. 3、通过Canvas元素实现高级图像操作. 6、通过Canvas实现视差滚动. 8、JavaScript键盘输入.

使用JavaScript和Canvas开发游戏（一）

- Alex - HTML5研究小组
原文作者：Matthew Casperson • 编辑：Michele McDonough. 原文链接: http://www.brighthub.com/internet/web-development/articles/38364.aspx. 3、基于Canvas的高级图像操作. 4、通过Canvas实现视差滚动.

Fabric.js – 简单而强大的 JavaScript Canvas 库

- - 博客园_梦想天空
　　Fabric.js 是一个简单而强大的 JavaScript Canvas 库，在 HTML5 Canvas 元素之上提供了互动的对象模型，同时还包含 Canvas-to-SVG 解析器. 使用 Toolbar.js 实现超酷的 Tooltip 风格工具栏. Textillate.js – 实现 CSS3 文本动画的简单插件.

用JavaScript将Canvas内容转化成图片的方法

- - WebHek
上周我们花了半天时间开发下一个准备放进Mozilla Marketplace的应用. 有一个应用现在非常的火热，那就是Instagram，Facebook花了100万美元收购了它. 我们也想有100万美元装到口袋里，我决定开发一个Instagram风格的应用，这篇文章了我将介绍一下如何将一张图片拷贝到canvas里，以及反过来，如何将画布内容保存成图片格式.

HTML5 Canvas开发框架：CasualJS Framework

- Jimmy - ITeye论坛最新讨论
CasualJS Framework是根据ActionScript3?.0的架构开发的一套适用于HTML5 Canvas的面向对象的开发框架. 虽然Canvas提供了强大的绘图功能，但满足不了高级开发的需要. 利用CasualJS的显示对象架构及渲染机制，你可以轻松的在Canvas中操控各种位图、图形、影片剪辑等显示对象.

JavaScript开发规范要求

- - 博客 - 伯乐在线
来源： webflash 的博客. 作为一名开发人员（WEB前端JavaScript开发），不规范的开发不仅使日后代码维护变的困难，同时也不利于团队的合作，通常还会带来代码安全以及执行效率上的问题. 本人在开发工作中就曾与不按规范来开发的同事合作过，与他合作就不能用“愉快”来形容了. 现在本人撰写此文的目的除了与大家分享一点点经验外，更多的是希望对未来的合作伙伴能够起到一定的借鉴作用.

html5 canvas入门

- - Marshal's Blog
可以把canvas看做div，不过，它的长和宽不能通过css来定义，要使用标签属性：. 或者javascript对象属性设置：. 使用canvas，只有一种操作方式，使用javascript. 获得canvas对象的上下文对象，该对象是操作canvas的主要对象：. 使用canvas画最简单的线， 点击运行示例，结果看起来是这样：.

手机网站开发及手机中图片加速显示img的Canvas方法

- - CSDN博客Web前端推荐文章
    随着手机开发越来越流行，手机开发的很多框架也应运而生，比较好用的手机网站开发框架推荐如下：.     1、zeptojs，里面封装了很多手机特有方法，例如touch.js等等. 和jquery用法差不多，很好上手. API地址：http://zeptojs.com/#$.extend.     2、jquerymobile   演示地址：http://jquerymobile.com/.