Building JavaScript Games for Phones Tablets and Desktop（1）-程序設計

時間 2019-11-13

標籤 building javascript games phones tablets desktop 程序設計欄目 JavaScript 简体版

原文原文鏈接

程序設計

這章講述編程語言隨着時間變化而變化的過程。自從因特網從1990年出現開始，不斷有大量的編程語言和編程工具在發展。其中著名的語言之一就是HTML，這種語言被用來建立網站。HTML和CSS與Javascript一塊兒，能夠用來建立動態網站，而後經過瀏覽器展現在咱們面前。css

計算機和程序

在你與HTML和Javascript打交道以前，這部分文章將簡要的對計算機和程序作個概述。在這以後，你將學會如何建立一個簡單的HTML網頁，網頁中同時含有Javascript。html

處理器和內存

一般來講，一個計算機含有一個處理器和內存。對如今的電腦而言都是這樣，包括遊戲機，智能手機和平板電腦。我是這樣定義內存的，能夠從中進行讀取或者寫入，或二者兼得。內存有不一樣的種類，主要區別是數據存取和數據傳送的速度。有些內存能夠讀取和寫入你想要的足夠屢次的數據，有些內存只能讀取數據，而有些內存只能寫入數據。計算機中主要的處理器又被稱做中央處理單元（CPU），另一個與CPU類似的處理器是圖形處理單元（GPU）。在今天有些場合看來，CPU自身不只僅只再是一個單一的處理器，它其中還含有其餘的核心。程序員

輸出和輸入設備，好比鼠標，遊戲手柄，鍵盤，顯示器，打印機，觸摸屏等等，這些東西咋一眼看好像徹底獨立於處理器和內存以外。然而，抽象的說，它們都是內存。好比觸摸屏就是一個只讀內存，打印機就是一個只寫內存。web

處理器的主要任務就是執行指令。執行這些指令的效果就是內存發生了改變。特別是在我這種廣義的內存定義下，處理器執行的每條指令在某些方式上都在改變着內存。你不可能只讓計算機只執行一條指令。通常來講，你有一個長長的指令單須要執行——「移動這部份內存，清除這部份內存，在顯示屏上進行顯示，檢查是否有鍵盤輸入」，這些被執行的指令就叫作程序。編程

程序

歸納說，一個程序就是很長的一段改變計算機內存的指令。而後，程序自己也儲存在內存裏。程序中的指令在執行以前，被儲存在硬盤上，DVD上，或者USB這種FLASH設備中；或者儲存在雲端；或者儲存在其餘儲存設備中。當程序須要執行時，程序就被遷移到計算機內存儲器上。canvas

那些組合在一塊兒的造成程序的指令，須要用某種方式來表達。計算機不會經過白話英語就掌握輸入的指令，這就是爲何你須要編程語言的緣由,好比Javascript。在實際中，指令相似文本同樣進行編寫，可是須要遵循嚴格的規則進行書寫，這些規則就是一系列爲編程語言量身定製的。許多編程語言存在的緣由就是當某些人想到些許表達指令的好的方式，他們就會努力把它變成一種新的編程語言。很難說到底有多少種編程語言，可是至少有上千種。windows

幸運的是，學所有不一樣的語言是沒必要要的，由於它們有不少的類似性。早些時候，編程語言的主要目標就是使用計算機中新的可能性。然而，如今更多的編程語言集中用有序代替混亂。編程語言之間擁有不少類似的特性，能夠說做是屬於一樣的範式，這些範式來自於一系列的實踐所得。瀏覽器

早些時候：指令式編程

大量的編程語言屬於指令式編程。所以，這些語言被叫作命令式語言。命令式語言是基於改變內存的指令，照此，這些語言適用於前面所描述的處理器-內存模型。Javascript就是命令式語言的例子。markdown

