zoukankan html css js c++ java

jQuery-----五子棋

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 {
     100%;
    height: 100%;
    background-color: #E0AD54;
}

.container {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -350px;
    margin-left: -508px;
     1040px;
    height: 700px;
    .left-board {
        position: absolute;
        top: 0;
        left: 0;
         700px;
        height: 700px;
        background-image: url("/imgs/board.png");
        background-size: 700px 700px;
        float: left;
        p{
        	height: 50px;
        	 700px;
        }
        span{
        	display: inline-block;
        	 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;
         320px;
        padding: 0 0 0 20px;
        .voice {
            a {
                display: inline-block;
                 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 {
             300px;
            height: 100px;
            margin: 20px 0 0 0;
            .left {
                float: left;
                p:nth-child(1) {
                    height: 20px;
                    span{ 
                        display: inline-block;
                         20px;
                        height: 20px;
                        background-image: url("/imgs/target.png");
                        background-size: 20px 20px;
                        background-repeat: no-repeat;
                        margin: 0 0 0 20px;
                    }
                }
                img {
                     60px;
                    height: 60px;
                    cursor: pointer;
                }
            }
            .right {
                float: left;
                a:nth-child(1){
                    display: inline-block;
                    float: left;
                     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;
                     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;
        	 320px;
        	line-height: 60px;
        	padding: 20px 0 0 0;
        	select{
        		 100px;
        		height: 30px;
        		margin: 4px 10px 0 0;
        		float: left;
        	}
        	a{
        		    display: inline-block;
                	float: left;
                     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;
        	 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，还有就是一些操作

查看全文

相关阅读:
进程和线程
 关于offer对比
 CVTE面经
 重定向
 奇虎360面试经验
 百纳信息（海豚浏览器）面经
 携程网面经
 百度面经
 位运算
 Cracking the Coding Interview 4.8

原文地址：https://www.cnblogs.com/SunlikeLWL/p/7355196.html

热门文章
Ruby break, next, redo, retry
jQuery 查找标签
 DOM 常见事件
 DOM 属性操作
 DOM 查找标签
 Jmeter参数化
 Jmeter关联技术
 WebDriver 常用操作
 http协议
 协程 Gevent