index.html 8.4 KB

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