基于HTML5技術的五子棋游戲的設計與開發

董春俠，司占軍

(天津科技大學 包裝與印刷工程學院，天津 300222)

?

基于HTML5技術的五子棋游戲的設計與開發

董春俠，司占軍

(天津科技大學 包裝與印刷工程學院，天津 300222)

HTML5標準的制定與發布帶動了HTML5游戲的發展。基于HTML5的五子棋游戲是一款休閑益智的網頁游戲，主要利用了HTML5新增的Canvas標簽實現游戲的開發。首先在PhotoShop中進行素材編輯和UI設計，然后利用HTML5和CSS3實現游戲頁面的布局及樣式，利用Canvas及其自帶的API進行棋盤和棋子的繪制，并通過JavaScript腳本實現游戲的主要邏輯，最后利用XAMMP在本地服務器上發布。HTML5獨特的跨平臺能力，使得該游戲能夠在多種平臺設備上運行，達到完美的兼容效果。

游戲；五子棋；HTML5；Canvas

0 引言

隨著信息時代的不斷發展，帶動了游戲產業的飛速提升，游戲成為了生活中必不可少的娛樂方式之一。游戲的種類逐漸從單一化向多元化發展，其中休閑類游戲占據著游戲市場的重要位置。無論是棋牌類游戲還是益智類游戲都備受大眾喜愛，例如“斗地主”、“像素小鳥”等；此外，游戲的開發模式也多種多樣，各具特色。其中，基于HTML5開發的游戲以其獨特的跨平臺性和輕量性，且無需進行客戶端下載與安裝，即可進行游戲，實現“即點即玩”，獲得了很好的用戶體驗，并且具有很強的社交傳播性[1-2]。

1 HTML5介紹

HTML5是HTML的最新標準，它提供了許多用以加強交互和多媒體支持的新元素，如Canvas、audio、video等,這些新元素使得瀏覽器不依賴Flash等第三方插件即可開發高質量的原生程序[3]。HTML5提供的Canvas是HTML5網頁游戲開發中最重要的元素，它提供了新的網頁編程接口，開發者可以通過JavaScript處理畫布內的圖像，可以在畫布中繪制直線、圓、矩形等基本形狀，實現游戲畫面或其他虛擬圖像的實時渲染[4]，完成游戲畫面的搭建，使游戲的開發變得更加便捷。目前各大瀏覽器逐漸完善對GPU加速的2D Canvas渲染功能的支持，因此，使用Canvas繪制出的游戲動畫運行速度明顯加快。

與其他技術開發的游戲相比，基于HTML5開發的游戲有兩點主要優勢：一是其相關技術免費開放、規范并且易于推廣；二是無需安裝插件，減少了用戶的麻煩，提高了安全性，是眾多游戲開發者的優先選擇[5]。本設計基于HTML5進行五子棋游戲的開發，使用戶在與計算機對戰時充分開動大腦，體驗簡單的人工智能算法的下棋邏輯，給用戶體驗帶來一定的樂趣。

2 思路框架

基于HTML5技術的五子棋游戲結合HTML5、CSS3和JavaScript進行開發，利用JavaScript調用Canvas自帶的API對棋盤和棋子的繪制和游戲主要邏輯的編寫。每個界面放置不同的按鈕，玩家通過點擊按鈕實現游戲的操作以及頁面的跳轉。除此之外游戲還能實現皮膚的切換。游戲的開發流程圖如圖1所示。

圖1 思路流程圖

3 游戲設計與實現

3.1 界面設計和素材處理

(1)棋盤設計：棋盤大小為450×450像素的正方形，橫豎各15條線，構成255個交叉點，并設計多種風格的棋盤供用戶選擇。

(2)風格設計：由于五子棋起源于中國，本次五子棋游戲主要以“中國風”為基調進行設計。選用灰色作為游戲界面的主色調，搭配卷軸和畫框構成游戲背景。其中卷軸的動畫是在PhotoShop的動畫面板中制作，通過設置每一幀的顯示樣式和每一幀動畫的延遲時間以及循環播放次數，完成卷軸由內向外逐漸打開的動畫效果。制作圖和動畫面板設置如圖2如示。