在早些時候，電腦遊戲編程是很是難的，須要超高的技能。一個遊戲機，好比遊戲卡帶機只有128字節的內存，並且最多隻能使用4096字節的ROM，這些ROM同時包含程序和遊戲數據。這些東西至關的限制了遊戲的可能性。好比，許多遊戲有對稱性的設計由於要均份內存的要求。這些機器運行的至關慢。網絡

最先用匯編語言進行遊戲編程。彙編語言是第一個指令式編程語言。每種類型的處理器都有它指定的彙編指令，因此對不一樣的處理器來講，彙編語言都不一樣。由於有限制的使用內存，遊戲編程者都是專家，能榨乾內存的最後幾位和表現的像聰明的黑客同樣有效率。最終遊戲寫好了，可是，這些遊戲的代碼都是難於理解或者除了原來遊戲的編程者知道其餘人都不知道的代碼。幸運的是這不是一個問題，由於話說回來，那時候遊戲都是一我的開發的。

有個大問題就是由於不一樣的處理器有不一樣的彙編語言，因此當一個新的處理器出來，全部已有的程序不得不從新寫以適應最新的處理器。所以，急需出現獨立於計算機處理器的編程語言。所以，Fortran和BASIC語言誕生了。BASIC語言在1970年代很是出名，由於那時候我的電腦已經誕生，好比1978年的APPLE II和1979年的IBM-PC以及它們的後代。不幸的是，這些語言沒有被標準化，由於每一個計算機品牌都用它本身的BASIC。

過程程序設計：命令式+程序式

隨着程序變得更加複雜，很顯然須要一種更好的組織指令的方式。在過程程序設計中，相關的一些指令被放在一組程序中（或者叫作函數、方法，後者是更常見的一種叫法）。由於過程式編程語言仍然擁有指令，因此全部的過程式語言同時也是指令式語言。

一個很是著名的過程式語言就是C語言。這個語言來自貝爾實驗室，運行在1970年代末的UNIX操做系統上。由於操做系統是個很是複雜的程序，貝爾實驗室想用過程式語言來進行實現。因而發明了一個新的語言叫作C語言。Unix的哲學就是任何人均可以編寫基於它的擴展，並且這些擴展也是用C語言實現。所以，C語言成爲了1980年代最重要的過程式語言，即便在Unix世界以外。

C語言仍然大範圍使用，雖然它慢但確實是對現代語言作出了影響，特別是遊戲產業。這些年來，遊戲程序愈來愈大，由團隊作出來的遊戲比我的作出來的愈來愈多了。最重要的是遊戲代碼可讀了，可重複利用了且易於調試。最後，從終極觀點來講，減小程序員在遊戲上的編程時間變得必要了。雖然C語言比彙編語言好了太多，用它結構化的編寫大的程序仍然很是困難。

面向對象編程：過程 + 對象

過程式語言好比C語言容許你經過函數（方法）組合各類指令。而面向對象編程讓程序員能把方法裝進一個叫類的裏面。類佔用的內存就叫作對象。一個類能夠描述好比吃豆人遊戲中的幽靈。而後每一個幽靈對應類的一個對象。這種編程的思惟方式在遊戲編程中是很是有用的。

每一個人都在學習C語言編程，因此必須構思一個新的編程語言相似C，除了能讓程序員使用類和對象，其餘特性都要像C語言。這個語言叫作C++，第一個C++版原本自1978年，官方版本出如今1981年。

即便C++是一個標準的語言，可是C++寫的基於WINOWS系統運行的程序沒法在其餘操做系統上運行。在蘋果電腦，windows電腦或unix電腦上寫一個程序是不一樣的，想讓一個C++寫的程序在不一樣系統中運行是很難的事情。最初，這不被認爲是問題，可是當因特網變得流行起來後，讓同一個程序在不一樣的操做系統上運行變得愈來愈重要了。

一個新的語言出現的時機成熟了：此語言能在不一樣的操做系統上使用。這個語言必須相似C++，可是也須要去除掉一些C的東西來實現簡化。Java語言知足了這個語言角色。Java是1995年由硬件設備商Sun推出的。Sun公司那時使用了一個創新的商業模式：這個軟件是免費的，而後公司經過提供支持來得到盈利。

