体验效果：http://hovertree.com/texiao/game/4/
网页五子棋源代码：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>jquery五子棋游戏 -</title> <script type="text/javascript" src="http://hovertree.com/texiao/game/4/hovertreejs/CookieHandle.js"></script> <script src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script> <link href="http://hovertree.com/texiao/game/4/hovertreejs/jquery.hvtchess5.css" rel="stylesheet" type="text/css" /> <script src="http://hovertree.com/texiao/game/4/hovertreejs/jquery.hvtchess5.js"></script> </head> <body> <div class="wrapper"> <div class="chessboard"> <!-- top line --> <div class="chess-top"></div> <div class="chess-top"></div> <div class="chess-top"></div> <div class="chess-top"></div> <div class="chess-top"></div> <div class="chess-top"></div> <div class="chess-top"></div> <div class="chess-top"></div> <div class="chess-top"></div> <div class="chess-top"></div> <div class="chess-top"></div> <div class="chess-top"></div> <div class="chess-top"></div> <div class="chess-top"></div> <div class="chess-top chess-right"></div> <!-- line 1 --> <div class="chess-left"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-right"></div> <!-- line 2 --> <div class="chess-left"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-right"></div> <!-- line 3 --> <div class="chess-left"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-right"></div> <!-- line 4 --> <div class="chess-left"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-right"></div> <!-- line 5 --> <div class="chess-left"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-right"></div> <!-- line 6 --> <div class="chess-left"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-right"></div> <!-- line 7 --> <div class="chess-left"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-right"></div> <!-- line 8 --> <div class="chess-left"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-right"></div> <!-- line 9 --> <div class="chess-left"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-right"></div> <!-- line 10 --> <div class="chess-left"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-right"></div> <!-- line 11 --> <div class="chess-left"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-right"></div> <!-- line 12 --> <div class="chess-left"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-right"></div> <!-- line 13 --> <div class="chess-left"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-middle"></div> <div class="chess-right"></div> <!-- bottom line --> <div class="chess-bottom"></div> <div class="chess-bottom"></div> <div class="chess-bottom"></div> <div class="chess-bottom"></div> <div class="chess-bottom"></div> <div class="chess-bottom"></div> <div class="chess-bottom"></div> <div class="chess-bottom"></div> <div class="chess-bottom"></div> <div class="chess-bottom"></div> <div class="chess-bottom"></div> <div class="chess-bottom"></div> <div class="chess-bottom"></div> <div class="chess-bottom"></div> <div class="chess-bottom chess-right"></div> </div> <div class="operating-panel"> <p> <a id="black_btn" class="btn selected" href="#">黑 子</a> <a id="white_btn" class="btn" href="#">白 子</a> </p> <p> <a id="first_move_btn" class="btn selected" href="#">先 手</a> <a id="second_move_btn" class="btn" href="#">后 手</a> </p> <a id="replay_btn" class="btn" href="#">开 始</a> <p id="result_info">胜率：100%</p> <p id="result_tips"></p> </div> <div style="display: none"> <!-- 图片需合并 减少http请求数 --> <img src="http://hovertree.com/texiao/game/4/hovertreepic/black.png" alt="preload" /> <img src="http://hovertree.com/texiao/game/4/hovertreepic/white.png" alt="preload" /> <img src="http://hovertree.com/texiao/game/4/hovertreepic/hover.png" alt="preload" /> <img src="http://hovertree.com/texiao/game/4/hovertreepic/hover_up.png" alt="preload" /> <img src="http://hovertree.com/texiao/game/4/hovertreepic/hover_down.png" alt="preload" /> <img src="http://hovertree.com/texiao/game/4/hovertreepic/hover_up_left.png" alt="preload" /> <img src="http://hovertree.com/texiao/game/4/hovertreepic/hover_up_right.png" alt="preload" /> <img src="http://hovertree.com/texiao/game/4/hovertreepic/hover_left.png" alt="preload" /> <img src="http://hovertree.com/texiao/game/4/hovertreepic/hover_right.png" alt="preload" /> <img src="http://hovertree.com/texiao/game/4/hovertreepic/hover_down_left.png" alt="preload" /> <img src="http://hovertree.com/texiao/game/4/hovertreepic/hover_down_right.png" alt="preload" /> <img src="http://hovertree.com/texiao/game/4/hovertreepic/black_last.png" alt="preload" /> <img src="http://hovertree.com/texiao/game/4/hovertreepic/white_last.png" alt="preload" /> </div> </div> </body> </html>
更多：http://www.cnblogs.com/roucheng/p/texiao.html