需求：实现一个五子棋功能，并且对即将获得胜利进行预判
产品：
实现：
<!DOCTYPE html>
<html>
<style>
.cell {
width: 100px;
height: 100px;
background-color: green;
display: inline-block;
border: solid 1px white;
vertical-align: middle;
line-height: 100px;
font-size: 50px;
text-align: center;
color: red;
}
</style>
<head>
<meta charset="utf-8">
<title>五子棋编程练习</title>
</head>
<body>
<div id="board"></div>
<script>
let pattern = [[2, 0, 0, 0, 0], [0, 1, 0, 0, 0], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0]];
let color = 1;
function show() {
let board = document.getElementById("board");
board.innerHTML = '';
for (let i = 0; i < 5; i++) {
for (let j = 0; j < 5; j++) {
let cell = document.createElement("div");
cell.classList.add('cell');
cell.innerText = pattern[i][j] == 2 ? "X" : pattern[i][j] == 1 ? 'O' : '';
cell.addEventListener("click", () => move(j, i));
board.appendChild(cell);
}
board.appendChild(document.createElement('br'))
}
}
function move(x, y) {
pattern[y][x] = color;
if (check(pattern, color)) {
alert(color == 2 ? "X is winner!" : "O is winner!");
}
color = 3 - color;
show();
if (willWin(pattern, color)) {
alert(color == 2 ? "X will winner!" : "O will winner!");
}
}
show(pattern);
function clone(pattern) {
return JSON.parse(JSON.stringify(pattern));
}
function willWin(pattern, color) {
for (let i = 0; i < 5; i++) {
for (let j = 0; j < 5; j++) {
if (pattern[i][j]) {
continue;
}
let tmp = clone(pattern);
tmp[i][j] = color;
if (check(tmp, color)) {
return true;
}
}
}
return false;
}
function check(pattern, color) {
// 三行检查
for (let i = 0; i < 5; i++) {
let win = true;
for (let j = 0; j < 5; j++) {
if (pattern[i][j] !== color) {
win = false;
}
}
if (win) {
return true;
}
}
// 三列检查
for (let i = 0; i < 5; i++) {
let win = true;
for (let j = 0; j < 5; j++) {
if (pattern[j][i] !== color) {
win = false;
}
}
if (win) {
return true;
}
}
// 反向对角线
{
let win = true;
for (let j = 0; j < 5; j++) {
if (pattern[j][4 - j] !== color) {
win = false;
}
}
if (win) {
return true;
}
}
// 正向对角线
{
let win = true;
for (let j = 0; j < 5; j++) {
if (pattern[j][j] !== color) {
win = false;
}
}
if (win) {
return true;
}
}
return false;
}
</script>
</body>
</html>
