码迷，mamicode.com
首页 > Web开发 > 详细

jQuery-----五子棋

时间：2017-08-13 23:28:49      阅读：227      评论：0      收藏：0      [点我收藏+]

标签：ext   win   element   asc   href   pad   20px   disable   ret   

1、效果

技术分享

 

 

 

2、html代码

 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/gobangGame.less">
</head>

<body>
    <div class="container">
        <div class="left-board disabled"></div>
        <div class="right-operation">
            <div class="voice">
                <a href="#" class = ‘audio-control‘></a>
                <audio src="source/bgm.mp3" controls="controls" id = ‘audio‘ style="visibility: hidden;"> 
                    Your browser does not support the audio element.
                </audio>
            </div>
            <div class="player white-player">
                <div class="left">
                    <p><span></span></p>
                    <p><img src="imgs/white-player.png"></p>
                </div>
                <div class="right">
                    <a href="#" class=‘white-back‘></a>
                    <a href="#" class = ‘white-quit‘>投降</a>
                </div>
            </div>
            <div class="player black-player">
                <div class="left">
                    <p><span></span></p>
                    <p><img src="imgs/black-player.png"></p>
                </div>
                <div class="right">
                    <a href="#" class=‘black-back‘></a>
                    <a href="#" class = ‘black-quit‘>投降</a>
                </div>
            </div>
            <div class="time">
            	<span>
            	<span class = ‘minute‘>0</span>
            	<span>：</span>
            	<span class = ‘second‘>0</span>
            	<span>：</span>
            	<span class = ‘min-second‘>0</span>
            	</span>
            	</span>
            	<span class = ‘tip‘>
            	</span>
            </div>
            <div class = ‘who-first‘>
            	<select>
            		<option value = ‘1‘>白棋</option>
            		<option value = ‘2‘>黑棋</option>
            	</select>
            	<a href="#" class = ‘start-game-btn‘>开始游戏</a>
            	<a href="#" class = ‘restart-game-btn‘>重新开始</a>
            </div>
            <div class = ‘winner‘>
            	<span>白棋玩家赢！</span>
            </div>
        </div>
    </div>
    <script type="text/javascript" src=‘js/jquery-2.2.1.min.js‘></script>
    <script type="text/javascript" src=‘js/gobangGame.js‘></script>
</body>

</html>

　　3、less代码

* {
    margin: 0;
    padding: 0;
}

body {
    width: 100%;
    height: 100%;
    background-color: #E0AD54;
}

