jquery实现五子棋游戏代码
代码语言：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 class="boardCell" id="1-9"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="1-10"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="1-11"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="1-12"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="1-13"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="1-14"></div>
</div>
</div>
<div class="boardRow">
<div class="boardCol">
<div class="boardCell" id="2-0"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="2-1"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="2-2"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="2-3"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="2-4"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="2-5"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="2-6"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="2-7"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="2-8"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="2-9"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="2-10"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="2-11"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="2-12"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="2-13"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="2-14"></div>
</div>
</div>
<div class="boardRow">
<div class="boardCol">
<div class="boardCell" id="3-0"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="3-1"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="3-2"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="3-3"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="3-4"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="3-5"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="3-6"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="3-7"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="3-8"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="3-9"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="3-10"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="3-11"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="3-12"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="3-13"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="3-14"></div>
</div>
</div>
<div class="boardRow">
<div class="boardCol">
<div class="boardCell" id="4-0"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="4-1"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="4-2"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="4-3"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="4-4"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="4-5"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="4-6"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="4-7"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="4-8"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="4-9"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="4-10"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="4-11"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="4-12"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="4-13"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="4-14"></div>
</div>
</div>
<div class="boardRow">
<div class="boardCol">
<div class="boardCell" id="5-0"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="5-1"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="5-2"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="5-3"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="5-4"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="5-5"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="5-6"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="5-7"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="5-8"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="5-9"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="5-10"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="5-11"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="5-12"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="5-13"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="5-14"></div>
</div>
</div>
<div class="boardRow">
<div class="boardCol">
<div class="boardCell" id="6-0"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="6-1"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="6-2"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="6-3"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="6-4"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="6-5"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="6-6"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="6-7"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="6-8"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="6-9"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="6-10"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="6-11"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="6-12"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="6-13"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="6-14"></div>
</div>
</div>
<div class="boardRow">
<div class="boardCol">
<div class="boardCell" id="7-0"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="7-1"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="7-2"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="7-3"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="7-4"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="7-5"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="7-6"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="7-7"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="7-8"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="7-9"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="7-10"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="7-11"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="7-12"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="7-13"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="7-14"></div>
</div>
</div>
<div class="boardRow">
<div class="boardCol">
<div class="boardCell" id="8-0"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="8-1"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="8-2"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="8-3"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="8-4"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="8-5"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="8-6"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="8-7"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="8-8"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="8-9"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="8-10"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="8-11"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="8-12"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="8-13"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="8-14"></div>
</div>
</div>
<div class="boardRow">
<div class="boardCol">
<div class="boardCell" id="9-0"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="9-1"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="9-2"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="9-3"></div>
</div>
<div class="boardCol">
<div class="boardCell" id="9-4"></div>
&l.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0