Java一個特別的特性就是Java編寫的程序在同一計算機上之間不會互相干擾。對於C++來講，這是很大的一個問題：若是一個錯誤出現，可能崩潰整臺電腦。更壞的是，別有用心的程序員會藉機傳播病毒和間諜軟件。

網絡應用

Java使人感興趣的一方面是它能夠運行在瀏覽器中。這種可能性使之能夠在互聯網間共享程序。可是運行Java程序須要安裝插件，此外，對於Java程序沒有可能性使之與瀏覽器產生交互。固然，瀏覽器的主要任務之一是展現HTML頁面。HTML是文本格式語言，是超文本標記語言的縮寫，它旨在提供一種方式經過一組標籤來結構化文檔，代表文檔中不一樣的部分，好比標題或段落。HTML是1980年代由物理學家Berners-Lee發明的，他那時候在歐洲核子研究委員會工做。他想創造一個方式讓其委員會成員能夠簡單使用和分享文檔。所以，在一次會議中，他提議一個基於因特網的標記系統。Berners-Lee爲HTML定義了少數標籤。第一個HTML版本有18個標籤，其中的11個仍然存在於如今的HTML中。

隨着因特網變得公開，HTML成爲了最多見的構造網站的語言。Mosaic，那時很是一個流行的瀏覽器，引進了一個新的標籤，img，這個標籤能夠把圖片嵌入到HTML中。另外，許多新的HTML語言版本被不一樣的組織起草制定，爲了規範標準化元素，讓其能夠被大量的瀏覽器兼容。好比列表和表單。1995年，HTML的2.0版本由HTML工做組推出，這個版本將全部元素制定了單一的標準。在那以後，萬維網協會開始維護和更新HTML標準。一個新的HTML標準，HTML3.2在1997年推出。在同年的12月，HTML4誕生。最後，HTML4.01在2000年成爲了一個新的標準。如今，W3C實現了HTML的第5個版本，HTML5.

假如你歷來沒有作過網站，下面是一個簡單的HTML頁面：

<!DOCTYPE html>
<html>
<head>
<title>Useful website</title>
</head>
<body>
This is a very useful website.
</body>
</html>

開發瀏覽器的公司很快意識到它們須要讓頁面更動態化。最初的HTML標準（2.0）主要目的是標記文本。然而，網頁瀏覽者須要按鈕或者其餘交互，所以如何代表一個用戶與瀏覽器交互的規範就頗有必要了。換句話說，網頁須要變得更動態。固然，有Java程序，可是它們是徹底獨立運行的，所以不能修改HTML頁面中的元素。

美國網景公司，開發了一個網景瀏覽器，在與微軟的瀏覽器激烈競爭中爭奪成爲一我的人都用的瀏覽器。網景公司已經使用了Java語言在它一些已經存在的工具裏，可是它又想設計出一個輕量級的，解釋性的語言來面向那些不是專業的程序員（好比網頁設計師）。這個語言能夠與網頁交互，動態讀取或者修改網頁內容。網景公司推出了一個叫作liveScript的語言來知足這種角色。不久以後，網景公司改名此語言爲JavaScript，JavaScript被包含進網景瀏覽器版本2中。

JavaScript做爲一個能夠和瀏覽器動態交互的腳本語言迅速成功起來。微軟也把它包含進了自家的瀏覽器Internet Explore 3.0，不過被叫作JScript，由於它與網景公司最初設計的有些許不一樣。1996年，網景公司報送JavaScript到歐洲計算機制造協會組織(ECMA)，ECMA把它重命名爲ECMAScript（儘管全部人都叫它JavaScript），在1999年，它終於成爲了一個被全部瀏覽器支持的版本。最新的ECMAScript版本是5.1版本，在2011年推出。ECMAScript 6正在開發之中，增長了許多新的特性，好比類和函數參數的默認值。

