HTML5相關技術構建在線游戲淺析

齊兵輝李清秀

（1.鄭州航空工業管理學院，河南 鄭州 450046，2.華中師范大學，湖北 武漢 430000）

HTML5相關技術構建在線游戲淺析

齊兵輝1李清秀2

（1.鄭州航空工業管理學院，河南 鄭州 450046，2.華中師范大學，湖北 武漢 430000）

HTML是一種超文本標記語言，使用它做出的頁面可以包含圖片、鏈接，甚至是音樂、程序。而HTML5則是它的最新版本，雖然它并不成熟，但它的優點使它能成為Web的未來，每個人都會盡享它的樂趣。Canvas元素則是HTML5特性中最具代表性的。它與其他元素非常不同，它的主要用途是處理或創建2D圖形，并不是嵌入到網頁中的。它能做出許多有趣的在線游戲。本文簡單探討這些內容。

html5；canvas；在線游戲

二次世界大戰后，電子計算機技術突飛猛進，電子計算機一代一代實現更新，軟件技術也迅速發展。同時在美國，集中了許多設計計算機軟件的人才，他們在工作之余，喜愛與人斗智，因此編了各種各樣能與人斗智的“游戲”，以此來鍛煉編程的能力。這種“游戲”花樣繁多，但其特點都是利用計算機軟件來與人較量。由于不斷修改更新，使計算機的“智力”水平與人難分高低。

美國加利福尼亞電氣工程師諾蘭.布什納爾看到了這種“游戲”的前景所在。他在大學期間根據自己編制的“網球”游戲設計了世界上第一臺商用電子游戲機，并且在娛樂場中大受歡迎，成功激勵著他進一步研制生產電子游戲機，為此他創立了世界上第一臺電子游戲公司——雅達利公司。

今天，當我們回顧電子游戲的發展過程，什么最吸引人們去使用它？我們不難領悟出這樣的道理：電子游戲滿足了人們對競爭和對抗的需求，它總是給予競爭者以新的難題。同時，它還能為勝利者提供嶄新的畫面和音樂享受。電子技術的突破推動了游戲機“家庭化”的發展過程，彩色電視機的普及使大型游戲機的屏幕完全可以被彩色電視機取代，使得微處理機部分與顯示屏幕實現了分離。推動著電子游戲的進一步發展。

網頁游戲又稱頁游。是基于Web瀏覽器的網絡在線多人互動游戲，無需下載客戶端，只需打開網頁，10秒鐘即可進入游戲，不存在機器配置不夠的問題，關閉或者切換極其方便。這使它的發展前期不可限量。《中國游戲產業報告》數據顯示，截至今年上半年，頁游玩家已逾兩億人，新增用戶4450萬人。市場需求的增多折射出網頁游戲市場的急劇擴張。頁游領軍企業的逐漸發力同時帶動一批中小企業扎根頁游市場。相關統計顯示，多家頁游企業月收入已突破千萬，很多網絡游戲廠商紛紛將精力轉向頁游研發。

業內某企業高級負責人認為，如果頁游產品能夠實現增強創新力度，提升游戲品質，那么頁游市場很可能成為PC互聯網的最大一片藍海。廠商大舉進軍頁游市場帶來的是一場市場爭奪鏖戰。最近兩年頁游市場推廣成本暴漲10倍以上，成本的激升使游戲開發商意識到單純進入頁游市場并不能帶來優異的業績。于是，日漸規模化的市場促進了網頁游戲的發展。

HTML5是Web核心語言HTML的規范，你在瀏覽器中看到的一切都是HTML格式化的。新版HTML5在某些核心上做了改進，其中Canvas就是本文設計所用到的HTML5的新特性之一，毫無疑問這些新特性將改變我們建立網站和使用互聯網的方式。

HTML5語言作為如今編程最為廣泛的語言，具有易用、快捷、多瀏覽器兼容等特點。雖然它還在開發中，但HTML5標準的更新可以說給HTML這門標記語言帶來了新的活力。它將彌補上一代HTML的不足，去實現Flash,Silverlight,JavaFX所能實現的功能。

CSS技術簡單來說就是一種用來美化HTML界面的語言，這里我不會做詳細的介紹，大家只需要知道CSS技術讓我們的游戲看起來更有游戲的感覺。

