<!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，點擊觸發(fā)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) {?? ? //判斷棋盤上的黑棋與白棋總數(shù)，為偶時下一手黑棋
? ? ? ? ? ? $(_this).addClass("black");
? ? ? ? }
? ? ? ? else {?? ??? ? //否則下白棋
? ? ? ? ? ? if ($(_this).hasClass("black")) { }
? ? ? ? ? ? else {
? ? ? ? ? ? ? ? $(_this).addClass("white");
? ? ? ? ? ? }

? ? ? ? }
? ? }
? ? win() {
? ? ? ? let this_ = this;
? ? ? ? let brr = [], wrr = [];//定義空數(shù)組，存儲黑白棋，下標
? ? ? ? $(this_.arr).each((index, item) => {
? ? ? ? ? ? if ($(this_.span[item]).hasClass("black")) { //遍歷黑白棋，分別存到數(shù)組中
? ? ? ? ? ? ? ? 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判斷的數(shù)組,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() { ? ?//悔棋事件將數(shù)組中刪除對應元素的下標
? ? ? ? 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() {?? ? //點擊重新開始觸發(fā)的事件
? ? ? ? this.arr = [];?? ? //格式化存棋數(shù)組
? ? ? ? for (let i = 0; i < this.span.length; i++) {?? ?
? ? ? ? ? ? $(this.span[i]).removeClass("black white");?? ? //清空黑白棋
? ? ? ? }
? ? ? ? $("#xq-tips").hide();?? ? //將提示勝敗信息隱藏并情況內(nèi)容
? ? ? ? $(".xq-txt").html("");
? ? ? ? $("#regret").show();?? ? //悔棋按鈕顯示
? ? }

}
$("#begin").on('click', function () {
? ? $("#regret").show(); ?//當游戲開始時將悔棋按鈕顯示
? ? $(this).hide(); ?//將游戲開始按鈕隱藏
? ? $("#agin").show();?? ??? ??? ?
? ? $("#game").show();?? ? //顯示重新開始游戲按鈕，棋盤
? ? new Chess($("#game")) //實例對象，開始游戲
})

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: