🌏个人博客主页：心.c
🔥🔥🔥专题文章：JavaScript小游戏
😽感谢大家的点赞👍收藏⭐️评论✍您的一键三连是我更新的动力 💓
目录
页面效果：
相关技能实现：
创建空数组：
const arr = Array(9).fill(null)获得大盒子和小盒子对象：
let box = this.document.querySelector('.box')
let small_boxes = this.document.querySelectorAll('.small')给大盒子添加事件监听：
box.addEventListener('click', function (e) {
if (e.target.tagName === 'DIV') {
let id = +e.target.dataset.id
if (getCount(arr, 1) <= getCount(arr, 2)) {
if (arr[id - 1] === null) {
arr[id - 1] = 1
console.log(arr)
render()
} else {
alert('请在空白处添加')
}
} else {
if (arr[id - 1] === null) {
arr[id - 1] = 2
console.log(arr)
render()
} else {
alert('请在空白处添加')
}
}
//判断是否被填满
if (allSet()) {
let time0 = setTimeout(function () {
alert('平局')
arr.fill(null)
small_boxes.forEach(function (small_box) {
console.log(small_box)
small_box.innerHTML = ''; // 清空每个文本框
});
clearTimeout(time0)
}, 300)
}
//判断是否有一方赢
if (getCount(arr, 1) >= 3 || getCount(arr, 2) >= 3) {
let time = setTimeout(function () {
let win = winner()
if (win != -1) {
if (win === 1) {
alert('笑脸成功')
} else if (win === 2) {
alert('哭脸成功')
}
arr.fill(null)
small_boxes.forEach(function (small_box) {
console.log(small_box)
small_box.innerHTML = ''; // 清空每个文本框
});
clearTimeout(time)
}
}, 400)
}
}
})
判断小格子是否被填满：
function allSet() {
for (let i of arr) {
if (i == null) {
return false
}
}
return true
}判断是否有一方成功：
//判断是否成功
function winner() {
const winningCombinations = [
[0, 1, 2], [3, 4, 5], [6, 7, 8],
[0, 3, 6], [1, 4, 7], [2, 5, 8],
[0, 4, 8], [2, 4, 6]
];
for (let combo of winningCombinations) {
if (arr[combo[0]] && arr[combo[0]] === arr[combo[1]] && arr[combo[1]] === arr[combo[2]]) {
return arr[combo[0]];
}
}
return -1;
}判断数组中存在的数的个数：
//返回某个数存在的个数
function getCount(arr, value) {
return arr.filter(item => item === value).length;
}更新页面：
function render() {
small_boxes.forEach(function (small_box) {
small_box.innerHTML = ''; // 清空每个文本框
});
for (let i = 0; i < 9; i++) {
let smal = document.querySelector(`[data-id="${i + 1}"]`)
if (arr[i] === 1) {
smal.innerHTML = ''
}
else if (arr[i] === 2) {
smal.innerHTML = ''
} else {
smal.innerHTML = ''
}
}
}源代码：
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./iconfont/iconfont.css">
<link rel="stylesheet" href="./game.css">
</head>
<body>
<div class="box wrapper">
<div class="small iconfont" data-id="1"></div>
<div class="small iconfont" data-id="2"></div>
<div class="small iconfont" data-id="3"></div>
<div class="small iconfont" data-id="4"></div>
<div class="small iconfont" data-id="5"></div>
<div class="small iconfont" data-id="6"></div>
<div class="small iconfont" data-id="7"></div>
<div class="small iconfont" data-id="8"></div>
<div class="small iconfont" data-id="9"></div>
</div>
<div class="text">
<h1>----井字棋----</h1>
</div>
<script src="./game.js"></script>
</body>
</html>CSS：
:root {
--bgc: rgb(223, 225, 248);
}
.wrapper {
margin: auto;
}
* {
margin: 0;
height: 0;
box-sizing: border-box;
}
.body {
user-select: none;
background-color: #f6faff;
}
.box {
user-select: none;
margin-top: 20px;
display: flex;
flex-wrap: wrap;
width: 570px;
height: 570px;
border: 12px solid var(--bgc);
border-radius: 40px;
background-color: #ffffff;
}
.small {
font-size: 120px;
color: rgb(183, 190, 227);
line-height: 182px;
text-align: center;
user-select: none;
width: 182px;
height: 182px;
cursor: pointer;
}
.small:nth-child(1),
.small:nth-child(2),
.small:nth-child(4),
.small:nth-child(5) {
border-right: 12px solid var(--bgc);
border-bottom: 12px solid var(--bgc);
}
.small:nth-child(3),
.small:nth-child(6) {
border-bottom: 12px solid var(--bgc);
}
.small:nth-child(7),
.small:nth-child(8) {
border-right: 12px solid var(--bgc);
}
.text {
text-align: center;
color: var(--bgc);
}JavaScript：
window.addEventListener('load', function () {
const arr = Array(9).fill(null)
let box = this.document.querySelector('.box')
let small_boxes = this.document.querySelectorAll('.small')
box.addEventListener('click', function (e) {
if (e.target.tagName === 'DIV') {
let id = +e.target.dataset.id
if (getCount(arr, 1) <= getCount(arr, 2)) {
if (arr[id - 1] === null) {
arr[id - 1] = 1
console.log(arr)
render()
} else {
alert('请在空白处添加')
}
} else {
if (arr[id - 1] === null) {
arr[id - 1] = 2
console.log(arr)
render()
} else {
alert('请在空白处添加')
}
}
//判断是否被填满
if (allSet()) {
let time0 = setTimeout(function () {
alert('平局')
arr.fill(null)
small_boxes.forEach(function (small_box) {
console.log(small_box)
small_box.innerHTML = ''; // 清空每个文本框
});
clearTimeout(time0)
}, 300)
}
//判断是否有一方赢
if (getCount(arr, 1) >= 3 || getCount(arr, 2) >= 3) {
let time = setTimeout(function () {
let win = winner()
if (win != -1) {
if (win === 1) {
alert('笑脸成功')
} else if (win === 2) {
alert('哭脸成功')
}
arr.fill(null)
small_boxes.forEach(function (small_box) {
console.log(small_box)
small_box.innerHTML = ''; // 清空每个文本框
});
clearTimeout(time)
}
}, 400)
}
}
})
function allSet() {
for (let i of arr) {
if (i == null) {
return false
}
}
return true
}
function render() {
small_boxes.forEach(function (small_box) {
small_box.innerHTML = ''; // 清空每个文本框
});
for (let i = 0; i < 9; i++) {
let smal = document.querySelector(`[data-id="${i + 1}"]`)
if (arr[i] === 1) {
smal.innerHTML = ''
}
else if (arr[i] === 2) {
smal.innerHTML = ''
} else {
smal.innerHTML = ''
}
}
}
//判断是否成功
function winner() {
const winningCombinations = [
[0, 1, 2], [3, 4, 5], [6, 7, 8],
[0, 3, 6], [1, 4, 7], [2, 5, 8],
[0, 4, 8], [2, 4, 6]
];
for (let combo of winningCombinations) {
if (arr[combo[0]] && arr[combo[0]] === arr[combo[1]] && arr[combo[1]] === arr[combo[2]]) {
return arr[combo[0]];
}
}
return -1;
}
//返回某个数存在的个数
function getCount(arr, value) {
return arr.filter(item => item === value).length;
}
}
)到这里就讲完了，感谢大家的观看！！！
