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="#">黑 子</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
jQuery网页版五子棋小游戏源码下载的更多相关文章
- HTML5小游戏源码收藏
html5魅族创意的贪食蛇游戏源码下载 html5网页版打砖块小游戏源码下载 html5 3D立体魔方小游戏源码下载 html5网页版飞机躲避游戏源码下载 html5三国人物连连看游戏源码下载 js ...
- jQuery实践-网页版2048小游戏
▓▓▓▓▓▓ 大致介绍 看了一个实现网页版2048小游戏的视频,觉得能做出自己以前喜欢玩的小游戏很有意思便自己动手试了试,真正的验证了这句话-不要以为你以为的就是你以为的,看视频时觉得看懂了,会写了, ...
- Creator仿超级玛丽小游戏源码分享
Creator仿超级玛丽小游戏源码分享 之前用Cocos Creator 做的一款仿超级玛丽的游戏,使用的版本为14.2 ,可以直接打包为APK,现在毕设已经完成,游戏分享出来,大家一起学习进步.特别 ...
- html5 canvas简易版捕鱼达人游戏源码
插件描述:html5利用canvas写的一个js版本的捕鱼,有积分统计,鱼可以全方位移动,炮会跟着鼠标移动,第一次打开需要鼠标移出背景图,再移入的时候就可以控制炮的转动,因为是用的mouseover触 ...
- ios版弹珠游戏源码
这个是我们比较喜欢玩的一直小游戏的,ios版弹珠游戏源码,该游戏源码来着IOS教程网其他网友提供上传的,大家可以了解一下吧. nore_js_op> <ignore_js_op&g ...
- Android版的疯狂猜图游戏源码完整版分享
这个游戏源码是在安装教程网那么分享过来的,Android版的疯狂猜图游戏源码完整版分享,也是本人之前很早以前发的一款游戏源码的,大家如果想了解一下,可以看看吧,不说多了,上一个图先吧. > ...
- ios水果风暴游戏源码下载
游戏源码是从那个IOS教程网IOS.662p.com分享给大家的. 这是一款ios水果风暴游戏源码下载,介绍给大家一下,喜欢的朋友可以下载学习一下吧.应用介绍:这是一个以获得高分和挑战更高难度为目的的 ...
- 推荐几个c/c++语言编写的游戏源码下载网站
在游戏开发的学习或工作中,利用完好的游戏源码可以事半功倍,不仅可以逆向学习开拓思维,也可以大大减少设计周期.自己浏览了很游戏源码下载的网站,发现大多数质量都良莠不齐,且大部分需要消费才能下载,下面整理 ...
- 10款基于jquery的web前端特效及源码下载
1.jQuery时间轴插件:jQuery Timelinr 这是一款可用于展示历史和计划的时间轴插件,尤其比较适合一些网站展示发展历程.大事件等场景.该插件基于jQuery,可以滑动切换.水平和垂直滚 ...
随机推荐
- ASP.NET Core Linux下为 dotnet 创建守护进程（必备知识）
前言 在上篇文章中介绍了如何在 Docker 容器中部署我们的 asp.net core 应用程序,本篇主要是怎么样为我们在 Linux 或者 macOs 中部署的 dotnet 程序创建一个守护进程 ...
- IT人生知识分享：概率与运气
前言: 最近的人生多了些体验,也读了些许书,感觉还是有些知识是可以分享的. 今天难得周六,特意开电脑了,花几个小时写写,和大伙分享分享点知识. 以下内容,更多的需要读者思考,所以结论不会写太清晰,但一 ...
- 剑指Offer面试题：30.第一个只出现一次的字符
一.题目:第一个只出现一次的字符 题目:在字符串中找出第一个只出现一次的字符.如输入"abaccdeff",则输出'b'.要求时间复杂度为O(n). 最直观的想法是从头开始扫描这个 ...
- 在C#代码中应用Log4Net（三）Log4Net中配置文件的解释
一个完整的配置文件的例子如下所示,这个是”在C#代码中应用Log4Net(二)”中使用的配置文件. <log4net> <!-- 错误日志类--> <logger nam ...
- Html5 绘制五星红旗
Html5+JavaScript 在Canvas上绘制五星红旗,具体思路如下图所示: 绘制思路在上图中已有说明,具体代码如下: <script type="text/javascrip ...
- struts tags
HTTP ERROR 500 Problem accessing /showognl.jsp. Reason: Server Error Caused by: org.apache.jasper.Ja ...
- org.artofsolving.jodconverter.office.OfficeException: failed to start and connect
org.artofsolving.jodconverter.office.OfficeException: failed to start and connect docviewer 调用 openo ...
- iOS开发-闪退问题-解决之前上架的 App 在 iOS 9 会闪退问题
最新更新:(2015.10.02) 开发环境: Delphi 10 Seattle OS X El Capitan v10.11 需使用下列 HotfixID: 30398, PAServer Hot ...
- iOS开发-捕获程序崩溃日志
iOS开发中遇到程序崩溃是很正常的事情,如何在程序崩溃时捕获到异常信息并通知开发者,是大多数软件都选择的方法.下面就介绍如何在iOS中实现: 1. 在程序启动时加上一个异常捕获监听,用来处理程序崩溃时 ...
- 【Win10应用开发】相对布局（RelativePanel）
外面的雨下得很大,老周就决定雨下漫笔了. 今天咱们说一个新控件——RelativePanel.本质上,它就是一个面板,面板干啥用的?面板就是一个容器,里面可以放其他对象,就像我们小时候玩的七巧板一样, ...