zoukankan      html  css  js  c++  java
  • jQuery网页版五子棋小游戏源码下载

    体验效果: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="#">&nbsp;&nbsp;</a>
    <a id="white_btn" class="btn" href="#">&nbsp;&nbsp;</a>
    </p>
    <p>
    <a id="first_move_btn" class="btn selected" href="#">&nbsp;&nbsp;</a>
    <a id="second_move_btn" class="btn" href="#">&nbsp;&nbsp;</a>
    </p>
    <a id="replay_btn" class="btn" href="#">&nbsp;&nbsp;&nbsp;</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

  • 相关阅读:
    Common Lisp 参数传递的几种形式
    EF架构~基于EF数据层的实现
    标准架构~业务层到底是否应该关注数据持久化的方式
    Redis学习笔记~Redis主从服务器,读写分离
    Redis学习笔记~是时候为Redis实现一个仓储了,RedisRepository来了
    MVVM架构~knockoutjs系列之数组的$index和$data
    【Oracle】-【sqlplus / as sysdba登录报错问题】-新用户使用sqlplus / as sysdba登录报错
    Android---App Widget(一)
    Mit 分布式系统导论,Distributed Systems ,lab1 -lab6 总结,实验一到实验六总结
    GDAL切割重采样遥感图像
  • 原文地址:https://www.cnblogs.com/roucheng/p/wuziqi.html
Copyright © 2011-2022 走看看