基于jquery实现五子棋游戏

本文实例为大家分享了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")) //实例对象,开始游戏 })

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

你可能感兴趣的:(基于jquery实现五子棋游戏)