使用JavaScript和Canvas開(kāi)發(fā)游戲之認(rèn)識(shí)Canvas
1、認(rèn)識(shí)一下Canvas
http://www.brighthub.com/internet/web-development/articles/38364.aspx
Canvas元素以及JavaScript引擎中新增的一些特性，讓W(xué)eb開(kāi)發(fā)人員不必借助第三方插件，即可設(shè)計(jì)開(kāi)發(fā)出精細(xì)且具有交互性的2D網(wǎng)頁(yè)。這篇文章就向大家介紹一下Canvas元素，以及它的一些可能的用途。
JavaScript與Canvas元素
HTML是為創(chuàng)建靜態(tài)頁(yè)面而生的。HTML所能實(shí)現(xiàn)的動(dòng)態(tài)效果，也僅限于顯示GIF動(dòng)畫(huà)和閃爍的文本。JavaScript改變了這一切，通過(guò)它能夠動(dòng)態(tài)修改網(wǎng)頁(yè)。今天，很多Web服務(wù)都利用AJAX來(lái)創(chuàng)建網(wǎng)頁(yè)，為用戶(hù)提供更加流暢的體驗(yàn)，也超越了標(biāo)準(zhǔn)HTML頁(yè)面中常見(jiàn)的“點(diǎn)擊-重新加載-點(diǎn)擊”式的交互模式。
然而，JavaScript的某些功能會(huì)受到其宿主瀏覽器的制約。盡管可以在網(wǎng)頁(yè)中創(chuàng)建和修改任何元素，但JavaScript不能(輕易地)讓瀏覽器顯示一種新對(duì)象。通過(guò)JavaScript修改文本、插入圖像或者縮放表格都很容易，因?yàn)檫@些對(duì)象本來(lái)就是HTML所支持的。如果你想再玩得刺激一點(diǎn)，比如寫(xiě)一個(gè)網(wǎng)頁(yè)游戲，怎么辦?那恐怕就得苦心積慮地改變標(biāo)準(zhǔn)HTML元素的用途，克服種種不測(cè)才能達(dá)到目的。要么，你就得求助于Flash或Silverlight這樣的插件。
Canvas元素登場(chǎng)了。這個(gè)新HTML元素為JavaScript開(kāi)發(fā)者提供了一種無(wú)需插件即可在網(wǎng)頁(yè)中直接繪圖的機(jī)制。Canvas元素最早是由蘋(píng)果公司在其WebKit框架中引入的，Safari瀏覽器和Dashboard微件都在使用。Canvas元素現(xiàn)在也被建議加入了HTML5規(guī)范，得到了***的Chrome、Firefox、Opera以及Konqueror等瀏覽器的支持。Internet Explorer(至少在IE8之前)還不支持Canvas，但ExplorerCanvas項(xiàng)目倒是為IE提供了與Canvas元素類(lèi)似的功能。
Canvas元素對(duì)做過(guò)2D圖形編程的人是小菜一碟?？梢栽谶@個(gè)元素上畫(huà)線(xiàn)、畫(huà)各種形狀、畫(huà)漸變，甚至可以利用與其他2D API中類(lèi)似的函數(shù)來(lái)修改其中的每一個(gè)像素。得益于Chrome的V8、Firefox的SpiderMonkey以及Safari的Nitro等***JavaScript引擎的性能，創(chuàng)建精細(xì)且具有交互性的Web應(yīng)用已經(jīng)完全沒(méi)有問(wèn)題。
我們這一系列文章將教會(huì)大家使用JavaScript和Canvas元素創(chuàng)建一個(gè)簡(jiǎn)單的平臺(tái)游戲。將要涉及的內(nèi)容包括動(dòng)畫(huà)、加載資源、分層渲染、滾動(dòng)和交互。通過(guò)一步一步地展示示例代碼和實(shí)際效果，你可以很快學(xué)會(huì)如何駕馭強(qiáng)大的Canvas元素。
2、在Canvas上繪圖
http://www.brighthub.com/internet/web-development/articles/38744.aspx
下面，我們就通過(guò)一個(gè)循序漸進(jìn)的示例及實(shí)時(shí)演示，來(lái)介紹如何使用JavaScript在Canvas元素上繪圖及實(shí)現(xiàn)動(dòng)畫(huà)。
準(zhǔn)備工作
知道了什么是Canvas元素之后，該學(xué)習(xí)在屏幕上繪圖了。首先，需要一個(gè)HTML頁(yè)面來(lái)放置和顯示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代碼很直觀(guān)。其中有兩個(gè)重要的元素。
- <script type="text/javascript" src="jsplatformer1.js"></script>
這里包含的是將會(huì)修改Canvas元素的JavaScript代碼，對(duì)應(yīng)的Canvas元素的標(biāo)記如下：
- <canvas id="canvas" width="600" height="400">
- <p>Your browser does not support the canvas element.</p>
- </canvas>
以上代碼創(chuàng)建了一個(gè)Canvas元素。不支持Canvas的瀏覽器，比如Internet Explorer(IE8之前的版本)，會(huì)忽略這個(gè)元素，而只顯示其子元素。在這個(gè)簡(jiǎn)單的例子中，這個(gè)子元素就是一個(gè)段落，其中的文本告訴用戶(hù)他們的瀏覽器不支持Canvas元素。而對(duì)于那些支持Canvas元素的瀏覽器，如Chrome、Opera和Firefox，則會(huì)忽略Canvas元素的子元素。
這個(gè)Canvas元素的ID屬性很重要，因?yàn)楹竺娴腏avaScript將通過(guò)它來(lái)取得對(duì)該元素的引用。而width和height屬性指定了畫(huà)布的寬度和高度，這兩個(gè)屬性跟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;
- }
- }
如果只是一個(gè)Canvas元素，也沒(méi)有什么用。JavaScript必須要在這塊畫(huà)布上面畫(huà)點(diǎn)什么，相應(yīng)的代碼保存在 jsplatformer1.js中。簡(jiǎn)單來(lái)說(shuō)，JavaScript在這里先加載了一幅圖像，然后將其畫(huà)在畫(huà)布上面，***讓它在畫(huà)布上移動(dòng)。
首先，定義一些全局變量。
- const FPS = 30;
FPS定義的是畫(huà)布重繪的頻率。
- var x = 0;
- var y = 0;
- var xDirection = 1;
- var yDirection = 1;
變量x、y、xDirection和yDirection用于定義圖像(相對(duì)于畫(huà)布左上角)的位置，以及它在任意一時(shí)刻移動(dòng)的方向。
- var image = new Image();
- image.src = "http://javascript-tutorials.googlecode.com/files/jsplatformer1-smiley.jpg";
要把圖像畫(huà)到畫(huà)布上，必須先加載一幅圖像。為此，我們創(chuàng)建一個(gè)Image對(duì)象，將其src屬性設(shè)置為一幅圖像文件的URL(建議把圖片下載到本地。——譯者注)。
- var canvas = null;
- var context2D = null;
我們還需要取得對(duì)Canvas元素以及繪圖上下文(稍后再詳細(xì)介紹繪圖上下文)的引用。稍后我們會(huì)把正確的值賦給這兩個(gè)變量，現(xiàn)在先把它們?cè)O(shè)置為null。
- window.onload = init;
***，當(dāng)頁(yè)面加載完成后，我們必須知道立即運(yùn)行繪制畫(huà)布的代碼;因此，在window對(duì)象的onload事件發(fā)生時(shí)，立即調(diào)用init函數(shù)。
init函數(shù)
- function init(){
- canvas = document.getElementById('canvas');
- context2D = canvas.getContext('2d');
- setInterval(draw, 1000/FPS);
- }
頁(yè)面加載完畢后就會(huì)調(diào)用上面這個(gè)init函數(shù)。在這個(gè)函數(shù)中，我們先通過(guò)在HTML文件中指定的ID屬性取得畫(huà)布元素(毫無(wú)疑問(wèn)，除了把它叫做畫(huà)布，還能叫個(gè)啥?)，然后再取得這個(gè)畫(huà)布的2D繪圖上下文對(duì)象。
上下文對(duì)象用于定義如何在畫(huà)布上繪圖。顧名思義，2D上下文嘛，支持在畫(huà)布上繪制2D圖形、圖像和文本。支持畫(huà)布元素的瀏覽器都支持2D上下文，除了2D上下文，還有其他試驗(yàn)性的上下文對(duì)象。Opera有一個(gè)專(zhuān)門(mén)為游戲設(shè)計(jì)的2D上下文，而Mozilla則有一個(gè)能夠顯示3D場(chǎng)景的上下文。可惜呀，目前這些上下文對(duì)象只有特定的瀏覽器才支持。如果你想用畫(huà)布來(lái)創(chuàng)建Web應(yīng)用，***還是只使用常見(jiàn)的2D上下文。
因?yàn)槲覀冊(cè)谶@里是想繪制一幅能移動(dòng)的圖像，所以必須建立渲染循環(huán)(render loop)。所謂渲染循環(huán)，實(shí)際上就是一個(gè)被重復(fù)調(diào)用的函數(shù)，渲染循環(huán)的每一次迭代，(在這個(gè)例子中)都可以讓圖像在屏幕上產(chǎn)生一點(diǎn)位移，如此循環(huán)往復(fù)就能給人圖像在移動(dòng)的感覺(jué)。為此，我們調(diào)用了setInterval函數(shù)，它的***個(gè)參數(shù)是應(yīng)該被重復(fù)調(diào)用的函數(shù)，這里的函數(shù)名是draw。setInterval函數(shù)的第二個(gè)參數(shù)指定調(diào)用函數(shù)的頻率。這個(gè)參數(shù)值的單位是毫秒，而用1000除以早先定義的FPS得到的就是每次調(diào)用之間相隔的毫秒數(shù)。
這里需要注意一下，雖然我們指定每秒鐘調(diào)用30次draw函數(shù)，但實(shí)際上不會(huì)調(diào)用30次。多長(zhǎng)時(shí)間調(diào)用一次draw函數(shù)，取決于底層JavaScript引擎的速度和要執(zhí)行的draw函數(shù)代碼的復(fù)雜程度。如果系統(tǒng)很慢的話(huà)，很可能每秒鐘只能調(diào)用一次draw函數(shù)。所以說(shuō)，這里指定給setInterval的頻率只是一種最理想的情況。
draw函數(shù)
在畫(huà)布上繪圖的操作實(shí)際上都是由draw函數(shù)來(lái)完成的。下面我們就一步一步地說(shuō)明其中的繪圖操作。
- context2D.clearRect(0, 0, canvas.width, canvas.height);
所有繪圖操作都是在上下文對(duì)象上發(fā)生的，并不是在畫(huà)布元素上發(fā)生的。這里首先清空上下文，以便為繪制每一幀畫(huà)面準(zhǔn)備一個(gè)干凈的版面。
- context2D.drawImage(image, x, y);
緊接著，就把圖像繪制到上下文對(duì)象中，參數(shù)x和y指定了繪制圖像的左上角坐標(biāo)。
- x += 1 * xDirection;
- y += 1 * yDirection;
為了讓圖像在畫(huà)布上移動(dòng)，需要根據(jù)xDirection和yDirection是等于1(向右或向下)還是等于-1(向左或向上)，來(lái)遞增或遞減x與y的值。
- 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;
- }
如果圖像移動(dòng)到了畫(huà)布外面，則反轉(zhuǎn)圖像的移動(dòng)方向。我們知道圖像的大小是150×150像素，而畫(huà)布的大小的是600×400像素，因而就有了450(600 – 150)和250(400 – 150)這兩個(gè)值。
***的效果就是笑臉圖像會(huì)在畫(huà)布的范圍內(nèi)反彈往復(fù)。此時(shí)此刻，有讀者可能會(huì)想：同樣的效果如果通過(guò)修改DIV元素的位置來(lái)實(shí)現(xiàn)可能更容易一些。這一點(diǎn)我不否認(rèn)。但這個(gè)例子只演示了畫(huà)布元素所能實(shí)現(xiàn)的簡(jiǎn)單效果。下一篇文章我們就會(huì)介紹使用畫(huà)布元素能夠?qū)崿F(xiàn)的高級(jí)效果，同樣的效果若采用其他方式，恐怕就要困難多了。
原文作者：Matthew Casperson 原文鏈接: Game Development with JavaScript and the Canvas element
譯文作者：李松峰 譯文鏈接：http://www.cn-cuckoo.com/2011/08/10/game-development-with-javascript-and-the-canvas-element-2554.html
【編輯推薦】
