董春俠，司占軍

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

?

基于HTML5技術(shù)的五子棋游戲的設(shè)計(jì)與開(kāi)發(fā)

董春俠，司占軍

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

HTML5標(biāo)準(zhǔn)的制定與發(fā)布帶動(dòng)了HTML5游戲的發(fā)展。基于HTML5的五子棋游戲是一款休閑益智的網(wǎng)頁(yè)游戲，主要利用了HTML5新增的Canvas標(biāo)簽實(shí)現(xiàn)游戲的開(kāi)發(fā)。首先在PhotoShop中進(jìn)行素材編輯和UI設(shè)計(jì)，然后利用HTML5和CSS3實(shí)現(xiàn)游戲頁(yè)面的布局及樣式，利用Canvas及其自帶的API進(jìn)行棋盤(pán)和棋子的繪制，并通過(guò)JavaScript腳本實(shí)現(xiàn)游戲的主要邏輯，最后利用XAMMP在本地服務(wù)器上發(fā)布。HTML5獨(dú)特的跨平臺(tái)能力，使得該游戲能夠在多種平臺(tái)設(shè)備上運(yùn)行，達(dá)到完美的兼容效果。

游戲；五子棋；HTML5；Canvas

0 引言

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

1 HTML5介紹

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

與其他技術(shù)開(kāi)發(fā)的游戲相比，基于HTML5開(kāi)發(fā)的游戲有兩點(diǎn)主要優(yōu)勢(shì)：一是其相關(guān)技術(shù)免費(fèi)開(kāi)放、規(guī)范并且易于推廣；二是無(wú)需安裝插件，減少了用戶的麻煩，提高了安全性，是眾多游戲開(kāi)發(fā)者的優(yōu)先選擇[5]。本設(shè)計(jì)基于HTML5進(jìn)行五子棋游戲的開(kāi)發(fā)，使用戶在與計(jì)算機(jī)對(duì)戰(zhàn)時(shí)充分開(kāi)動(dòng)大腦，體驗(yàn)簡(jiǎn)單的人工智能算法的下棋邏輯，給用戶體驗(yàn)帶來(lái)一定的樂(lè)趣。

2 思路框架

基于HTML5技術(shù)的五子棋游戲結(jié)合HTML5、CSS3和JavaScript進(jìn)行開(kāi)發(fā)，利用JavaScript調(diào)用Canvas自帶的API對(duì)棋盤(pán)和棋子的繪制和游戲主要邏輯的編寫(xiě)。每個(gè)界面放置不同的按鈕，玩家通過(guò)點(diǎn)擊按鈕實(shí)現(xiàn)游戲的操作以及頁(yè)面的跳轉(zhuǎn)。除此之外游戲還能實(shí)現(xiàn)皮膚的切換。游戲的開(kāi)發(fā)流程圖如圖1所示。

圖1 思路流程圖

3 游戲設(shè)計(jì)與實(shí)現(xiàn)

3.1 界面設(shè)計(jì)和素材處理

(1)棋盤(pán)設(shè)計(jì)：棋盤(pán)大小為450×450像素的正方形，橫豎各15條線，構(gòu)成255個(gè)交叉點(diǎn)，并設(shè)計(jì)多種風(fēng)格的棋盤(pán)供用戶選擇。

(2)風(fēng)格設(shè)計(jì)：由于五子棋起源于中國(guó)，本次五子棋游戲主要以“中國(guó)風(fēng)”為基調(diào)進(jìn)行設(shè)計(jì)。選用灰色作為游戲界面的主色調(diào)，搭配卷軸和畫(huà)框構(gòu)成游戲背景。其中卷軸的動(dòng)畫(huà)是在PhotoShop的動(dòng)畫(huà)面板中制作，通過(guò)設(shè)置每一幀的顯示樣式和每一幀動(dòng)畫(huà)的延遲時(shí)間以及循環(huán)播放次數(shù)，完成卷軸由內(nèi)向外逐漸打開(kāi)的動(dòng)畫(huà)效果。制作圖和動(dòng)畫(huà)面板設(shè)置如圖2如示。

圖2 卷軸動(dòng)畫(huà)的制作

3.2 頁(yè)面布局

游戲界面通過(guò)HTML進(jìn)行布局，通過(guò)CSS進(jìn)行樣式調(diào)整，Canvas作為承載棋盤(pán)和棋子的畫(huà)布。

3.2.1 棋盤(pán)的繪制[6]

在html文件中創(chuàng)建標(biāo)簽作為承載棋盤(pán)的容器，像所有的DOM對(duì)象一樣Canvas有自己本身的屬性、方法和事件，其中就有繪圖的方法，js能夠調(diào)用它來(lái)進(jìn)行繪圖。

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

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個(gè)大小不一的圓形組成。其中的兩個(gè)小圓左漸變效果。以黑棋為例，先利用beginPath()創(chuàng)建路徑，然后用arc方法繪制一個(gè)實(shí)心圓，調(diào)用fill填充顏色。然后用CSS3新增樣式gradient屬性繪制棋子的漸變效果，使棋子呈現(xiàn)立體感。代碼如下：

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 棋盤(pán)背景切換

