基于JS实现经典的井字棋游戏

作者：莫笑沉吟时间：2024-04-28 09:51:10　

井字棋作为我们在上学时代必玩的一款连珠游戏，你知道如何做到先手必然不会输吗？今天我们就用HTML、css、js来实现一款井字棋游戏。

先看成品

游戏初始化界面：

玩家获胜

AI电脑获胜

思路

生成棋盘

通过表格生成一个3*3的表格
然后通过css属性隐藏部分边框实现井字棋盘

重新开始

清空文本数列删除属性

玩家落子

通过玩家点击获取id
通过id将点击的表格块设置为O

电脑落子

通过算法来实现电脑最适合的块id然后落子

代码

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>井字棋</title>
<link rel="stylesheet" href="css.css" rel="external nofollow" />
</head>
<body>
<table>
<tr>
<td class="cell" id="0"></td>
<td class="cell" id="1"></td>
<td class="cell" id="2"></td>
</tr>
<tr>
<td class="cell" id="3"></td>
<td class="cell" id="4"></td>
<td class="cell" id="5"></td>
</tr>
<tr>
<td class="cell" id="6"></td>
<td class="cell" id="7"></td>
<td class="cell" id="8"></td>
</tr>
</table>
<div class="endgame">
<div class="text"></div>
</div>
<button onclick="startGame()">重新开始</button>
<script src="js.js"></script>
</body>
</html>

CSS

* {
margin: 0;
padding: 0;
}
button {
position: absolute;
position: absolute;
left: 50％;
margin-left: -65px;
top: 50px;
}
td {
border: 2px solid #333;
width: 100px;
height: 100px;
text-align: center;
vertical-align: middle;
font-family: '微软雅黑';
font-style: italic;
font-size: 70px;
cursor: pointer;
}
table {
/*margin: 30px auto;*/
position: absolute;
left: 40％;
top: 100px;
border-collapse: collapse;
}

table tr:first-child td {
border-top: 0;
}

table tr:last-child td {
border-bottom: 0;
}

table tr td:first-child {
border-left: 0;
}

table tr td:last-child {
border-right: 0;
}

.endgame {
display: none;
width: 200px;
height: 120px;
background-color: rgba(205, 132, 65, 0.8);
position: absolute;
left: 40％;
top: 180px;
margin-left: 50px;
text-align: center;
border-radius: 5px;
color: white;
font-size: 2em;
}

js

var origBoard;
const huPlayer = 'O';
const aiPlayer = 'X';
const winCombos = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[6, 4, 2]
]
/*获取元素*/
const cells = document.querySelectorAll(".cell");
startGame();

function startGame () {
document.querySelector(".endgame").style.display = "none";
//设置阵列点创建9个数组元素，元素的键0到8
origBoard = Array.from(Array(9).keys());
//console.log(origBoard);
for (var i = 0; i < cells.length; i++) {
//把文本先设置为空
cells[i].innerHTML = "";
//删除属性知道已经有人赢了
cells[i].style.removeProperty('background-color');
//点击方块
cells[i].addEventListener('click', turnClick, false);
}
}

function turnClick (square) {
//记住原来走过的方块
if (typeof origBoard[square.target.id] == 'number') {
//人类玩家点击
turn(square.target.id, huPlayer);
//由人类转向AI玩家
if (!checkTie()) {
//电脑玩家将棋子放到最合适的地方
turn(bestStep(), aiPlayer);
}
}

}

function turn (squareId, player) {
//这些id给玩家
origBoard[squareId] = player;
document.getElementById(squareId).innerHTML = player;
//让游戏进行检查
var gameWin = checkWin(origBoard, player);
if (gameWin) {
gameOver(gameWin);
}
}
//判断胜利
function checkWin (board, player) {
let plays = board.reduce((a, e, i) =>
(e === player) ? a.concat(i) : a, [])
let gameWin = null;
//如果是属于之前winCombos胜利组合
for (let [index, win] of winCombos.entries()) {
if (win.every(Element => plays.indexOf(Element) > -1)) {
//现在我们知道是哪一个组合胜利了
gameWin = { index: index, player: player };
break;
}
}
return gameWin;
}
/*游戏结束*/
function gameOver (gameWin) {
for (let index of winCombos[gameWin.index]) {
//人类获胜则为蓝色
document.getElementById(index).style.backgroundColor =
gameWin.player == huPlayer ? "blue" : "red";
}
/*事件 * 删除单击，已经结束了，不能再点击*/
for (var i = 0; i < cells.length; i++) {
cells[i].removeEventListener('click', turnClick, false);
}
declareWinner(gameWin.player == huPlayer ? "你赢了" : "你输了");
}

