index.html 51 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879
  1. <!DOCTYPE html>
  2. <!-- saved from url=(0038)http://218.244.142.3/game/14/game.html -->
  3. <html><head><meta http-equiv="Content-Type" content="text/html; charset=GBK">
  4. <meta charset="gb2312">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  7. <meta name="format-detection" content="telephone=no">
  8. <script src="http://game.ikongzhong.cn/games/kuaipao/jquery.js"></script>
  9. <script src="http://game.ikongzhong.cn/games/kuaipao/crafty.js"></script>
  10. <script src="http://game.ikongzhong.cn/games/kuaipao/openjs.js"></script>
  11. <title>OLA快跑</title>
  12. <style>
  13. body,div,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,iframe,input,textarea,select,label,article,aside,footer,header,menu,nav,section,time,audio,video {
  14. margin:0;
  15. padding:0;
  16. }
  17. article,aside,footer,header,hgroup,nav,section,audio,canvas,video,img {
  18. display: block;
  19. }
  20. body {
  21. font-size: 100%;
  22. font-family:Helvetica,STHeiti,Droid Sans Fallback;
  23. -webkit-text-size-adjust: 100%;
  24. -ms-text-size-adjust: 100%;
  25. -webkit-tap-highlight-color:rgba(0,0,0,0);
  26. }
  27. textarea {
  28. resize: none;
  29. }
  30. iframe,img {
  31. border:0;
  32. }
  33. ul,ol {
  34. list-style:none;
  35. }
  36. input,
  37. select,
  38. textarea {
  39. outline: 0;
  40. -webkit-user-modify: read-write-plaintext-only;
  41. }
  42. input {
  43. -webkit-appearance: none;
  44. }
  45. a{
  46. text-decoration: none;
  47. }
  48. body,html{
  49. width: 100%;
  50. height: 100%;
  51. position: relative;
  52. overflow: hidden;
  53. margin: 0; padding: 0;
  54. /*background: #000;*/
  55. background: #13a438;
  56. }
  57. #gamestart{
  58. width: 100%;
  59. position: absolute;
  60. top: 0; bottom: 0;
  61. z-index: 11;
  62. }
  63. .start_bg {
  64. position: absolute;
  65. top: -44px; left: 0; z-index: -1;
  66. width: 100%;
  67. background: url(http://game.ikongzhong.cn/games/kuaipao/jz.gif) no-repeat center center;
  68. }
  69. #gamestart .btn,.zhiyin .btn {
  70. width: 80%;
  71. height: 40px;
  72. border-radius: 5px;
  73. text-align: center;
  74. line-height: 40px;
  75. color: #333;
  76. box-shadow: 0 5px 0px #07942c;
  77. box-shadow: 0 5px 0px rgba(0,0,0,0.17);
  78. position: absolute;
  79. left: 50%; margin: 0 0 0 -40%;
  80. }
  81. #gamestart .rule{
  82. background: #fff;
  83. bottom: 100px;
  84. }
  85. #gamestart .start,.zhiyin .start{
  86. background: #ffff00;
  87. bottom: 40px;
  88. }
  89. .zhiyin .start {
  90. bottom:20px !important;
  91. }
  92. .IOS #gamestart .rule{
  93. bottom: 140px;
  94. }
  95. .IOS #gamestart .start,.zhiyin .start{
  96. bottom: 80px;
  97. }
  98. .athour {
  99. width: 100%; text-align: center; padding: 10px 0;
  100. position: absolute;
  101. left: 0; bottom: 0;
  102. }
  103. .IOS .athour{
  104. bottom: 44px;
  105. }
  106. .athour span{
  107. font-size: 11px;
  108. color: #1c5b35;
  109. }
  110. .athour span:nth-of-type(1){
  111. padding-right: 10px;
  112. }
  113. #interface .life{display:none}
  114. .ruleshadow{
  115. position: absolute;
  116. top: 0; right: 0; bottom: 0; left: 0;
  117. background:rgba(0,0,0,0.8);
  118. z-index: 10;
  119. }
  120. .rulebox{
  121. width: 250px; height: 280px;
  122. padding: 10px 15px;
  123. position: absolute;
  124. left: 50%; top: 50%;
  125. margin: -150px 0 0 -140px;
  126. background: #13a438;
  127. border-radius: 5px;
  128. opacity: 0; z-index: -1;
  129. -webkit-transform: translate3d(0,0,0);
  130. -webkit-transform-style: preserve-3d;
  131. -webkit-backface-visibility: hidden;
  132. }
  133. .x_rulebox{
  134. width: 55px; height: 55px;
  135. display: block;
  136. position: absolute;
  137. right: -15px;
  138. top: -20px;
  139. background: url(http://game.ikongzhong.cn/games/kuaipao/x_rulebox.png) no-repeat left top;
  140. background-size: 100%;
  141. }
  142. .rulebox h3{
  143. color: #ffff00;
  144. font-size: 18px;
  145. font-weight: normal;
  146. padding: 10px 0;
  147. margin: 0;
  148. }
  149. .rulebox p{
  150. color: #fff;
  151. font-size: 13px;
  152. line-height: 24px;
  153. margin: 0;
  154. }
  155. .daoju_1{
  156. display: inline;
  157. float: left;
  158. width: 40px; height: 40px;
  159. background: url(http://game.ikongzhong.cn/games/kuaipao/daoju_1.png) no-repeat left top;
  160. background-size: 100%;
  161. }
  162. .daoju_2{
  163. display: inline;
  164. float: left;
  165. width: 42px; height: 47px;
  166. background: url(http://game.ikongzhong.cn/games/kuaipao/daoju_2.png) no-repeat left top;
  167. background-size: 100%;
  168. }
  169. .daoju_3{
  170. display: inline;
  171. float: left;
  172. width: 34px; height: 46px;
  173. background: url(http://game.ikongzhong.cn/games/kuaipao/daoju_3.png) no-repeat left top;
  174. background-size: 100%;
  175. }
  176. .daoju_item{
  177. padding: 8px 0
  178. }
  179. .daoju_item p{
  180. line-height: 20px;
  181. padding-left: 50px;
  182. }
  183. @-webkit-keyframes bounceIn {
  184. 0% {
  185. opacity: 0;
  186. -webkit-transform: scale(.3);
  187. transform: scale(.3);
  188. }
  189. 50% {
  190. opacity: 1;
  191. -webkit-transform: scale(1.05);
  192. transform: scale(1.05);
  193. }
  194. 70% {
  195. -webkit-transform: scale(.9);
  196. transform: scale(.9);
  197. }
  198. 100% {
  199. opacity: 1;
  200. -webkit-transform: scale(1);
  201. transform: scale(1);
  202. }
  203. }
  204. @keyframes bounceIn {
  205. 0% {
  206. opacity: 0;
  207. -webkit-transform: scale(.3);
  208. -ms-transform: scale(.3);
  209. transform: scale(.3);
  210. }
  211. 50% {
  212. opacity: 1;
  213. -webkit-transform: scale(1.05);
  214. -ms-transform: scale(1.05);
  215. transform: scale(1.05);
  216. }
  217. 70% {
  218. -webkit-transform: scale(.9);
  219. -ms-transform: scale(.9);
  220. transform: scale(.9);
  221. }
  222. 100% {
  223. opacity: 1;
  224. -webkit-transform: scale(1);
  225. -ms-transform: scale(1);
  226. transform: scale(1);
  227. }
  228. }
  229. .animated {
  230. -webkit-animation-duration: 1s;
  231. animation-duration: 1s;
  232. -webkit-animation-fill-mode: both;
  233. animation-fill-mode: both;
  234. }
  235. .bounceIn {
  236. -webkit-animation-name: bounceIn;
  237. animation-name: bounceIn;
  238. }
  239. @-webkit-keyframes bounceOut {
  240. 0% {
  241. -webkit-transform: scale(1);
  242. transform: scale(1);
  243. }
  244. 25% {
  245. -webkit-transform: scale(.95);
  246. transform: scale(.95);
  247. }
  248. 50% {
  249. opacity: 1;
  250. -webkit-transform: scale(1.1);
  251. transform: scale(1.1);
  252. }
  253. 100% {
  254. opacity: 0;
  255. -webkit-transform: scale(.3);
  256. transform: scale(.3);
  257. }
  258. }
  259. @keyframes bounceOut {
  260. 0% {
  261. -webkit-transform: scale(1);
  262. -ms-transform: scale(1);
  263. transform: scale(1);
  264. }
  265. 25% {
  266. -webkit-transform: scale(.95);
  267. -ms-transform: scale(.95);
  268. transform: scale(.95);
  269. }
  270. 50% {
  271. opacity: 1;
  272. -webkit-transform: scale(1.1);
  273. -ms-transform: scale(1.1);
  274. transform: scale(1.1);
  275. }
  276. 100% {
  277. opacity: 0;
  278. -webkit-transform: scale(.3);
  279. -ms-transform: scale(.3);
  280. transform: scale(.3);
  281. }
  282. }
  283. .bounceOut {
  284. -webkit-animation-name: bounceOut;
  285. animation-name: bounceOut;
  286. }
  287. .opacity{
  288. opacity: 1;
  289. }
  290. .r_index{
  291. z-index: 11;
  292. }
  293. .ruleshadow{
  294. display: none;
  295. }
  296. .daojishi {
  297. position: absolute;
  298. width: 100%;
  299. top: 0;
  300. bottom: 0; display: none;
  301. z-index: 11;
  302. background: url(http://game.ikongzhong.cn/games/kuaipao/daojishu_bg.png) repeat left top;
  303. background-size: 100%;
  304. }
  305. .daojishiline{
  306. width: 100%;
  307. height: 95px;
  308. position: absolute;
  309. top: 109px;
  310. left: 0;
  311. background: #ffe400;
  312. z-index: 1;
  313. }
  314. .daojishibox{
  315. width: 180px;
  316. height: 180px;
  317. position: absolute;
  318. left: 50%; top: 71px;
  319. margin: 0 0 0 -90px;
  320. background: url(http://game.ikongzhong.cn/games/kuaipao/daojishibox.png) no-repeat left top;
  321. background-size: 100%;
  322. z-index: 2;
  323. }
  324. .daojishipangzi {
  325. width: 111px;
  326. height: 102px;
  327. position: absolute;
  328. left: 50%; bottom: 50px;
  329. margin: 0 0 0 -55px;
  330. background: url(http://game.ikongzhong.cn/games/kuaipao/daojishipangzi.png) no-repeat left top;
  331. background-size: 100%;
  332. z-index: -1;
  333. }
  334. .daojishinum{
  335. width: 100%; text-align: center;
  336. font-size: 80px; color: #00a944;
  337. padding: 70px 0 0 0; line-height: normal;
  338. }
  339. .gameend{
  340. position: absolute;
  341. width: 100%;
  342. top: 0; bottom: 0;z-index: 11;
  343. background: #08b134 url(http://game.ikongzhong.cn/games/kuaipao/game_end.jpg) no-repeat center top;
  344. background-size: 100%;
  345. display:none;
  346. }
  347. .game_fenshu {
  348. width: 100%; text-align: center;
  349. padding: 40px 0 0;
  350. font-size: 36px; color: #ffff00;
  351. }
  352. .game_fenshu span {
  353. font-size: 70px;
  354. }
  355. .game_paiming {
  356. color: #ffff00;
  357. font-size: 18px;
  358. text-align: center;
  359. display:none
  360. }
  361. #jiantou{ display: none;}
  362. .game_ogain{
  363. width: 80%;
  364. height: 40px;
  365. border-radius: 5px;
  366. text-align: center;
  367. line-height: 40px;
  368. background: #ffff00;
  369. color: #333;
  370. box-shadow: 0 5px 0px #07942c;
  371. box-shadow: 0 5px 0px rgba(0,0,0,0.17);
  372. position: absolute;
  373. left: 50%; bottom: 92px;
  374. margin: 0 0 0 -40%;
  375. }
  376. .game_chakan{
  377. width: 36%;
  378. height: 40px;
  379. border-radius: 5px;
  380. text-align: center;
  381. line-height: 40px;
  382. background: #0047c5;
  383. color: #fff;
  384. box-shadow: 0 5px 0px #07942c;
  385. box-shadow: 0 5px 0px rgba(0,0,0,0.17);
  386. position: absolute;
  387. left: 10%; bottom: 36px;
  388. }
  389. .game_share{
  390. width: 36%;
  391. height: 40px;
  392. border-radius: 5px;
  393. text-align: center;
  394. line-height: 40px;
  395. background: #f8317c;
  396. color: #fff;
  397. box-shadow: 0 5px 0px #07942c;
  398. box-shadow: 0 5px 0px rgba(0,0,0,0.17);
  399. position: absolute;
  400. right: 10%; bottom: 36px;
  401. }
  402. .IOS .game_ogain{
  403. bottom: 112px;
  404. }
  405. .IOS .game_chakan{
  406. bottom: 56px;
  407. }
  408. .IOS .game_share{
  409. bottom: 56px;
  410. }
  411. .listwarp{
  412. background: #0b9f31;
  413. position: absolute;
  414. top: 0; bottom: 0;
  415. width: 100%;
  416. z-index: 11;
  417. display:none;
  418. }
  419. .listcent{
  420. width:290px;
  421. position: absolute;
  422. left: 50%; top: 15px; bottom: 0;
  423. margin: 0 0 0 -145px;
  424. }
  425. .listtab{
  426. width: 100%;
  427. height: 35px;
  428. }
  429. .listtab li {
  430. width: 50%;
  431. display: inline; float: left;
  432. height: 35px; line-height: 35px;
  433. text-align: center;
  434. color: #fff; font-size: 15px;
  435. }
  436. .listtab li.current{
  437. color: #0b9f31;
  438. background: #d1f8db;
  439. }
  440. .listbox{
  441. overflow: hidden;
  442. display: none;
  443. }
  444. .listbox ul{
  445. margin-top: -1px;
  446. /*background: #d1f8db;*/
  447. }
  448. .show{
  449. display: block;
  450. }
  451. .listbox li {
  452. height: 40px; line-height: 40px;
  453. border-top: 1px solid #fff;
  454. border-bottom: 1px solid #a5ddb3;
  455. }
  456. .listbox li i{
  457. font-size: 16px;
  458. display: inline; float: left;
  459. color: #ff4e00;
  460. font-style: normal;
  461. width: 50px; text-align: center;
  462. padding: 0 5px;
  463. }
  464. .listbox li img{
  465. width: 32px; height: 32px;
  466. display: inline; float: left;
  467. margin: 4px 5px 0;
  468. }
  469. .listbox li strong{
  470. padding: 0 5px;
  471. font-weight: 400;
  472. font-size: 15px;
  473. color: #333;
  474. width: 110px; line-height: 40px; overflow: hidden;
  475. display: inline; float: left;
  476. }
  477. .listbox li span{
  478. color: #0b9f31;
  479. font-size: 18px;
  480. display: inline; float: left;
  481. width: 58px; padding: 0 5px; text-align: left;
  482. }
  483. .listbox li.current{
  484. background: #88e5a0;
  485. border: none;
  486. }
  487. #huojiang_list li img{
  488. margin: 4px 10px 0;
  489. }
  490. #huojiang_list li strong{
  491. width: 110px;
  492. }
  493. #huojiang_list li span{
  494. width: 108px;
  495. }
  496. .guizetxt{
  497. font-size: 13px;
  498. color: #fff; padding: 5px 0; line-height: 20px;
  499. position: absolute;
  500. bottom: 0; width: 100%;
  501. left: 0;
  502. }
  503. .share_1{
  504. width: 40%;
  505. height: 40px;
  506. border-radius: 5px;
  507. text-align: center;
  508. line-height: 40px;
  509. background: #f8317c;
  510. color: #fff;
  511. box-shadow: 0 5px 0px #07942c;
  512. box-shadow: 0 5px 0px rgba(0,0,0,0.17);
  513. position: absolute;
  514. left: 0%; bottom: 36px;
  515. }
  516. .again_1{
  517. width: 40%;
  518. height: 40px;
  519. border-radius: 5px;
  520. text-align: center;
  521. line-height: 40px;
  522. background: #ffff00;
  523. color: #333;
  524. box-shadow: 0 5px 0px #07942c;
  525. box-shadow: 0 5px 0px rgba(0,0,0,0.17);
  526. position: absolute;
  527. right: 0%; bottom: 36px;
  528. }
  529. .IOS .share_1{
  530. bottom: 56px
  531. }
  532. .IOS .again_1{
  533. bottom: 56px
  534. }
  535. .QQloading{
  536. width: 46px; height: 46px;
  537. position: absolute;
  538. left: 50%; top: 50%;
  539. margin: -23px 0 0 -23px;display:inline-block;
  540. background-position: left top;
  541. }
  542. .QQloading,.QQloading i{
  543. background-image:url(http://game.ikongzhong.cn/games/kuaipao/loading.png);
  544. background-repeat:no-repeat;display:inline-block;
  545. -webkit-background-size:92px 46px;
  546. -moz-background-size:92px 46px;
  547. -o-background-size:92px 46px;
  548. background-size:92px 46px;
  549. }
  550. .QQloading i {
  551. width: 46px; height: 46px;
  552. background-position: right top;
  553. -webkit-animation-name: rotateRight;
  554. -webkit-animation-duration:2s;
  555. -webkit-animation-iteration-count:infinite;
  556. -webkit-animation-timing-function:linear;
  557. }
  558. @-webkit-keyframes rotateRight {
  559. from {-webkit-transform:rotate(360deg);}
  560. to {-webkit-transform:rotate(0deg);}
  561. }
  562. .listbox li .QQloading i{
  563. width: 46px;
  564. padding: 0;
  565. float: none;
  566. display: block;
  567. }
  568. .listinner{
  569. position: absolute;
  570. top: 35px; bottom: 80px;
  571. width: 100%;
  572. }
  573. #paihang_list,#huojiang_list{
  574. position: absolute;
  575. overflow: hidden;
  576. top: 0; bottom: 50px;
  577. width: 100%;
  578. background: #d1f8db;
  579. }
  580. .scroll{
  581. position: absolute;
  582. width: 100%;
  583. }
  584. .weblogin{
  585. width: 100%; height: 100%;
  586. position: absolute;
  587. min-height: 400px;
  588. top: 0; bottom: 0;
  589. display: none;
  590. z-index: 15;
  591. }
  592. .weblogin span {
  593. position: absolute;
  594. right: 10px; top: 10px;
  595. color: #246183;
  596. }
  597. .weixin_layer{
  598. display: none;
  599. position: absolute;
  600. top: 0;
  601. left: 0;
  602. bottom: 0;
  603. width: 100%;
  604. height: 100%;
  605. background: url(http://game.ikongzhong.cn/games/kuaipao/weinxin_share.png) no-repeat right top rgba(0, 0, 0, 0.6);
  606. -webkit-background-size:320px 150px;
  607. -moz-background-size: 320px 150px;
  608. -o-background-size: 320px 150px;
  609. background-size: 320px 150px;
  610. z-index: 999999;
  611. }
  612. .sharebox{
  613. background: #f6f6f6;
  614. height: 132px; overflow: hidden;
  615. width: 100%;
  616. position: absolute;
  617. top: -132px;
  618. /*display: none;*/
  619. z-index: 13;
  620. }
  621. .sharebox ul{
  622. height: 33px;
  623. padding: 30px 0;
  624. width: 160px;
  625. margin: 0 auto; overflow: hidden;
  626. text-align:center;
  627. }
  628. .sharebox ul li {
  629. /*display: inline; float: left;*/
  630. display:inline-block;
  631. width: 33px; height: 33px; overflow: hidden;
  632. margin: 0 10px;
  633. background: url(http://game.ikongzhong.cn/games/kuaipao/sheraicon.png);
  634. background-repeat: no-repeat;
  635. -webkit-background-size: 165px 33px;
  636. -moz-background-size: 165px 33px;
  637. -o-background-size: 165px 33px;
  638. background-size: 165px 33px;
  639. }
  640. .sharebox p {
  641. width: 100%; font-size: 14px;
  642. height:38px; line-height:38px;
  643. border-top:solid 1px #c2c2c2;
  644. background:#dadada;
  645. text-align:center;
  646. color: #333;
  647. }
  648. .sharebox ul li.sharet {
  649. background-position: 0 0;
  650. }
  651. .sharebox ul li.shareqzone {
  652. background-position: -33px 0;
  653. }
  654. .sharebox ul li.sharewb {
  655. background-position: -66px 0;
  656. }
  657. .chenghao {
  658. width: 100%;
  659. position: absolute;
  660. left: 0;
  661. bottom: 172px;
  662. font-size: 18px;
  663. text-align: center;
  664. color: #ffff00;
  665. text-shadow:0 0 5px rgba(0,0,0,0.8);
  666. }
  667. .chenghao p {
  668. font-size: 32px;
  669. text-align: center;
  670. }
  671. .IOS .chenghao{
  672. bottom: 192px;
  673. }
  674. .control{
  675. width: 110px; height: 110px;
  676. background: url(http://game.ikongzhong.cn/games/kuaipao/img_contorl.png) no-repeat left top;
  677. background-size: 100%;
  678. position: absolute;
  679. bottom: 0; left: 50%;
  680. margin-left: -55px;
  681. z-index: 999;
  682. display: none;
  683. }
  684. .control div{
  685. display: inline-block;
  686. position: absolute;
  687. }
  688. .control .top{
  689. width: 33px; height: 39px;
  690. top: 0; left:50%;margin: 0 0 0 -16px;
  691. }
  692. .control .right{
  693. width: 39px; height: 33px;
  694. right: 0; top:50%; margin: -16px 0 0 0;
  695. }
  696. .control .bottom{
  697. width: 33px; height: 39px;
  698. bottom: 0; left:50%;margin: 0 0 0 -16px;
  699. }
  700. .control .left{
  701. width: 39px; height: 33px;
  702. left: 0; top:50%; margin: -16px 0 0 0;
  703. }
  704. #interface {display: none; position: relative; z-index: 2;}
  705. #interface .life {position: absolute; right: 5px; top: 15px; font: 900 24px/36px '微软雅黑'; text-indent: 45px; background: url(http://game.ikongzhong.cn/games/kuaipao/life_s.png) no-repeat; color:
  706. #ffea00; z-index:11;}
  707. #gamescore {font:900 15px/20px '微软雅黑'; color:#FF0; text-align: center; margin-top:30%;display:none}
  708. #gamescore span {display: block; font-size:40px; line-height: 60px !important;}
  709. #cr-stage{
  710. position: absolute;
  711. top: 50%;
  712. left: 50%;
  713. margin: -240px 0 0 -160px;
  714. }
  715. .zhiyin {
  716. position: absolute;
  717. display: none;
  718. width: 100%;
  719. top: 0;
  720. bottom: 0;
  721. z-index: 11;
  722. background: #03250c url(http://game.ikongzhong.cn/games/kuaipao/zhiyin_m.png) no-repeat left top;
  723. background-size: 100%;
  724. }
  725. .gameoverbox{
  726. width:320px;
  727. height:85px;
  728. background:url(http://game.ikongzhong.cn/games/kuaipao/gameover.png) no-repeat center center;
  729. position:absolute;
  730. left:50%;
  731. top:50%;
  732. background-size:100%;
  733. margin: -42px 0 0 -160px;
  734. display:none;
  735. z-index:13;
  736. }
  737. .fenshubox{
  738. position: absolute;
  739. width:100%;
  740. top:50px;
  741. left:0;
  742. z-index:13;
  743. display: none;
  744. }
  745. .fenshubox h3{
  746. text-align:center;
  747. font-size: 15px;
  748. color: #ffff00;
  749. }
  750. .fenshubox p{
  751. text-align:center;
  752. font-size: 48px;
  753. color: #ffff00;
  754. }
  755. .listtab li.hide,.hide{
  756. display:none;
  757. }
  758. </style>
  759. </head>
  760. <body>
  761. <!-- 游戏启动界面/S -->
  762. <div id="gamestart" style="">
  763. <img src="http://game.ikongzhong.cn/games/kuaipao/game_start.jpg" class="start_bg" style="top: 0px; ">
  764. <div class="btn rule" id="_gamerule">查看规则</div>
  765. <div class="btn start" id="_gamestart">开始游戏</div>
  766. <div class="athour">
  767. <span>game.ikongzhong.cn</span>
  768. </div>
  769. <div class="ruleshadow"></div>
  770. <div class="rulebox">
  771. <span class="x_rulebox"></span>
  772. <h3>操作方法:</h3>
  773. <p>手指拖动控制人物带球奔跑的方向和速度。</p>
  774. <h3>道具说明:</h3>
  775. <div class="daoju">
  776. <div class="daoju_item">
  777. <span class="daoju_1"></span>
  778. <p>每收集一个,生命值+1;触碰障碍物,生命可再复活。</p>
  779. </div>
  780. <div class="daoju_item">
  781. <span class="daoju_2"></span>
  782. <p>每收集一个,能力值+1;扫除面前一切障碍,加速前进。</p>
  783. </div>
  784. <div class="daoju_item">
  785. <span class="daoju_3"></span>
  786. <p>触碰锥桶,生命值-1;成功绕过一次分数+1。</p>
  787. </div>
  788. </div>
  789. </div>
  790. </div>
  791. <!-- 游戏启动界面/E -->
  792. <!--规则说明/S-->
  793. <div class="zhiyin">
  794. <div class="btn start" id="_gamestart2">继续游戏</div>
  795. </div>
  796. <!--规则说明/E-->
  797. <!-- 倒计时/S -->
  798. <div class="daojishi">
  799. <div class="daojishiline"></div>
  800. <div class="daojishibox">
  801. <div class="daojishinum">3</div>
  802. </div>
  803. <div class="daojishipangzi"></div>
  804. </div>
  805. <!-- 倒计时/E -->
  806. <div class="gameoverbox"></div>
  807. <!-- 游戏结束/S -->
  808. <div class="gameend">
  809. <div class="game_fenshu">
  810. <span></span>分
  811. </div>
  812. <div class="chenghao">恭喜你获得称号<p></p></div>
  813. <div class="game_ogain" id="game_ogain" onClick="document.location.reload();">再次游戏</div>
  814. <div class="game_chakan" onClick="document.location.href = 'http://game.ikongzhong.cn'">更多游戏</div>
  815. <div class="game_share" onClick="share();">分享战绩</div>
  816. </div>
  817. <div class="weixin_layer"></div>
  818. <div class="sharebox">
  819. <ul>
  820. <li class="sharet"></li>
  821. <li class="sharewb"></li>
  822. </ul>
  823. <p>取消</p>
  824. </div>
  825. <div class="control">
  826. <div class="top"></div>
  827. <div class="right"></div>
  828. <div class="bottom"></div>
  829. <div class="left"></div>
  830. </div>
  831. <div class="fenshubox" id="fenshubox">
  832. <h3>当前得分</h3>
  833. <p></p>
  834. </div>
  835. <div id="cr-stage" style="width: 320px; height: 480px; overflow: hidden; position: relative; ">
  836. <div id="interface"><div class="life"></div></div>
  837. <div id="gamescore">本次得分<span>0</span></div>
  838. <div id="gametest"></div>
  839. <div style="position: absolute; z-index: 10; -webkit-transform: scale(1, 1); left: 0px; top: 0px; "></div><canvas width="320" height="480" style="position: absolute; left: 0px; top: 0px; z-index: 10; "></canvas></div>
  840. <script>
  841. document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
  842. WeixinJSBridge.call('showOptionMenu');
  843. });
  844. new Image().src = '/game/action.php?id=15';
  845. var path = 'http://2014.qq.com/ola' // 域名
  846. var game_path = 'http://game.ikongzhong.cn/games/kuaipao/'; // 游戏载入路径
  847. Crafty.config = {
  848. speed: 6, // 移动速度
  849. score: 0, // 初始化分数
  850. level: 0, // 关卡数
  851. addemeny: true, // 障碍开关
  852. supertime: 0, // 无敌距离(可连续增加)
  853. acceleration:1.9, // 加速度
  854. gamestart: false // 游戏是否已经开始
  855. }
  856. $(function() {
  857. $.map(['_olagame','_olaviewW','_olaviewH'],function(n){
  858. if(window[n]){
  859. Crafty.GameError = true;
  860. return false;
  861. }
  862. })
  863. if(!Crafty.GameError){
  864. window._olagame = null;
  865. window._olaviewW = 320;
  866. window._olaviewH = 480;
  867. Crafty.init(window._olaviewW, window._olaviewH);
  868. Crafty.canvas.init();
  869. Crafty.canvas._canvas.style.zIndex = '10';
  870. Crafty.scene("Loading");
  871. }
  872. });
  873. Crafty.extend({
  874. startScore: function(){
  875. // 坚持1秒得5分
  876. window._olagame = setInterval(function(){
  877. Crafty.config.score ++;
  878. $("#gamescore span").text(Crafty.config.score);
  879. },200);
  880. },
  881. stopScore: function(){
  882. clearInterval(window._olagame);
  883. }
  884. })
  885. Crafty.c("Player", {
  886. hp: {
  887. current: 3, // 初始3条生命
  888. max: 5 // 最多3条生命
  889. },
  890. movementSpeed: Crafty.config.speed + Math.ceil(Crafty.config.level / 2),
  891. super: false,
  892. archer: false,
  893. lives: 3,
  894. ship: "Qiuyuan",
  895. supership: "Qiuyuan_Super_Pic",
  896. shootship: "Qiuyuan_Shoot_Pic",
  897. collisionship: "Qiuyuan_Collision_Pic",
  898. init: function() {
  899. var stage = $('#cr-stage');
  900. this.requires("2D,DOM,SpriteAnimation,"+this.ship+",Multiway,Keyboard,Tween,Collision")
  901. .attr({
  902. x: Crafty.viewport.width/2-this.w/2,
  903. y: Crafty.viewport.height - this.h - 35,
  904. z:9,
  905. dynamic: true
  906. })
  907. .collision(new Crafty.polygon([13,58],[27,58],[33,69],[40,69],[43,47],[33,23],[54,9],[77,14],[77,42],[81,67],[83,74],[65,84],[33,72],[24,85],[12,85],[4,70]))
  908. .reel('PlayerMovingLeft', 450, [[0,0],[0,1],[0,2],[0,3]])
  909. .reel('PlayerMovingRight', 450, [[1,0],[1,1],[1,2],[1,3]])
  910. .animate('PlayerMovingLeft', -1)
  911. .multiway(this.movementSpeed, {UP_ARROW: -90, DOWN_ARROW: 90, RIGHT_ARROW: 0, LEFT_ARROW: 180}); // 角度
  912. this.bind('Moved',function(from) {
  913. if(this.x+this.w > Crafty.viewport.width ||
  914. this.x+this.w < this.w ||
  915. this.y+this.h-15 < this.h ||
  916. this.y+this.h+15 > Crafty.viewport.height){
  917. this.attr({
  918. x:from.x,
  919. y:from.y
  920. });
  921. }
  922. }).bind("KeyDown",function(e){
  923. if(this.has(this.shootship)){
  924. if(e.keyCode == 38 || e.keyCode == 32){
  925. var ball = Crafty('Ball');
  926. ball.animate("Running",-1);
  927. ball.shooting = true;
  928. return false;
  929. }
  930. }
  931. }).bind("EnterFrame",function(frame) {
  932. // 当发现草皮停止滚动的时候
  933. // 认为球员到达球门前,准备开始射门
  934. if(Crafty.config.GoalBackGround && this.archer){
  935. if(!this.has(this.shootship)){
  936. this.initArcher();
  937. }
  938. }
  939. // 实时更新血量
  940. Crafty.trigger("UpdateStats", this.hp);
  941. }).bind("Interaction",function(e) {
  942. if(this.has(this.shootship)){
  943. if(e.keyCode == 38 || e.keyCode == 32){
  944. var ball = Crafty('Ball');
  945. ball.animate("Running",-1);
  946. ball.shooting = true;
  947. return false;
  948. }
  949. }
  950. }).bind("Hurt",function(that) {
  951. var self = this;
  952. // 销毁一切触碰的障碍物
  953. that.destroy();
  954. if (that.gettype() == 'jersey') {
  955. if (this.hp.current < this.hp.max && this.hp.current >= 0) {
  956. this.hp.current++;
  957. }
  958. } else if (that.gettype() == 'broom' && !this.super) {
  959. this.toggleComponent(this.ship, this.supership);
  960. this.css("background","url('"+game_path+"QiuyuanSuper.png')")
  961. Crafty.config.backtime = Crafty.config.acceleration;
  962. Crafty.config.acceleration = 10;
  963. this.super = true;
  964. window._olatimerout = setTimeout(function(){
  965. Crafty.config.acceleration = Crafty.config.backtime;
  966. self.toggleComponent(self.ship, self.supership);
  967. self.css("background","url('"+game_path+"Qiuyuan.png')");
  968. Crafty.config.backtime = undefined;
  969. self.super = false;
  970. },3000);
  971. } else if (that.gettype() == 'pile' && !this.super) {
  972. var that = this;
  973. that.hp.current--;
  974. if(that.has(that.ship)){
  975. that.toggleComponent(that.ship, that.collisionship);
  976. that.css("background","url('"+game_path+"QiuyuanCollision.png')")
  977. }
  978. setTimeout(function(){
  979. if(that.has(that.collisionship)){
  980. that.toggleComponent(that.collisionship, that.ship);
  981. that.css("background","url('"+game_path+"Qiuyuan.png')")
  982. }
  983. },618)
  984. }
  985. if (this.hp.current <= 0) {
  986. Crafty.trigger("UpdateStats", this.hp);
  987. this.die();
  988. }
  989. })
  990. return this;
  991. },
  992. // 射手
  993. initArcher: function(){
  994. var that = this,
  995. ball;
  996. if(Crafty.config.GoalBackGround){
  997. this.addComponent(this.shootship);
  998. this.css("background","url('"+game_path+"QiuyuanShooting.png')")
  999. this.pauseAnimation();
  1000. ball = Crafty.e('Ball');
  1001. ball.attr({
  1002. x:that.x + that.w/2 - ball.w/2,
  1003. y:that.y - ball.h/2,
  1004. z:3
  1005. })
  1006. .bind("EnterFrame",function(){
  1007. this.x = that.x + that.w/2 - ball.w/2;
  1008. });
  1009. }
  1010. },
  1011. die: function() {
  1012. Crafty.stopScore();
  1013. Crafty.pause(true);
  1014. Crafty.trigger('GameOver', Crafty.config.score);
  1015. }
  1016. });
  1017. Crafty.c("Gameover",{
  1018. init: function(){
  1019. this.requires("2D,DOM,Image").attr({x: 0, y: window._olaviewH * 0.382, z: 9}).image(game_path+"Gameover.png", "no-repeat");
  1020. }
  1021. });
  1022. Crafty.c("Enemy", {
  1023. init: function() {
  1024. var player = Crafty("Player");
  1025. //所必须的模块
  1026. this.requires("2D,DOM,Collision")
  1027. //超出视窗的时候则销毁
  1028. .bind("EnterFrame",function() {
  1029. if (this.x > Crafty.viewport.width + this.w || this.x < -this.w || this.y < -this.h || this.y > Crafty.viewport.height + this.h) {
  1030. this.destroy();
  1031. }
  1032. }).onHit("Player",function(ent) {
  1033. Crafty(player[0]).trigger("Hurt", this);
  1034. });
  1035. },
  1036. gettype: function() {
  1037. return this.type;
  1038. }
  1039. });
  1040. // 球桩可以阻碍球员前进,触碰到球员会闪动
  1041. Crafty.c("Pile", {
  1042. type: "pile",
  1043. init: function() {
  1044. this.requires("Enemy,Pile_pic").attr({
  1045. y: -this.h,
  1046. x: Crafty.math.randomInt(this.w, Crafty.viewport.width - this.w),
  1047. dynamic: true
  1048. })
  1049. .collision(new Crafty.polygon([0,39], [16, 0], [33, 39]))
  1050. .bind("EnterFrame",function() {
  1051. this.y += 2 * Crafty.config.acceleration;
  1052. });
  1053. }
  1054. });
  1055. // 会主动攻击球员的球桩,跟随球员轨迹移动
  1056. Crafty.c("Pile_attack", {
  1057. type: "pile",
  1058. init: function() {
  1059. var player = Crafty("Player");
  1060. this.requires("Enemy,Pile_pic").attr({
  1061. y: -this.h,
  1062. x: player.x,
  1063. dynamic: true
  1064. }).bind("EnterFrame",function() {
  1065. player = Crafty(player[0]);
  1066. if (this.y < 0) {
  1067. this.y++;
  1068. }
  1069. if (this.x < player.x) {
  1070. this.x++;
  1071. }
  1072. if (this.x > player.x) {
  1073. this.x--;
  1074. }
  1075. this.y += 4 * Crafty.config.acceleration;
  1076. });
  1077. }
  1078. });
  1079. // 球衣能让用户再增加一条生命
  1080. Crafty.c("Jersey", {
  1081. type: "jersey",
  1082. init: function() {
  1083. var player = Crafty("Player");
  1084. this.requires("Enemy,Jersey_pic").attr({
  1085. y: -this.h,
  1086. x: Crafty.math.randomInt(0, Crafty.viewport.width - this.w),
  1087. dynamic: true
  1088. }).bind("EnterFrame",function() {
  1089. this.y += 8;
  1090. });
  1091. }
  1092. });
  1093. // 扫把可以在300帧内让球员无敌
  1094. Crafty.c("Broom", {
  1095. type: "broom",
  1096. init: function() {
  1097. var player = Crafty("Player");
  1098. this.requires("Enemy,Broom_pic").attr({
  1099. y: -this.h,
  1100. x: Crafty.math.randomInt(0, Crafty.viewport.width - this.w),
  1101. dynamic: true
  1102. }).bind("EnterFrame",function() {
  1103. this.y += 12;
  1104. });
  1105. }
  1106. });
  1107. // 球门线1
  1108. Crafty.c("Line",{
  1109. init: function() {
  1110. this.requires("2D, DOM, Line_pic")
  1111. .attr({
  1112. x: 0,
  1113. y: -this.h - 150
  1114. })
  1115. .bind("EnterFrame",function() {
  1116. if(this.y < Crafty.viewport.height + this.h - 150){
  1117. this.y += 1 * Crafty.config.acceleration;
  1118. }
  1119. });
  1120. }
  1121. });
  1122. // 球门线2
  1123. Crafty.c("Line2",{
  1124. init: function() {
  1125. this.requires("2D, DOM, Line2_pic")
  1126. .attr({
  1127. x: 0,
  1128. y: -this.h
  1129. })
  1130. .bind("EnterFrame",function() {
  1131. if(this.y < Crafty.viewport.height - this.h){
  1132. this.y += 1 * Crafty.config.acceleration;
  1133. }else{
  1134. if(!Crafty.config.GoalBackGround){
  1135. // 球门线到底的时候,停止草皮滚动
  1136. Crafty.config.GoalBackGround = true;
  1137. }
  1138. }
  1139. });
  1140. }
  1141. });
  1142. // 球门背景
  1143. Crafty.c("GoalBackGround",{
  1144. init: function() {
  1145. this.requires("2D, DOM, Collision, GoalBackGround_pic")
  1146. .attr({
  1147. x: 0,
  1148. y: - Crafty.viewport.height - 20,
  1149. z:2
  1150. })
  1151. .bind("EnterFrame",function() {
  1152. if(this.y < - 14){
  1153. this.y += 1 * Crafty.config.acceleration;
  1154. }else{
  1155. this.y = -14;
  1156. }
  1157. }).onHit("Ball",function() {
  1158. Crafty("Ball").trigger("Hurt", this);
  1159. });;
  1160. }
  1161. });
  1162. // 球门
  1163. Crafty.c("Goal",{
  1164. type: "Goal",
  1165. init: function() {
  1166. this.requires("2D, DOM, Collision, Goal_pic")
  1167. .attr({
  1168. x: Crafty.viewport.width/2-this.w/2,
  1169. y: - Crafty.viewport.height + 16,
  1170. z:3
  1171. })
  1172. .bind("EnterFrame",function() {
  1173. if(this.y < 16){
  1174. this.y += 1 * Crafty.config.acceleration;
  1175. }else{
  1176. this.y = 16;
  1177. }
  1178. })
  1179. .collision(new Crafty.polygon([30,110],[30,21],[228,21],[228,110]))
  1180. .onHit("Ball",function() {
  1181. Crafty("Ball").trigger("Hurt", this);
  1182. });
  1183. }
  1184. });
  1185. // 守门员
  1186. Crafty.c("Goalkeeper",{
  1187. type:"Goalkeeper",
  1188. turnleft: true,
  1189. runing: false,
  1190. init: function() {
  1191. var ball = Crafty("Ball");
  1192. this.requires("2D, DOM, SpriteAnimation, Collision, Goalkeeper_pic")
  1193. .attr({
  1194. x: Crafty.viewport.width/2-this.w/2,
  1195. y: - Crafty.viewport.height + 65,
  1196. z:4
  1197. })
  1198. .reel('Running', 600, [[0, 0], [1, 0]]) // setup animation
  1199. .bind("EnterFrame",function() {
  1200. if(this.y < 65){
  1201. this.y += 1 * Crafty.config.acceleration;
  1202. }else{
  1203. this.y = 65;
  1204. if(!this.runing){
  1205. this.runing = true;
  1206. this.animate('Running', -1)
  1207. }
  1208. var _half_w = (Crafty.viewport.width - Crafty("Goal").w) / 2;
  1209. if(this.turnleft){
  1210. if(this.x > (_half_w + 5)){
  1211. this.x -= 2 * Crafty.config.acceleration;
  1212. }else{
  1213. this.turnleft = false;
  1214. this.x = _half_w + 5;
  1215. }
  1216. }else{
  1217. if(this.x < (_half_w + Crafty("Goal").w - this.w - 5)){
  1218. this.x += 2 * Crafty.config.acceleration;
  1219. }else{
  1220. this.turnleft = true;
  1221. this.x = _half_w + Crafty("Goal").w - this.w - 5;
  1222. }
  1223. }
  1224. }
  1225. }).onHit("Ball",function(ent) {
  1226. Crafty("Ball").trigger("Hurt", this);
  1227. });
  1228. }
  1229. });
  1230. // 足球
  1231. Crafty.c("Ball",{
  1232. type: "ball",
  1233. shooting: false,
  1234. init: function() {
  1235. this.requires("2D, DOM, SpriteAnimation, Collision, Ball_pic")
  1236. .reel('Running', 200, [[0, 0], [1, 0]])
  1237. .bind("EnterFrame",function() {
  1238. if(this.shooting){
  1239. this.y -= window._olaviewH / 20;
  1240. if(this.y >= Crafty.viewport.height){
  1241. //this.destroy();
  1242. }
  1243. }
  1244. })
  1245. .bind("Hurt", function(that){
  1246. this.destroy();
  1247. if(that.type == "Goal"){
  1248. // console.log('命中球门');
  1249. Crafty.config.score += 3;
  1250. setPoints()
  1251. }else{
  1252. if(--(Crafty("Player").hp.current) <= 0){
  1253. Crafty("Player").die();
  1254. }else{
  1255. Crafty.config.score += 1;
  1256. setPoints()
  1257. }
  1258. }
  1259. })
  1260. }
  1261. });
  1262. // 球员
  1263. Crafty.sprite(92.5, 92.5, game_path + "Qiuyuan.png", {
  1264. Qiuyuan: [0, 0]
  1265. });
  1266. // 球员变身超人
  1267. Crafty.sprite(92.5, 92.5, game_path + "QiuyuanSuper.png", {
  1268. Qiuyuan_Super_Pic: [0, 0]
  1269. });
  1270. // 球员变身射手
  1271. Crafty.sprite(74, 80, game_path + "QiuyuanShooting.png", {
  1272. Qiuyuan_Shoot_Pic: [0, 0],
  1273. });
  1274. // 球员被撞击
  1275. Crafty.sprite(92.5, 92.5, game_path + "QiuyuanCollision.png", {
  1276. Qiuyuan_Collision_Pic: [0, 0],
  1277. });
  1278. // 木桩
  1279. Crafty.sprite(34, 47, game_path + "Pile.png", {
  1280. Pile_pic: [0, 0]
  1281. });
  1282. // 球衣
  1283. Crafty.sprite(79, 79, game_path + "Jersey.png", {
  1284. Jersey_pic: [0, 0]
  1285. });
  1286. // 扫把
  1287. Crafty.sprite(151, 150, game_path + "Broom.png", {
  1288. Broom_pic: [0, 0]
  1289. });
  1290. // 球门线1
  1291. Crafty.sprite(320, 1, game_path + "Line.png", {
  1292. Line_pic: [0, 0]
  1293. });
  1294. // 球门线2
  1295. Crafty.sprite(320, 42, game_path + "Line2.png", {
  1296. Line2_pic: [0, 0]
  1297. });
  1298. // 球门
  1299. Crafty.sprite(216, 96, game_path + "Goal.png", {
  1300. Goal_pic: [0, 0]
  1301. });
  1302. // 球门背景
  1303. Crafty.sprite(320, 103, game_path + "GoalBackGround.png", {
  1304. GoalBackGround_pic: [0, 0]
  1305. });
  1306. // 守门员
  1307. Crafty.sprite(55, 56, game_path + "Goalkeeper.png", {
  1308. Goalkeeper_pic: [0, 0]
  1309. });
  1310. // 足球
  1311. Crafty.sprite(31, 31, game_path + "Ball.png", {
  1312. Ball_pic: [0, 0]
  1313. });
  1314. // 游戏加载
  1315. Crafty.scene("Loading",function() {
  1316. var toLoad = [
  1317. game_path + "Caopi.png",
  1318. game_path + "Qiuyuan.png",
  1319. game_path + "QiuyuanSuper.png",
  1320. game_path + "QiuyuanCollision.png",
  1321. game_path + "QiuyuanShooting.png",
  1322. game_path + "Pile.png",
  1323. game_path + "Jersey.png",
  1324. game_path + "Broom.png",
  1325. game_path + "Goalkeeper.png",
  1326. game_path + "Goal.png",
  1327. game_path + "Ball.png",
  1328. game_path + "Line.png",
  1329. game_path + "Line2.png",
  1330. game_path + "GoalBackGround.png",
  1331. game_path + "Gameover.png"
  1332. ];
  1333. var ola_denglu = $(".ola_denglu");
  1334. var button = $('#_gamestart'),
  1335. curtain = $('#gamestart'),
  1336. getrule = $('#_gamerule'),
  1337. load = $('#_gameload'),
  1338. begin =$("#_gamestart2"),
  1339. guide = $('.zhiyin');
  1340. $("#gamestart").show();
  1341. $(".game_ogain").click(function(){
  1342. window.location.reload();
  1343. })
  1344. $(".again_1").click(function(){
  1345. window.location.reload();
  1346. })
  1347. getrule.on('click',function() { // 查看游戏规则
  1348. // 规则弹出窗口动画
  1349. $(".ruleshadow").show();
  1350. $(".rulebox").addClass("bounceIn animated r_index");
  1351. setTimeout(function(){
  1352. $(".rulebox").addClass("opacity").removeClass("bounceIn animated")
  1353. },800)
  1354. // 关闭弹出窗口动画
  1355. $(".x_rulebox").click(function(){
  1356. $(".rulebox").addClass("bounceOut animated");
  1357. setTimeout(function(){
  1358. $(".ruleshadow").hide();
  1359. $(".rulebox").removeClass("opacity bounceOut animated r_index")
  1360. },800)
  1361. });
  1362. })
  1363. Crafty.load(toLoad, function() {
  1364. load.remove();
  1365. button.on('click', function(){
  1366. curtain.hide();
  1367. guide.show(0,function(){
  1368. begin.on('click', function() {
  1369. var begintime,num = 3;
  1370. guide.hide();
  1371. $(".daojishi").show();
  1372. $(".daojishinum").text(num);
  1373. begintime = setInterval(function(){
  1374. if(num <= 1){
  1375. clearInterval(begintime);
  1376. $(".daojishi,.zhiyin").remove(); //删掉倒计时
  1377. setPoints();
  1378. }else{
  1379. $(".daojishinum").text(--num);
  1380. }
  1381. },1000);
  1382. });
  1383. });
  1384. });
  1385. },function(e) {
  1386. var src = e.src ||"";
  1387. load.find("span").text(~~e.percent+"%");
  1388. },function(e) {
  1389. load.text("游戏加载失败,请刷新页面重试");
  1390. });
  1391. },function() {
  1392. $('#loading').hide();
  1393. });
  1394. function setPoints(x,y){
  1395. var backgroundBg,
  1396. backgroundBg = "url(" + game_path + "Caopi.png)",
  1397. levelname = "Level"+ (++Crafty.config.level),
  1398. player;
  1399. _oldPlayer = Crafty("Player");
  1400. Crafty.config.gamestart = true;
  1401. $("#gamescore").show();
  1402. Crafty.defineScene(levelname,function() {
  1403. //Setup background of level
  1404. Crafty.background(backgroundBg);
  1405. //Bind Gameloop to the Scene
  1406. Crafty.unbind("EnterFrame");
  1407. Crafty.bind("EnterFrame",function(frame) {
  1408. // 奇数关卡的设置
  1409. if(Crafty.config.level % 2 != 0){
  1410. $('#cr-stage .life').show();
  1411. spotObject(frame.frame);
  1412. }else{
  1413. $('#cr-stage .life').hide();
  1414. }
  1415. Crafty.trigger("setBackGround", frame.frame);
  1416. })
  1417. if(Crafty.config.level % 2 != 0){
  1418. Crafty.startScore();
  1419. Crafty.config.addemeny = true;
  1420. player = Crafty.e("Player");
  1421. Crafty("Player").archer = false;
  1422. // 奇数关卡跑动时,加速度+0.5
  1423. Crafty.config.acceleration += 0.5;
  1424. Crafty.config.GoalBackGround = false;
  1425. $('#interface,#gamescore').fadeIn();
  1426. }else{
  1427. player = Crafty.e("Player");
  1428. player.attr({
  1429. x:_oldPlayer.x,
  1430. y:_oldPlayer.y
  1431. }).tween({
  1432. x: Crafty.viewport.width/2 - player.w/2,
  1433. y: Crafty.viewport.height - player.h - 35
  1434. }, 600)
  1435. player.archer = true;
  1436. player.addComponent("Twoway");
  1437. player.twoway(player.movementSpeed);
  1438. var line1 = Crafty.e("Line");
  1439. var line2 = Crafty.e("Line2");
  1440. var goalkeeper = Crafty.e("Goalkeeper");
  1441. var goal = Crafty.e("Goal");
  1442. var goalbg = Crafty.e("GoalBackGround");
  1443. $('#interface,#gamescore').fadeOut();
  1444. }
  1445. });
  1446. //_oldPlayer = undefined;
  1447. Crafty.config.changeing = false;
  1448. Crafty.enterScene(levelname);
  1449. }
  1450. Crafty.config.changeing = false;
  1451. // 变更射门关卡
  1452. function changeScene(){
  1453. Crafty.stopScore();
  1454. Crafty.config.changeing = true;
  1455. Crafty.config.addemeny = false;
  1456. if(Crafty("Player").super){
  1457. Crafty.config.acceleration = Crafty.config.backtime;
  1458. Crafty("Player").toggleComponent(Crafty("Player").ship, Crafty("Player").supership);
  1459. Crafty("Player").css("background","url('"+game_path+"Qiuyuan.png')");
  1460. Crafty.config.backtime = undefined;
  1461. Crafty("Player").super = false;
  1462. clearTimeout(window._olatimerout);
  1463. }
  1464. if(Crafty("Jersey").length <= 0 && Crafty("Pile").length <= 0 && Crafty("Pile_attack").length <= 0 && Crafty("Broom").length <= 0){
  1465. setPoints();
  1466. }else{
  1467. // 通过计算障碍物的数量,保证人物到球门前没有任何障碍物
  1468. clearTimeout(Crafty.config.changeing)
  1469. Crafty.config.changeing = setTimeout(function(){
  1470. changeScene();
  1471. },50)
  1472. }
  1473. }
  1474. // 活动障碍物对象
  1475. function spotObject(frame) {
  1476. if(Crafty.config.score % 200 == 0 && Crafty.config.score != 0 && !Crafty.config.changeing){
  1477. changeScene();
  1478. return false;
  1479. }
  1480. if(Crafty.config.addemeny){
  1481. if (frame % (38 * Math.ceil(Crafty.config.level / 2)) == 0 && Crafty("Jersey").length < 1) {
  1482. Crafty.e("Jersey");
  1483. }
  1484. if (frame % Math.floor(61 / Math.ceil(Crafty.config.level / 2)) == 0 && Crafty("Pile").length < Crafty.config.level) {
  1485. Crafty.e("Pile");
  1486. }
  1487. if (frame % Math.floor(122 / Math.ceil(Crafty.config.level / 2)) == 0 && Crafty("Pile_attack").length < Crafty.config.level && Crafty.config.acceleration > 7) {
  1488. Crafty.e("Pile_attack");
  1489. }
  1490. if (frame % Math.floor(800 / Math.ceil(Crafty.config.level / 2)) == 0 && Crafty("Broom").length < 1 && Crafty.config.acceleration > 5) {
  1491. Crafty.e("Broom");
  1492. }
  1493. }
  1494. };
  1495. Crafty.bind("setBackGround",function(frame) {
  1496. if(!Crafty.config.GoalBackGround){
  1497. Crafty.stage.elem.style.backgroundPosition = "0px " + frame * Crafty.config.acceleration + "px";
  1498. }
  1499. })
  1500. Crafty.bind("UpdateStats",function(player) {
  1501. $('#cr-stage .life').text(player.current);
  1502. });
  1503. // 游戏结束场景
  1504. Crafty.bind("GameOver",function(score) {
  1505. Crafty.e("Gameover");
  1506. Crafty.config.gamestart = false;
  1507. setTimeout(function(){
  1508. $(".gameend").show();
  1509. $(".game_fenshu span").text(score)
  1510. $('.chenghao p').text(window.ola_title(score))
  1511. $(".fenshubox").hide();
  1512. $(".gameoverbox").hide();
  1513. },2000)
  1514. });
  1515. </script>
  1516. <script type="text/javascript">
  1517. if ($(window).height() > 480) {
  1518. $(".start_bg").css({'top':'0px'})
  1519. };
  1520. if ($(window).height() < 481) {
  1521. $(".gameend").css({
  1522. 'background':'#08b134 url(http://game.ikongzhong.cn/games/kuaipao/game_end.jpg) no-repeat center -32px',
  1523. 'background-size': '100%'
  1524. })
  1525. $(".chenghao").css({
  1526. 'bottom':'136px'
  1527. })
  1528. };
  1529. if($(window).height() <= 372 && CheckSystem.isWeixin()){
  1530. $("#interface .life").css({
  1531. 'top':'50px'
  1532. })
  1533. }
  1534. // 规则弹出窗口动画
  1535. $("#_gamerule").bind('touchstart',function(){
  1536. $(".ruleshadow").show();
  1537. $(".rulebox").addClass("bounceIn animated r_index");
  1538. setTimeout(function(){
  1539. $(".rulebox").addClass("opacity").removeClass("bounceIn animated")
  1540. },800)
  1541. });
  1542. $(".x_rulebox").bind('touchstart',function(){
  1543. $(".rulebox").addClass("bounceOut animated");
  1544. setTimeout(function(){
  1545. $(".ruleshadow").hide();
  1546. $(".rulebox").removeClass("opacity bounceOut animated r_index")
  1547. },800)
  1548. });
  1549. /**
  1550. * iTouch
  1551. */
  1552. var iTouch = function(){
  1553. this.startX = 0;
  1554. this.startY = 0;
  1555. this.curX = 0;
  1556. this.curY = 0;
  1557. this.endX = 0;
  1558. this.endY = 0;
  1559. this.distance =1;
  1560. this.init();
  1561. }
  1562. iTouch.prototype = {
  1563. moveTop: function(){},
  1564. moveBottom: function(){},
  1565. moveLeft: function(){},
  1566. moveRight: function(){},
  1567. touchStart: function (event) {
  1568. this.curY = Crafty("Player").y;
  1569. this.curX = Crafty("Player").x;
  1570. this.startX = event.touches[0].pageX;
  1571. this.startY = event.touches[0].pageY;
  1572. },
  1573. touchEnd: function(event, _this) {
  1574. if(Crafty("Player").archer){
  1575. var e = {
  1576. key:38,
  1577. keyCode:38,
  1578. type:"keydown"
  1579. }
  1580. Crafty("Player").trigger('Interaction',e);
  1581. }
  1582. },
  1583. touchMove: function (event, _this) {
  1584. event.preventDefault();
  1585. this.curX = event.targetTouches[0].pageX;
  1586. this.curY = event.targetTouches[0].pageY-Crafty("Player").h;
  1587. if(this.curX + Crafty("Player").w - 30 > 92.5 && this.curX - 30 + Crafty("Player").w <= 320 && this.curY + Crafty("Player").h + 10> 92.5 && this.curY + Crafty("Player").h < 480+10){
  1588. if(!Crafty("Player").archer){
  1589. Crafty("Player").tween({x:this.curX - 30,y:this.curY + 10},60);
  1590. }else{
  1591. Crafty("Player").tween({x:this.curX - 30},60);
  1592. }
  1593. }
  1594. },
  1595. init: function(){
  1596. var _this = this;
  1597. var dombox = document.getElementById('cr-stage');
  1598. dombox.addEventListener("touchmove", function(){
  1599. _this.touchMove(event, _this);
  1600. }, false);
  1601. dombox.addEventListener("touchstart", function(){
  1602. _this.touchStart(event, _this);
  1603. }, false);
  1604. dombox.addEventListener("touchend", function(){
  1605. _this.touchEnd(event, _this);
  1606. }, false);
  1607. }
  1608. }
  1609. new iTouch();
  1610. //榜单
  1611. $(".listtab li").each(function(i){
  1612. $(this).click(function(){
  1613. $(this).addClass("current").siblings().removeClass("current");
  1614. $(".listinner > .listbox").eq(i).addClass("show").siblings().removeClass("show")
  1615. });
  1616. });
  1617. //Cookie
  1618. var Cookie = {
  1619. set: function(e, t, n, r, i) {
  1620. typeof n == "undefined" && (n = new Date((new Date).getTime() + 36e5)),
  1621. document.cookie = e + "=" + escape(t) + (n ? "; expires=" + n.toGMTString() : "") + (r ? "; path=" + r : "; path=/") + (i ? ";domain=" + i : "")
  1622. },
  1623. get: function(e) {
  1624. var t = document.cookie.match(new RegExp("(^| )" + e + "=([^;]*)(;|$)"));
  1625. return t != null ? unescape(t[2]) : null
  1626. },
  1627. clear: function(e, t, n) {
  1628. this.get(e) && (document.cookie = e + "=" + (t ? "; path=" + t : "; path=/") + (n ? "; domain=" + n : "") + ";expires=Fri, 02-Jan-1970 00:00:00 GMT")
  1629. }
  1630. };
  1631. //检测系统新闻app/微信/浏览器
  1632. var CheckSystem = {
  1633. UA : navigator.userAgent.toLowerCase(),
  1634. isNewsApp : function() {
  1635. try{
  1636. if(CheckSystem.UA.match(/qqnews/i) == 'qqnews'){
  1637. return true;
  1638. }else{
  1639. return fasle;
  1640. }
  1641. }catch(e){}
  1642. },
  1643. isWeixin : function() {
  1644. try{
  1645. if(CheckSystem.UA.match(/MicroMessenger/i) == 'micromessenger'){
  1646. return true;
  1647. }else{
  1648. return fasle;
  1649. }
  1650. }catch(e){}
  1651. },
  1652. isiPhone : function() {
  1653. try{
  1654. if(CheckSystem.UA.match(/iphone/i) == 'iphone'){
  1655. return true;
  1656. }else{
  1657. return fasle;
  1658. }
  1659. }catch(e){}
  1660. }
  1661. }
  1662. var shareimg = '';
  1663. //称号
  1664. var ola_title = function(i){
  1665. var level = 50;
  1666. var title = ['球童','学徒','青训队员','梯队主力','职业球员','希望之星','豪门主力','超级巨星','一代球王','宇宙队传奇'];
  1667. if (level >= i) {
  1668. shareimg ='http://game.ikongzhong.cn/games/kuaipao/'+1+'.png'
  1669. return title[0]
  1670. }else if(level*2 >= i){
  1671. shareimg ='http://game.ikongzhong.cn/games/kuaipao/'+2+'.png'
  1672. return title[1]
  1673. }else if(level*3 >= i){
  1674. shareimg ='http://game.ikongzhong.cn/games/kuaipao/'+3+'.png'
  1675. return title[2]
  1676. }else if(level*4 >= i){
  1677. shareimg ='http://game.ikongzhong.cn/games/kuaipao/'+4+'.png'
  1678. return title[3]
  1679. }else if(level*5 >= i){
  1680. shareimg ='http://game.ikongzhong.cn/games/kuaipao/'+5+'.png'
  1681. return title[4]
  1682. }else if(level*6 >= i){
  1683. shareimg ='http://game.ikongzhong.cn/games/kuaipao/'+6+'.png'
  1684. return title[5]
  1685. }else if(level*7 >= i){
  1686. shareimg ='http://game.ikongzhong.cn/games/kuaipao/'+7+'.png'
  1687. return title[6]
  1688. }else if(level*8 >= i){
  1689. shareimg ='http://game.ikongzhong.cn/games/kuaipao/'+8+'.png'
  1690. return title[7]
  1691. }else if(level*9 >= i){
  1692. shareimg ='http://game.ikongzhong.cn/games/kuaipao/'+9+'.png'
  1693. return title[8]
  1694. }else if(level*10 >= i || i < level*11){
  1695. shareimg ='http://game.ikongzhong.cn/games/kuaipao/'+10+'.png'
  1696. return title[9]
  1697. }else if(i >= level*11){
  1698. shareimg ='http://game.ikongzhong.cn/games/kuaipao/'+10+'.png'
  1699. return '宇宙队传奇'
  1700. };
  1701. }
  1702. var share = function() {
  1703. var title = 'ola!快跑!_2014巴西世界杯';
  1704. var url = "http://game.ikongzhong.cn/games/kuaipao/";
  1705. var desc = '我正在玩OLA快跑,获得了“'+ola_title(Crafty.config.score)+'”称号,小伙伴快来参与,看看你是啥称号吧!';
  1706. var pic = shareimg;
  1707. $(".weixin_layer").show();
  1708. $(".weixin_layer").bind('touchstart',function(){
  1709. $('.weixin_layer').fadeOut();
  1710. })
  1711. }
  1712. //取URL参数
  1713. function getUrlParam(name){
  1714. var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
  1715. var r = window.location.search.substr(1).match(reg); //匹配目标参数
  1716. if (r!=null) return unescape(r[2]); return null; //返回参数值
  1717. }
  1718. var onBridgeReady = function () {
  1719. // 分享到朋友圈;
  1720. WeixinJSBridge.on('menu:share:timeline', function (argv) {
  1721. WeixinJSBridge.invoke('shareTimeline', {
  1722. "img_url": shareimg,
  1723. "img_width": "120",
  1724. "img_height": "120",
  1725. "link": "http://game.ikongzhong.cn/games/kuaipao/",
  1726. "desc": ola_title(Crafty.config.score)?"我正在玩OLA快跑,获得了'"+ola_title(Crafty.config.score)+"'称号,小伙伴快来参与,看看你是啥称号吧!":"我正在玩OLA快跑,小伙伴快来参与,看看你是啥称号吧!",
  1727. "title": ola_title(Crafty.config.score)?"我正在玩OLA快跑,获得了'"+ola_title(Crafty.config.score)+"'称号,小伙伴快来参与,看看你是啥称号吧!":"我正在玩OLA快跑,小伙伴快来参与,看看你是啥称号吧!"
  1728. },function () { });
  1729. })
  1730. WeixinJSBridge.on('menu:share:appmessage', function(argv){
  1731. WeixinJSBridge.invoke('sendAppMessage',{
  1732. "img_url":shareimg,
  1733. "link":"http://game.ikongzhong.cn/games/kuaipao/",
  1734. "desc":ola_title(Crafty.config.score)?"我正在玩OLA快跑,获得了'"+ola_title(Crafty.config.score)+"'称号,小伙伴快来参与,看看你是啥称号吧!":"我正在玩OLA快跑,小伙伴快来参与,看看你是啥称号吧!",
  1735. "title":ola_title(Crafty.config.score)?"我正在玩OLA快跑,获得了'"+ola_title(Crafty.config.score)+"'称号,小伙伴快来参与,看看你是啥称号吧!":"我正在玩OLA快跑,小伙伴快来参与,看看你是啥称号吧!"
  1736. }, function() {})
  1737. })
  1738. }
  1739. document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
  1740. $(function(){
  1741. if (document.addEventListener) {
  1742. document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
  1743. } else if (document.attachEvent) {
  1744. document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
  1745. document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
  1746. }
  1747. })
  1748. </script>
  1749. </iframe></body></html>