本文实例为大家分享了jquery实现五子棋游戏的具体代码,供大家参考,具体内容如下
花了一天时间完成一个简单五子棋游戏(非人机)
html:
Document
css:
*{ padding: 0; margin: 0; box-sizing: border-box; } html, body, #five{ background:#ccc; height: 100%; } header{ position: absolute; top: 20px; left: 50%; transform: translateX(-50%); margin: auto; } #game{ display:none; position: absolute; box-shadow:2px 2px 5px #333333; padding: 17px; top: 60px; border: 1px solid #ccc; left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, 0.2); box-sizing: border-box; } button{ padding: 5px; cursor: pointer; } .qipan{ box-shadow:-2px 1px 5px #333333; position: relative; } table{ border-collapse: collapse; border-spacing: 0; } td{ width: 35px; height: 35px; /* display: flex; justify-content: center; align-items: center; */ text-align: center; } span{ display: inline-block; border-radius: 50%; width: 28px; height: 28px; vertical-align: middle; cursor: pointer; } span::after{ content: ""; height: 0; display: inline-block; vertical-align: middle; } .table{ border-color: black; background: url(./images/bg.jpg); } .black{ background: #000;/* background: url(./images/black.jpg) no-repeat center center; background-size: cover;*/ /*黑棋样式*/ } .white{ background: #fff; /*background: url(./images/white.jpg) no-repeat center center; background-size: cover; */ /*白棋样式*/ } .tables{ border-color: #ccc; position: absolute; top: 0; left: 0; z-index: 3; } #xq-tips{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0); display: none; z-index:999 } .xq-txt{ position: absolute; width: 300px; height: 150px; background: rgba(0, 0, 0, 0.5); top: 0; bottom: 0; right: 0; left: 0; margin: auto; color:#fff; font-size: 40px; text-align: center; line-height: 150px; } #agin{ display: none; } #regret{ display: none; }
js:
class Chess { constructor(ele) { this.ele = ele; this.init(); } init() { this.arr = []; //记录棋子 this.render(); //渲染棋盘 this.span = $("#tbodys span"); let that = this $("#tbodys").on('click', 'tr td span', function () { that.click(this); //事件委托给span,点击触发click事件 }); $("#regret").on('click', function () { that.regret(); //点击悔棋 }) $("#agin").on('click', function () { that.agin(); //点击重新开始 }) } render() { //渲染棋盘 let qipan = $("").addClass("qipan").appendTo($(this.ele)); let table1 = $("").addClass("table").attr("border", "1").appendTo($(qipan)); let div = $("
").appendTo($(this.ele)) $("").appendTo($(div)) for (let i = 0; i < 15; i++) { let tr1 = $("").appendTo($("#tbody")); for (let j = 0; j < 15; j++) { $(" ").appendTo($(tr1)); } } let table2 = $(" ").addClass("tables").attr("border", "0").appendTo($(this.ele)); for (let i = 0; i < 16; i++) { let tr2 = $("
").appendTo($("#tbodys")); for (let j = 0; j < 16; j++) { $(" ").appendTo($(tr2)); } } } click(_this) { this.ifs(_this) this.win(); // console.log(this.arr); } ifs(_this) { //判断下一手是黑棋还是白棋 let num = $("span.black,span.white").length; $(this.span).each((index, item) => { if (item === _this) { this.arr.push(index); this.nums = index return; } }) if (num % 2 == 0) { //判断棋盘上的黑棋与白棋总数,为偶时下一手黑棋 $(_this).addClass("black"); } else { //否则下白棋 if ($(_this).hasClass("black")) { } else { $(_this).addClass("white"); } } } win() { let this_ = this; let brr = [], wrr = [];//定义空数组,存储黑白棋,下标 $(this_.arr).each((index, item) => { if ($(this_.span[item]).hasClass("black")) { //遍历黑白棋,分别存到数组中 brr.push(item); } else { wrr.push(item) } }) brr = brr.sort(function (a, b) { return a - b; }) wrr = wrr.sort(function (a, b) { //将黑白棋按从小到大排序 return a - b; }) if (this.isInclude(brr, 1) || this.isInclude(brr, 16) || this.isInclude(brr, 17) || this.isInclude(brr, 15)) { //判断胜负,将提示信息显示 $("#xq-tips").show(); $(".xq-txt").html("黑棋胜利!"); $("#regret").hide(); //隐藏悔棋按钮 } if (this.isInclude(wrr, 1) || this.isInclude(wrr, 16) || this.isInclude(wrr, 17) || this.isInclude(wrr, 15)) { $("#xq-tips").show(); $(".xq-txt").html("白棋胜利!"); $("#regret").hide(); } } isInclude(brr, x) { //brr判断的数组,x表示差值,判断胜负 for (let i = 0; i < brr.length; i++) { if (brr.includes(brr[i]) && brr.includes(brr[i] + x * 1) && brr.includes(brr[i] + x * 2) && brr.includes(brr[i] + x * 3) && brr.includes(brr[i] + x * 4)) { return true; } } } regret() { //悔棋事件将数组中删除对应元素的下标 if (this.arr.length == 0) { return false; } let len = this.arr.length - 1; let num = this.arr[len] $(this.span[num]).removeClass("black white"); this.arr.pop(); } agin() { //点击重新开始触发的事件 this.arr = []; //格式化存棋数组 for (let i = 0; i < this.span.length; i++) { $(this.span[i]).removeClass("black white"); //清空黑白棋 } $("#xq-tips").hide(); //将提示胜败信息隐藏并情况内容 $(".xq-txt").html(""); $("#regret").show(); //悔棋按钮显示 } } $("#begin").on('click', function () { $("#regret").show(); //当游戏开始时将悔棋按钮显示 $(this).hide(); //将游戏开始按钮隐藏 $("#agin").show(); $("#game").show(); //显示重新开始游戏按钮,棋盘 new Chess($("#game")) //实例对象,开始游戏 }) 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关推荐
SSD-6D:Making RGB-Based 3D Detection and 6d Pose Estimation Great Again翻译
Counterfactual Attention Learning for Fine-Grained Visual Categorization and Re-identification 论文学习
Qt+CUDA+TensorRT:基于Qt+CUDA+TRT+WIN10的图像分类
matplotlib学习 设置图片大小、windows和linux设置字体的方式、频数直方图偏移现象、normed=True无效