JavaScript實現(xiàn)一個帶AI的井字棋游戲源碼
更新時間：2018年05月21日 09:40:17 作者：小樓夜聽雨QAQ
這篇文章主要介紹了基于JavaScript實現(xiàn)一個帶AI的井字棋游戲源碼,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
最近有一門課結(jié)束了，需要做一個井字棋的游戲，我用JavaScript寫了一個。首先界面應(yīng)該問題不大，用html稍微寫一下就可以。主要是人機對弈時的ai算法，如何使電腦方聰明起來，是值得思考一下的。開始游戲后，由玩家先行。那么站在計算機的角度，可以對多種情況進行分析，并按照重要程度賦予權(quán)值。
情況如下：
1、同一排（行。列。對角線）有且只有兩個棋子，并且都是自己的，只要再進一步就能獲勝，那么剩下的那個位置權(quán)值最高，優(yōu)先級最大。賦予一級權(quán)值。
2、同一排（行。列。對角線）有且只有兩個棋子，并且都是對方的（也就是玩家的），只要再進一步，玩家就會成功，所以“我”要堵住，剩下的那個位置賦予二級權(quán)值。
3、因為電腦方后行，如果聰明點，需要一直堵玩家方，所以當一排只有一個棋，且是玩家的棋子，那么該排其他位置的權(quán)值設(shè)為三級。
4、四級權(quán)值：一排只有己方（電腦方）的棋子。
5、五級權(quán)限：同排沒有棋子，包括對方和己方。
實現(xiàn)的時候，每個位置的棋子，可以用二維數(shù)組full表示，每個位置的權(quán)值大小也用一個二維數(shù)組val來表示。玩家方下完后，調(diào)用AI方的函數(shù)，AI方行棋前，先更新一下權(quán)值，然后選出權(quán)值最大的位置落子（最優(yōu)解）。無論是ai還是玩家方，每次落子后都要判斷有沒有產(chǎn)生輸贏。用alert（）函數(shù)輸出結(jié)果。
為了表示權(quán)值的大小，規(guī)定按照一級到五級順序，依次加 10000、1000、10、5、3
注：由于可能要提交源碼，我沒有分離出css樣式和js文件，不過最好還是分開寫更規(guī)范。如有不足之處，歡迎批評指正。
源碼如下：
<html>
<head>
<meta charset="utf-8">
<title>井字棋</title>
<script>
//定義全局變量
var full=[[0,0,0],[0,0,0],[0,0,0]];//0表示null，1表示我下的，2表示電腦下的
var val=[[1,1,1],[1,1,1],[1,1,1]];//表示每個位置的權(quán)值
function judge(){
//檢測是否有人贏
//行
for(var i=0;i<3;i++){
if(full[i][0]==full[i][1]&&full[i][1]==full[i][2]&&full[i][0]!=0){
if(full[i][0]==1){
window.alert("you win!");
return true;
}
else {
window.alert("you lose");
return true;
}
}
}
//列
for(var i=0;i<3;i++){
if(full[0][i]==full[1][i]&&full[1][i]==full[2][i]&&full[0][i]!=0){
if(full[0][i]==1){
window.alert("you win!");
return true;
}
else {
window.alert("you lose");
return true;
}
}
}
//主對角線
if(full[0][0]==full[1][1]&&full[1][1]==full[2][2]&&full[0][0]!=0){
if(full[0][0]==1){
window.alert("you win!");
return true;
}
else {
window.alert("you lose");
return true;
}
}
if(full[0][2]==full[1][1]&&full[2][0]==full[1][1]&&full[0][2]!=0){
if(full[0][2]==1){
window.alert("you win!");
return true;
}
else {
window.alert("you lose");
return true;
}
}
for(var i=0;i<3;i++){
for(var j=0;j<3;j++){
if(full[i][j]==0)
return false;//說明還沒結(jié)束
if(i==2&&j==2)
{window.alert("平局！");
return true;
}
}
}
return false;//無結(jié)果
}
function bn(i,j){
//如果已經(jīng)下過，則無效
if(full[i][j]!=0){
return 0;
}else{
//沒下過
full[i][j]=1;
num1=(i*3+j+1)+"";
document.getElementById(num1).value="X";
if(judge()==true){
return;
}
ai();//切換
}
}
//重置權(quán)值：
function resetValue(){
for(var i=0;i<3;i++){
for(var j=0;j<3;j++){
if(full[i][j]!=0)
val[i][j]=0;
else{
//看行和列：
//最高權(quán)值
if(((full[0][j]+full[1][j]+full[2][j])==4)&&(full[0][j]*full[1][j]*full[2][j])==0
&&((full[0][j]-1)*(full[1][j]-1)*(full[2][j]-1))==-1)
val[i][j]=val[i][j]+10000;
if(((full[i][0]+full[i][1]+full[i][2])==4)&&(full[i][0]*full[i][1]*full[i][2])==0
&&((full[i][0]-1)*(full[i][1]-1)*(full[i][2]-1))==-1)
val[i][j]=val[i][j]+10000;
//次級權(quán)值
if(((full[0][j]+full[1][j]+full[2][j])==2)&&(full[0][j]*full[1][j]*full[2][j])==0
&&((full[0][j]-1)*(full[1][j]-1)*(full[2][j]-1))==0)
val[i][j]=val[i][j]+1000;
if(((full[i][0]+full[i][1]+full[i][2])==2)&&(full[i][0]*full[i][1]*full[i][2])==0
&&((full[i][0]-1)*(full[i][1]-1)*(full[i][2]-1))==0)
val[i][j]=val[i][j]+1000;
//三級權(quán)值（一排只有一個X）
if(((full[0][j]+full[1][j]+full[2][j])==1)&&(full[0][j]*full[1][j]*full[2][j])==0
&&((full[0][j]-1)*(full[1][j]-1)*(full[2][j]-1))==0)
val[i][j]=val[i][j]+10;
if(((full[i][0]+full[i][1]+full[i][2])==1)&&(full[i][0]*full[i][1]*full[i][2])==0
&&((full[i][0]-1)*(full[i][1]-1)*(full[i][2]-1))==0)
val[i][j]=val[i][j]+10;
//四級權(quán)值（一排只有一個O）
if(((full[0][j]+full[1][j]+full[2][j])==2)&&(full[0][j]*full[1][j]*full[2][j])==0
&&((full[0][j]-1)*(full[1][j]-1)*(full[2][j]-1))==1)
val[i][j]=val[i][j]+5;
if(((full[i][0]+full[i][1]+full[i][2])==2)&&(full[i][0]*full[i][1]*full[i][2])==0
&&((full[i][0]-1)*(full[i][1]-1)*(full[i][2]-1))==1)
val[i][j]=val[i][j]+5;
//五級權(quán)限（該行沒有X或O）
if(((full[0][j]+full[1][j]+full[2][j])==0)&&(full[0][j]*full[1][j]*full[2][j])==0
&&((full[0][j]-1)*(full[1][j]-1)*(full[2][j]-1))==-1)
val[i][j]=val[i][j]+2;
if(((full[i][0]+full[i][1]+full[i][2])==0)&&(full[i][0]*full[i][1]*full[i][2])==0
&&((full[i][0]-1)*(full[i][1]-1)*(full[i][2]-1))==-1)
val[i][j]=val[i][j]+2;
//主對角線：同上
if((i==0&&j==0)||(i==2&&j==2)||(i==1&&j==1)){
if(((full[0][0]+full[1][1]+full[2][2])==4)&&(full[0][0]*full[1][1]*full[2][2])==0
&&((full[0][0]-1)*(full[1][1]-1)*(full[2][2]-1))==-1)
val[i][j]=val[i][j]+10000;
//次級權(quán)值
if(((full[0][0]+full[1][1]+full[2][2])==2)&&(full[0][0]*full[1][1]*full[2][2])==0
&&((full[0][0]-1)*(full[1][1]-1)*(full[2][2]-1))==0)
val[i][j]=val[i][j]+1000;
//三級權(quán)值（一排只有一個X）
if(((full[0][0]+full[1][1]+full[2][2])==1)&&(full[0][0]*full[1][1]*full[2][2])==0
&&((full[0][0]-1)*(full[1][1]-1)*(full[2][2]-1))==0)
val[i][j]=val[i][j]+10;
//四級權(quán)值（一排只有一個O）
if(((full[0][0]+full[1][1]+full[2][2])==2)&&(full[0][0]*full[1][1]*full[2][2])==0
&&((full[0][0]-1)*(full[1][1]-1)*(full[2][2]-1))==1)
val[i][j]=val[i][j]+5;
//五級權(quán)值（該行沒有X或O）
if(((full[0][0]+full[1][1]+full[2][2])==0)&&(full[0][0]*full[1][1]*full[2][2])==0
&&((full[0][0]-1)*(full[1][1]-1)*(full[2][2]-1))==-1)
val[i][j]=val[i][j]+2;
}
//副對角線(同上)
if((i==0&&j==2)||(i==2&&j==0)||(i==1&&j==1)){
//一級
if(((full[0][2]+full[1][1]+full[2][0])==4)&&(full[0][2]*full[1][1]*full[2][0])==0
&&((full[0][2]-1)*(full[1][1]-1)*(full[2][0]-1))==-1)
val[i][j]=val[i][j]+10000;
//二級
if(((full[0][2]+full[1][1]+full[2][0])==2)&&(full[0][2]*full[1][1]*full[2][0])==0
&&((full[0][2]-1)*(full[1][1]-1)*(full[2][0]-1))==0)
val[i][j]=val[i][j]+1000;
//三級權(quán)值（一排只有一個X）
if(((full[0][2]+full[1][1]+full[2][0])==1)&&(full[0][2]*full[1][1]*full[2][0])==0
&&((full[0][2]-1)*(full[1][1]-1)*(full[2][0]-1))==0)
val[i][j]=val[i][j]+10;
//四級權(quán)值（一排只有一個O）
if(((full[0][2]+full[1][1]+full[2][0])==2)&&(full[0][2]*full[1][1]*full[2][0])==0
&&((full[0][2]-1)*(full[1][1]-1)*(full[2][0]-1))==1)
val[i][j]=val[i][j]+5;
//五級權(quán)值（該行沒有X或O）
if(((full[0][2]+full[1][1]+full[2][0])==0)&&(full[0][2]*full[1][1]*full[2][0])==0
&&((full[0][2]-1)*(full[1][1]-1)*(full[2][0]-1))==-1)
val[i][j]=val[i][j]+2;
}
}
}
}
}
function ai(){
if(judge()==true){
return;
}
//挑選權(quán)值最大的
resetValue();
var mi=0,mj=0,temp=0;
for(var i=0;i<3;i++)
for(var j=0;j<3;j++){
if(val[i][j]>temp){
temp=val[i][j];
mi=i;
mj=j;
}
}
full[mi][mj]=2;
num1=(mi*3+mj+1)+"";
document.getElementById(num1).value="O";
if(judge()==true){
return;
}
}
function lose(){
window.alert("you lose");
location.reload();
}
</script>
</head>
<body>
<h1 align=center> 井字棋</h1>
<table border=2px bordercolor="blue"width="300"height="300" style="font-size:50 " align=center>
<tr>
<td><input type="button" id="1" Style="width:100px;height:100px;" value=" " onclick="bn(0,0)"/></td>
<td><input type="button" id="2" Style="width:100px;height:100px;" value=" " onclick="bn(0,1)"/></td>
<td><input type="button" id="3" Style="width:100px;height:100px;" value=" " onclick="bn(0,2)"/></td>
</tr>
<tr>
<td><input type="button" id="4" Style="width:100px;height:100px;" value=" " onclick="bn(1,0)"/></td>
<td><input type="button" id="5" Style="width:100px;height:100px;" value=" " onclick="bn(1,1)"/></td>
<td><input type="button" id="6" Style="width:100px;height:100px;" value=" " onclick="bn(1,2)"/></td>
</tr>
<tr >
<td><input type="button" id="7" Style="width:100px;height:100px;" value=" " onclick="bn(2,0)"/></td>
<td><input type="button" id="8" Style="width:100px;height:100px;" value=" " onclick="bn(2,1)"/></td>
<td><input type="button" id="9" Style="width:100px;height:100px;" value=" " onclick="bn(2,2)"/></td>
</tr>
</table>
<div ><input type="button" style="position:relative;left:500px;top:5px;width:100px;height:50px;" value="重新開始" onclick="location.reload() "/>
<input type="button" style="position:relative;left:550px;top:5px;width:100px;height:50px;" value="認 輸" onclick="lose()"/>
</div>
<body>
</html>
總結(jié)
以上所述是小編給大家介紹的JavaScript實現(xiàn)一個帶AI的井字棋游戲源碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了關(guān)于JS中涉及的常用類型轉(zhuǎn)換及運算符表達式 ,包括js中常用類型轉(zhuǎn)換，及常用的運算符表達式，需要的朋友可以參考下2017-07-07
JavaScript中各種編碼解碼函數(shù)的區(qū)別和注意事項
JavaScript 中encodeURI,encodeURIComponent與escape的區(qū)別和注2010-08-08
這篇文章主要介紹了JavaScript 中的運算符和表達式介紹，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-09-09
談?wù)勎覍avaScript原型和閉包系列理解(隨手筆記6)
這篇文章主要介紹我對JavaScript原型和閉包系列理解(隨手筆記6)的相關(guān)資料,需要的朋友可以參考下2015-12-12
本文主要分享了原生js實現(xiàn)下拉框（支持鍵盤事件）功能的示例代碼。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
動態(tài)控制Table的js代碼...2007-03-03
JavaScript/jQuery 表單美化插件小結(jié)
用過一些表單美化的工具，覺得不錯，特地分享一下2012-02-02
下面小編就為大家?guī)硪黄狫S實現(xiàn)控制文本框的內(nèi)容。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
這篇文章主要介紹了包含中國城市的javascript對象,以一個javascript的json數(shù)據(jù)格式存儲為例分析了javascript存儲城市信息的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
下面小編就為大家?guī)硪黄齽t表達式替換html元素屬性的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11