HTML5如何制作黑白五子棋游戲

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

　　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 ，請(qǐng)使用 google chrome 瀏覽器 打開.

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