index.html 8.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  6. <title>爸爸去兜风</title>
  7. <style>
  8. .div-a{ position:absolute; left:0px; top:0px;width:100%;height:100%}
  9. /* css注释说明: 背景为红色 */
  10. .div-b{ position:absolute; left:0px; top:0px;width:100%;height:100%}
  11. /* 背景为黄色 */
  12. </style>
  13. <script src="js/easeljs-0.7.1.min.js"></script>
  14. <script src="js/tweenjs-0.5.1.min.js"></script>
  15. <script src="js/preloadjs-0.4.1.min.js"></script>
  16. <script src="js/movieclip-0.7.1.min.js"></script>
  17. <script src="js/soundjs-0.5.2.min.js"></script>
  18. <script src="js/fathersDayLoading.js"></script>
  19. <script>
  20. var canvasLoading, canvas, stage, exportRoot;
  21. var loadingProgress=0;
  22. var queue = new createjs.LoadQueue();
  23. /*操作方式 0:陀螺仪 1:左右键*/
  24. var operation=0;
  25. /*分数*/
  26. var score=0;
  27. /*自适应缩放比例*/
  28. var scale=1;
  29. /*陀螺仪参数*/
  30. var a,b,g;
  31. function initLoading() {
  32. canvasLoading = document.getElementById('canvasLoading');
  33. exportRoot = new lib.fathersDayLoading();
  34. stage = new createjs.Stage(canvasLoading);
  35. stage.addChild(exportRoot);
  36. stage.update();
  37. createjs.Ticker.setFPS(lib.properties.fps);
  38. createjs.Ticker.addEventListener("tick", stage);
  39. //load main files;
  40. queue.installPlugin(createjs.Sound);
  41. queue.on("complete", handleComplete, this);
  42. queue.on("progress", handleOverallProgress);
  43. queue.loadFile({id:"mainjs", src:"js/fathersDay.js"});
  44. queue.loadManifest([
  45. {id:'sound',src:'res/bg.mp3'},
  46. {id:'sound0',src:'res/sound0.mp3'}
  47. ]);
  48. }
  49. function init() {
  50. document.getElementById('canvasLoading').style.display="none";
  51. canvas = document.getElementById('canvas');
  52. exportRoot = new lib.fathersDay();
  53. stage = new createjs.Stage(canvas);
  54. stage.addChild(exportRoot);
  55. stage.update();
  56. createjs.Ticker.setFPS(lib.properties.fps);
  57. createjs.Ticker.addEventListener("tick", stage);
  58. createjs.Sound.alternateExtensions = ["mp3"];
  59. createjs.Sound.registerSound("res/bg.mp3", "sound");
  60. createjs.Sound.registerSound("res/sound0.mp3", "sound0");
  61. }
  62. function playSound0()
  63. {
  64. var instance = createjs.Sound.play("sound0");
  65. instance.volume = 0.5;
  66. }
  67. function addSound()
  68. {
  69. console.log('load complete');
  70. var instance = createjs.Sound.play("sound"); // play using id. Could also use full sourcepath or event.src.
  71. instance.addEventListener("complete", createjs.proxy(this.soundHandleComplete, this));
  72. instance.volume = 0.3;
  73. }
  74. /*
  75. queue.loadManifest([
  76. {id: "myImage", src:"fathersDay.js"}
  77. ]);
  78. */
  79. function handleOverallProgress(event) {
  80. loadingProgress=event.progress;
  81. console.log(event.progress,queue.progress);
  82. }
  83. function handleComplete() {
  84. //createjs.Sound.play("sound");
  85. //stage.removeChildAt('canvasLoading');
  86. }
  87. function soundHandleComplete()
  88. {
  89. var instance = createjs.Sound.play("sound");
  90. instance.addEventListener("complete", createjs.proxy(this.soundHandleComplete, this));
  91. instance.volume = 0.3;
  92. }
  93. var wrongx;
  94. //单个按钮检测代码;
  95. function checkClick(touch,mc)
  96. {
  97. var obj={click:false,mcname:null};
  98. var mx,my;
  99. mx=(touch.pageX-(wrongx/2))/scale;
  100. my=touch.pageY/scale;
  101. var mcx,mcy,mcwidth,mcheight;
  102. mcx=mc._matrix.tx;
  103. mcy=mc._matrix.ty;
  104. mcwidth=mc.nominalBounds.width
  105. mcheight=mc.nominalBounds.height;
  106. var parentmc=mc;
  107. for(var i=0;i<2;i++)
  108. {
  109. parentmc=parentmc.parent;
  110. //console.log('run:',i,parentmc);
  111. if(parentmc!=null)
  112. {
  113. mcx+=parentmc._matrix.tx;
  114. mcy+=parentmc._matrix.ty;
  115. i=0;
  116. }
  117. }
  118. if((mx>mcx&&mx<(mcx+mcwidth))&&(my>mcy&&my<(mcy+mcheight)))
  119. {
  120. obj.click=true;
  121. obj.mcname=mc.name;
  122. //console.log('click in mc area!');
  123. }
  124. else
  125. {
  126. obj.click=false;
  127. }
  128. return obj;
  129. }
  130. //多个按钮检测代码;
  131. function checkClickArr(touch,arr)
  132. {
  133. var obj={click:false,mcname:null};
  134. var tmp={};
  135. for(var i=0;i<arr.length;i++)
  136. {
  137. tmp=checkClick(touch,arr[i]);
  138. if(tmp.click==true)
  139. {
  140. obj=tmp;
  141. }
  142. }
  143. return obj;
  144. }
  145. //返回mc当前坐标的全局坐标;
  146. function localPosToGlobal(mc)
  147. {
  148. obj={x:0,y:0};
  149. var mcx,mcy;
  150. mcx=mc._matrix.tx;
  151. mcy=mc._matrix.ty;
  152. var parentmc=mc;
  153. for(var i=0;i<2;i++)
  154. {
  155. parentmc=parentmc.parent;
  156. //console.log('run:',i,parentmc);
  157. if(parentmc!=null)
  158. {
  159. mcx+=parentmc._matrix.tx;
  160. mcy+=parentmc._matrix.ty;
  161. i=0;
  162. }
  163. }
  164. obj.x=mcx;
  165. obj.y=mcy;
  166. return obj;
  167. }
  168. if (window.DeviceOrientationEvent) {
  169. window.addEventListener('deviceorientation', function(event) {
  170. a = event.alpha
  171. b = event.beta
  172. g = event.gamma
  173. console.log('Orientation - Alpha: ' + a + ', Beta: '+ b + ', Gamma: ' + g);
  174. }, false);
  175. } else {
  176. console.log('This device does not support deviceorientation');
  177. }
  178. //统计代码;
  179. //if(typeof(pgvMain) == 'function') pgvMain();
  180. //统计打开页面数量;
  181. //pgvSendClick({hottag:'html5test.fathersday.index'});
  182. //分享;
  183. // function onBridgeReady() {
  184. // //转发朋友圈
  185. // WeixinJSBridge.on("menu:share:timeline", function(e) {
  186. // var url = 'http://tgideas.qq.com/flash/quanchenTest/html5FathersDay/fathersDayIndex.html';
  187. // var data = {
  188. // img_url: "http://tgideas.qq.com/flash/quanchenTest/html5FathersDay/icon.jpg",
  189. // img_width: "120",
  190. // img_height: "120",
  191. // link: url,
  192. // //desc这个属性要加上,虽然不会显示,但是不加暂时会导致无法转发至朋友圈,
  193. // desc:"恭喜你!成功让老爸载儿子兜了"+score+"米的风",
  194. // title: "恭喜你!成功让老爸载儿子兜了"+score+"米的风"
  195. // };
  196. // WeixinJSBridge.invoke("shareTimeline", data, function(res) {
  197. // WeixinJSBridge.log(res.err_msg)
  198. // });
  199. // });
  200. // //同步到微博
  201. // WeixinJSBridge.on("menu:share:weibo", function() {
  202. // var url = 'http://tgideas.qq.com/flash/quanchenTest/html5FathersDay/fathersDayIndex.html';
  203. // WeixinJSBridge.invoke("shareWeibo", {
  204. // "content": "恭喜你!成功让老爸载儿子兜了"+score+"米的风",
  205. // "url": url
  206. // }, function(res) {
  207. // WeixinJSBridge.log(res.err_msg);
  208. // });
  209. // });
  210. // //分享给朋友
  211. // WeixinJSBridge.on('menu:share:appmessage', function(argv) {
  212. // var url = 'http://tgideas.qq.com/flash/quanchenTest/html5FathersDay/fathersDayIndex.html';
  213. // WeixinJSBridge.invoke("sendAppMessage", {
  214. // img_url: "http://tgideas.qq.com/flash/quanchenTest/html5FathersDay/icon.jpg",
  215. // img_width: "120",
  216. // img_height: "120",
  217. // link: url,
  218. // desc: "恭喜你!成功让老爸载儿子兜了"+score+"米的风",
  219. // title: "恭喜你!成功让老爸载儿子兜了"+score+"米的风"
  220. // }, function(res) {
  221. // WeixinJSBridge.log(res.err_msg)
  222. // });
  223. // });
  224. // };
  225. //执行
  226. // try{
  227. // document.addEventListener('WeixinJSBridgeReady', function() {
  228. // onBridgeReady();
  229. // });
  230. // }catch(e){}
  231. /*
  232. createjs.Sound.alternateExtensions = ["mp3"];
  233. createjs.Sound.addEventListener("fileload", createjs.proxy(this.loadHandler, this));
  234. createjs.Sound.registerSound("bg.mp3", "sound");
  235. function loadHandler(event) {
  236. // This is fired for each sound that is registered.
  237. var instance = createjs.Sound.play("sound"); // play using id. Could also use full sourcepath or event.src.
  238. instance.addEventListener("complete", createjs.proxy(this.handleComplete, this));
  239. instance.volume = 0.5;
  240. }
  241. */
  242. </script>
  243. </head>
  244. <body onload="initLoading();" style="background-color:#FFFFFF">
  245. <div id="loading" class="div-a">
  246. <canvas id="canvasLoading" width="640" height="1136">
  247. sorry ,your browser dosen't support html5
  248. </canvas>
  249. <style>
  250. *{
  251. margin: 0;
  252. padding: 0;
  253. }
  254. #a{
  255. display: block;
  256. background-color: gray;
  257. }
  258. </style>
  259. </div>
  260. <div id="main" class="div-b">
  261. <canvas id="canvas" width="640" height="1136">
  262. sorry ,your browser dosen't support html5
  263. </canvas>
  264. <style>
  265. *{
  266. margin: 0;
  267. padding: 0;
  268. }
  269. #a{
  270. display: block;
  271. background-color: gray;
  272. }
  273. </style>
  274. </div>
  275. </body>
  276. </html><!--[if !IE]>|xGv00|95de91c1b78a032787deb8e3d96fd12e<![endif]-->