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