说明
井字过三关，js实现代码。
截图
image.png
demo地址
https://codepen.io/ncbigdevil/full/OYROOW
具体代码
<!DOCTYPE html>
<html>
<head>
<title>井字过三关</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style type="text/css">
.main table{
margin: 50px auto;
}
#game tr td {
border: 1px solid #CCC;
width: 100px;
height: 100px;
font-size: 65px;
text-align: center;
vertical-align: middle;
}
#game tr th {
text-align: center;
}
.btn-group {
margin: 10px;
}
#tips {
font-size: 20px;
color: orange;
height: 40px;
line-height: 30px;
}
</style>
</head>
<body>
<div class="main">
<table id="game">
<tr>
<th colspan="3">
<div class="btn-group config1" role="group" >
<button type="button" class="btn btn-primary" id="first">先手</button>
<button type="button" class="btn btn-default" id="last">后手</button>
</div>
<div class="btn-group config2" role="group" >
<button type="button" class="btn btn-primary" id="circle">使用〇</button>
<button type="button" class="btn btn-default" id="cross">使用X</button>
</div>
</th>
</tr>
<tr>
<th colspan="3">
<div id="tips">请点击开始按钮，开始游戏</div>
</th>
</tr>
<tr>
<td id='c1'></td>
<td id='c2'>〇</td>
<td id='c3'></td>
</tr>
<tr>
<td id='c4'>〇</td>
<td id='c5'>〇</td>
<td id='c6'>〇</td>
</tr>
<tr>
<td id='c7'></td>
<td id='c8'>〇</td>
<td id='c9'></td>
</tr>
<tr>
<th colspan="3">
<div class="btn-group game-operation" role="group" >
<button type="button" class="btn btn-default" id="start">开始</button>
<button type="button" class="btn btn-primary" id="end">结束</button>
</div>
</th>
</tr>
</table>
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript">
var first = true;
var myChoice = '〇';
var computerChioce = 'X';
var random = 0;
var arrRecord = [];
var flag = false; //判断游戏是否结束,true是结束。
const winCondition = [
'c1c2c3',
'c4c5c6',
'c7c8c9',
'c1c4c7',
'c2c5c8',
'c3c6c9',
'c1c5c9',
'c3c5c7'
];
$(document).ready(function() {
//开始函数
$('.game-operation button').click(function() {
if($(this).hasClass('btn-primary')) {
return;
}
finishGame ();
if ($(this).attr('id') === 'start') {
showTips('游戏中');
flag = false;
if (!first) {
computerPlay();
}
$('#start').addClass('btn-primary').removeClass('btn-default');
$('#end').addClass('btn-default').removeClass('btn-primary');
} else {
showTips('请点击开始按钮，开始游戏');
flag = true;
$('#start').addClass('btn-default').removeClass('btn-primary');
$('#end').addClass('btn-primary').removeClass('btn-default');
}
});
//点击单元格触发的函数
$('#game td').click(function() {
if (flag) {
return;
}
if ($(this).hasClass('unselected')) {
$(this).text(myChoice).addClass('selected').removeClass('unselected').addClass('myChoice');
if (isWin()) {
return;
}
computerPlay();
}
});
$('.config1 button').click(function() {
if($(this).hasClass('btn-primary')) {
return;
}
if ($(this).attr('id') === 'first') {
first = true;
$('#first').addClass('btn-primary').removeClass('btn-default');
$('#last').addClass('btn-default').removeClass('btn-primary');
} else {
first = false;
$('#first').addClass('btn-default').removeClass('btn-primary');
$('#last').addClass('btn-primary').removeClass('btn-default');
}
});
$('.config2 button').click(function() {
if($(this).hasClass('btn-primary')) {
return;
}
if ($(this).attr('id') === 'circle') {
myChoice = '〇';
computerChioce = 'X';
$('#circle').addClass('btn-primary').removeClass('btn-default');
$('#cross').addClass('btn-default').removeClass('btn-primary');
} else {
myChoice = 'X';
computerChioce = '〇';
$('#circle').addClass('btn-default').removeClass('btn-primary');
$('#cross').addClass('btn-primary').removeClass('btn-default');
}
});
function computerPlay () {
let len = $('.unselected').length;
if (len === 0 ) {
showTips('游戏完结');
return;
}
random = Math.floor(Math.random() * len);
$($('.unselected')[random]).text(computerChioce).addClass('selected').removeClass('unselected').addClass('computerChioce');
isWin();
}
function isWin() {
let selectedCells = '';
flag = false;
$('.myChoice').each(function(index, item) {
selectedCells += $(item).attr('id');
})
winCondition.forEach(function(item) {
if (selectedCells.indexOf(item) > -1) {
flag = true;
showTips('你赢了');
}
});
if (!flag) {
$('.computerChioce').each(function(index, item) {
selectedCells += $(item).attr('id');
})
winCondition.forEach(function(item) {
if (selectedCells.indexOf(item) > -1) {
flag = true;
showTips('电脑赢了');
}
});
}
return flag;
}
function showTips (msg) {
$('#tips').text(msg);
}
function finishGame () {
$('#game td').text('').addClass('unselected').removeClass('selected').removeClass('myChoice').removeClass('computerChioce');
}
})
</script>
</body>
</html>
