【正文】 一項整個游戲都會坍塌。一款完整的游戲包括游戲資源（如聲音、圖片等）和游戲引擎共同組成，缺一不可。當然對于游戲來說最主要的還是圖形動畫的界面要美觀，這樣才可以吸引更多的人來玩，對于這方面不得不提的就是Canvas標簽了，它與其他元素不同，不像audio等元素直接將現(xiàn)有元素插到網(wǎng)頁中，而是可以獨立的處理或創(chuàng)建2D圖形，不僅如此，還可以通過JavaScript語言來控制Canvas的圖形來響應與用戶交互的動態(tài)圖形與動畫。因此再2010年HTML5正式被大家所認可，實現(xiàn)了Web領域近十幾年來質的飛躍，將Web推向了一個更高、更成熟、更穩(wěn)定的平臺。盡可能的使用新的特性標簽來設計實現(xiàn)游戲的基本功能。很多人認為視頻要比音頻的添加困難，因為視頻還包括了圖像，但是對于HTML5來說只需要一個標簽而已，與音頻的添加完全相似。本文通過對HTML5進行短暫的學習之后，完成了對HTML5的小型的實踐游戲，來鞏固對學習內容的理解，找到了網(wǎng)頁與游戲的相當好的契合。但是畢竟HTML5是基于瀏覽器的語言，所以由此開發(fā)的游戲也是輕量級的小游戲，隨著移動電子產(chǎn)品的多元化，人們更希望通過游戲來釋放自己在工作學習中的壓力，雖然HTML5不能制作大型游戲，也因此游戲種類千變萬化，豐富了人們的生活，不至于再長時間萬同一款游戲時覺得枯燥無味。在國內外也掀起了一股學習開發(fā)HTML5游戲的熱潮，之前的網(wǎng)頁游戲開發(fā)成本高，即需要服務器端有需要客戶端的支持，而現(xiàn)在HTML5可以跨平臺操作，可以在更多的移動產(chǎn)品上進行操作，更能滿足人們對于便捷的要求。不僅如此新增加的Canvas元素，可以使瀏覽器直接創(chuàng)建并處理圖形，使得網(wǎng)頁布局更加美觀大方，也方便了開發(fā)人員，代碼更加簡潔。隨著網(wǎng)店和網(wǎng)頁游戲的不斷興起，Web早就不能只滿足于靜態(tài)的文檔，但是Web本身又不具備對視頻，音頻，圖像處理的開發(fā)功能，想要在網(wǎng)頁中添加這些就必須借助第三方插件，另外有時還需要其他的技術來支持HTML，讓它支持多種媒體，這就加重了開發(fā)人員的工作量，不僅如此，人們再刷新網(wǎng)頁時由于內容過多，耗費時間較長，用戶體驗差。減少了用戶刷新頁面的時間，得到了更多人的認可,因此基于HTML5所制作的游戲也就成了很多人的研究課題。HTML5具有很多新的特性，最主要的還是它具有跨平臺兼容性，不僅可以在電腦上運行，還可以在移動終端運行，不僅如此HTML5中的Canvas元素可以使瀏覽器直接創(chuàng)建并處理圖像，減輕了開發(fā)人員的負擔，而且使界面更加美觀，具有很好的用戶體驗。[1]先前的幾個html版本，主要針對的是靜態(tài)的文本網(wǎng)頁，用于顯示文檔和共享一些數(shù)據(jù)，后來動態(tài)網(wǎng)站和應用程序的出現(xiàn)，使得網(wǎng)頁更具有靈動性，但是這些都是基于第三方的插件或者Adobe Flash來完成的，這些插件可以使網(wǎng)站更加豐富，可以提供人機交互的功能。它增加了很多新的元素，將一些模塊動態(tài)化，另外HTML5的核心目標是增加了比如audio、video等新的媒體元素，這樣就可以不用第三方插件來播放多媒體，操作更加簡單方便。HTML5新增加的這些功能，也為網(wǎng)頁游戲提供了開發(fā)上的便利條件，不再需要第三方插件來支持游戲的音效，動畫，給網(wǎng)頁游戲開創(chuàng)了一個新的時代。為使用者提供了更加精美的動畫效果，這對有游戲的設計來說至關重要，很多游戲能夠得到人們的廣泛關注除了玩法新穎意外，那就是畫風優(yōu)美，讓人賞心悅目，這也是HTML5游戲的獨特之處。無論是對于游戲還是網(wǎng)站來說都是一次質的飛越，而作為一個具有探索，好奇心的軟件學生來說，學習HTML5必將對自己以后進入社會，對自己以后的工作有所幫助，不斷學習新的技術，跟上時代的潮流，這是我們當代大學生的重要職責。音頻功能是有了新的標簽，那么人們更多的是注重視頻的添加不再那么麻煩，針對這一點HTML5也為此創(chuàng)建了video元素標簽，使得視頻的添加不再過于繁瑣，代碼也不再過于臃腫。HTML5還可以進行本地存儲，這個新的功能可以用來存儲分數(shù)或者是玩家的排行榜。但是近幾年隨著科技和經(jīng)濟的不斷發(fā)展，人們更傾向于從網(wǎng)上獲取信息，在網(wǎng)上購買商品，節(jié)省了人們很多的時間與精力。HTML5相較其他版本的以大亮點就是將audio和video引入到標簽中，這樣網(wǎng)頁播放音頻和視頻時就不必借助第三方插件，本身就可以做到了。一般的游戲引擎包括渲染、場景、攝像、腳本、物理因素（重力、摩擦等）、碰撞檢測、音效等系統(tǒng)，游戲玩家所體驗到的關卡、劇情、玩法等都由引擎來控制，它在整個游戲中扮演著發(fā)動機的角色，為整個游戲提供動力，也扮演著幕后角色，在后臺指揮者游戲的進程。導演是整個引擎或者是整個游戲的總指揮，它控制著其他的控件，比如人物該有什么樣的動作，有什么樣的語言等等，總之其他的事物都要服從導演的指揮；場景和布景主要是負責游戲的背景以及各關卡之間的轉換作用，是人們對于一個游戲的第一印象；攝像機是將人物或場景的轉換記錄下來，連成一段合理的故事；人物和動作也是游戲的靈魂，這里的人物又叫做精靈，其實并不是單純的指人，也可以是方塊等其他的物體，就是給這些精靈附上了動作，才使游戲有了動態(tài)的效果。WebStorm是一款基于javascript語言的開發(fā)工具，被稱為“最強的HTML5編輯神器”，它集成了多種模板方便人們開發(fā)，還具有拼寫檢查，重復代碼檢查，語言分析，智能補全代碼，它不僅可以支持不同的瀏覽器，還支持自定義函數(shù)，代碼格式化，聯(lián)想查詢，代碼調試，代碼結構調試、重疊等功能。[2]在游戲調試過程中，采用的是火狐瀏覽器，因為這是一款主流瀏覽器，這樣也方便了開發(fā)者的調試，一般經(jīng)過調試后，再在其他瀏覽器上運行時也不會有什么大的問題。根據(jù)游戲提示的玩法開始游戲，并且隨時查看自己的得分情況。模塊功能圖如下： 功能設計游戲界面設計是一個10*10的方塊矩陣，這個矩陣可以根據(jù)自己的喜好自定義更改矩陣的數(shù)量，當游戲玩家消除方塊后，在游戲引擎的控制下，方塊會自動下落，更改自己的位置；前臺的界面還提供了音效控制按鈕，因為并不是每一個人都喜歡玩游戲的時候有音樂，可以根據(jù)個人喜好控制背景音效，不同的事件觸發(fā)會產(chǎn)生不同音效。對于首頁，我們既可以使用CSS來美化頁面，也可以使用HTML5最新的標簽Canvas來渲染界面，最終首頁部分代碼： = function () { ((, ))。 ((x, y))。 var stars = 。//設置星星的位置 ((36 + colIndex * ,