html实现五子棋游戏,纯JS实现五子棋游戏兼容各浏览器(附源码)

纯JS五子棋(各浏览器兼容)

效果图：

HTML代码

五子棋

.wrapper {

width: 600px;

position: relative;

}

/* 棋盘 */

div.chessboard {

margin: 30px 0 0 50px;

width: 542px;

background: url(http://sandbox.runjs.cn/uploads/rs/102/r2dy3tyw/chessboard.png) no-repeat 14px 14px rgb(250, 250, 250);

overflow: hidden;

box-shadow: 2px 2px 8px #888;

-webkit-box-shadow: 2px 2px 8px #888;

-moz-box-shadow: 2px 2px 8px #888;

}

div.chessboard div {

float: left;

width: 36px;

height: 36px;

border-top: 0px solid #ccc;

border-left: 0px solid #ccc;

border-right: 0;

border-bottom: 0;

cursor: pointer;

}

/* 棋子 */

div.chessboard div.black {

background: url(http://sandbox.runjs.cn/uploads/rs/102/r2dy3tyw/black.png) no-repeat 4px 4px;

}

div.chessboard div.white {

background: url(http://sandbox.runjs.cn/uploads/rs/102/r2dy3tyw/white.png) no-repeat 4px 4px;

}

div.chessboard div.hover {

background: url(http://sandbox.runjs.cn/uploads/rs/102/r2dy3tyw/hover.png) no-repeat 1px 1px;

}

div.chessboard div.hover-up {

background: url(http://sandbox.runjs.cn/uploads/rs/102/r2dy3tyw/hover_up.png) no-repeat 1px 1px;

}

div.chessboard div.hover-down {

background: url(http://sandbox.runjs.cn/uploads/rs/102/r2dy3tyw/hover_down.png) no-repeat 1px 1px;

}

div.chessboard div.hover-up-left {

background: url(http://sandbox.runjs.cn/uploads/rs/102/r2dy3tyw/hover_up_left.png) no-repeat 1px 1px;

}

div.chessboard div.hover-up-right {

background: url(http://sandbox.runjs.cn/uploads/rs/102/r2dy3tyw/hover_up_right.png) no-repeat 1px 1px;

}

div.chessboard div.hover-left {

background: url(http://sandbox.runjs.cn/uploads/rs/102/r2dy3tyw/hover_left.png) no-repeat 1px 1px;

}

div.chessboard div.hover-right {

background: url(http://sandbox.runjs.cn/uploads/rs/102/r2dy3tyw/hover_right.png) no-repeat 1px 1px;

}

div.chessboard div.hover-down-left {

background: url(http://sandbox.runjs.cn/uploads/rs/102/r2dy3tyw/hover_down_left.png) no-repeat 1px 1px;

}

div.chessboard div.hover-down-right {

background: url(http://sandbox.runjs.cn/uploads/rs/102/r2dy3tyw/hover_down_right.png) no-repeat 1px 1px;

}

div.chessboard div.white-last {

background: url(http://sandbox.runjs.cn/uploads/rs/102/r2dy3tyw/white_last.png) no-repeat 4px 4px;

}

div.chessboard div.black-last {

background: url(http://sandbox.runjs.cn/uploads/rs/102/r2dy3tyw/black_last.png) no-repeat 4px 4px;

}

/* 右侧 */

div.operating-panel {

position: absolute;

left: 610px;

top: 150px;

width: 200px;

text-align: center;

}

.operating-panel a {

display: inline-block;

padding: 10px 15px;

margin-bottom: 39px;

margin-right: 8px;

margin-left: 8px;

background: rgb(100, 167, 233);

text-decoration: none;

color: #333;

font-weight: bold;

font-size: 16px;

font-family: "微软雅黑", "宋体";

}

.operating-panel a:hover {

background: rgb(48, 148, 247);

text-decoration: none;

}

.operating-panel a.disable, .operating-panel a.disable:hover {

cursor: default;

background: rgb(197, 203, 209);

color: rgb(130, 139, 148);

}

.operating-panel a.selected {

border: 5px solid #F3C242;

padding: 5px 10px;

}

#result_tips {

color: #CE4242;

font-size: 26px;

font-family: "微软雅黑";

}

#result_info {

margin-bottom: 26px;

}

$(document).ready(function() {

fiveChess.init();

});

var fiveChess = {

NO_CHESS: 0,

BLACK_CHESS: -1,

WHITE_CHESS: 1,

chessArr: [], //记录棋子

chessBoardHtml: "",

humanPlayer: "black",//玩家棋子颜色

AIPlayer: "white",//AI棋子颜色

isPlayerTurn: true, //轮到player下棋

totalGames: cookieHandle.getCookie("totalGames") || 0,//总局数

winGames: cookieHandle.getCookie("winGames") || 0,//玩家赢局数

isGameStart: false,//游戏已经开始

isGameOver: false, //游戏结束

playerLastChess: [], //玩家最后下子位置

AILastChess: [], //AI最后下子位置

init: function () {

this.chessBoardHtml = $("div.chessboard").html();

var _fiveChess = this;

//右侧操作按钮

$(".operating-panel a").click(function (event) {

event.preventDefault();

var id = $(this).attr("id");

if (_fiveChess.isGameStart && id !== "replay_btn" ) { return; }//正在游戏 不操作

switch (id) {

case "black_btn":

_fiveChess.humanPlayer = "black";

_fiveChess.AIPlayer = "white";

break;

case "white_btn":

_fiveChess.humanPlayer = "white";

_fiveChess.AIPlayer = "black";

break;

case "first_move_btn":

_fiveChess.isPlayerTurn = true;

break;

case "second_move_btn":

_fiveChess.isPlayerTurn = false;

break;

case "replay_btn":

_fiveChess.resetChessBoard();

if (_fiveChess.isGameStart) {//点重玩

_fiveChess.gameOver();

}

else { //点开始

_fiveChess.gameStart();

}

break;

}

if (id !== "replay_btn") {

$(this).addClass(&#