jquery

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > jquery > jquery五子棋游戏

基于jquery实现五子棋游戏

作者:boylzh

这篇文章主要为大家详细介绍了基于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")) //实例对象,开始游戏
})

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

您可能感兴趣的文章:
阅读全文