亚洲免费av电影一区二区三区,日韩爱爱视频,51精品视频一区二区三区,91视频爱爱,日韩欧美在线播放视频,中文字幕少妇AV,亚洲电影中文字幕,久久久久亚洲av成人网址,久久综合视频网站,国产在线不卡免费播放

        ?

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

        2017-06-19 18:50:13董春俠司占軍
        關(guān)鍵詞:五子棋交叉點(diǎn)落子

        董春俠,司占軍

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

        ?

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

        董春俠,司占軍

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

        HTML5標(biāo)準(zhǔn)的制定與發(fā)布帶動(dòng)了HTML5游戲的發(fā)展?;贖TML5的五子棋游戲是一款休閑益智的網(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)行客戶(hù)端下載與安裝,即可進(jìn)行游戲,實(shí)現(xiàn)“即點(diǎn)即玩”,獲得了很好的用戶(hù)體驗(yàn),并且具有很強(qiáng)的社交傳播性[1-2]。

        1 HTML5介紹

        HTML5是HTML的最新標(biāo)準(zhǔn),它提供了許多用以加強(qiáng)交互和多媒體支持的新元素,如Canvas、audio、video等,這些新元素使得瀏覽器不依賴(lài)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à)布中繪制直線(xiàn)、圓、矩形等基本形狀,實(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ú)需安裝插件,減少了用戶(hù)的麻煩,提高了安全性,是眾多游戲開(kāi)發(fā)者的優(yōu)先選擇[5]。本設(shè)計(jì)基于HTML5進(jìn)行五子棋游戲的開(kāi)發(fā),使用戶(hù)在與計(jì)算機(jī)對(duì)戰(zhàn)時(shí)充分開(kāi)動(dòng)大腦,體驗(yàn)簡(jiǎn)單的人工智能算法的下棋邏輯,給用戶(hù)體驗(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條線(xiàn),構(gòu)成255個(gè)交叉點(diǎn),并設(shè)計(jì)多種風(fēng)格的棋盤(pán)供用戶(hù)選擇。

        (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(線(xiàn)條數(shù))等于0時(shí),從(15,15)起點(diǎn)到(15,435)點(diǎn)開(kāi)始繪制第一條縱線(xiàn),當(dāng)i等于1時(shí),縱坐標(biāo)保持不變,起點(diǎn)和終點(diǎn)的橫坐標(biāo)各增加30個(gè)像素,第二條縱線(xiàn)繪制完成。以此類(lèi)推,繪制其余的13條縱線(xiàn)。當(dāng)i=15時(shí),不滿(mǎn)足i<15的條件,退出for循環(huán),從而完成五子棋盤(pán)的15條縱線(xiàn)的繪制,同理繪制出15條橫線(xiàn)。實(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è)像素落到橫縱線(xiàn)的交叉點(diǎn)上,從而完成落子的實(shí)現(xiàn)。

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

        首先用一個(gè)三維數(shù)組記錄五子棋所有的贏(yíng)法,數(shù)組的前面兩位數(shù)據(jù)代表五子棋的棋盤(pán)坐標(biāo),第三個(gè)數(shù)據(jù)表示贏(yíng)法的種類(lèi)。每種贏(yíng)法在棋盤(pán)上只顯示5個(gè)棋子,并且這些棋子相互連接成一條線(xiàn),可以為橫線(xiàn)、豎線(xiàn)或是斜線(xiàn),用true代表交叉點(diǎn)存在棋子,棋盤(pán)上的其余位置都為false,表示沒(méi)有棋子存在。贏(yíng)法數(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ī)(專(zhuān)業(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í)。

        猜你喜歡
        五子棋交叉點(diǎn)落子
        Sim Sim
        琴(外一首)
        詩(shī)選刊(2019年8期)2019-08-12 02:29:36
        圍棋棋盤(pán)的交叉點(diǎn)
        落子山東,意在全局
        金橋(2018年4期)2018-09-26 02:24:54
        90后羅運(yùn)生:五子棋是我生命的一部分
        金色年華(2016年8期)2016-02-28 01:40:31
        90后唐丹:人生如棋,落子不悔
        金色年華(2016年8期)2016-02-28 01:40:30
        基于高中生命科學(xué)知識(shí)交叉點(diǎn)的教學(xué)方法研究
        財(cái)政部長(zhǎng)吳波的“五子棋局”
        區(qū)域重力異常值的交叉點(diǎn)平差實(shí)例分析
        紐結(jié)的(m,n)-變換
        女优av一区二区在线观看| 人妻少妇中文字幕在线| 丝袜美腿福利一区二区| 国产精品久久久久久av| 吃奶呻吟打开双腿做受视频| 柠檬福利第一导航在线| 国产三级在线观看免费| 91亚洲国产成人aⅴ毛片大全| 爱情岛论坛亚洲品质自拍hd| 天天av天天爽无码中文| 国产成人精品麻豆| 亚洲一级av大片在线观看| 亚洲一区二区懂色av| 熟女中文字幕一区二区三区 | 一区二区三区人妻av| 国产极品女主播国产区| 欧美黑人性暴力猛交喷水黑人巨大| 国产免费午夜a无码v视频| 无码av免费永久免费永久专区 | 岛国AV一区二区三区在线观看| 亚洲av综合日韩精品久久久| 日本在线观看三级视频| 亚洲tv精品一区二区三区| 疯狂添女人下部视频免费| 久久久噜噜噜久久中文字幕色伊伊| 久久久精品电影| 中文字幕一区二区va| 东北老熟女被弄的嗷嗷叫高潮| 精品露脸国产偷人在视频| 亚洲美女又黄又爽在线观看| 99久久人妻无码精品系列蜜桃| 人妻少妇偷人精品久久人妻 | 一区二区三区人妻少妇| 男女猛烈xx00免费视频试看| 亚洲无码精品免费片| 国产一区二区三区蜜桃av | 国产乱人伦av在线a麻豆| 久久久久久免费毛片精品| 亚洲熟妇AV一区二区三区宅男| 日本高清中文字幕二区在线| 人妻一区二区三区在线看|