.container {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -350px;
    margin-left: -508px;
    width: 1040px;
    height: 700px;
    .left-board {
        position: absolute;
        top: 0;
        left: 0;
        width: 700px;
        height: 700px;
        background-image: url("/imgs/board.png");
        background-size: 700px 700px;
        float: left;
        p{
        	height: 50px;
        	width: 700px;
        }
        span{
        	display: inline-block;
        	width: 50px;
        	height: 50px;
        	background-size: 30px 30px;
        	background-repeat: no-repeat;
        	background-position: 10px 10px;
        	cursor: pointer;
        }
        .white{
        	background-image: url("/imgs/white.png");
        }
        .black{
        	background-image: url("/imgs/black.png");
        }
    }
    .disabled{
    	pointer-events: none;
    	cursor: hand;
    }
    .right-operation {
        position: absolute;
        top: 0;
        right: 0;
        width: 320px;
        padding: 0 0 0 20px;
        .voice {
            a {
                display: inline-block;
                width: 100px;
                height: 40px;
                background-image: url("/imgs/voice.png");
                background-size: 100px 40px;
                background-repeat: no-repeat;
                &:hover {
                    box-shadow: 0 0 10px 1px gray;
                }
            }
            .bg-running{
            	animation : demo 1s infinite;
            }
            @keyframes demo{
                0%{
                  background-image: url("/imgs/voice.png");
                }
                50%{
                    background-image: url("/imgs/voice1.png");
                }
                100%{
                	 background-image: url("/imgs/voice2.png");
                }
            }

            audio {
                visibility: visible;
            }
        }
        .player {
            width: 300px;
            height: 100px;
            margin: 20px 0 0 0;
            .left {
                float: left;
                p:nth-child(1) {
                    height: 20px;
                    span{ 
                        display: inline-block;
                        width: 20px;
                        height: 20px;
                        background-image: url("/imgs/target.png");
                        background-size: 20px 20px;
                        background-repeat: no-repeat;
                        margin: 0 0 0 20px;
                    }
                }
                img {
                    width: 60px;
                    height: 60px;
                    cursor: pointer;
                }
            }
            .right {
                float: left;
                a:nth-child(1){
                    display: inline-block;
                    float: left;
                    width: 100px;
                    height: 40px;
                    background-image: url("/imgs/back.png");
                    background-size: 100px 40px;
                    background-repeat: no-repeat;
                    margin: 30px 0 0 10px;
                    &:hover {
                        box-shadow: 0 0 10px 1px gray;
                    }
                }
                a:nth-child(2){
                	display: inline-block;
                	float: left;
                    width: 100px;
                    height: 40px;
                    background-image: url("/imgs/quit.png");
                    background-size: 100px 40px;
                    background-repeat: no-repeat;
                    margin: 30px 0 0 10px;
                    text-align: center;
                    line-height: 40px;
                    font-size: 20px;
                    color: white;
                    text-decoration: none;
                    &:hover {
                        box-shadow: 0 0 10px 1px gray;
                    }
                }
            }
        }
        .time{
        	height: 30px;
        	line-height: 30px;
        	span{
        		color: white;
        		font-size: 20px;
        		text-align:  center;
        		font-weight: bold;
        	}
        	.tip{
        		font-size: 14px;
        		color: red;
        		float: right;
        	}
        }
        .who-first{
        	height: 100px;
        	width: 320px;
        	line-height: 60px;
        	padding: 20px 0 0 0;
        	select{
        		width: 100px;
        		height: 30px;
        		margin: 4px 10px 0 0;
        		float: left;
        	}
        	a{
        		    display: inline-block;
                	float: left;
                    width: 100px;
                    height: 40px;
                    background-image: url("/imgs/quit.png");
                    background-size: 100px 40px;
                    background-repeat: no-repeat;
                    margin: 0 0 0 10px;
                    text-align: center;
                    line-height: 40px;
                    font-size: 20px;
                    color: white;
                    text-decoration: none;
                    &:hover {
                        box-shadow: 0 0 10px 1px gray;
                  }
        	}
        	a:nth-child(3){
        		margin: 20px 0 0 120px;
        	}
        }
        .winner{
        	display: block;
        	width: 300px;
        	height: 60px;
        	line-height: 60px;
        	font-size: 30px;
        	color: red;
        	span{
        		display: none;
        	}
        }
    }
}

　　4、jquery代码

var is_white_first = true; //白棋先手
var is_white_turn = true; //轮到白棋下
var is_game_over = false;
var is_white_back = false;
var is_black_back = false;
var is_music_running = false;
var board = $(".container .left-board");
var clock;
var whiteArr = new Array();
var blackArr = new Array();
var arr1 = [[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]];
var arr2 = [[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]];

var white_key_number = 0;
var black_key_number = 0;

var xx = [-1, -1, 0, 1];
var yy = [0, 1, 1, 1];

gobangGame();