因爲JavaScript被大多數的瀏覽器支持，JavaScript已經變成了網頁的主要編程語言。由於它最初被設計爲輕量級的，解釋性語言。但現在程序員用它開發更復雜的基於瀏覽器的應用程序。現在，JavaScript成爲了惟一的與HTML綁定在一塊兒的語言，其在不一樣的瀏覽器不一樣的平臺中能夠運行。和HTML5一塊兒，它已經成爲了網頁開發的主要框架。

遊戲編程

這本書的目標是教你遊戲編程。遊戲是很是有趣的（有時候富有挑戰！），它們與不一樣的輸出輸入設備打交道，而且遊戲創造的虛構世界至關的複雜。

直到1990年代初，遊戲都還在爲指定的平臺開發。好比，爲一個指定的遊戲機寫的遊戲不能在其它的設備上運行，除非遊戲開發者開發其遊戲程序運行在不一樣的硬件設備上。對PC遊戲來講，這種影響更糟。今日，操做系統提供了一個硬件抽象層讓程序員不用理會不一樣類型計算機硬件間的區別。在那以前，每一個遊戲須要爲不一樣的顯卡或聲卡提供一個驅動。所以，爲一個遊戲編寫的代碼不可能大面積爲其它遊戲所用。在1980年代，大型電玩至關的流行。可是爲它們而編寫的代碼幾乎沒有可能複用在新的遊戲中，由於計算機硬件在不斷的變化之中。

隨着遊戲變得愈來愈複雜，並且操做系統也愈來愈獨立於硬件。複用之前的遊戲代碼對遊戲公司來講就變得愈來愈有意義。若是你能從你以前發行的遊戲中找到渲染程序和碰撞檢測程序，爲什麼還要從新寫一個呢？遊戲引擎這個術語在1990年代被創造，當時毀滅戰士和雷神之錘很是流行。因此當時它們的設計公司就決定許可部分遊戲代碼做爲軟件的一部分出售給其它的遊戲公司。這些做爲遊戲引擎的代碼進行銷售是有利可圖的，由於部分遊戲公司想要支付大量的許可費來使用這些引擎到它們本身的遊戲中。這些遊戲公司就不用白手起家寫它們本身的遊戲代碼，它們能夠重複利用這些遊戲引擎中的代碼而後把注意力放在其餘方面，好比圖形構造，角色設計，等級設計等等。

現在有許多不一樣的遊戲引擎能夠利用。有些遊戲引擎特別爲一些遊戲平臺和操做系統設計。有些遊戲引擎能夠運行在任何平臺上，而不用修改遊戲代碼。這對那些須要發佈他們的遊戲到不一樣的平臺上的遊戲公司是很是有用的。

現代遊戲引擎爲遊戲開發者提供了許多功能，好比2D或3D渲染引擎，特別效果好比粒子，燈光，聲音，動畫，人工智能，可腳本嵌入等等。遊戲引擎被頻繁的使用，由於開發不一樣的工具是個巨大的工做並且遊戲公司更加喜歡把那些時間和精力放在創造更好的環境和具備挑戰性的東西上。

由於核心遊戲功能和遊戲自己（水平，角色等）的嚴格區分，許多遊戲公司僱傭了比程序員更多的藝術家。然而，程序員改善遊戲引擎仍然是有必要的，或者同時編寫處理那些與遊戲引擎無關的程序或者特定遊戲的程序代碼。此外，遊戲公司常常開發軟件來支持遊戲開發，好比等級編輯程序，3D模型擴展用來加載模型和加載動畫，原型建造工具等等。

對於JavaScript而言，沒有一我的人都用的遊戲引擎。許多人用JavaScript編寫至關簡單的遊戲以確保遊戲能運行到不一樣的設備上，特別是那些性能有限的設備上。所以程序員直接編寫遊戲使用HTML5元素好比canvas來代替使用遊戲引擎。然而，遊戲引擎是快速變化的。若是你在Google搜索中輸入JavaScript遊戲引擎，你將會找到不少遊戲引擎來開發你的遊戲。這本書的目的是教你如何開發遊戲，可是不會使用引擎，由於我想教你這個語言的核心和它的潛力。這不是一個關於遊戲引擎的故事。事實上，讀完本書後，你能夠構建本身的遊戲引擎。我不是說你應該作那個，可是本書學到最後你能白手起家開發一個遊戲而且理解一個遊戲引擎是如何工做的。

遊戲開發

這裏有兩種常見的開發遊戲的方法。表1-1闡明瞭這些方法：第二種方法包含了第一種方法。當人們開始學習編程，他們首先書寫代碼，而後寫一個緊湊的循環，而後測試，而後進行修改。相比之下，專業的程序員，花費大量的前期時間在編寫代碼以前進行遊戲設計。

（省略圖1-1）

小規模：編輯-解釋-運行

當你想用JavaScript創造一個遊戲，你須要寫一個包含不少指令的程序。使用一個文本編輯器，你就能夠編寫你的腳本。當你寫完這些代碼後，你啓動一個瀏覽器而後試着運行這個程序。當一切就緒，瀏覽器就會解釋腳本而且執行它。

然而，大多數時間，事情沒有那麼簡單。首先，你提供給瀏覽器或解釋器的必須是有效的JavaScript代碼。瀏覽器會堅持檢查JavaScript代碼是否符合JavaScript語言規範。若是不符合，它會拋出一個錯誤，而後腳本中止。固然，程序員十分努力書寫JavaScript程序，可是不免出現拼寫這種錯誤，並且編寫程序的規則要求十分嚴格。所以，在解釋這個階段，你就會與錯誤邂逅。

當你解決幾個小錯誤後，瀏覽器檢查了所有的腳本並無報錯。下一步，瀏覽器運行腳本。不少狀況下，你發現腳本沒有按照你想的那樣運行。固然，你盡力表達你想運行的腳本效果，可是概念上的錯誤很容易出現。

所以你回到編輯器中修改腳本，而後打開瀏覽器運行腳本期待不會有新的錯誤出現。你會發現以前的問題解決了，不料又出現了其餘新的問題，仍然沒有實現你想要的。你不得不從新繼續修改腳本。歡迎來到程序員生活！

大規模：設計-說明-實現

隨着你的遊戲變得愈來愈複雜，在作以前就寫代碼不是一個好主意。在開始實施以前（寫和測試程序），有兩個階段須要經歷。

首先，你須要設計遊戲。你要創造什麼類型的遊戲？誰會是你遊戲的觀衆？它是2D仍是3D遊戲？你想遊戲是種什麼玩法？遊戲中會出現什麼樣的角色，它們都有怎樣的能力？特別是當你和其餘人一塊兒開發遊戲時，你不得不書寫上述有關的設計文檔，而後別人才知道你要開發什麼樣的遊戲。即便你一人單獨開發遊戲，寫遊戲設計文檔也是有好處的。設計遊戲的階段實際上是開發遊戲過程當中最難的階段之一。

一旦清楚遊戲作什麼，下一步就是爲程序設計提供一個總體結構。這就叫作說明階段。你還記得面向對象編程是把指令裝在方法裏，把方法裝進類裏嗎？在說明階段，你要有一個大局觀，關於遊戲須要的類和類中須要的方法。在這步，你只須要描述出方法將要作什麼，而不是它怎麼作。然而，你不能假想那些方法裏不可能實現的事情，由於最終咱們要實現方法。

當遊戲說明完成，你就來到了遊戲實現階段，也就是編輯-解釋-運行。在那以後，你可讓他人玩你的遊戲。在某些狀況下，你會發現本身的某些點子沒有運行的想象的那麼好。所以，你會再次設計遊戲，從新規劃遊戲和實現它。而後又讓他人玩你的遊戲。編輯-解釋-運行包含在大規模編寫遊戲方式裏：設計-說明-實現。雖然這本書主要注意力放在遊戲實現方面，可是你最好在第三十章多讀一點關於遊戲設計的東西。

