泰安房產(chǎn)網(wǎng)網(wǎng)上交易中心seo關(guān)鍵詞排名工具
? 🌏個(gè)人博客主頁：心.c
前言：這兩天在寫植物大戰(zhàn)僵尸，寫不動了，現(xiàn)在和大家分享一下之前我寫的一個(gè)很簡單的小游戲井字棋，這個(gè)沒有AI，可以兩個(gè)人一起玩，如果大家覺得我哪里寫的有一些問題，還希望積極改正，歡迎大家留言
🔥🔥🔥專題文章：JavaScript小游戲
😽感謝大家的點(diǎn)贊👍收藏??評論?您的一鍵三連是我更新的動力 💓?
目錄
頁面效果：?
?相關(guān)技能實(shí)現(xiàn)：
創(chuàng)建空數(shù)組：
?獲得大盒子和小盒子對象：
?給大盒子添加事件監(jiān)聽：
?判斷小格子是否被填滿：
判斷是否有一方成功：
?判斷數(shù)組中存在的數(shù)的個(gè)數(shù)：
?更新頁面：
源代碼：
HTML
CSS
?JavaScript：
頁面效果：?
關(guān)于應(yīng)用就是不可重復(fù)添加，而且兩次點(diǎn)擊的表情是不一樣的，每個(gè)表情代表一方，出現(xiàn)三連的那一方就贏了，每一個(gè)小方格是不可重復(fù)添加的，如果每個(gè)格子都填滿了就平局，成功或平局都會出現(xiàn)alert提示，然后頁面清空，清空之后可以繼續(xù)玩
?相關(guān)技能實(shí)現(xiàn)：
創(chuàng)建空數(shù)組：
空數(shù)組用來遍歷（通過其值是1是2或是null）來放置我們的表情?
const arr = Array(9).fill(null)?獲得大盒子和小盒子對象：
let box = this.document.querySelector('.box')let small_boxes = this.document.querySelectorAll('.small')?給大盒子添加事件監(jiān)聽：
給我們的大盒子添加點(diǎn)擊事件，冒泡到子級，通過1和2的個(gè)數(shù)，來添加1或2，誰少添加誰，優(yōu)先添加1，如果1和2的個(gè)數(shù)有一個(gè)大于3，可能出現(xiàn)一方勝利的情況，就添加winner方法進(jìn)行判斷，如果有一方勝利，就返回這一方，然后頁面進(jìn)行清空，（通過返回的1還是2進(jìn)行判斷是誰勝利了）如果一直沒有勝利，直到小方格都被填寫完，算兩方平局，頁面就會被清空，就可以重新進(jìn)行添加了
box.addEventListener('click', function (e) {if (e.target.tagName === 'DIV') {let id = +e.target.dataset.idif (getCount(arr, 1) <= getCount(arr, 2)) {if (arr[id - 1] === null) {arr[id - 1] = 1console.log(arr)render()} else {alert('請?jiān)诳瞻滋幪砑?#39;)}} else {if (arr[id - 1] === null) {arr[id - 1] = 2console.log(arr)render()} else {alert('請?jiān)诳瞻滋幪砑?#39;)}}//判斷是否被填滿if (allSet()) {let time0 = setTimeout(function () {alert('平局')arr.fill(null)small_boxes.forEach(function (small_box) {console.log(small_box)small_box.innerHTML = ''; // 清空每個(gè)文本框});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 = ''; // 清空每個(gè)文本框});clearTimeout(time)}}, 400)}}})
?判斷小格子是否被填滿：
遍歷數(shù)組arr的每個(gè)值，如果該值有一個(gè)為null，就返回false，如果都不為false，最后返回true?
function allSet() {for (let i of arr) {if (i == null) {return false}}return true}判斷是否有一方成功：
?這個(gè)游戲雖然是3×3方格，但是是用一維數(shù)組存儲的，如果下面有一對（三個(gè)）下標(biāo)的值相等，就返回其中一個(gè)下標(biāo)的值
//判斷是否成功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;}?判斷數(shù)組中存在的數(shù)的個(gè)數(shù)：
這個(gè)方法就是為了判斷1和2的個(gè)數(shù)?
//返回某個(gè)數(shù)存在的個(gè)數(shù)function getCount(arr, value) {return arr.filter(item => item === value).length;}?更新頁面：
遍歷數(shù)組向每個(gè)小方格添加內(nèi)容，如果為1，添加笑臉，如果為2，添加哭臉，如果為null，什么也不添加，數(shù)組和方格是一一對應(yīng)的?
function render() {small_boxes.forEach(function (small_box) {small_box.innerHTML = ''; // 清空每個(gè)文本框});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.idif (getCount(arr, 1) <= getCount(arr, 2)) {if (arr[id - 1] === null) {arr[id - 1] = 1console.log(arr)render()} else {alert('請?jiān)诳瞻滋幪砑?#39;)}} else {if (arr[id - 1] === null) {arr[id - 1] = 2console.log(arr)render()} else {alert('請?jiān)诳瞻滋幪砑?#39;)}}//判斷是否被填滿if (allSet()) {let time0 = setTimeout(function () {alert('平局')arr.fill(null)small_boxes.forEach(function (small_box) {console.log(small_box)small_box.innerHTML = ''; // 清空每個(gè)文本框});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 = ''; // 清空每個(gè)文本框});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 = ''; // 清空每個(gè)文本框});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;}//返回某個(gè)數(shù)存在的個(gè)數(shù)function getCount(arr, value) {return arr.filter(item => item === value).length;}}
)?到這里就講完了，感謝大家的觀看！！！