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 {
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，还有就是一些操作
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
