javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > js网页五子棋

js+html实现网页五子棋

作者:CTGctgct

这篇文章主要为大家详细介绍了js+html实现网页五子棋,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了js+html实现网页五子棋的具体代码,供大家参考,具体内容如下

最终效果图:

废话不多说,上源码:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>五子棋</title>
    <!--    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"/>-->
</head>
<!--css-->
<style>
    body {
        width: 800px;
    }
 
    #beginGameBtn {
        background: url(startImg.png);
        width: 80px;
        height: 25px;
        background-size: cover;
        float: left;
    }
 
    #restartGameBtn {
        background: url(restartImg.png);
        width: 80px;
        height: 25px;
        background-size: cover;
        float: right;
    }
 
    td {
        width: 50px;
        height: 50px;
        margin: 0px;
        padding: 0px
    }
</style>
 
<!--js-->
<script type="text/javascript">
 
    var presentChess = 1;//当前执棋方,1代表白旗,0代表黑棋
    var beginFlag = 0;//0代表未开始游戏,1代表已开始游戏
    var msg;
    var chessboard = new Array(10);//记录下棋情况
    for (var i = 0; i < 10; i++) {
        chessboard[i] = new Array(10);
        //初始化下棋情况,全为0
        for (var j = 0; j < 10; j++) {
            chessboard[i][j] = -1;
        }
    }
 
    window.onload = function () {
        msg = document.getElementById('msg')
    }
 
    //返回三者最小值
    function min(x, y, z) {
        return (x > y ? y : x) > z ? z : (x > y ? y : x)
    }
 
    function beginGame() {
        // beginFlag = 1;
        //绑定棋盘下棋事件
        for (var i = 0; i < 100; i++) {
            document.getElementsByTagName('td')[i].onclick = palyChess;
        }
    }
 
    function restartGame() {
        for (var i = 0; i < 100; i++) {
            //document.getElementsByTagName('td')[i].onclick = '';
            document.getElementsByTagName('td')[i].innerHTML = '';//清空棋子
 
        }
 
        for (var i = 0; i < 10; i++) {//清空棋盘记录
            for (var j = 0; j < 10; j++) {
                chessboard[i][j] = -1;
            }
        }
    }
 
    //下棋
    function palyChess() {
        //如果表格此处已经下了棋,则返回 不作操作
        text = this.innerHTML
        if (text != '') return;
        //放置棋子图片得字符串
        var bqiStr = "<img src=\"bqiImg.jpg\" width=\"100%\"  height=\"90%\"  alt=\"\"/>"
        var hqiStr = "<img src=\"hqiImg.jpg\" width=\"100%\" height=\"90%\" alt=\"\"/>"
        // console.log('1')
        if (presentChess == 1) {
            this.innerHTML = bqiStr;
 
            chessboard[this.parentNode.rowIndex][this.cellIndex] = 1;
            // setTimeout('', 3000);
            if (ifWin(this.parentNode.rowIndex, this.cellIndex))
                if (presentChess == 1) alert('白棋方获胜');
                else alert('黑棋方获胜');
            presentChess = 0;
            msg.innerHTML = "黑棋";
 
        } else {
            this.innerHTML = hqiStr;
 
            chessboard[this.parentNode.rowIndex][this.cellIndex] = 0;
            setTimeout('', 3000);
            if (ifWin(this.parentNode.rowIndex, this.cellIndex))
                if (presentChess == 1) alert('白棋方获胜');
                else alert('黑棋方获胜');
            presentChess = 1;
            msg.innerHTML = "白棋";
        }
 
    }
 
    //判断是否胜利,h行,l列
    function ifWin(h, l) {
        // var x = this.parentNode.rowIndex;
        // var y = this.cellIndex - 1;
        var s = 1;//记录连子个数
 
        //判断竖直方向
        for (var i = 1; i <= (h > 4 ? 4 : h); i++) {
            if (chessboard[h - i][l] == presentChess) {
                s++;
            } else break;
        }
        for (var i = 1; i <= ((9 - h) > 4 ? 4 : (9 - h)); i++) {
            if (chessboard[h + i][l] == presentChess) {
                s++;
            } else break;
        }
        if (s >= 5) {
            return 1;
        }
 
        s = 1;
        //判断水平方向
        for (var i = 1; i <= (l > 4 ? 4 : l); i++) {
            if (chessboard[h][l - i] == presentChess) {
                s++;
            } else break;
        }
        for (var i = 1; i <= ((9 - l) > 4 ? 4 : (9 - l)); i++) {
            if (chessboard[h][l + i] == presentChess) {
                s++;
            } else break;
        }
        if (s >= 5) {
            return 1;
        }
 
        s = 1;
        // var min=(h > 4 ? 4 : h) > l ? l : (h > 4 ? 4 : h);
        //判断左上、右下斜线方向
        for (var i = 1; i <= min(4, l, h); i++) {//取较小值作为移动半径
            if (chessboard[h - i][l - i] == presentChess) {
                s++;
            } else break;
        }
        for (var i = 1; i <= min(4, 9 - l, 9 - h); i++) {
            if (chessboard[h + i][l + i] == presentChess) {
                s++;
            } else break;
        }
        if (s >= 5) {
            return 1;
        }
 
        s = 1;
        //判断右上、左下斜线方向
        for (var i = 1; i <= min(4, 9 - l, h); i++) {//取较小值作为移动半径
            if (chessboard[h - i][l + i] == presentChess) {
                s++;
            } else break;
        }
        for (var i = 1; i <= min(4, l, 9 - h); i++) {
            if (chessboard[h + i][l - i] == presentChess) {
                s++;
            } else break;
        }
        if (s >= 5) {
            return 1;
        }
        return 0;
    }
</script>
<body>
<!--顶部-->
<div>
    <div style="margin:0 auto; width:165px">
        <!--开始游戏按钮-->
        <button id="beginGameBtn" name="beginGameBtn" onclick="beginGame()"></button>
        <!--重新开始游戏按钮-->
        <button id="restartGameBtn" name="restartGameBtn" onclick="restartGame()"></button>
    </div>
    <div style="margin:0 auto; width:150px">执子方:<label id="msg" name="msg">白棋</label></div>
</div>
<br>
 
<!--下部-->
<div>
    <div style="float:left; width:120px">
 
    </div>
    <div style="margin:0 auto; width:500px ">
        <!--表格构成棋盘-->
        <table border="5" style="width:500px; height:500px; border-collapse:collapse; ">
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
    </div>
</div>
</body>
</html>

里面用到了4张图片,开始按钮图,重新开始按钮图,白棋子图,黑棋子图。

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

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