圖2 卷軸動畫的制作

3.2 頁面布局

游戲界面通過HTML進行布局，通過CSS進行樣式調整，Canvas作為承載棋盤和棋子的畫布。

3.2.1 棋盤的繪制[6]

在html文件中創建標簽作為承載棋盤的容器，像所有的DOM對象一樣Canvas有自己本身的屬性、方法和事件，其中就有繪圖的方法，js能夠調用它來進行繪圖。

由于Canvas的左上角為畫布的起點，坐標為(0,0)。通過計算，除去左右各留白的15個像素后，棋盤的4個頂點在Canvas中的坐標依次為(15,15)、(435,15)、(435,435)、(15,435)。利用for循環可以迅速畫出棋盤，當i(線條數)等于0時，從(15,15)起點到(15,435)點開始繪制第一條縱線，當i等于1時，縱坐標保持不變，起點和終點的橫坐標各增加30個像素，第二條縱線繪制完成。以此類推，繪制其余的13條縱線。當i=15時，不滿足i<15的條件，退出for循環，從而完成五子棋盤的15條縱線的繪制，同理繪制出15條橫線。實現代碼如下：

function drawChessBoard(){

for(var i=0; i<15; i++){

context.moveTo(15+i*30,15) ;

context.lineTo(15+i*30,435);

context.stroke();

context.moveTo(15,15+i*30) ;

context.lineTo(435,15+i*30);

context.stroke();}}

3.2.2 棋子的繪制

五子棋的繪制是由3個大小不一的圓形組成。其中的兩個小圓左漸變效果。以黑棋為例，先利用beginPath()創建路徑，然后用arc方法繪制一個實心圓，調用fill填充顏色。然后用CSS3新增樣式gradient屬性繪制棋子的漸變效果，使棋子呈現立體感。代碼如下：

context.beginPath();

context.arc(200,200,100,0,2*Math.PI);

context.closePath();

var gradient=context.createRadialGradient(200,200,50,200,200,20);

