mkGame.js 27 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622
  1. var page = 2;
  2. var isTouch = "ontouchend" in document ? true : false;
  3. var cwith = 480;
  4. var rest = false;
  5. var ismenuopen = false;
  6. var isgameloaded = false;
  7. var isplaying = false;
  8. var reline = 0;
  9. $.loadImages = function (imageArray, callback) {
  10. var loadElements = new Array();
  11. "string" == typeof imageArray && (imageArray = [imageArray]); //if it's a string, make it a single item array of that string
  12. var imageArrayLength = imageArray.length;
  13. var imageCounter = 0;
  14. for (var i = 0; i < imageArrayLength; i++) {
  15. var tempElement = document.createElement("img");
  16. tempElement.onload = function () {
  17. imageCounter++;
  18. imageCounter == imageArrayLength && $.isFunction(callback) && callback(loadElements); //if last one and callback set, do callback
  19. };
  20. tempElement.onerror = function () {
  21. imageCounter++;
  22. imageCounter == imageArrayLength && $.isFunction(callback) && callback(loadElements); //if last one and callback set, do callback
  23. };
  24. tempElement.src = imageArray[i];
  25. loadElements.push(tempElement);
  26. }
  27. }
  28. function gamereset(needoverflow, callback) {
  29. if (gameTimer) window.clearInterval(gameTimer);
  30. count = 360;
  31. nowLevelNo = 1;
  32. TScore = 0;
  33. playgame(function () {
  34. $("#levelName").html(1);
  35. $("#score").html(0);
  36. if (needoverflow)
  37. document.getElementById("main").style.overflow = "visible";
  38. $("#p1_1").hide();
  39. blockpagemove();
  40. $("#p1_2").hide();
  41. $("#p1_4").hide();
  42. $("#p1_3").show();
  43. setTimeout(function () {
  44. window.scrollTo(0, 0);
  45. }, 1);
  46. page = 4;
  47. $.isFunction(callback) && callback();
  48. });
  49. }
  50. function blockhanlder(e) {
  51. e.stopPropagation();
  52. e.preventDefault();
  53. return false;
  54. }
  55. function blockpagemove() {
  56. document.body.addEventListener('touchmove', blockhanlder);
  57. }
  58. function removeblockpagemove() {
  59. document.body.removeEventListener('touchmove', blockhanlder);
  60. }
  61. var windowWidth = 0, windowHeight = 0, windowWidthScale = 1, windowHeightScale = 1;
  62. $(window).resize(windowInit);
  63. function windowInit() {
  64. windowWidth = $(window).width();
  65. windowHeight = $(window).height();
  66. if (windowWidth > windowHeight) {
  67. $(".sceentip").show().css({ lineHeight: windowHeight + "px" });
  68. //return;
  69. } else {
  70. $(".sceentip").hide();
  71. if (windowHeight < 800) {
  72. windowHeight = 800;
  73. $('html').height(windowHeight);
  74. } else {
  75. $('html').height('100%');
  76. }
  77. windowWidthScale = windowWidth / 640;
  78. windowHeightScale = windowHeight / 1136;
  79. if (windowHeightScale > 1) windowHeightScale = 1;
  80. $('.zoomh, .zoomh_t, .zoomh_m, .zoomh_b').css({
  81. 'transform': 'scale(' + windowHeightScale + ')', '-o-transform': 'scale(' + windowHeightScale + ')',
  82. '-moz-transform': 'scale(' + windowHeightScale + ')', '-webkit-transform': 'scale(' + windowHeightScale + ')', '-ms-transform': 'scale(' + windowHeightScale + ')'
  83. });
  84. var _tt = windowHeight - 720;
  85. $('#gamebtn').css({ 'bottom': (_tt - 81) / 2 });
  86. if (_tt > 120) {
  87. var _tz = (_tt - 40) / (81 + _tt / 2);
  88. _tz = _tz > 1.4 ? 1.4 : _tz;
  89. _tz = _tz < 1 ? 1 : _tz;
  90. $('#gamebtn').css({
  91. 'transform': 'scale(' + _tz + ')', '-o-transform': 'scale(' + _tz + ')',
  92. '-moz-transform': 'scale(' + _tz + ')', '-webkit-transform': 'scale(' + _tz + ')', '-ms-transform': 'scale(' + _tz + ')'
  93. });
  94. } else if (_tt <= 80) {
  95. var _tz = _tt / 81 * 0.8;
  96. _tz = _tz < 0.8 ? 0.8 : _tz;
  97. $('#gamebtn').css({
  98. 'transform': 'scale(' + _tz + ')', '-o-transform': 'scale(' + _tz + ')',
  99. '-moz-transform': 'scale(' + _tz + ')', '-webkit-transform': 'scale(' + _tz + ')', '-ms-transform': 'scale(' + _tz + ')'
  100. });
  101. } else {
  102. var _tz = 1;
  103. $('#gamebtn').css({
  104. 'transform': 'scale(' + _tz + ')', '-o-transform': 'scale(' + _tz + ')',
  105. '-moz-transform': 'scale(' + _tz + ')', '-webkit-transform': 'scale(' + _tz + ')', '-ms-transform': 'scale(' + _tz + ')'
  106. });
  107. }
  108. $('#pimg3,#pimg4,#content').height(windowHeight);
  109. }
  110. }
  111. $(document).ready(function () {
  112. windowInit();
  113. blockpagemove();
  114. //$('<audio id="intro"><source src="sound/Intro.ogg" type="audio/ogg"> <source src="sound/Intro.mp3" type="audio/mpeg"><source src="sound/Intro.wav" type="audio/wav"> </audio>').appendTo('body'); //载入声音文件
  115. $("#more_game").click(function () {
  116. clickMore();
  117. });
  118. $("#wechat_sns").click(function () {
  119. $("#wechat_sns").hide();
  120. });
  121. // $("#wechat_friend").on(isTouch ? 'touchstart' : 'click', function () {
  122. // $("#wechat_sns").show();
  123. // });
  124. $("#wechat_friend").click(function () {
  125. $("#wechat_sns").show();
  126. });
  127. setTimeout(function () {
  128. window.scrollTo(0, 0);
  129. }, 1);
  130. if (cj && cj.length > 0) {
  131. $.loadImages(cj, function () {
  132. setTimeout(function () {
  133. $("#logo2").animate({ "left": 90 }, 100, '', function () {
  134. shake1 = setInterval(function () {
  135. $("#logo2").css({ "left": arrayLeft[parseInt(11 * Math.random())], "top": arrayTop[parseInt(11 * Math.random())] });
  136. }, 50);
  137. $("#logo3").animate({ "left": 95 }, 100, '', function () {
  138. shake2 = setInterval(function () {
  139. $("#logo3").css({ "left": arrayLeft[parseInt(11 * Math.random())], "top": arrayTop[parseInt(11 * Math.random())] });
  140. }, 50);
  141. $('#logo1').show();
  142. $('#logo1').addClass('scale').animate({ 'top': '236px', 'left': '90px' }, 1000, '');
  143. });
  144. });
  145. $("#maskloading").hide();
  146. }, 500);
  147. setTimeout(function () {
  148. $("#play").animate({ "top": 850 }, 100, '');
  149. }, 1900);
  150. });
  151. }
  152. bgCanvas = document.getElementById("bgCanvas"); //道路背景+圆
  153. liCanvas = document.getElementById("liCanvas"); //道路颜色+线条
  154. bgContext = bgCanvas.getContext("2d"); //构造画图
  155. liContext = liCanvas.getContext("2d"); //构造画图
  156. Sleak = document.getElementById("Sleak"); //断开
  157. Sforward = document.getElementById("Sforward"); //连接
  158. bgCanvas.addEventListener("mouseup", moveEnd, false); //添加事件监听
  159. bgCanvas.addEventListener("touchend", moveEnd, false); //添加事件监听
  160. bgCanvas.addEventListener("touchcancel", moveEnd, false); //添加事件监听
  161. intro = document.getElementById("intro");
  162. menu_click = document.getElementById("menu_click");
  163. $("#playAgain").click(function () {
  164. $("#maskloading").show();
  165. $("#loading_div").show();
  166. gamereset(true);
  167. });
  168. $("#logo1").click(function () {
  169. //menu_click = document.getElementById("menu_click");
  170. if (shake1) clearInterval(shake1);
  171. if (shake2) clearInterval(shake2);
  172. setTimeout(function () {
  173. $("#logo3").animate({ "left": 435 }, 200, '', function () {
  174. $("#logo2").animate({ "left": -295 }, 200, '', function () {
  175. intro.play();
  176. //menu_click.play();
  177. $("#maskloading").show();
  178. $("#loading_div").show();
  179. gamereset(true);
  180. });
  181. });
  182. }, 100);
  183. intro.play();
  184. });
  185. $("#help").click(function () {
  186. if (gameTimer) window.clearInterval(gameTimer);
  187. $("#p1_1").hide();
  188. $("#p1_3").hide();
  189. $("#p1_4").hide();
  190. document.getElementById("main").style.overflow = "visible";
  191. removeblockpagemove();
  192. $("#p1_2").show();
  193. page = 3;
  194. ismenuopen = false;
  195. $("#pimg0").css("height", $("#pimg2").height() + "px");
  196. });
  197. $("#reset").click(function () {
  198. reline = 1;
  199. mkGame(gamesize, level2Arrayf(level2Array[nowLevelNo - 1]), reline);
  200. });
  201. $("#continue").click(function () {
  202. if (page == 3) {
  203. //menu_click = document.getElementById("menu_click");
  204. menu_click.play();
  205. //$("#maskloading").show();
  206. //$("#loading_div").show();
  207. document.getElementById("main").style.overflow = "visible";
  208. $("#p1_1").hide();
  209. $("#p1_3").show();
  210. $("#p1_4").hide();
  211. blockpagemove();
  212. $("#p1_2").hide();
  213. if (isandroid) {
  214. rest = true;
  215. mkGame_reset();
  216. }
  217. gameTimer = setInterval(function () {
  218. gametick();
  219. }, 1000);
  220. //gamereset(true);
  221. } else if (page == 2) {
  222. //menu_click = document.getElementById("menu_click");
  223. menu_click.play();
  224. document.getElementById("main").style.overflow = "visible";
  225. $("#maskloading").show();
  226. $("#loading_div").show();
  227. gamereset(true);
  228. }
  229. window.scrollTo(0, 0);
  230. });
  231. $("#play").click(function () {
  232. if (shake1) clearInterval(shake1);
  233. if (shake2) clearInterval(shake2);
  234. setTimeout(function () {
  235. $("#logo3").animate({ "left": 435 }, 200, '', function () {
  236. $("#logo2").animate({ "left": -295 }, 200, '', function () {
  237. setTimeout(function () {
  238. //$("#p1_1").hide();
  239. //$("#p1_3").hide();
  240. //$("#p1_4").hide();
  241. //document.getElementById("main").style.overflow = "visible";
  242. //removeblockpagemove();
  243. //$("#p1_2").show();
  244. //page = 2;
  245. document.getElementById("main").style.overflow = "visible";
  246. $("#maskloading").show();
  247. $("#loading_div").show();
  248. gamereset(true);
  249. }, 200);
  250. });
  251. });
  252. }, 100);
  253. //intro = document.getElementById("intro");
  254. intro.play();
  255. });
  256. });
  257. function mkGame_reset() {
  258. mkGame(gamesize, level2Arrayf(level2Array[nowLevelNo - 1]), reline);
  259. setTimeout(function () {
  260. for (var i = 0; i < level.length; i++) {
  261. var NLevel = level[i];
  262. if (NLevel.line.length > 0) {
  263. liContext.beginPath()
  264. var firstBox = NLevel.line[0];
  265. var secondBox = NLevel.line[NLevel.line.length - 1];
  266. var FPoint = boxs[NLevel.line[0]].points;
  267. liContext.moveTo(FPoint[0] + HboxSize, FPoint[1] + HboxSize);
  268. for (var p = 0; p < NLevel.line.length; p++) {
  269. var NBox = boxs[NLevel.line[p]].points;
  270. if (NLevel.comp) {
  271. liContext.fillStyle = colors_o[i];
  272. //liContext.fillRect(NBox[0], NBox[1], boxSize, boxSize);
  273. liContext.fillRect(NBox[0] + boxSize * .0625, NBox[1] + boxSize * .0625, boxSize * .875, boxSize * .875);
  274. }
  275. liContext.lineTo(NBox[0] + HboxSize, NBox[1] + HboxSize);
  276. }
  277. liContext.lineWidth = lineSize;
  278. liContext.lineCap = 'round';
  279. liContext.lineJoin = "round";
  280. liContext.strokeStyle = NLevel.color;//填充线路颜色
  281. liContext.stroke();
  282. liContext.closePath();
  283. }
  284. }
  285. }, 300);
  286. anyThing = false;
  287. }
  288. function moveEnd() {
  289. mouseDown = false;
  290. }
  291. function mkGame(size, levelBoxsA, reline) {
  292. isplaying = true;
  293. bgContext.clearRect(0, 0, cwith, cwith);
  294. liContext.clearRect(0, 0, cwith, cwith);
  295. bgCanvas.style.visibility = "hidden";
  296. bgCanvas.offsetHeight;
  297. bgCanvas.style.visibility = "inherit";
  298. liCanvas.style.visibility = "hidden";
  299. liCanvas.offsetHeight;
  300. liCanvas.style.visibility = "inherit";
  301. colors_d = ["rgba(166,49,223,0.8)", "rgba(252,133,50,0.8)", "rgba(28,151,211,0.8)", "rgba(00,191,01,0.8)", "rgba(237,57,132,0.8)"];
  302. colors_o = ["rgba(166,49,223,0.3)", "rgba(252,133,50,0.3)", "rgba(28,151,211,0.3)", "rgba(00,191,01,0.3)", "rgba(237,57,132,0.3)"];
  303. imgs_d = ["image/game/1/", "image/game/2/", "image/game/3/", "image/game/4/", "image/game/5/"];
  304. boxSize = cwith / size;//单个BOX大小
  305. HboxSize = boxSize / 2;//线条居中
  306. lineSize = boxSize * 33 / 100;//连线的粗细程度
  307. CircSize = boxSize * 35 / 100;//圆的大小
  308. if (rest) {
  309. }
  310. else {
  311. level = [];
  312. boxs = []
  313. mouseDown = false;
  314. levelColor = -1;
  315. oldBox = -1;
  316. anyThing = false;
  317. idoArray = 0;
  318. movesC = 0; //初始化赋值为0步
  319. if (compArray[idoArray]) {
  320. if (!compArray[idoArray].split(":")[1]) {
  321. movesB = "-";
  322. } else {
  323. movesB = compArray[idoArray].split(":")[1];
  324. }
  325. } else {
  326. movesB = "-";
  327. }
  328. FWSpeed = 1;
  329. offsetLeft = $(".mainS")[0].offsetLeft + $("#game_screen")[0].offsetLeft;
  330. offsetTop = $(".mainS")[0].offsetTop + $("#game_screen")[0].offsetTop;
  331. for (var y = 0; y < size; y++) {
  332. for (var x = 0; x < size; x++) {
  333. boxs.push({
  334. state: 0,
  335. colorIndex: -1,
  336. points: [x * boxSize, y * boxSize, (x + 1) * boxSize, (y + 1) * boxSize]
  337. });
  338. }
  339. }
  340. if (gameTimer) window.clearInterval(gameTimer);
  341. if (reline == 0) {
  342. count = 360;
  343. $("#timebar").css({ "width": count });
  344. } else {
  345. $("#timebar").css({ "width": count });
  346. reline = 0;
  347. }
  348. //count = 360;
  349. //$("#timebar").css({ "width": count });
  350. gameTimer = window.setInterval(gametick, 1000);
  351. levelScore = totalsec * 10;
  352. }
  353. //// STR Draw Level \\\\
  354. levelBoxsA.forEach(function (value, key) {
  355. bgContext.beginPath();
  356. if (!rest) {
  357. level[key] = { line: [], comp: false, color: colors_d[key], img: gameElements[key], box: value, soundState: 0 };
  358. }
  359. var box_1 = boxs[value[0]];
  360. var box_2 = boxs[value[1]];
  361. box_1.state = 2;
  362. box_2.state = 2;
  363. box_1.colorIndex = key;
  364. box_2.colorIndex = key;
  365. var arcX_1 = (box_1.points[0])
  366. var arcY_1 = (box_1.points[1])
  367. var arcX_2 = (box_2.points[0])
  368. var arcY_2 = (box_2.points[1])
  369. bgContext.drawImage(level[key].img[0], arcX_1 + boxSize * .0625, arcY_1 + boxSize * .0625, boxSize * .875, boxSize * .875);
  370. bgContext.drawImage(level[key].img[2], arcX_2 + boxSize * .0625, arcY_2 + boxSize * .0625, boxSize * .875, boxSize * .875);
  371. });
  372. rest = false;
  373. // END Draw Level \\\\
  374. if (!isgameloaded) {
  375. isgameloaded = true;
  376. if (isTouch) {
  377. bgCanvas.addEventListener("touchstart", pointerStart, false);
  378. bgCanvas.addEventListener("touchmove", pointerMove, false);
  379. } else {
  380. bgCanvas.addEventListener("mousedown", pointerStart, false);
  381. bgCanvas.addEventListener("mousemove", pointerMove, false);
  382. }
  383. function pointerStart(ev) {
  384. ev.preventDefault();
  385. mouseDown = true;
  386. var evX, evY;
  387. //console.log(ev);
  388. if (isTouch) {
  389. evX = ev.touches.item(0).clientX - offsetLeft + (document.body.scrollLeft || document.documentElement.scrollLeft || 0);
  390. evY = ev.touches.item(0).clientY - offsetTop + (document.body.scrollTop || document.documentElement.scrollTop || 0);
  391. }
  392. else {
  393. evX = ev.offsetX || ev.layerX;
  394. evY = ev.offsetY || ev.layerY;
  395. }
  396. //console.log(evX + ',' + evY);
  397. boxId = (parseInt(evY / boxSize) * size) + parseInt(evX / boxSize);
  398. if (levelColor != boxs[boxId].colorIndex) {
  399. movesC++;
  400. }
  401. levelColor = boxs[boxId].colorIndex;
  402. if (boxs[boxId].state == 2) {
  403. for (i = 1; i < level[levelColor].line.length; i++) {
  404. var box = boxs[level[levelColor].line[i]]
  405. if (box.state != 2) {
  406. box.state = 0;
  407. box.colorIndex = -1;
  408. }
  409. }
  410. level[levelColor].line = [boxId];
  411. }
  412. anyThing = true;
  413. pointerMove(ev);
  414. }
  415. function pointerMove(ev) {
  416. if (!mouseDown) return;
  417. ev.preventDefault();
  418. var evX, evY;
  419. // evX = ev.offsetX || (ev.touches && ev.touches.item(0).clientX - offsetLeft + (document.body.scrollLeft || document.documentElement.scrollLeft || 0)) || ev.layerX;
  420. // evY = ev.offsetY || (ev.touches && ev.touches.item(0).clientY - offsetTop + (document.body.scrollTop || document.documentElement.scrollTop || 0)) || ev.layerY;
  421. if (isTouch) {
  422. evX = ev.touches.item(0).clientX - offsetLeft + (document.body.scrollLeft || document.documentElement.scrollLeft || 0);
  423. evY = ev.touches.item(0).clientY - offsetTop + (document.body.scrollTop || document.documentElement.scrollTop || 0);
  424. }
  425. else {
  426. evX = ev.offsetX || ev.layerX;
  427. evY = ev.offsetY || ev.layerY;
  428. }
  429. var boxId = (parseInt(evY / boxSize) * size) + parseInt(evX / boxSize);
  430. if (oldBox != boxId && mouseDown && levelColor != -1 && boxId < size * size) {
  431. var lastLLineId = level[levelColor].line[level[levelColor].line.length - 1];
  432. oldBox = boxId;
  433. var box = boxs[boxId];
  434. if (!anyThing && !(lastLLineId - size == boxId || lastLLineId + size == boxId || ((lastLLineId - 1 == boxId || lastLLineId + 1 == boxId) && parseInt(lastLLineId / size) == parseInt(boxId / size)))) {
  435. return;
  436. }
  437. if (box.state == 2) {
  438. if (level[levelColor].line[0] != boxId && box.colorIndex == levelColor && (lastLLineId - 1 == boxId || lastLLineId + 1 == boxId || lastLLineId - size == boxId || lastLLineId + size == boxId)) {
  439. level[levelColor].line.push(boxId);
  440. mouseDown = false;
  441. }
  442. }
  443. if (box.state == 1 || (box.state == 2 && box.colorIndex == levelColor)) {
  444. newArray = [];
  445. var goHell = false;
  446. var oldArray = level[box.colorIndex].line;
  447. var NCI = box.colorIndex;
  448. for (i = 0; i < oldArray.length; i++) {
  449. if (oldArray[i] == boxId && box.colorIndex != levelColor) {
  450. goHell = true;
  451. oldBox = -1;
  452. }
  453. if (!goHell) {
  454. newArray.push(oldArray[i]);
  455. } else {
  456. if (boxs[oldArray[i]].state != 2) {
  457. boxs[oldArray[i]].state = 0;
  458. boxs[oldArray[i]].colorIndex = -1;
  459. }
  460. }
  461. if (oldArray[i] == boxId) {
  462. goHell = true;
  463. }
  464. }
  465. level[NCI].line = newArray;
  466. } else if (box.state == 0) {
  467. box.state = 1;
  468. box.colorIndex = levelColor;
  469. level[levelColor].line.push(boxId);
  470. }
  471. liContext.clearRect(0, 0, cwith, cwith);
  472. var boxsSum = 0;
  473. var compSum = 0;
  474. var PlayTS = false;
  475. var PlayFS = false;
  476. FWSpeed = 1;
  477. for (var i = 0; i < level.length; i++) {
  478. var NLevel = level[i]
  479. if (NLevel.line.length != 0) {
  480. liContext.beginPath()
  481. var firstBox = NLevel.line[0];
  482. var secondBox = NLevel.line[NLevel.line.length - 1];
  483. var FPoint = boxs[NLevel.line[0]].points;
  484. liContext.moveTo(FPoint[0] + HboxSize, FPoint[1] + HboxSize);
  485. boxsSum++;
  486. for (var p = 1; p < NLevel.line.length; p++) {
  487. boxsSum++;
  488. var NBox = boxs[NLevel.line[p]].points;
  489. liContext.lineTo(NBox[0] + HboxSize, NBox[1] + HboxSize);
  490. }
  491. liContext.lineWidth = lineSize;
  492. liContext.lineCap = 'round';
  493. liContext.lineJoin = "round";
  494. liContext.strokeStyle = NLevel.color;//填充线路颜色
  495. //liContext.arc(60, 60, 30, 0, Math.PI * 2, true);
  496. liContext.stroke();
  497. liContext.closePath();
  498. var isNewComp = NLevel.comp;
  499. if ((NLevel.box[0] == firstBox && NLevel.box[1] == secondBox) || (NLevel.box[0] == secondBox && NLevel.box[1] == firstBox)) {
  500. NLevel.comp = true;
  501. FWSpeed += .1;
  502. compSum++;
  503. } else {
  504. NLevel.comp = false;
  505. }
  506. if (isNewComp == false && NLevel.comp == true) {
  507. PlayTS = true;
  508. }
  509. if (isNewComp == true && NLevel.comp == false) {
  510. PlayTS = false;
  511. PlayFS = true;
  512. }
  513. if (i != box.colorIndex && NLevel.comp == true) {
  514. for (var p = 0; p < NLevel.line.length; p++) {
  515. var NBox = boxs[NLevel.line[p]].points;
  516. liContext.fillStyle = colors_o[i];
  517. //liContext.fillRect(NBox[0], NBox[1], boxSize, boxSize);
  518. liContext.fillRect(NBox[0] + boxSize * .0625, NBox[1] + boxSize * .0625, boxSize * .875, boxSize * .875);
  519. }
  520. }
  521. }
  522. }
  523. //PlayTS判断连接是否成功
  524. if (PlayTS == true) {
  525. //Sforward.playbackRate = FWSpeed - .1;
  526. Sforward.play();
  527. if (level.length == compSum) {
  528. } else {
  529. //这里添加圆图片替换和道路平铺
  530. var value = level[box.colorIndex].box;
  531. var box_1 = boxs[value[0]];
  532. var box_2 = boxs[value[1]];
  533. var arcX_1 = (box_1.points[0]);
  534. var arcY_1 = (box_1.points[1]);
  535. var arcX_2 = (box_2.points[0]);
  536. var arcY_2 = (box_2.points[1]);
  537. bgContext.drawImage(level[box.colorIndex].img[1], arcX_1 + boxSize * .0625, arcY_1 + boxSize * .0625, boxSize * .875, boxSize * .875);
  538. bgContext.drawImage(level[box.colorIndex].img[3], arcX_2 + boxSize * .0625, arcY_2 + boxSize * .0625, boxSize * .875, boxSize * .875);
  539. setTimeout(function () {
  540. bgContext.clearRect(arcX_1, arcY_1, boxSize, boxSize);
  541. bgContext.drawImage(level[box.colorIndex].img[0], arcX_1 + boxSize * .0625, arcY_1 + boxSize * .0625, boxSize * .875, boxSize * .875);
  542. bgContext.clearRect(arcX_2, arcY_2, boxSize, boxSize);
  543. bgContext.drawImage(level[box.colorIndex].img[2], arcX_2 + boxSize * .0625, arcY_2 + boxSize * .0625, boxSize * .875, boxSize * .875);
  544. var NLevel = level[box.colorIndex];
  545. for (var p = 0; p < NLevel.line.length; p++) {
  546. var NBox = boxs[NLevel.line[p]].points;
  547. liContext.fillStyle = colors_o[box.colorIndex];
  548. //liContext.fillRect(NBox[0] + 7, NBox[1] + 6, boxSize - 10, boxSize - 10);
  549. liContext.fillRect(NBox[0] + boxSize * .0625, NBox[1] + boxSize * .0625, boxSize * .875, boxSize * .875);
  550. }
  551. }, 300);
  552. }
  553. }
  554. //PlayFS判断是否中断连接
  555. if (PlayFS == true) {
  556. //Sleak.play();
  557. levelScore -= 10;
  558. }
  559. var Perc = Math.round(boxsSum * 100 / boxs.length);
  560. if (Perc == 100 && compSum == level.length) {
  561. if (!compArray[idoArray]) {
  562. compArray.push(nowLevelNo + ":" + movesC + ":" + level.length);
  563. } else {
  564. var CANlevel = compArray[idoArray].split(":");
  565. if (!CANlevel[1] || CANlevel[1] > movesC) {
  566. compArray[idoArray] = nowLevelNo + ":" + movesC + ":" + level.length;
  567. }
  568. }
  569. if (level.length == movesC) {
  570. //$("#levelCompS .title").html("Perfect!");
  571. } else {
  572. //$("#levelCompS .title").html("Level complete!");
  573. }
  574. levelScore -= (totalsec - count / step) * 10;
  575. mkGameByNo();
  576. //$("#levelCompS .desc").html("You completed the level in " + movesC + " moves.");
  577. //$("#forwCS").val("next level");
  578. //$("#retrCS").css("display", "block");
  579. //$("#keepCS").css("display", "none");
  580. //$("#levelCompS").fadeIn("fast");
  581. } else if (compSum == level.length) {
  582. levelScore -= (totalsec - count / step) * 10;
  583. levelScore -= totalsec;
  584. mkGameByNo();
  585. //$("#levelCompS .title").html("Almost there...");
  586. //$("#levelCompS .desc").html("Fill the board with pipe to complete the level.");
  587. //$("#forwCS").val("skip level");
  588. //$("#retrCS").css("display", "none");
  589. //$("#keepCS").css("display", "block");
  590. //$("#levelCompS").fadeIn("fast");
  591. }
  592. anyThing = false;
  593. }
  594. }
  595. }
  596. }