jquery实现五子棋游戏代码-html代码-BFW代码库

代码语言：html
所属分类：游戏
代码描述：jquery实现五子棋游戏代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1">




    <style>
        @import url(https://fonts.googleapis.com/css?family=Roboto:700);
        body {
          margin: 0;
          padding: 0;
          background-color: #2c3e50;
          min-width: 300px;
        }
        
        section {
          margin-top: 10px;
        }
        
        .board {
          margin: auto;
          margin-top: 10px;
          width: 400px;
          height: 400px;
        }
        
        .boardRow {
          width: 100%;
          height: 6.6666666667%;
          border-bottom: 1px solid #2c3e50;
          box-sizing: border-box;
        }
        
        .boardCol {
          width: 6.6666666667%;
          height: 100%;
          background-color: #34495e;
          float: left;
          border-radius: 3px;
          border-left: 1px solid #2c3e50;
          box-sizing: border-box;
        }
        
        .boardCellCross {
          margin: auto;
          margin-top: 0.65%;
          width: 3px;
          height: 98.7%;
          background-color: #2ecc71;
          transform: rotate(-45deg);
          border-radius: 1.5px;
        }
        .boardCellCross:before {
          background-color: inherit;
          border-radius: inherit;
          height: inherit;
          width: inherit;
          position: absolute;
          content: "";
          transform: rotate(90deg);
        }
        
        .boardCellCircle {
          margin: 15%;
          width: 70%;
          height: 70%;
          border: 3px solid #e74c3c;
          border-radius: 50%;
          box-sizing: border-box;
        }
        
        .controls {
          width: 400px;
          height: 26.6666666667px;
          margin: auto;
        }
        
        .newGameCtrl, .sizeCtrl, .messages {
          position: relative;
          display: inline-block;
          height: 100%;
          width: 6.6666666667%;
        }
        
        .sizeCtrl, .messages {
          float: right;
        }
        
        .messages {
          width: 73.3333333333%;
          z-index: 0;
        }
        
        #check {
          display: none;
        }
        
        .newContainer {
          z-index: 10;
        }
        
        .newMain, .sizeScale, .messagesContainer {
          width: 100%;
          height: 100%;
          position: absolute;
          z-index: 50;
          display: table;
          text-align: center;
        }
        
        .newMain, .sizeScale {
          cursor: pointer;
          background-color: #2ecc71;
          border-radius: 50%;
        }
        .newMain:hover, .sizeScale:hover {
          background-color: #e74c3c;
        }
        
        .newMainText {
          font-family: "Roboto", sans-serif;
          font-size: 13px;
          color: #2c3e50;
          display: table-cell;
          vertical-align: middle;
        }
        
        .messagesContainer .newMainText {
          color: #2ecc71;
        }
        
        .messagesContainer .looseState {
          color: #e74c3c;
        }
        
        .newPlate {
          width: 100%;
          height: 100%;
          opacity: 0;
          transition: all 0.2s ease-in;
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          z-index: 5;
        }
        .newPlate:hover {
          background-color: #34495e;
        }
        
        .newPlate:nth-of-type(1) {
          transition-delay: 0s;
        }
        
        .newPlate:nth-of-type(2) {
          transition-delay: 0.3s;
        }
        
        #check:checked ~ .newMain + .newContainer .newPlate {
          opacity: 1;
        }
        #check:checked ~ .newMain + .newContainer .newPlate:nth-of-type(1) {
          left: 100%;
        }
        #check:checked ~ .newMain + .newContainer .newPlate:nth-of-type(2) {
          left: 200%;
        }
    </style>




</head>

<body >
    <section>
        <div class="controls">
            <div class="newGameCtrl">
                <input type="checkbox" id="check" />
                <label class="newMain" for="check">
        <div class="newMainText">new</div>
      </label>
                <div class="newContainer">
                    <div class="newPlate">
                        <div class="boardCellCircle" id="new-O"></div>
                    </div>
                    <div class="newPlate">
                        <div class="boardCellCross" id="new-X"></div>
                    </div>
                </div>
            </div>
            <div class="sizeCtrl">
                <div class="newMain">
                    <div class="newMainText" id="scale-Up">+</div>
                </div>
            </div>
            <div class="sizeCtrl">
                <div class="newMain">
                    <div class="newMainText" id="scale-Down">-</div>
                </div>
            </div>
            <div class="messages">
                <div class="messagesContainer">
                    <div class="newMainText" id="message">try to get 5 in a row!</div>
                </div>
            </div>
        </div>
        <div class="board">
            <div class="boardRow">
                <div class="boardCol">
                    <div class="boardCell" id="0-0"></div>
                </div>
                <div class="boardCol">
                    <div class="boardCell" id="0-1"></div>
                </div>
                <div class="boardCol">
                    <div class="boardCell" id="0-2"></div>
                </div>
                <div class="boardCol">
                    <div class="boardCell" id="0-3"></div>
                </div>
                <div class="boardCol">
                    <div class="boardCell" id="0-4"></div>
                </div>
                <div class="boardCol">
                    <div class="boardCell" id="0-5"></div>
                </div>
                <div class="boardCol">
                    <div class="boardCell" id="0-6"></div>
                </div>
                <div class="boardCol">
                    <div class="boardCell" id="0-7"></div>
                </div>
                <div class="boardCol">
                    <div class="boardCell" id="0-8"></div>
                </div>
                <div class="boardCol">
                    <div class="boardCell" id="0-9"></div>
                </div>
                <div class="boardCol">
                    <div class="boardCell" id="0-10"></div>
                </div>
                <div class="boardCol">
                    <div class="boardCell" id="0-11"></div>
                </div>
                <div class="boardCol">
                    <div class="boardCell" id="0-12"></div>
                </div>
                <div class="boardCol">
                    <div class="boardCell" id="0-13"></div>
                </div>
                <div class="boardCol">
                    <div class="boardCell" id="0-14"></div>
                </div>
            </div>
            <div class="boardRow">
                <div class="boardCol">
                    <div class="boardCell" id="1-0"></div>
                </div>
                <div class="boardCol">
                    <div class="boardCell" id="1-1"></div>
                </div>
                <div class="boardCol">
                    <div class="boardCell" id="1-2"></div>
                </div>
                <div class="boardCol">
                    <div class="boardCell" id="1-3"></div>
                </div>
                <div class="boardCol">
                    <div class="boardCell" id="1-4"></div>
                </div>
                <div class="boardCol">
                    <div class="boardCell" id="1-5"></div>
                </div>
                <div class="boardCol">
                    <div class="boardCell" id="1-6"></div>
                </div>
                <div class="boardCol">
                    <div class="boardCell" id="1-7"></div>
                </div>
                <div class="boardCol">
                    <div class="boardCell" id="1-8"></div>
                </div>
                <div class="boardCol">
                    <div clas.........完整代码请登录后点击上方下载按钮下载查看