五子棋AI算法简易实现（二）
程序员文章站
2024-03-16 22:35:04
...
基础篇
（2）用户交互
这一部分主要是实现交互功能，实现人和AI的对弈
这个应用是单网页的应用，因此只要使用浏览器打开这个网页即可
HTML部分（CSS部分省略，有兴趣可以到我的GitHub上查看）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>五子棋</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../js/jquery.js"></script>
</head>
<body>
<div id="chessBoard">
<div id="chessPositioner"></div>
</div>
<ol id="record"></ol>
<script type="text/javascript" src="../js/basic.js"></script>
<script type="text/javascript" src="../js/evaluate.js"></script>
<script type="text/javascript" src="../js/AI.js"></script>
<script type="text/javascript" src="../js/AIController.js"></script>
<script type="text/javascript" src="../js/winnercheck.js"></script>
</body>
</html>JS部分：
（1）全局变量模块
var list = document.getElementsByClassName('chess');
//棋盘
var map;
//当前执子的颜色
var black_or_white = "black";
//游戏结束的判定
var is_win = false;
//游戏模式(PVP || PVE)，默认PVE
var mode = "PvE";
//下棋位置记录
var chessRecord = [];
//难度设置（4-6）
var difficultLevel = 6;（2）网页元素生成模块
//生成元素
var createMap = function() {
map = new Array();
for( var i = 0; i < 15; i++){
map[i] = new Array();
for( var j = 0; j < 15; j++){
map[i][j] = 'e'; //'e'表示empty，即当前位置没有棋子
}
}
}
var chessPlace = function() {
for( var i = 0; i < 15; i++)
for( var j = 0; j < 15; j++)
placeChessPos(15+30*j, 15+30*i);
}
var placeChessPos = function(left, top) {
var chessContainer = document.createElement("div");
chessContainer.id = (left-15)/30 + (top-15)/30*15 + "";
chessContainer.style.left = left + "px";
chessContainer.style.top = top + "px";
chessContainer.classList.add("chess");
chessContainer.setAttribute("check", false);
document.getElementById('chessPositioner').appendChild(chessContainer);
}
var createRecord = function(color, num) {
var record = document.createElement("li");
if(num != -1)
record.textContent = color + " : " + ((num-num%15)/15+1) + "," + (num%15+1);
else
record.textContent = color + " win!";
document.getElementById('record').appendChild(record);
}（3）游戏模式控制模块
var playMode = {
"PvP": {
"player1": true,
"player2": false
},
/*“PVE模式默认电脑先手，若想改为人先手，可改为
"PvE": {
"computer": true,
"human": false
}
然后将window.onload函数中的标注部分语句注释
*/
"PvE": {
"computer": false,
"human": true
}
};
var playModeController = function(Mode, color) {
var playingMode;
color = color == "black" ? 1 : 0;
if(Mode === "PvP"){
playingMode = playMode.PvP;
playingMode.player1 = !playingMode.player1;
playingMode.player2 = !playingMode.player2;
}
if(Mode === "PvE"){
playingMode = playMode.PvE;
if(playingMode.human && !playingMode.computer){
playingMode.human = !playingMode.human;
playingMode.computer = !playingMode.computer;
return;
}
if(playingMode.computer && !playingMode.human){
var point = FunctionMaxMin(map, Math.abs(color-1), difficultLevel);
console.log(point);
playingMode.human = !playingMode.human;
playingMode.computer = !playingMode.computer;
robotClick(point);
}
}
};
//机器人下棋函数
var robotClick = function(point) {
var p = (point[0]-1)*15 + (point[1]-1);
var id = "#" + p;
$(id).click();
};（4）鼠标点击操作控制模块
//操作部分
window.onload = function() {
chessPlace();
createMap();
for( var i = 0; i < list.length; i++){
list[i].onclick = operate;
}
is_win = false;
//'PVE'模式下，若想人先手，将下面的代码注释
if(mode == "PvE")
$("#112").click(); //默认初始下子位置[8,8]，黑棋
}
var operate = function() {
//alert($(this).attr("check"));
var num = parseInt($(this).attr("id"));
if($(this).attr("check") === "true" || is_win)
return;
chessRecord.push(num); //记录当前下棋位置
$(this).attr("check", true);
if(black_or_white == "black"){
createRecord("black", ModuleWinnerCheck.checkWinner(1, num));
$("#"+chessRecord[chessRecord.length-2]).removeClass('active');
$(this).addClass("blackChess").addClass("active");
black_or_white = "white";
$("#record").scrollTop(document.getElementById('record').scrollHeight);
setTimeout('playModeController(mode, "black")', 500); //当前颜色
return;
}
else{
createRecord("white", ModuleWinnerCheck.checkWinner(0, num));
$("#"+chessRecord[chessRecord.length-2]).removeClass('active');
$(this).addClass("whiteChess").addClass("active");
black_or_white = "black";
$("#record").scrollTop(document.getElementById('record').scrollHeight);
setTimeout('playModeController(mode, "white")', 500);
return;
}
}综述
这一部分主要是实现人与人或者人与电脑AI轮流下棋的逻辑，主要是方便以后AI逻辑实现效果的测试，游戏界面相对比较简陋，只实现了基本的功能，没有实现 悔棋 等功能，以后会慢慢补上。这部分代码逻辑相对比较简单，因此我将不再过多地进行解释。
上一篇： mongodb查询索引、创建哈希索引、删除哈希索引
下一篇： 五子棋AI算法简易实现（五）