基于jquery实现五子棋游戏
时间：2022-08-04 10:02:56|栏目：jquery|点击： 次
本文实例为大家分享了jquery实现五子棋游戏的具体代码，供大家参考，具体内容如下
花了一天时间完成一个简单五子棋游戏（非人机）
html：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="./index.css" rel="external nofollow" > <script src="./jquery-3.4.1.min.js"></script> <title>Document</title> </head> <body> <div id="five"> <header> <button id="begin">开始游戏</button> <button id="agin">重新游戏</button> <button id="regret">悔棋</button> </header> <div id="game"> </div> </div> <script src="./index.js"></script> </body> </html>
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 = $("<div>").addClass("qipan").appendTo($(this.ele));
let table1 = $("<table><tbody id='tbody'>").addClass("table").attr("border", "1").appendTo($(qipan));
let div = $("<div id='xq-tips'>").appendTo($(this.ele))
$("<div class='xq-txt'>").appendTo($(div))
for (let i = 0; i < 15; i++) {
let tr1 = $("<tr>").appendTo($("#tbody"));
for (let j = 0; j < 15; j++) {
$("<td>").appendTo($(tr1));
}
}
let table2 = $("<table><tbody id='tbodys'>").addClass("tables").attr("border", "0").appendTo($(this.ele));
for (let i = 0; i < 16; i++) {
let tr2 = $("<tr>").appendTo($("#tbodys"));
for (let j = 0; j < 16; j++) {
$("<td><span>").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")) //实例对象，开始游戏
})
上一篇：jQuery Tools Dateinput使用介绍
栏 目：jquery
本文标题：基于jquery实现五子棋游戏
本文地址：http://www.codeinn.net/misctech/209791.html
