這篇文章主要介紹了HTML5如何制作黑白五子棋游戲，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)公司主要企業(yè)基礎(chǔ)官網(wǎng)建設(shè)，電商平臺建設(shè)，移動手機(jī)平臺，微信小程序開發(fā)等一系列專為中小企業(yè)按需設(shè)計網(wǎng)站產(chǎn)品體系；應(yīng)對中小企業(yè)在互聯(lián)網(wǎng)運(yùn)營的各種問題，為中小企業(yè)在互聯(lián)網(wǎng)的運(yùn)營中保駕護(hù)航。

js代碼：

定義canvas及黑白棋變量

var canvas;

var context;

var isWhite=true;//設(shè)置是否該輪到白棋

var isWell=false;//設(shè)置該局棋盤是否贏了，如果贏了就不能再走了

var img_b=new Image();

img_b.src="images/b.png";//白棋圖片

var img_w=new Image();

img_w.src="images/c.png";//黑棋圖片

為棋盤的二維數(shù)組用來保存棋盤信息

var chessData=new Array(15);//初始化0為沒有走過的，1為白棋走的，2為黑棋走的

for(var x=0;x

chessData[x]=new Array(15);

for(var y=0;y

chessData[x][y]=0;

}

}

繪制棋盤的線

for(var i=0;i

context.beginPath();

context.moveTo(0,i);

context.lineTo(640,i);

context.closePath();

context.stroke();

context.beginPath();

context.moveTo(i,0);

context.lineTo(i,640);

context.closePath();

context.stroke();

}

}

判斷該棋局的輸贏

if(count1>=5||count2>=5||count3>=5||count4>=5){

if(chess==1){

alert("白棋贏了");

}

else{

alert("黑棋贏了");

}

isWell=true;//設(shè)置該局棋盤已經(jīng)贏了，不可以再走了

}

html代碼：

你的瀏覽器不支持HTML5 canvas ，請使用 google chrome 瀏覽器 打開.

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“HTML5如何制作黑白五子棋游戲”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

分享文章：HTML5如何制作黑白五子棋游戲
文章位置：http://m.rwnh.cn/article48/ippihp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動網(wǎng)站建設(shè)、定制開發(fā)、企業(yè)建站、網(wǎng)站營銷、動態(tài)網(wǎng)站、關(guān)鍵詞優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)