董春俠，司占軍

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

?

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

董春俠，司占軍

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

HTML5標(biāo)準(zhǔn)的制定與發(fā)布帶動(dòng)了HTML5游戲的發(fā)展。基于HTML5的五子棋游戲是一款休閑益智的網(wǎng)頁游戲，主要利用了HTML5新增的Canvas標(biāo)簽實(shí)現(xiàn)游戲的開發(fā)。首先在PhotoShop中進(jìn)行素材編輯和UI設(shè)計(jì)，然后利用HTML5和CSS3實(shí)現(xiàn)游戲頁面的布局及樣式，利用Canvas及其自帶的API進(jìn)行棋盤和棋子的繪制，并通過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è)的飛速提升，游戲成為了生活中必不可少的娛樂方式之一。游戲的種類逐漸從單一化向多元化發(fā)展，其中休閑類游戲占據(jù)著游戲市場(chǎng)的重要位置。無論是棋牌類游戲還是益智類游戲都備受大眾喜愛，例如“斗地主”、“像素小鳥”等；此外，游戲的開發(fā)模式也多種多樣，各具特色。其中，基于HTML5開發(fā)的游戲以其獨(dú)特的跨平臺(tái)性和輕量性，且無需進(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等第三方插件即可開發(fā)高質(zhì)量的原生程序[3]。HTML5提供的Canvas是HTML5網(wǎng)頁游戲開發(fā)中最重要的元素，它提供了新的網(wǎng)頁編程接口，開發(fā)者可以通過JavaScript處理畫布內(nèi)的圖像，可以在畫布中繪制直線、圓、矩形等基本形狀，實(shí)現(xiàn)游戲畫面或其他虛擬圖像的實(shí)時(shí)渲染[4]，完成游戲畫面的搭建，使游戲的開發(fā)變得更加便捷。目前各大瀏覽器逐漸完善對(duì)GPU加速的2D Canvas渲染功能的支持，因此，使用Canvas繪制出的游戲動(dòng)畫運(yùn)行速度明顯加快。

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

2 思路框架

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

圖1 思路流程圖

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

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

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

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

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

3.2 頁面布局

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

3.2.1 棋盤的繪制[6]

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

由于Canvas的左上角為畫布的起點(diǎn)，坐標(biāo)為(0,0)。通過計(jì)算，除去左右各留白的15個(gè)像素后，棋盤的4個(gè)頂點(diǎn)在Canvas中的坐標(biāo)依次為(15,15)、(435,15)、(435,435)、(15,435)。利用for循環(huán)可以迅速畫出棋盤，當(dāng)i(線條數(shù))等于0時(shí)，從(15,15)起點(diǎn)到(15,435)點(diǎn)開始繪制第一條縱線，當(dāng)i等于1時(shí)，縱坐標(biāo)保持不變，起點(diǎn)和終點(diǎn)的橫坐標(biāo)各增加30個(gè)像素，第二條縱線繪制完成。以此類推，繪制其余的13條縱線。當(dāng)i=15時(shí)，不滿足i<15的條件，退出for循環(huá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 棋盤背景切換

更換棋盤背景風(fēng)格是通過更改圖片的路徑來實(shí)現(xiàn)的。通過標(biāo)簽提供多組棋盤背景圖片，并綁定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)是在棋盤中完成的，所以這里的父級(jí)為Canvas元素。e.offsetX是相對(duì)于Canvas坐標(biāo)系的左上角開始的坐標(biāo)。由于棋盤在Canvas中繪制左右各留白15個(gè)像素，且黑白棋子和棋盤的每個(gè)格子各為30×30個(gè)像素[7]。棋盤的坐標(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ù)代表五子棋的棋盤坐標(biāo)，第三個(gè)數(shù)據(jù)表示贏法的種類。每種贏法在棋盤上只顯示5個(gè)棋子，并且這些棋子相互連接成一條線，可以為橫線、豎線或是斜線，用true代表交叉點(diǎn)存在棋子，棋盤上的其余位置都為false，表示沒有棋子存在。贏法數(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ī)的落子是通過算法計(jì)算實(shí)現(xiàn)的。AI方首先需要遍歷整個(gè)棋盤上還沒有落子的交叉點(diǎn)，通過算法給這些交叉點(diǎn)分別計(jì)算得分，得分最高的交叉點(diǎn)則是AI方需要落子的地方。依靠這種算法，AI方不僅需要連接5個(gè)棋子，還需要阻止玩家首先取得勝利，從而實(shí)現(xiàn)玩家與計(jì)算機(jī)的對(duì)戰(zhàn)模式。

3.4 游戲發(fā)布

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

4 結(jié)束語

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

圖3 游戲主要界面圖

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

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

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

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

[5] 馮科融，王和興.HTML5網(wǎng)頁游戲分析[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ì)與開發(fā)[J].微型機(jī)與應(yīng)用，2017,36(11)：12-14.

2017-01-13)

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

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