index.html 8.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <meta content="yes" name="apple-mobile-web-app-capable"/>
  6. <meta content="yes" name="apple-touch-fullscreen"/>
  7. <meta content="telephone=no" name="format-detection"/>
  8. <meta content="black" name="apple-mobile-web-app-status-bar-style">
  9. <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
  10. <title>美女拼图</title>
  11. <link rel="stylesheet" type="text/css" href="css/index.css">
  12. <style type="text/css">
  13. .mask{
  14. position:absolute;
  15. z-index:99;
  16. background-color:black;
  17. top:0px;
  18. left:0px;
  19. width:100%;
  20. height:100%;
  21. opacity:.8;
  22. display:none;
  23. }
  24. #gameresult{
  25. position:absolute;
  26. z-index:100;
  27. top:30%;
  28. left:0%;
  29. width:100%;
  30. height:100%;
  31. display:none;
  32. }
  33. .resultcontainer{
  34. width:80%;
  35. margin:auto;
  36. color:white;
  37. text-align:center;
  38. padding:20px;
  39. }
  40. .resultinfo{
  41. margin-bottom:40px;
  42. font-size:20px;
  43. }
  44. .resultinfo em{
  45. color:red;
  46. }
  47. .btngroup{
  48. height:60px;
  49. }
  50. .btn1{
  51. padding:8px 15px;
  52. background-color:rgb(93, 86, 145);
  53. border-radius:5px;
  54. }
  55. .hide{
  56. display:none;
  57. }
  58. .kapics{
  59. text-align:center;
  60. }
  61. </style>
  62. </head>
  63. <body>
  64. <!--页面集合-->
  65. <div id="pageWrapper">
  66. <div id="pages">
  67. <div id="page_default" class="pagemodel">
  68. <div class="initloading" >
  69. <span class="normal-loading"></span>
  70. </div>
  71. </div>
  72. </div>
  73. </div>
  74. <div class="mask"></div>
  75. <div id="gameresult">
  76. <div class="resultcontainer">
  77. <div class="resultinfo"></div>
  78. <div class="btngroup">
  79. <a class="btn1 hide" id="againgame">再玩一次</a>
  80. <a class="btn1 hide" id="restartgame">再来一次</a>
  81. <a class="btn1 " id="continuegame">挑战下一关</a>
  82. <a class="btn1" id="sharegame" onClick="dp_share();">炫耀一下</a>
  83. </div>
  84. <div class="btngroup">
  85. <a class="btn1" onClick="clickMore();">更多游戏</a>
  86. </div>
  87. </div>
  88. </div>
  89. <script type="text/template" style="display:none;" id="pageTemplate">
  90. <div id="<%= id%>" class="pagemodel">
  91. <div class="initloading" >
  92. <span class="normal-loading"></span>
  93. </div>
  94. </div>
  95. </script>
  96. <script type="text/template" style="display:none;" id="indexTemplate">
  97. <h1 class="toptitle">拼图世界</h1>
  98. <div class="game-desc">
  99. <img src="./images/u193_normal.jpg">
  100. <div><span>欢迎来到拼图世界,勇士村。想要进村,先让我看看你有多大本事吧。</span></div>
  101. </div>
  102. <div class="categorys">
  103. <p class="cate-name">解救乱八七糟的水果们</p>
  104. <div>
  105. <img src="./images/u54_normal.png">
  106. </div>
  107. <div class="btn-con"><a href="javascript:;" showPage="category" class="btn">开始</a></div>
  108. </div>
  109. </script>
  110. <script type="text/template" style="display:none;" id="jigsawTemplate">
  111. <div class="drag-content">
  112. <div class="play-container">
  113. <div class="drag-box">
  114. </div>
  115. <div class="masker">
  116. <div class="load">
  117. <div class="first-layer"></div>
  118. <div class="second-layer"></div>
  119. <div class="third-layer"></div>
  120. <div class="count-down" >
  121. <div class="play-button play-button-ready playbtn" ></div>
  122. <ul>
  123. <li>3</li>
  124. <li>2</li>
  125. <li>1</li>
  126. </ul>
  127. </div>
  128. </div>
  129. </div>
  130. <span class="done">done</span>
  131. </div>
  132. <div class="timer">
  133. <div class="timer-con">
  134. <span class="timer-icon"></span>
  135. <span class="t counter">00.000''</span>
  136. </div>
  137. <div class="kapics">1/1
  138. </div>
  139. </div>
  140. <div class="play-info">
  141. <div class="first-guide">
  142. <div>挑战失败!共成功挑战XX关</div>
  143. </div>
  144. <div class="playing-state" style="display:none;">
  145. <span>暂停</span>
  146. </div>
  147. <div class="playing-over" style="display:none;">
  148. <span class="restart" style="display:none;" onclick="window.reload();">重新开始</span>
  149. <span class="nextpic">下一关</span>
  150. <span class="continuepic">继续挑战</span>
  151. <span class="oldshare">分享</span>
  152. <span class="moregame">更多游戏</span>
  153. </div>
  154. </div>
  155. </div>
  156. </script>
  157. <script type="text/template" style="display:none;" id="jigsawLayoutTemplate">
  158. <% for(var i = 0 ; i < list.length;i++){%>
  159. <div class="item" sort="<%=list[i].sort%>" dragitem='1' style="width:<%=list[i].w%>px;height:<%=list[i].h%>px;background:url(<%=img%>) no-repeat;background-position:<%=list[i].x%>px <%=list[i].y%>px;background-size:<%=width%>px <%=height%>px;"></div>
  160. <%}%>
  161. </script>
  162. <script type="text/template" style="display:none;" id="showNextKaTemplate">
  163. <div class="shownextka">
  164. <div class="lastpic">
  165. <img src="<%=pic%>">
  166. </div>
  167. <div class="msg">
  168. <p><%=first%></p>
  169. <p><%=second%></p>
  170. <p>耗时<%=time%></p>
  171. </div>
  172. <div class="opera">
  173. <span class="red next">第<%=next%>关&gt;</span>
  174. <span class="playagain">再玩一遍</span>
  175. <span class="share">分享</span>
  176. </div>
  177. </div>
  178. </script>
  179. <script type="text/javascript" src="js/common.js"></script>
  180. <script type="text/javascript">
  181. $(document).ready(function(){
  182. $.getScript("./js/index.js",function(){
  183. })
  184. });
  185. </script>
  186. <script language=javascript>
  187. var mebtnopenurl = 'http://mp.weixin.qq.com/s?__biz=MzI4MjA2MjE0MQ==&mid=246005295&idx=1&sn=490f8141976d607ba079d48f52a3fcd7#rd';
  188. var thegameurl ="http://game.ikongzhong.cn/games/mspt/";
  189. var guanzhuurl ="http://mp.weixin.qq.com/s?__biz=MzI4MjA2MjE0MQ==&mid=246005295&idx=1&sn=490f8141976d607ba079d48f52a3fcd7#rd";
  190. window.shareData = {
  191. "imgUrl": "http://mmbiz.qpic.cn/mmbiz/2zpp2iaH4HWGXUI2K4TJFOVVGDTCsuDogZ8GSL9nuMvtRHfpOGQwnD1ibgVq8E4dlO946w2iahrPxb6ckynJBBU8Q/640",
  192. "timeLineLink": thegameurl,
  193. "tTitle": "美女拼图",
  194. "tContent": "美女拼图"
  195. };
  196. function goHome(){
  197. window.location=mebtnopenurl;
  198. }
  199. function clickMore(){
  200. if((window.location+"").indexOf("f=zf",1)>0){
  201. window.location =mebtnopenurl;
  202. }
  203. else{
  204. goHome();
  205. }
  206. }
  207. function dp_share(){
  208. document.getElementById("share").style.display="";
  209. }
  210. function dp_Ranking(){
  211. window.location=mebtnopenurl;
  212. }
  213. function showAd(){
  214. }
  215. function hideAd(){
  216. }
  217. document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
  218. WeixinJSBridge.on('menu:share:appmessage', function(argv) {
  219. WeixinJSBridge.invoke('sendAppMessage', {
  220. "img_url": window.shareData.imgUrl,
  221. "link": window.shareData.timeLineLink,
  222. "desc": window.shareData.tContent,
  223. "title": window.shareData.tTitle
  224. }, onShareComplete);
  225. });
  226. WeixinJSBridge.on('menu:share:timeline', function(argv) {
  227. WeixinJSBridge.invoke('shareTimeline', {
  228. "img_url": window.shareData.imgUrl,
  229. "img_width": "640",
  230. "img_height": "640",
  231. "link": window.shareData.timeLineLink,
  232. "desc": window.shareData.tContent,
  233. "title": window.shareData.tTitle
  234. }, onShareComplete);
  235. });
  236. }, false);
  237. </script>
  238. <div id=share style="display: none">
  239. <img width=100% src="share.png"
  240. style="position: fixed; z-index: 9999; top: 0; left: 0; display: "
  241. ontouchstart="document.getElementById('share').style.display='none';" />
  242. </div>
  243. <div style="display: none;">
  244. <script type="text/javascript">
  245. var myData = { gameid: "mspt" };
  246. function dp_submitScore(score){
  247. myData.score =parseInt(score);
  248. myData.scoreName = "闯了"+score+"关";
  249. document.title ="我在美女拼图中连闯了"+score+"关,这游戏不是一般人能玩的,你们也来试试看吧!";
  250. window.shareData.tTitle = document.title;
  251. }
  252. function onShareComplete(res) {
  253. if (localStorage.myuid && myData.score != undefined) {
  254. setTimeout(function(){
  255. if (confirm("?")) {
  256. window.location =mebtnopenurl;
  257. }
  258. else {
  259. document.location.href = mebtnopenurl;
  260. }
  261. }, 500);
  262. }
  263. else {
  264. document.location.href = mebtnopenurl;
  265. }
  266. }
  267. </script>
  268. <div style="display: none;">
  269. </div>
  270. <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
  271. <script type="text/javascript" src="js/game9g.utils.js"></script>
  272. </body>
  273. </html>