石景山郑州阳网站建设,南京网站搜索引擎优化,做网站订阅号,网站建设公司怎么发展新客户#x1f30f;个人博客主页#xff1a;心.c 前言#xff1a;这两天在写植物大战僵尸#xff0c;写不动了#xff0c;现在和大家分享一下之前我写的一个很简单的小游戏井字棋#xff0c;这个没有AI#xff0c;可以两个人一起玩#xff0c;如果大家觉得我哪里写的有一些问… 个人博客主页心.c 前言这两天在写植物大战僵尸写不动了现在和大家分享一下之前我写的一个很简单的小游戏井字棋这个没有AI可以两个人一起玩如果大家觉得我哪里写的有一些问题还希望积极改正欢迎大家留言 专题文章JavaScript小游戏
感谢大家的点赞收藏⭐️评论✍您的一键三连是我更新的动力 目录
页面效果 相关技能实现
创建空数组 获得大盒子和小盒子对象 给大盒子添加事件监听 判断小格子是否被填满
判断是否有一方成功 判断数组中存在的数的个数 更新页面
源代码
HTML
CSS JavaScript 页面效果 关于应用就是不可重复添加而且两次点击的表情是不一样的每个表情代表一方出现三连的那一方就赢了每一个小方格是不可重复添加的如果每个格子都填满了就平局成功或平局都会出现alert提示然后页面清空清空之后可以继续玩 相关技能实现
创建空数组 空数组用来遍历通过其值是1是2或是null来放置我们的表情 const arr Array(9).fill(null) 获得大盒子和小盒子对象 let box this.document.querySelector(.box)let small_boxes this.document.querySelectorAll(.small) 给大盒子添加事件监听 给我们的大盒子添加点击事件冒泡到子级通过1和2的个数来添加1或2谁少添加谁优先添加1如果1和2的个数有一个大于3可能出现一方胜利的情况就添加winner方法进行判断如果有一方胜利就返回这一方然后页面进行清空通过返回的1还是2进行判断是谁胜利了如果一直没有胜利直到小方格都被填写完算两方平局页面就会被清空就可以重新进行添加了 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(请在空白处添加)}} else {if (arr[id - 1] null) {arr[id - 1] 2console.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)}}})判断小格子是否被填满 遍历数组arr的每个值如果该值有一个为null就返回false如果都不为false最后返回true function allSet() {for (let i of arr) {if (i null) {return false}}return true}
判断是否有一方成功 这个游戏虽然是3×3方格但是是用一维数组存储的如果下面有一对三个下标的值相等就返回其中一个下标的值 //判断是否成功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;} 判断数组中存在的数的个数 这个方法就是为了判断1和2的个数 //返回某个数存在的个数function getCount(arr, value) {return arr.filter(item item value).length;} 更新页面 遍历数组向每个小方格添加内容如果为1添加笑脸如果为2添加哭脸如果为null什么也不添加数组和方格是一一对应的 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 #xe68b;}else if (arr[i] 2) {smal.innerHTML #xe68e;} else {smal.innerHTML }}}
源代码
HTML
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlelink relstylesheet href./iconfont/iconfont.csslink relstylesheet href./game.css
/headbodydiv classbox wrapperdiv classsmall iconfont data-id1/divdiv classsmall iconfont data-id2/divdiv classsmall iconfont data-id3/divdiv classsmall iconfont data-id4/divdiv classsmall iconfont data-id5/divdiv classsmall iconfont data-id6/divdiv classsmall iconfont data-id7/divdiv classsmall iconfont data-id8/divdiv classsmall iconfont data-id9/div/divdiv classtexth1----井字棋----/h1/divscript 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(请在空白处添加)}} else {if (arr[id - 1] null) {arr[id - 1] 2console.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 #xe68b;}else if (arr[i] 2) {smal.innerHTML #xe68e;} 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;}}
) 到这里就讲完了感谢大家的观看