gradient.addColorStop(0,“#0A0A0A”);

gradient.addColorStop(1,“#6363766”);

context.fillStyle=gradient;

context.fill();

3.2.3 棋盤背景切換

更換棋盤背景風格是通過更改圖片的路徑來實現的。通過標簽提供多組棋盤背景圖片，并綁定onclick事件，當點擊標簽時調用onclick綁定的函數從而實現背景的切換。

3.3 游戲主要邏輯

3.3.1 落子的實現

落子需要給棋子綁定一個onclick事件。以黑子為例，當點擊鼠標實現黑棋的落子，具體代碼如下：

chess.onclick=function(e){

var x = e.offsetX;

var y = e.offsetY;

var i = Math.floor(x/30);

var j = Math.floor(y/30);

oneStep(i,j,true);}

以上代碼中， offset代表了HTML元素相對于自己的offsetParent元素的位置，由于落子的實現是在棋盤中完成的，所以這里的父級為Canvas元素。e.offsetX是相對于Canvas坐標系的左上角開始的坐標。由于棋盤在Canvas中繪制左右各留白15個像素，且黑白棋子和棋盤的每個格子各為30×30個像素[7]。棋盤的坐標系相對于Canvas向右下方移動了15個像素，所以棋子橫縱坐標各整除30，剛好每隔30個像素落到橫縱線的交叉點上，從而完成落子的實現。

3.3.2 贏法數組的計算

首先用一個三維數組記錄五子棋所有的贏法，數組的前面兩位數據代表五子棋的棋盤坐標，第三個數據表示贏法的種類。每種贏法在棋盤上只顯示5個棋子，并且這些棋子相互連接成一條線，可以為橫線、豎線或是斜線，用true代表交叉點存在棋子，棋盤上的其余位置都為false，表示沒有棋子存在。贏法數組的計算的部分代碼如下：

var count=0;

for(var i=0,i<15,i++){

for(var j=0;j<11;j++){

for(var k=0;k<5;k++){

wins[i][j+k][count]=true;}

count++;}}

3.3.3 人機對戰五子棋AI的實現

五子棋游戲的玩法少不了人機對戰的模式，玩家和計算機各執黑棋和白棋，雙方依次交替落子，任何一方首先實現5個棋子的連接則為勝利方。其中，計算機的落子是通過算法計算實現的。AI方首先需要遍歷整個棋盤上還沒有落子的交叉點，通過算法給這些交叉點分別計算得分，得分最高的交叉點則是AI方需要落子的地方。依靠這種算法，AI方不僅需要連接5個棋子，還需要阻止玩家首先取得勝利，從而實現玩家與計算機的對戰模式。

3.4 游戲發布

通過修改測試后將游戲開發包放入建站集成軟件包Xammp的htdocs內進行本地服務器的發布。游戲開始畫面、主畫面和說明畫面最終效果如圖3所示。

4 結束語

基于HTML5技術開發的游戲能以最簡單和最便捷的方式在移動設備上運行，并且其具有的跨平臺能力，能良好地解決目前市場上各種不同操作系統和屏幕尺寸設備所帶來的問題，使游戲的測試變得簡單可行。其開放性的特點使HTML5不為單個公司所有或控制，使得HTML5擁有比其他類似平臺更持久的生命力，在未來將會占據重要的地位。

圖3 游戲主要界面圖

[1] 黎志雄，黃彥湘，陳學中.基于HTML5游戲開發的研究與研究[J].東莞理工學院學報，2014，21(5)：48-53.

[2] 吳少軍.網頁游戲開發新趨勢與新技術漫談[J].當代教育理論與實踐，2012，4(6):175-176.

[3] 余飛. HTML5圖形圖像處理技術研究[J].計算機光盤軟件與應用，2013(12):261,263.

[4] 沈柯，司占軍. 基于HTML5的物品360度展示特效研究[J].軟件導刊，2015，14(9):169-171.

[5] 馮科融，王和興.HTML5網頁游戲分析[J].網絡通信，2012(24):71-72.

[6] 衛少林,衛文學. 基于JavaScript的人機五子棋游戲的設計與實現[J].現代計算機(專業版),2016(25):58-62.

[7] Huang Jianheng. HTML5 代碼實現雙人對弈游戲的四種方式[EB/OL].(2016-10-06)[2016-11-05].http://blog.csdn.net/huangjianheng/article/details/52745476?locationNum=13.

Design and development of gobang game based on HTML5

Dong Chunxia, Si Zhanjun

(College of Packaging & Printing Engineering, Tianjin University of Science & Technology, Tianjin 300222, China)

With the standard formulation and release of HTML5, it has led the development of HTML5 games. The gobang game based on HTML5 is a casual puzzle game which is released on web. It mainly used the new tag that is Canvas of HTML5 to realize the development of the game. Firstly, the material was edited and the web-page was designed with the soft PhotoShop. Then, the layout and style was realized with HTML5and CSS3. The board and the pawn were painted using Canvas and its own API. And through the JavaScript, the main logic of the game was achieved. Finally, the game was released on the local server. Because of the unique capabilities of crossing platform, that makes the game can be run on a variety of platforms, and achieve the perfect compatibility.

game; gobang; HTML5; Canvas

TP399

A

10.19358/j.issn.1674- 7720.2017.11.004

董春俠，司占軍.基于HTML5技術的五子棋游戲的設計與開發[J].微型機與應用，2017,36(11)：12-14.

2017-01-13)

董春俠(1992-)，通信作者，女，碩士在讀，主要研究方向：數字出版、網站前端開發。E-mail：dcx_spring@126.com。

司占軍(1971-)，男，碩士，碩士生導師，主要研究方向：印刷色彩及圖形圖像處理、數字出版技術、虛擬現實。