HTML五子棋游戏代码介绍,五子棋html游戏代码与算法介绍
五子棋html游戲代碼與算法介紹
我會(huì)把html文件、css文件提供下載地址，文件夾路徑也展示給大家。但是圖片就沒法一一放在博客里面了。
大家有需要的話，加博主QQ：2864144286，全天在線。
運(yùn)行圖片
目錄路徑
五子棋.html
五子棋-黑子電腦/**********************自定義便捷函數(shù)*******************************/
function getRandom(min,max){//獲取在區(qū)間[min.max]內(nèi)的int數(shù)
let s;
s=parseInt(Math.random()*max+1);
while(s
{
s=parseInt(Math.random()*max+1);
}
return s;
}
/**************************定義初始化數(shù)據(jù)*****************************************/
/***封裝棋盤里面的點(diǎn) 類*****/
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);
/**************************系統(tǒng)設(shè)置*****************************************/
/*
* 封裝游戲容器居中
*/
(() => {
let screenHeight=parseInt($(window).height()); //瀏覽器時(shí)下窗口可視區(qū)域高度
let screenWidth=parseInt($(window).width()); //瀏覽器時(shí)下窗口可視區(qū)域高度
let containerHeigth=parseInt($("#container").height());//container容器高度
let containerWidth=parseInt($("#container").width());//container容器寬度
$("#container").css({
'marginLeft':(screenWidth-containerWidth)/2+'px',
'marginTop':(screenHeight-containerHeigth)/2+'px',
})
})();
/** 根據(jù)鼠標(biāo)相對于棋盤坐標(biāo)軸的位置，以30*30px大小的正方形位界限，
** 搜索在矩形內(nèi)是否有point點(diǎn)存在，然后根據(jù)坐標(biāo)確定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);
/***對點(diǎn)擊事件，獲取相對于棋盤坐標(biāo)軸的位置，然后根據(jù)坐標(biāo)確定points的index*****/
$("#container").on("click",function(e){
console.log("--------點(diǎn)擊了！");
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("--------檢索到坐標(biāo)的index為:"+getPointsIndex(movex,movey));
addChess(-1,getPointsIndex(movex,movey));
addChess(1,computer(getPointsIndex(movex,movey)));
})
/*******添加棋子********/
function addChess(state,index){//state代表狀態(tài)，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);
}
/**************************電腦算法*****************************************/
/***評(píng)分表***/
var score1={//白子為電腦 電腦主…… 我也不知道主進(jìn)攻還是防守
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;//得到此點(diǎn)的index
for(let j=1;j<=5;j++)//遍歷與此點(diǎn)橫相關(guān)的五元組,理論上有五個(gè)五元組
{
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;//得到此點(diǎn)的index
for(let j=1;j<=5;j++)//遍歷與此點(diǎn)縱相關(guān)的五元組,理論上有五個(gè)五元組
{
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;//獲取此時(shí)point的索引index
for(var j=1;j<=5;j++)//遍歷與此點(diǎn)正斜(形如“/”)相關(guān)的五元組,理論上有五個(gè)五元組
{
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++)//遍歷與此點(diǎn)反斜(形如“\”)相關(guān)的五元組,理論上有五個(gè)五元組
{
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個(gè)點(diǎn)。假設(shè)每個(gè)點(diǎn)都有自己的分?jǐn)?shù)。
我們遍歷每個(gè)點(diǎn)。
如上圖，對于每個(gè)點(diǎn)來說，它在橫、豎、正斜(“/”)、反斜(“\”)四個(gè)方向上，都會(huì)有包含此點(diǎn)的五元組，一共20個(gè)。
我們遍歷這20個(gè)五元組。
對于每個(gè)五元組來說，如果里面有黑子有白子，我們稱五元組被污染了，如果五元組是空的，或者有1個(gè)到4個(gè)白子或黑子，我們都給出相應(yīng)的分?jǐn)?shù)。評(píng)分表如下：
/***評(píng)分表***/
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個(gè)五元組得出的分?jǐn)?shù)，都加再這一點(diǎn)上面。
之后遍歷225個(gè)點(diǎn)的分?jǐn)?shù)，得出最大分?jǐn)?shù)的點(diǎn)，下棋。
算法結(jié)構(gòu)大致畫為：
進(jìn)行下一個(gè)游戲的開發(fā)！
注意事項(xiàng)
【1】 原創(chuàng)博客，轉(zhuǎn)載本篇請與我聯(lián)系，尊重版權(quán)。QQ：2864144286
【2】 關(guān)于閱讀本篇博客的所有問題、代碼源碼、圖片素材、編程技巧、編程經(jīng)歷都可聯(lián)系我，與我交流討論。
【3】 本人部分時(shí)間承接各種畢業(yè)設(shè)計(jì)、網(wǎng)站編寫、微信小程序編寫、數(shù)據(jù)庫作業(yè)編寫。需要請加QQ：2864144286，詳聊。
征途黯然.
發(fā)布了57 篇原創(chuàng)文章 · 獲贊 43 · 訪問量 1萬+
私信
關(guān)注
標(biāo)簽：fen,五子棋,state,算法,html,let,&&,pointsScore,points
來源： https://blog.csdn.net/qq_43592352/article/details/104106272
總結(jié)
以上是生活随笔為你收集整理的HTML五子棋游戏代码介绍,五子棋html游戏代码与算法介绍的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 油锅着火了，油温会有多高呢？
- 下一篇： 猪肉上的红章是什么东西?