建立你的第一個網絡應用

這部分，你將創造一些簡單的JavaScript應用，在這節以前，你已經看到了一個基本的網頁：

<!DOCTYPE html>
<html>
<head>
<title>Useful website</title>
</head>
<body>
This is a very useful website.
</body>
</html>

打開一個文本編輯器，好比notepad，複製粘貼這段代碼。用.html後綴保存文件，雙擊文件用瀏覽器打開。你幾乎看見的是一個空白的網頁，如圖1-2所示。在HTML裏，標籤用來結構化文檔中的信息。你可能已經意識到它們了，由於它們被放到尖括號裏面。不一樣類型的內容就被放在相似這樣的標籤裏面。你能夠經過標籤前的斜線來區別這是一個開標籤仍是閉標籤。好比，文檔的標題被放在開標籤title和閉標籤titile之間。再說，title標籤又是head標籤的一部分。head又是html的一部分，由於它在html之間。正如你看到的那樣，HTML的標籤系統能讓你有條理的組織文檔內容。所有的HTML文檔有一個樹狀結構，其中HTML元素是根部；根部包含了其餘元素好比head與body，同理它們又包含了其餘分支。

（省略圖1-2）

一旦你建立了HTML文檔，你就能夠改變它的風格了。好比，你想改變HTML中不一樣內容的佈局，或者你想用不一樣的字體或者背景色。樣式定義是HTML文檔的一部分。或者你能夠寫一個CSS文件來指定樣式。

雖然這本書裏不會詳細說明CSS。可是我會盡可能較少在瀏覽器中使用CSS。好比下面，簡單的用CSS設置HTML與BODY邊距爲0.

html, body {
 margin: 0;
}

若是你想讓你的HTML頁面使用CSS，你只需簡單的在head標籤里加上這行：

<link rel="stylesheet" type="text/css" href="game-layout.css"/>

我會在本書中大多數的遊戲例子中用之前的CSS文件。在第十三章，我會擴展CSS便於遊戲自動縮放匹配不一樣設備。

你能夠在HTML文檔中直接改變樣式，而不是用CSS。實現的方法就是設置標籤的屬性。好比，下面的HTML頁面有個style屬性來改變背景色爲藍色。如圖1-3所示。

<!DOCTYPE html>
<html>
    <head>
        <title>BasicExample</title>
    </head>
    <body style="background:blue">
        <p>That's a very nice background</p>
    </body>
</html>

（省略圖1-3）

你能夠改變不一樣的類型經過style屬性值。好比，看下面的HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>BasicExample</title>
    </head>
    <body>
        <div style="background:blue;font-size:40px;">Hello,how are you?</div>
        <div style="background:yellow;font-size:20px;">I'm doing great,thank you!</div>
    </body>
</html>

若是你看文檔中的body部分，你能夠發現由兩部分組成。每一個部分由div標籤關聯，div用於將HTML文檔劃分爲不一樣部分。你能夠爲不一樣的部分使用不一樣的樣式。在這個例子中，第一部分有一個藍色背景和40像素的字體，第二部分有黃色的背景和20像素的字體。（如圖1-4）

（省略圖1-4）

你也能夠用JavaScript改變HTML的元素風格代替style屬性。好比，你能夠用下面的JavaScript代碼來改變背景色。

<!DOCTYPE html>
<html>
    <head>
        <title>BasicExample</title>
        <script>changeBackgroundColor = function(){
            document.body.style.background = "blue";
        }
        document.addEventListener('DOMContentLoaded', changeBackgroundColor);
        </script>
    </head>
    <body>
        That's a very nice background.
    </body>
</html>

這個例子呈現出的效果和第一個例子如出一轍，可是在使用JavaScript和使用標籤屬性之間有一個重要的不一樣之處：JavaScript動態的改變了顏色。這是由於有下面這一行：

