js实现网页五子棋进阶版

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

对比上一版本增加了音效和计时器两个模块。

代码如下

<!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
    }
 
    #timer {
        background:#000;
        float:left;
        width:150px;
        margin:30px;
        color: #00ff00;
        font-weight: bold;
        border-radius: 30px;
        text-align: center;
        font-size: 20px;
 
    }
</style>
 
<!--js-->
<script type="text/javascript">
 
    var presentChess = 1;//当前执棋方，1代表白旗，0代表黑棋
    var beginFlag = 0;//0代表未开始游戏，1代表已开始游戏
    var msg;
    var chessboard = new Array(10);//记录下棋情况
    var playChessSound;
    var timerM;//计时器 分
    var timerS;//计时器 秒
    var interval;
    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')
        playChessSound = document.getElementById("playChessSound")
        timerM = document.getElementById('timerM')
        timerS = document.getElementById('timerS')
        timerS.innerText = 0;
        timerM.innerText = 0;
    }
 
    //返回三者最小值
    function min(x, y, z) {
        return (x > y ? y : x) > z ? z : (x > y ? y : x)
    }
 
    //计时函数
    function setTimer() {
        var m = parseInt(timerM.innerText);
        var s = parseInt(timerS.innerText);
        if (s >= 59) {
            timerS.innerText = 0;
            timerM.innerText = m + 1;
        } else timerS.innerText = s + 1;
    }
 
    function beginGame() {
        // beginFlag = 1;
        //绑定棋盘下棋事件
        for (var i = 0; i < 100; i++) {
            document.getElementsByTagName('td')[i].onclick = palyChess;
        }
        interval = setInterval(setTimer, 1000);
    }
 
    function restartGame() {
        for (var i = 0; i < 100; i++) {
            //document.getElementsByTagName('td')[i].onclick = '';
            document.getElementsByTagName('td')[i].innerHTML = '';//清空棋子
            timerS.innerText = 0;
            timerM.innerText = 0;
        }
 
        for (var i = 0; i < 10; i++) {//清空棋盘记录
            for (var j = 0; j < 10; j++) {
                chessboard[i][j] = -1;
            }
        }
        //计时器部分
        clearInterval(interval)
        interval = setInterval(setTimer, 1000);
    }
 
    //下棋
    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('黑棋方获胜');
                clearInterval(interval);
            }
            presentChess = 0;
            msg.innerHTML = "黑棋";
            playChessSound.play();
 
        } else {
            this.innerHTML = hqiStr;
 
            chessboard[this.parentNode.rowIndex][this.cellIndex] = 0;
            if (ifWin(this.parentNode.rowIndex, this.cellIndex)) {
                if (presentChess == 1) alert('白棋方获胜');
                else alert('黑棋方获胜');
                clearInterval(interval);
            }
            presentChess = 1;
            msg.innerHTML = "白棋";
            playChessSound.play();
        }
 
    }
 
    //判断是否胜利,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>
<!--音效控制-->
<audio id="playChessSound">
    <source src="5390.mp3">
</audio>
<!--下部-->
<div>
 
    <!--左边计时器-->
    <div id="timer" style="">
        比赛已进行<br>
        <span  >
            <span id="timerM"></span>分
            <span id="timerS"></span>秒
        </span>
    </div>
 
    <div style="float:left; 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>

音效请自行找取下载

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