function emptySquares () {
//过滤每一个元素,如果元素为number，返回所有方块
return origBoard.filter(s => typeof s == 'number');
}

/*AI最优步骤*/
function bestStep () {
//智能AI
return minmax(origBoard, aiPlayer).index;
}
//检查是否是平局
function checkTie () {
if (emptySquares().length == 0) {
for (var i = 0; i < cells.length; i++) {
cells[i].style.backgroundColor = "green";
cells[i].removeEventListener('click', turnClick, false);
}
//谁获胜了
// declareWinner("玩家获胜");
return true;
} else {
//平局
return false;
}

}

function declareWinner (who) {
document.querySelector(".endgame").style.display = 'block';
document.querySelector(".endgame .text").innerHTML = who;
}

function minmax (newBoard, player) {
//找到索引，空方块功能设置为a
var availSpots = emptySquares(newBoard);

if (checkWin(newBoard, player)) {
return { score: -10 };
} else if (checkWin(newBoard, aiPlayer)) {
return { score: 20 };
} else if (availSpots.length === 0) {
return { score: 0 };
}
//之后进行评估
var moves = [];
//收集每个动作时的空白点
for (var i = 0; i < availSpots.length; i++) {
//然后设置空的索引号
var move = {};
move.index = newBoard[availSpots[i]];
newBoard[availSpots[i]] = player;

if (player == aiPlayer) {
//存储对象，包括得分属性
var result = minmax(newBoard, huPlayer);
move.score = result.score;
} else {
//存储对象，包括得分属性
var result = minmax(newBoard, aiPlayer);
move.score = result.score;
}

newBoard[availSpots[i]] = move.index;

moves.push(move);
}
var bestMove;
//如果是AI玩家，以非常低的数字和循环通过
if (player === aiPlayer) {
var bestScore = -1000;
for (var i = 0; i < moves.length; i++) {
if (moves[i].score > bestScore) {
bestScore = moves[i].score;
bestMove = i;
}
}
} else {
var bestScore = 1000;
for (var i = 0; i < moves.length; i++) {
if (moves[i].score < bestScore) {
bestScore = moves[i].score;
bestMove = i;
}
}
}

return moves[bestMove];
}

来源：https://juejin.cn/post/7089813654962438174

标签：JS,井字棋,游戏

投稿

基于JS实现经典的井字棋游戏

先看成品

游戏初始化界面：

玩家获胜

AI电脑获胜

思路

生成棋盘

重新开始

玩家落子

电脑落子

代码

HTML

CSS

js

猜你喜欢

在SQL Server数据库中为标识(IDENTITY)列插入显式值

MySQL优化之大字段longtext、text所生产的问题

Python基于列表list实现的CRUD操作功能示例

PyQt中实现自定义工具提示ToolTip的方法详解

Python时间和日期库的实现

JS中检测数据类型的几种方式及优缺点小结

Python安装spark的详细过程

浅析网页色彩应用

jsp下页面跳转的几种方法小结

MATLAB plot函数功能及用法详解

详解go中的引用类型

tensorflow 重置/清除计算图的实现

[译]Javascript风格要素（二）

将数字转换成大写的人民币表达式的js函数

一个asp分页源代码例子

Python简单计算数组元素平均值的方法示例

分享8 个常用pandas的 index设置

完美解决mysql启动后随即关闭的问题（ibdata1文件损坏导致）

详细解析Webpack是怎么运行的

java正则表达式提取数字的方法实例