document.addEventListener('DOMContentLoaded', changeBackgroundColor);

在HTML和JavaScript中有不一樣的事件類型。好比，能夠給HTML添加一個按鈕而後當用戶點擊按鈕時執行JavaScript代碼。下面代碼就是個例子（如圖1-5所示）：

<!DOCTYPE html>
<html>
    <head>
        <title>BasicExample</title>
        <script>
            sayHello = function(){
            alert("Hello World!");
        }
        document.addEventListener('click', sayHello);
        </script>
    </head>
    <body>
        <button>
            Click me
        </button>
    </body>
</html>

（省略圖1-5）

這類型的動態交互由於瀏覽器支持JavaScript而變得可能。若是你想進行遊戲編程，瞭解玩家如何與遊戲進行交互是很是重要的。

HTML的畫布

關於新的HTML標準值得說的事情就是提供了幾個標籤可讓HTML更加靈活多樣。其中一個很是重要的標籤就是canvas標籤，這個標籤可讓你在HTML繪畫2D或者3D圖像。下面是一個簡單的例子：

<!DOCTYPE html>
<html>
    <head>
        <title>BasicExample</title>
    </head>
    <body>
        <div id="gameArea">
            <canvas id="mycanvas" width="800" height="480"></canvas>
        </div>
    </body>
</html>

你能夠看到主體部分有個叫gameArea的區域，這個區域有個canvas元素，它有不少屬性。它有一個ID，還有寬和高。你能夠經過JavaScript改變這個canvas的屬性。好比，下面的例子用JavaScript改變了背景色：

<!DOCTYPE html>
<html>
    <head>
        <title>BasicExample</title>
        <script>
            changeCanvasColor = function(){
                var canvas = document.getElementById("mycanvas");
                var context = canvas.getContext("2d");
                context.fillStyle = "blue";
                context.fillRect(0, 0, canvas.width, canvas.height);
            }
            document.addEventListener('DOMContentLoaded', changeCanvasColor);
        </script>
    </head>
    <body>
        <div id="gameArea">
            <canvas id="mycanvas" width="800" height="480"></canvas>
        </div>
    </body>
</html>

在changeCanvasColor函數中，首先看到canvas元素。這個元素就是你能用來畫2D或3D圖像的元素。在代碼中有這樣的元素是很是有用的，由於你能夠輕鬆的取回canvas的值，好比寬和高。爲了在畫布上進行操做，你須要畫布上下文。畫布上下文提供了在畫布上畫圖的函數。當你從畫布上下文中獲取信息，你須要代表你是想二維的仍是三維的模式。這個例子中，獲得的是二維的畫布上下文。你使用二維畫布在給定大小區域內填充了背景色。圖1-6是代碼運行後的效果。下面的章節將會將更多有關canvas元素東西和如何使用它來創造遊戲。

（省略圖1-6）

把JavaScript放在一個分離的文件裏

你能夠用一個單獨的JavaScript文件來代替在HTML中直接嵌入JavaScript腳本，例如：

<!DOCTYPE html>
<html>
    <head>
        <title>BasicExample</title>
        <script src="BasicExample.js"></script>
    </head>
    <body>
        <div id="gameArea">
            <canvas id="mycanvas" width="800" height="480"></canvas>
        </div>
    </body>
</html>

而後在BasicExample.js包含下面代碼：

changeCanvasColor = function(){
    var canvas = document.getElementById("mycanvas");
    var context = canvas.getContext("2d");
    context.fillStyle = "blue";
    context.fillRect(0, 0, canvas.width, canvas.height);
}
document.addEventListener('DOMContentLoader', changeCanvasColor);

在不少狀況下，這樣設計是頗有必要的。把腳本代碼與HTML文本分開來，可讓腳本代碼運行在不一樣的網頁上。這本書中的全部JavaScript代碼都是與HTML分離開來的，由一個或多個JavaScript文件組成。