五子棋html游戲代碼與算法介紹

我會把html文件、css文件提供下載地址，文件夾路徑也展示給大家。但是圖片就沒法一一放在博客里面了。

大家有需要的話，加博主QQ：2864144286，全天在線。

運行圖片

目錄路徑

五子棋.html

五子棋-黑子電腦

/**********************自定義便捷函數*******************************/

function getRandom(min,max){//獲取在區間[min.max]內的int數

let s;

s=parseInt(Math.random()*max+1);

while(s

{

s=parseInt(Math.random()*max+1);

}

return s;

}

/**************************定義初始化數據*****************************************/

/***封裝棋盤里面的點 類*****/

function Point(index,hang,lie){

this.idnex=index;

this.hang=hang;

this.lie=lie;

this.state=0;

this.pointX=-17+(this.lie-1)*52;

this.pointY=-17+(14-this.hang+1)*52;

}

var pointsScore=new Array(226);

var points=new Array(226);

for(let i=1;i<=225;i++)

{

points[i]=new Point(i,parseInt((i-1)/15+1),i-parseInt((i-1)/15)*15);

pointsScore[i]=0;

}

console.log(points[15].pointX);

/**************************系統設置*****************************************/

/*

* 封裝游戲容器居中

*/

(() => {

let screenHeight=parseInt($(window).height()); //瀏覽器時下窗口可視區域高度

let screenWidth=parseInt($(window).width()); //瀏覽器時下窗口可視區域高度

let containerHeigth=parseInt($("#container").height());//container容器高度

let containerWidth=parseInt($("#container").width());//container容器寬度

$("#container").css({

'marginLeft':(screenWidth-containerWidth)/2+'px',

'marginTop':(screenHeight-containerHeigth)/2+'px',

})

})();

/** 根據鼠標相對于棋盤坐標軸的位置，以30*30px大小的正方形位界限，

** 搜索在矩形內是否有point點存在，然后根據坐標確定points的index

*/

let getPointsIndex = (movex,movey) => {

let hang=-1,lie=-1;

for(let i=1;i<=15;i++){

if(movex<=points[i].pointX+32&&movex>=points[i].pointX+2) lie=i;

if(movey<=points[i].pointX+32&&movey>=points[i].pointX+2) hang=16-i;

}

if(hang==-1||lie==-1) return 0;

return (hang-1)*15+lie;

}

addChess(1,113);

/***對點擊事件，獲取相對于棋盤坐標軸的位置，然后根據坐標確定points的index*****/

$("#container").on("click",function(e){

console.log("--------點擊了！");

e = e || window.event;

if(e.pageX || e.pageY) {

movex = e.pageX-parseInt($("#container").css("marginLeft"))-37;

movey = e.pageY-parseInt($("#container").css("marginTop"))-12;

}

console.log("--------檢索到坐標的index為:"+getPointsIndex(movex,movey));

addChess(-1,getPointsIndex(movex,movey));

addChess(1,computer(getPointsIndex(movex,movey)));

})

/*******添加棋子********/

function addChess(state,index){//state代表狀態，1黑子 -1白子

var img=$(new Image());

img.attr({

'src':'css/img/'+(state==1?'black':'white')+'.png',

'class':'chess'

});

img.css({

'margin-left':points[index].pointX+'px',

'margin-top':points[index].pointY+'px',

});

points[index].state=state;

$("#chessboard").append(img);

}

/**************************電腦算法*****************************************/

/***評分表***/

var score1={//白子為電腦 電腦主…… 我也不知道主進攻還是防守

empty : 7,

b_1 : 35,

b_2 : 800,

b_3 : 15000,

b_4 : 80000,

w_1 : 15,

w_2 : 400,

w_3 : 1800,

w_4 : 10000,

polluted : 0

}

function getScore(isEmpty,isPolluted,stateNum,state,i){//白棋為電腦，主防守

let fen=score1;

if(points[i].state!=0) pointsScore[i]=0;

else{

if(isPolluted) pointsScore[i]+=fen.polluted;

else if(isEmpty) pointsScore[i]+=fen.empty;

else {

if(stateNum==1&&state==1) pointsScore[i]+=fen.b_1;

else if(stateNum==2&&state==1) pointsScore[i]+=fen.b_2;

else if(stateNum==3&&state==1) pointsScore[i]+=fen.b_3;

else if(stateNum==4&&state==1) pointsScore[i]+=fen.b_4;

if(stateNum==1&&state==-1) pointsScore[i]+=fen.w_1;

else if(stateNum==2&&state==-1) pointsScore[i]+=fen.w_2;

else if(stateNum==3&&state==-1) pointsScore[i]+=fen.w_3;

else if(stateNum==4&&state==-1) pointsScore[i]+=fen.w_4;

}

}

}

function computer(index){

for(let i=1;i<=225;i++) pointsScore[i]=0;

for(let q=1;q<=225;q++){

let hangPointIndex=q;//得到此點的index

for(let j=1;j<=5;j++)//遍歷與此點橫相關的五元組,理論上有五個五元組

{

if(points[hangPointIndex].lie>=j&&points[hangPointIndex].lie<=10+j)//篩選可成立的五元組

{

let isEmpty=1,isPolluted=0,isPolluted1=0,isPolluted2=0,stateNum=0,state=0;

for(let k=1;k<=5;k++)

{

if(points[hangPointIndex+k-j].state!=0) {isEmpty=0;stateNum++;}

if(points[hangPointIndex+k-j].state==1) isPolluted1=1;

if(points[hangPointIndex+k-j].state==-1) isPolluted2=1;

}

if(isPolluted1==1&&isPolluted2==1) isPolluted=1;

if(isPolluted1==1&&isPolluted2==0) state=1;

if(isPolluted1==0&&isPolluted2==1) state=-1;

getScore(isEmpty,isPolluted,stateNum,state,hangPointIndex);

}

}

let liePointIndex=q;//得到此點的index

for(let j=1;j<=5;j++)//遍歷與此點縱相關的五元組,理論上有五個五元組

{

if(points[liePointIndex].hang>=j&&points[liePointIndex].hang<=10+j)//篩選可成立的五元組

{

var isEmpty=1,isPolluted=0,isPolluted1=0,isPolluted2=0,stateNum=0,state=0;

for(var k=1;k<=5;k++)

{

if(points[liePointIndex+(k-j)*15].state!=0) {isEmpty=0;stateNum++;}

if(points[liePointIndex+(k-j)*15].state==1) isPolluted1=1;

if(points[liePointIndex+(k-j)*15].state==-1) isPolluted2=1;

}

if(isPolluted1==1&&isPolluted2==1) isPolluted=1;

if(isPolluted1==1&&isPolluted2==0) state=1;

if(isPolluted1==0&&isPolluted2==1) state=-1;

getScore(isEmpty,isPolluted,stateNum,state,liePointIndex);

}

}

let nowIndex=q;//獲取此時point的索引index

for(var j=1;j<=5;j++)//遍歷與此點正斜(形如“/”)相關的五元組,理論上有五個五元組

{

if(points[nowIndex].hang>=j&&points[nowIndex].hang<=10+j&&points[nowIndex].lie>=j&&points[nowIndex].lie<=10+j)//篩選可成立的五元組

{

var isEmpty=1,isPolluted=0,isPolluted1=0,isPolluted2=0,stateNum=0,state=0;

for(var k=1;k<=5;k++)

{

if(points[nowIndex+(k-j)*16].state!=0) {isEmpty=0;stateNum++;}

if(points[nowIndex+(k-j)*16].state==1) isPolluted1=1;

if(points[nowIndex+(k-j)*16].state==-1) isPolluted2=1;

}

if(isPolluted1==1&&isPolluted2==1) isPolluted=1;

if(isPolluted1==1&&isPolluted2==0) state=1;

if(isPolluted1==0&&isPolluted2==1) state=-1;

getScore(isEmpty,isPolluted,stateNum,state,nowIndex);

}

}

for(var j=1;j<=5;j++)//遍歷與此點反斜(形如“\”)相關的五元組,理論上有五個五元組

{

if(points[nowIndex].hang>=6-j&&points[nowIndex].hang<=16-j&&points[nowIndex].lie>=j&&points[nowIndex].lie<=10+j)//篩選可成立的五元組

{

var isEmpty=1,isPolluted=0,isPolluted1=0,isPolluted2=0,stateNum=0,state=0;

for(var k=1;k<=5;k++)

{

if(points[nowIndex-(k-j)*14].state!=0) {isEmpty=0;stateNum++;}

if(points[nowIndex-(k-j)*14].state==1) isPolluted1=1;

if(points[nowIndex-(k-j)*14].state==-1) isPolluted2=1;

}

if(isPolluted1==1&&isPolluted2==1) isPolluted=1;

if(isPolluted1==1&&isPolluted2==0) state=1;

if(isPolluted1==0&&isPolluted2==1) state=-1;

getScore(isEmpty,isPolluted,stateNum,state,nowIndex);

}

}

}

let maxIndex=[],max=0;

for(let val of pointsScore) if(val>max) max=val;

for(let i=1;i<=225;i++) if(pointsScore[i]==max) maxIndex.push(i);

return maxIndex[parseInt(Math.random()*(maxIndex.length))];

}

五子棋算法

五子棋有15行、15列，一共225個點。假設每個點都有自己的分數。

我們遍歷每個點。

如上圖，對于每個點來說，它在橫、豎、正斜(“/”)、反斜(“\”)四個方向上，都會有包含此點的五元組，一共20個。

我們遍歷這20個五元組。

對于每個五元組來說，如果里面有黑子有白子，我們稱五元組被污染了，如果五元組是空的，或者有1個到4個白子或黑子，我們都給出相應的分數。評分表如下：

/***評分表***/

empty : 7,

b_1 : 35,

b_2 : 800,

b_3 : 15000,

b_4 : 80000,

w_1 : 15,

w_2 : 400,

w_3 : 1800,

w_4 : 10000,

polluted : 0

最后20個五元組得出的分數，都加再這一點上面。

之后遍歷225個點的分數，得出最大分數的點，下棋。

算法結構大致畫為：

進行下一個游戲的開發！

注意事項

【1】 原創博客，轉載本篇請與我聯系，尊重版權。QQ：2864144286

【2】 關于閱讀本篇博客的所有問題、代碼源碼、圖片素材、編程技巧、編程經歷都可聯系我，與我交流討論。

【3】 本人部分時間承接各種畢業設計、網站編寫、微信小程序編寫、數據庫作業編寫。需要請加QQ：2864144286，詳聊。

征途黯然.

發布了57 篇原創文章 · 獲贊 43 · 訪問量 1萬+

私信

關注

標簽：fen,五子棋,state,算法,html,let,&&,pointsScore,points

來源： https://blog.csdn.net/qq_43592352/article/details/104106272

總結

以上是生活随笔為你收集整理的HTML五子棋游戏代码介绍,五子棋html游戏代码与算法介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。