Canvas作為HTML5的新功能，可以說是最炫的功能了，它不僅能繪制圖形和各種對象，以及擦除他們，還可以將Canvas的尺寸設為瀏覽器窗口的大小。聽起來雖然沒什么大不了的，但這卻是開發游戲的必備技能。

首先，讓我先來認識一下canvas元素。與其他新功能類似，canvas元素完全不需要任何外部插件就能運行。但它并非Canvas中最強大的部分，真正關鍵的事2D渲染上下文，這是真正繪制圖形的地方。canvas元素只是作為包裝器，包含著繪圖和圖形操作所需要的全部方法和功能。

2D渲染上下文是一種基于屏幕的標準繪圖平臺。與其他2D平臺類似，采用的是平面笛卡爾坐標系統。坐標系統的1個單位相當于屏幕的1個像素。canvas元素本身是沒有繪圖能力的。所有的繪制工作必須在JavaScript內部完成:

我們就是通過這短短的兩行代碼將canvas元素賦值給一個變量，然后調用getContext得到2D渲染上下文賦值給另一個變量。這樣，我們就可以開始繪制圖形和各種對象了。

如果想做好一個游戲，繪圖當然是必不可少的。本文中涉及到的主要是用它來繪制作為太空保齡球的小行星了。這里，我們就要提到用Canvas繪制圓形了。

圓形是個非常復雜的形狀，Canvas中實際并沒有專門繪制圓形的方法，其實是通過繪制一個首尾相連的圓弧，從而讓它成為一個圓。在開始畫圓弧之前，先讓我們回一下數學中圓的周長公式吧：C=2πr從這個公式中我們可以看出圓的周長是2倍的π乘以半徑。我們在用Canvas繪制圓形時也是一樣的，通過了解一個圓的半徑和弧度（一個完整的圓為360度，即2π弧度）從而使用代碼讓他顯示在網頁中：

這幾行代碼中，“x”、“y”分別代表著原點的坐標值，“0”、“Math.PI*2”代表著圓弧的開始角度與結束角度2π，以便畫出的是一個完整的圓。最后的布爾值false而是確定圓的繪制方向為順時針方向。這樣，我們就了解了Canvas是如何繪制出了本文設計的小行星的了。當然，這些僅僅是Canvas的基礎知識，但我并不打算再介紹Canvas的高級功能，因為在我們的設計中，那些是用不到的。接下來，我會為大家詳細的介紹下JavaScript在我們的游戲設計中起到的作用。

JavaScript對HTML5來說是一名極其重要的語言，它實現了HTML5的強大功能。然而HTML5技術對JavaScript來說也是不可或缺的。

曾經，JavaScript并不為人們所看好，幾乎沒有人拿它來正正規規地編寫程序。可能它自身具備很強的表達能力（即便它創建對象的方式有點不好接受）。但它并沒有有眾多的庫和開發工具。而一門語言真正有用語言卻需要兩者兼備。顯然，JavaScript有些欠缺。直到HTML5技術的出現，扭轉了JavaScript的命運。

HTML5與其先前版本相比其實并沒有太大的變化，只不過添加了新的標簽而已，并且這些新標簽并不難理解。但這只是表面，HTML5真正的威力在于它能讓你運用JavaScript來創建這些標簽，編寫后臺代碼，并通過Canvas來創建動畫、游戲，實現一些數據的可視化。可以說HTML5實際上就是JavaScript，他讓JavaScript所寫的代碼有了用武之地。本文之后所展示的太空保齡球游戲正是運用了Canvas的這一特點。能完成這個游戲完全都要歸功于JavaScript。

由此可見，HTML5賦予了JavaScript更強大的能力。WebGL庫支持在HTML5在Canvas中繪制實時的3D圖形。HTML5的地理位置還支持在瀏覽器中實現LBS（Location Based Service）應用。而持久存儲以及離線功能則為開發能與桌面應用媲美，但卻在瀏覽器中運行的全功能應用奠定了基礎。目前，就連增加多點觸摸事件的實驗性的庫也已經出現了。凡此種種，無一不是實實在在的JavaScript特性。HTML5只是為這些高級功能的發揮提供了舞臺。

J05

A

1005-5312（2014）17-0274-02