function gobangGame() {
    initBoard();
    startGame();

    function initBoard() {
        board.empty();
        arr1 = [[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]];
        arr2 = [[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]];
       is_white_first = true; //白棋先手
       is_white_turn = true; //轮到白棋下
        for (var i = 1; i <= 14; i++) {
            var line = $("<p></p>")
            var arr1 = new Array();
            var arr2 = new Array();
            for (var j = 1; j <= 14; j++) {
                var one = $("<span class = ‘key‘  data-x= ‘" + i + "‘ data-y = ‘" + j + "‘><span>");
                line.append(one);
            }
            board.append(line);
        }
    }

    function startGame() {
        var parent = $(".container");
        var board = parent.find(".left-board");
        var audio = parent.find("#audio");
        var audioBtn = parent.find(".voice a");
        var whitePlayerStatus = parent.find(".white-player .left p span");
        var blackPlayerStatus = parent.find(".black-player .left p span");
        var whiteBack = parent.find(".white-player .right .white-back");
        var whiteQuit = parent.find(".white-player .right .white-quit");
        var blackBack = parent.find(".black-player .right .black-back");
        var blackQuit = parent.find(".black-player .right .black-quit");
        var startGameBtn = parent.find(".who-first .start-game-btn");
        var reStartGameBtn = parent.find(".who-first .restart-game-btn");
        var winner = parent.find(".winner span");
        whitePlayerStatus.hide();
        blackPlayerStatus.hide();


        //开始游戏
        startGameBtn.on("click", function() {
            var whoFirst = parent.find(".who-first select");
            var whoFirstVal = whoFirst.val();
            white_key_number = 0;
            black_key_number = 0;
            board.removeClass("disabled");
            $(this).addClass("disabled");

            if (!is_game_over) {
                if (whoFirstVal == "1") {
                    is_white_first = true;
                    is_white_turn = true;
                    whitePlayerStatus.show();
                    blackPlayerStatus.hide();
                } else {
                    is_white_first = false;
                    is_white_turn = false;
                    whitePlayerStatus.hide();
                    blackPlayerStatus.show();
                }
                if (clock) {
                    clearInterval(clock);
                }
                setGetTime();
            }
        })

        // 背景音乐
        audioBtn.on("click", function() {
            if (is_music_running == true) { //在播放中
                audio[0].pause();
                is_music_running = false;
                $(this).removeClass("bg-running");
            } else { //背景音乐暂停中
                audio[0].play();
                is_music_running = true;
                $(this).addClass("bg-running");
            }
        })

        //重新开始游戏
        reStartGameBtn.on("click", function() {
            initBoard();
            startGameBtn.click();
            whiteArr = new Array();
            blackArr = new Array();
            winner.text("");

        })

        //白棋玩家悔棋
        whiteBack.on("click", function() {
            if (is_white_back == false) {
                var obj = (whiteArr.pop());
                parent.find(".left-board p:nth-child(" + obj.x + ")>span:nth-child(" + obj.y + ")").removeClass("white");
                console.log(".left-board p:nth-child(" + obj.x + ")>span:nth-child(" + obj.y + ")");
                is_white_back = true;
                is_black_back = false;
            }
        })
        //黑棋玩家悔棋
        blackBack.on("click", function() {
            if (is_black_back == false) {
                var obj = (blackArr.pop());
                parent.find(".left-board p:nth-child(" + obj.x + ") span:nth-child(" + obj.y + ")").removeClass("black");
                console.log(".left-board p:nth-child(" + obj.x + ")>span:nth-child(" + obj.y + ")");
                is_white_back = false;
                is_black_back = true;
            }
        })
        //白棋玩家放弃游戏
        whiteQuit.on("click", function() {
            winner.show();
            winner.text("黑棋玩家赢！");
            board.addClass("disabled");
            blackQuit.addClass("disabled");
            clearInterval(clock);
            is_game_over = true;
        })

        //黑棋玩家放弃游戏
        blackQuit.on("click", function() {
            winner.show();
            winner.text("白棋玩家赢！");
            board.addClass("disabled");
            clearInterval(clock);
            is_game_over = true;
            whiteQuit.addClass("disabled");
        })

        //点击棋盘下棋
        parent.on("click", ".key", function() {
            if (clock) {
                clearInterval(clock);
            }
            setGetTime();
            var x = parseInt($(this).attr("data-x"));
            var y = parseInt($(this).attr("data-y"));
            var obj = {
                "x": x,
                "y": y
            }
            if (is_white_turn) {
                white_key_number++;
                console.log("white:" + white_key_number);
                $(this).addClass("white");
                whiteArr.push(obj);
                arr1[x][y] = 1;
                // console.log(whiteArr);
                is_white_turn = false;
                whitePlayerStatus.hide();
                blackPlayerStatus.show();
                //if (white_key_number >= 5) {
                    if (checkWin(whiteArr, 1)) {
                        winner.show();
                        winner.text("白棋玩家赢！");
                        board.addClass("disabled");
                        clearInterval(clock);
                        is_game_over = true;
                    }
               // }
            } else {
                black_key_number++;
                console.log("black:" + black_key_number);
                $(this).addClass("black");
                blackArr.push(obj);
                arr2[x][y] = -1;
                is_white_turn = true;
                whitePlayerStatus.show();
                blackPlayerStatus.hide();
                //if (black_key_number >= ) {
                    if (checkWin(blackArr, -1)) {
                        winner.show();
                        winner.text("黑棋玩家赢！");
                        board.addClass("disabled");
                        clearInterval(clock);
                        is_game_over = true;
                    }
               // }
            }
        })
    }

    //设置计时
    function setGetTime() {
        var parent = $(".time");
        var minuteSpan = parent.find(".minute");
        var secondSpan = parent.find(".second");
        var minSecondSpan = parent.find(".min-second");
        var tip = parent.find(".tip");
        var date1 = new Date();
        var timeString1 = date1.getTime();
        var is_running = true;
        if (is_running) {
            is_running = false;
            clock = setInterval(function() {
                var date2 = new Date();
                var timeString2 = date2.getTime();
                var interval = timeString2 - timeString1;
                var minute = parseInt(interval / 1000 / 60);
                var second = parseInt((interval - minute * 1000 * 60) / 1000);
                var minSecond = parseInt((interval - minute * 1000 * 60 - second * 1000) / 100);
                minuteSpan.text(minute);
                secondSpan.text(second);
                minSecondSpan.text(minSecond);
                if (minute > 3 && minute < 6) {
                    tip.text("快点啊，我等到花都谢了！");
                } else if (minute >= 6 && minute < 9) {
                    tip.text("快点啊，我要打人了！");
                } else if (minute >= 9) {
                    tip.text("快点啊，我要砍人了！");
                }
            }, 100)
            is_running = true;
        }
    }
    //判断是否应赢了
    function checkWin(arr, value) {
        var len = arr.length;
        for (k = 0; k < len; k++) {
            var x = parseInt(arr[k].x);
            var y = parseInt(arr[k].y);
            if (canWin(x, y, value)) {
                return true;
            } else {
                return false;
            }
        }
    }


    function canWin(x, y, value) {
        var arr;
        if (value == 1) {
            arr = arr1;
        } else {
            arr = arr2;
        }
        for (var i = 0; i < 4; i++) {
            var num = 1;
            for (var j = 1; j < 5; j++) {
                var xxx = x + xx[i] * j;
                var yyy = y + yy[i] * j;
                if (arr[xxx][yyy] != value || !isOut(xxx, yyy)) {
                    break;
                }
                num++;
            }
            for (var j = 1; j < 5; j++) {
                var xxx = x - xx[i] * j;
                var yyy = y - yy[i] * j;
                if (arr[xxx][yyy] != value || !isOut(xxx, yyy)) {
                    break;
                }
                num++;
            }
            if (num == 5) {
                return true;
            }
        }
        return false;
    }

    function isOut(x, y) {
        return x >= 0 && x <= 14 && y >= 0 && y <= 14;
    }
}

　　5、总结

判断输赢的算法还有bug，还有就是一些操作

jQuery-----五子棋

标签：ext   win   element   asc   href   pad   20px   disable   ret   

原文地址：http://www.cnblogs.com/SunlikeLWL/p/7355196.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！