基于JS实现经典的井字棋游戏
作者:莫笑沉吟 发布时间:2024-04-28 09:51:10
标签:JS,井字棋,游戏
井字棋作为我们在上学时代必玩的一款连珠游戏,你知道如何做到先手必然不会输吗?今天我们就用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
0
投稿
猜你喜欢
- 前言:Requests简介Requests 是使用Apache2 Licensed 许可证的 HTTP 库。用 Python 编写,真正的为
- 在之前的文章中,我们介绍了PyQt5和PySide2中主窗口控件MainWindow的使用、窗口控件的4中基础布局管理。从本篇开始,我们来了
- 当需要存储很多同类型的不通过数据时可能需要使用到嵌套,先用一个例子说明嵌套的使用1、在列表中存储字典#假设年级里有一群国际化的学生,有黄皮肤
- 周五上班的主要任务是在公司老平台上用redis处理一个队列问题,顺便复习了一下redis操作的基础知识,回来后就想着在自己的博客demo里,
- 前期准备在虚拟开发环境中安装:pip install django-filter在Django的项目配置文件中安装并配置django_fil
- 在SQL Server日常的函数、存储过程和SQL语句中,经常会用到不同数据类型的转换。在SQL Server有两种数据转换类型:一种是显性
- 环境:Oracle 11.2.0.4 RAC(2 nodes)说明:假设新增闪存挂载点是/flash(使用了第三方的集群文件系统),如果是使
- Anaconda安装安装步骤:1、官网下载安装包:https://www.anaconda.com/distribution/2、运行并选择
- 1、数值类型1.1、数值类型分类严格数值类型(INTEGER、SMALLINT、DECIMAL 和 NUMERIC)近似数值数据类型(FLO
- 一、按索引取数据①tf.gather()输入参数:数据、维度、索引例:设数据是[4,35,8],4个班级,每个班级35个学生,每个学生8门课
- 1 , javascript字符集:javascript采用的是Unicode字符集编码。为什么要采用这个编码呢?原因很简单,16位的Uni
- 本文实例讲述了Python判断有效的数独算法。分享给大家供大家参考,具体如下:一、题目判断一个 9x9 的数独是否有效。只需要根据以下规则,
- 现状≠将来?程序员做设计本身就很悲哀,纠结于客户与坚持之间就更是如此。无论我今后的路会怎么走,我想始终不变的事情就是与客户博弈了。无论是放弃
- 创建数据表的SQL语句如下: string tatlename = "T_useruid";//定义一个变量。用于自动创
- 一、什么是数据库连接池就是一个容器持有多个数据库连接,当程序需要操作数据库的时候直接从池中取出连接,使用完之后再还回去,和线程池一个道理。二
- 一、设置开启SMTP服务并获取授权码可以参考第一篇文章,这里不再赘述:【一】https://www.jb51.net/article/142
- 这几天开始学tensorflow,先来做一下学习记录 一.神经网络解决问题步骤: 1.提取问题中实体的特征向量作为神经网络的输入。也就是说要
- SOAP.py 客户机和服务器SOAP.py 包含的是一些基本的东西。没有 Web 服务描述语言(Web Services Descript
- python中是通过套接字即socket来实现UDP及TCP通信的。有两种套接字面向连接的及无连接的,也就是TCP套接字及UDP套接字。TC
- 最近公司在研发app,选择了基于Vue框架的vux组件库,现总结在实现上拉刷新功能遇到的坑:1.问题:只刷新一次,解决方法:需要自己手动重置