更換棋盤(pán)背景風(fēng)格是通過(guò)更改圖片的路徑來(lái)實(shí)現(xiàn)的。通過(guò)標(biāo)簽提供多組棋盤(pán)背景圖片，并綁定onclick事件，當(dāng)點(diǎn)擊標(biāo)簽時(shí)調(diào)用onclick綁定的函數(shù)從而實(shí)現(xiàn)背景的切換。

3.3 游戲主要邏輯

3.3.1 落子的實(shí)現(xiàn)

落子需要給棋子綁定一個(gè)onclick事件。以黑子為例，當(dāng)點(diǎn)擊鼠標(biāo)實(shí)現(xiàn)黑棋的落子，具體代碼如下：

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元素相對(duì)于自己的offsetParent元素的位置，由于落子的實(shí)現(xiàn)是在棋盤(pán)中完成的，所以這里的父級(jí)為Canvas元素。e.offsetX是相對(duì)于Canvas坐標(biāo)系的左上角開(kāi)始的坐標(biāo)。由于棋盤(pán)在Canvas中繪制左右各留白15個(gè)像素，且黑白棋子和棋盤(pán)的每個(gè)格子各為30×30個(gè)像素[7]。棋盤(pán)的坐標(biāo)系相對(duì)于Canvas向右下方移動(dòng)了15個(gè)像素，所以棋子橫縱坐標(biāo)各整除30，剛好每隔30個(gè)像素落到橫縱線的交叉點(diǎn)上，從而完成落子的實(shí)現(xiàn)。

3.3.2 贏法數(shù)組的計(jì)算

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

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 人機(jī)對(duì)戰(zhàn)五子棋AI的實(shí)現(xiàn)

五子棋游戲的玩法少不了人機(jī)對(duì)戰(zhàn)的模式，玩家和計(jì)算機(jī)各執(zhí)黑棋和白棋，雙方依次交替落子，任何一方首先實(shí)現(xiàn)5個(gè)棋子的連接則為勝利方。其中，計(jì)算機(jī)的落子是通過(guò)算法計(jì)算實(shí)現(xiàn)的。AI方首先需要遍歷整個(gè)棋盤(pán)上還沒(méi)有落子的交叉點(diǎn)，通過(guò)算法給這些交叉點(diǎn)分別計(jì)算得分，得分最高的交叉點(diǎn)則是AI方需要落子的地方。依靠這種算法，AI方不僅需要連接5個(gè)棋子，還需要阻止玩家首先取得勝利，從而實(shí)現(xiàn)玩家與計(jì)算機(jī)的對(duì)戰(zhàn)模式。

3.4 游戲發(fā)布

通過(guò)修改測(cè)試后將游戲開(kāi)發(fā)包放入建站集成軟件包Xammp的htdocs內(nèi)進(jìn)行本地服務(wù)器的發(fā)布。游戲開(kāi)始畫(huà)面、主畫(huà)面和說(shuō)明畫(huà)面最終效果如圖3所示。

4 結(jié)束語(yǔ)

基于HTML5技術(shù)開(kāi)發(fā)的游戲能以最簡(jiǎn)單和最便捷的方式在移動(dòng)設(shè)備上運(yùn)行，并且其具有的跨平臺(tái)能力，能良好地解決目前市場(chǎng)上各種不同操作系統(tǒng)和屏幕尺寸設(shè)備所帶來(lái)的問(wèn)題，使游戲的測(cè)試變得簡(jiǎn)單可行。其開(kāi)放性的特點(diǎn)使HTML5不為單個(gè)公司所有或控制，使得HTML5擁有比其他類(lèi)似平臺(tái)更持久的生命力，在未來(lái)將會(huì)占據(jù)重要的地位。

圖3 游戲主要界面圖

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

[2] 吳少軍.網(wǎng)頁(yè)游戲開(kāi)發(fā)新趨勢(shì)與新技術(shù)漫談[J].當(dāng)代教育理論與實(shí)踐，2012，4(6):175-176.

[3] 余飛. HTML5圖形圖像處理技術(shù)研究[J].計(jì)算機(jī)光盤(pán)軟件與應(yīng)用，2013(12):261,263.

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

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

[6] 衛(wèi)少林,衛(wèi)文學(xué). 基于JavaScript的人機(jī)五子棋游戲的設(shè)計(jì)與實(shí)現(xiàn)[J].現(xiàn)代計(jì)算機(jī)(專業(yè)版),2016(25):58-62.

[7] Huang Jianheng. HTML5 代碼實(shí)現(xiàn)雙人對(duì)弈游戲的四種方式[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技術(shù)的五子棋游戲的設(shè)計(jì)與開(kāi)發(fā)[J].微型機(jī)與應(yīng)用，2017,36(11)：12-14.

2017-01-13)

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

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