汉诺塔JS

举报
兔老大 发表于 2021/04/21 23:46:54 2021/04/21
【摘要】 var delay = 200; //in milliseconds var drag=false; var objDisk=null; var x = 0; var y = 0; var disksOnTower1 = new Array(null,null,null,null,null,null,null,null); var disksOnTower2 = new A...

  
  1. var delay = 200; //in milliseconds
  2. var drag=false;
  3. var objDisk=null;
  4. var x = 0;
  5. var y = 0;
  6. var disksOnTower1 = new Array(null,null,null,null,null,null,null,null);
  7. var disksOnTower2 = new Array(null,null,null,null,null,null,null,null);
  8. var disksOnTower3 = new Array(null,null,null,null,null,null,null,null);
  9. var disksOnTowers = new Array(disksOnTower1,disksOnTower2,disksOnTower3);
  10. var offsetleft = 30;
  11. var offsettop = 30;
  12. var offsettower = 20;
  13. var offsethoriz = 30;
  14. var basetop = 0;
  15. var diskheight = 0;
  16. var midhoriztower = 0;
  17. var indexTo=1;
  18. var indexFr=1;
  19. var movectr=0;
  20. var gameOver=false;
  21. var prevIndex=0;
  22. var zindex = 0;
  23. var currTower=1;
  24. var prevTower=1;
  25. var demo=false;
  26. var arrFr = new Array(255);
  27. var arrTo = new Array(255);
  28. var idx = 0;
  29. var pos = 0;
  30. var t=null;
  31. var stop=false;
  32. function init(){
  33. if (document.getElementById){
  34. var diskno = document.hanoi.diskno;
  35. diskno.options.selectedIndex = 0;
  36. drawTowers();
  37. drawDisks(parseInt(diskno.options[diskno.options.selectedIndex].text));
  38. }
  39. }
  40. function initVars(){
  41. for (var i=0;i<disksOnTower1.length;i++){
  42. disksOnTower1[i]=null;
  43. disksOnTower2[i]=null;
  44. disksOnTower3[i]=null;
  45. }
  46. drag = false;
  47. indexTo = 1;
  48. indexFr = 1;
  49. movectr = 0;
  50. zindex = 0;
  51. idx = 0;
  52. pos = 0;
  53. t = null;
  54. gameOver=false;
  55. stop=false;
  56. demo=false;
  57. document.hanoi.btnUndo.disabled=true;
  58. }
  59. function drawTowers(){
  60. var title=document.getElementById("title");
  61. var tower1=document.getElementById("tower1");
  62. var tower2=document.getElementById("tower2");
  63. var tower3=document.getElementById("tower3");
  64. var settings=document.getElementById("settings");
  65. var titlewidth = parseInt(title.style.width);
  66. var titleheight = parseInt(title.style.height);
  67. var towerwidth = parseInt(tower1.style.width);
  68. var towerheight = parseInt(tower1.style.height);
  69. var settingswidth = parseInt(settings.style.width);
  70. midhoriztower = parseInt(document.getElementById("horiztower1").style.width)/2;
  71. diskheight = parseInt(document.getElementById("disk1").style.height);
  72. title.style.left=offsetleft+(1.5*towerwidth)+offsettower-(titlewidth/2)+"px";
  73. title.style.top=offsettop+"px";
  74. tower1.style.left=offsetleft+"px";
  75. tower1.style.top=offsettop+titleheight+offsethoriz+"px";
  76. tower2.style.left=offsetleft+towerwidth+offsettower+"px";
  77. tower2.style.top=offsettop+titleheight+offsethoriz+"px";
  78. tower3.style.left=offsetleft+(towerwidth+offsettower)*2+"px";
  79. tower3.style.top=offsettop+titleheight+offsethoriz+"px";
  80. settings.style.left=offsetleft+(1.5*towerwidth)+offsettower-(settingswidth/2)+"px";
  81. settings.style.top=parseInt(tower1.style.top)+towerheight+offsethoriz+"px";
  82. }
  83. function drawDisks(disknum){
  84. var tower1=document.getElementById("tower1");
  85. var disktop = parseInt(tower1.style.top)+parseInt(document.getElementById("horiztower1").style.top);
  86. var lefttower1 = parseInt(tower1.style.left);
  87. var disk;
  88. var f=document.hanoi;
  89. basetop = disktop;
  90. for (var i=disksOnTower1.length;i>=1;i--){
  91. disk = document.getElementById("disk"+i);
  92. disk.style.zIndex=++zindex;
  93. if (i<=disknum){
  94. disk.style.left=lefttower1+midhoriztower-parseInt(disk.style.width)/2+"px";
  95. disk.style.top=disktop-diskheight-1+"px";
  96. disktop = parseInt(disk.style.top);
  97. disksOnTowers[0][i-1]=disk;
  98. }
  99. else {
  100. disk.style.left="-250px";
  101. disk.style.top="-250px";
  102. disksOnTowers[0][i-1]=null;
  103. }
  104. }
  105. f.minmove.value=f.diskno.options[f.diskno.options.selectedIndex].value;
  106. f.yourmove.value=0;
  107. }
  108. function newGame(obj){
  109. if (movectr>0 && !gameOver && !stop){
  110. if (confirm("Current game will be aborted, would you like to continue?")){
  111. initVars();
  112. drawDisks(parseInt(obj.options[obj.options.selectedIndex].text));
  113. }
  114. else document.hanoi.diskno.options.selectedIndex=prevIndex;
  115. }
  116. else {
  117. initVars();
  118. drawDisks(parseInt(obj.options[obj.options.selectedIndex].text));
  119. }
  120. }
  121. function initializeDrag(disk,e){
  122. if (!e) e=event;
  123. if (stop){
  124. swal("警告", "不能在点击'stop'按钮之后在继续执行移动盘子的操作!!", "warning");
  125. //alert("You cannot continue solving the puzzle after clicking the 'Stop' button.\nClick 'Restart' button or select no. of disks to continue playing.");
  126. return;
  127. }
  128. indexFr = indexTo;
  129. if (disk.id!=disksOnTowers[indexFr-1][0].id || gameOver || demo) return;
  130. objDisk=disk;
  131. x=e.clientX;
  132. y=e.clientY;
  133. tempx=parseInt(disk.style.left);
  134. tempy=parseInt(disk.style.top);
  135. document.onmousemove=dragDisk;
  136. }
  137. function dragDisk(e){
  138. if (!e) e=event;
  139. zindex++;
  140. drag=true;
  141. var posX = tempx+e.clientX-x;
  142. var posY = tempy+e.clientY-y;
  143. var objTower1 = document.getElementById("tower1");
  144. var objTower2 = document.getElementById("tower2");
  145. var objTower3 = document.getElementById("tower3");
  146. var tower1Left = parseInt(objTower1.style.left);
  147. var tower2Left = parseInt(objTower2.style.left);
  148. var tower3Left = parseInt(objTower3.style.left);
  149. var tower3Width = parseInt(objTower3.style.width);
  150. objDisk.style.zIndex=zindex;
  151. objDisk.style.left=posX+'px';
  152. objDisk.style.top=posY+'px';
  153. if (e.clientX>=document.body.clientWidth-10 || e.clientY>=document.body.clientHeight-5 || e.clientX==5 || e.clientY==5){ //outside available window
  154. indexTo=indexFr;
  155. dropDisk(objDisk);
  156. }
  157. else if ( //in the vicinity of tower 3
  158. (tower3Left<=posX) &&
  159. (tower3Left+tower3Width>=posX) &&
  160. (parseInt(objTower3.style.top)+parseInt(objTower3.style.height)>posY)
  161. ){
  162. indexTo=3;
  163. }
  164. else if ((tower2Left<=posX) && (tower2Left+tower3Width>=posX)){ //in the vicinity of tower 2
  165. indexTo=2;
  166. }
  167. else if ((tower1Left<=posX) && (tower1Left+parseInt(objTower1.style.width)>=posX)){ //in the vicinity of tower 1
  168. indexTo=1;
  169. }
  170. else indexTo = indexFr;
  171. return false;
  172. }
  173. function dropDisk(disk){
  174. var f=document.hanoi;
  175. document.onmousemove=new Function("return false");
  176. if (!drag) return;
  177. var gameStatus=false;
  178. var topDisk = disksOnTowers[indexTo-1][0];
  179. if (indexFr==indexTo){
  180. getNewTop(indexFr,null);
  181. pushDisk(disk,indexFr); //put disk back to original tower
  182. getNewTop(indexFr,disk);
  183. }
  184. else if (topDisk==null) {
  185. pushDisk(disk,indexTo);
  186. getNewTop(indexFr,null);
  187. getNewTop(indexTo,disk);
  188. movectr++;
  189. currTower=indexTo;
  190. prevTower=indexFr;
  191. f.btnUndo.disabled=false;
  192. }
  193. else if (parseInt(disk.style.width)<parseInt(topDisk.style.width)){
  194. pushDisk(disk,indexTo);
  195. getNewTop(indexFr,null);
  196. getNewTop(indexTo,disk);
  197. movectr++;
  198. currTower=indexTo;
  199. prevTower=indexFr;
  200. if (indexTo==3) gameStatus=checkStatus();
  201. f.btnUndo.disabled=false;
  202. }
  203. else {
  204. getNewTop(indexFr,null);
  205. pushDisk(disk,indexFr); //put disk back to original tower
  206. getNewTop(indexFr,disk);
  207. }
  208. drag=false;
  209. f.yourmove.value=movectr;
  210. if (gameStatus) {
  211. f.btnUndo.disabled=true;
  212. minmove = parseInt(f.minmove.value);
  213. if (movectr==minmove) msg="\nCongratulations! You got it in "+minmove+" moves."
  214. else if (movectr>minmove) msg="\nYou can do better than that."
  215. else msg="";
  216. //alert("Game Over !!!"+msg);
  217. swal({ title: "干的漂亮!!!!", text: msg, imageUrl: "images/thumbs-up.jpg" });
  218. gameOver=true;
  219. }
  220. return;
  221. }
  222. function checkStatus(){
  223. var gameStat = false;
  224. var disks=0;
  225. for (var i=0;i<disksOnTower3.length;i++){
  226. if (disksOnTowers[2][i]!=null) disks++;
  227. }
  228. if (disks==parseInt(document.hanoi.diskno.options[document.hanoi.diskno.options.selectedIndex].text)) gameStat=true;
  229. return gameStat;
  230. }
  231. function pushDisk(disk,index){
  232. var diskWidth = parseInt(disk.style.width);
  233. var towerLeft = parseInt(document.getElementById("tower"+index).style.left);
  234. var topDisk = disksOnTowers[index-1][0];
  235. if (topDisk!=null){
  236. topDiskWidth = parseInt(topDisk.style.width);
  237. topDiskTop = parseInt(topDisk.style.top);
  238. disk.style.left=towerLeft+midhoriztower-diskWidth/2+"px";
  239. disk.style.top=topDiskTop-diskheight-1+"px";
  240. }
  241. else {
  242. disk.style.left=towerLeft+midhoriztower-diskWidth/2+"px";
  243. disk.style.top=basetop-diskheight-1+"px";
  244. }
  245. }
  246. function getNewTop(index,disk){
  247. if (disk==null){ //pop
  248. for (var i=0;i<disksOnTower1.length-1;i++){
  249. disksOnTowers[index-1][i]=disksOnTowers[index-1][i+1];
  250. }
  251. disksOnTowers[index-1][disksOnTower1.length-1]=null;
  252. }
  253. else { //push
  254. for (var i=disksOnTower1.length-1;i>=1;i--){
  255. disksOnTowers[index-1][i]=disksOnTowers[index-1][i-1];
  256. }
  257. disksOnTowers[index-1][0]=disk;
  258. }
  259. }
  260. function solve(btn){
  261. if (btn.value=="Solve"){
  262. if (movectr>0 && !gameOver && !stop)
  263. if (!confirm("Current game will be aborted, would you like to continue?")) return;
  264. btn.value="Stop";
  265. initVars();
  266. stop=false;
  267. demo=true;
  268. var f=document.hanoi;
  269. f.btnIns.disabled=true;
  270. f.btnRes.disabled=true;
  271. f.btnUndo.disabled=true;
  272. disknum = parseInt(f.diskno.options[f.diskno.options.selectedIndex].text);
  273. drawDisks(disknum);
  274. getMoves(0, 2, 1, disknum);
  275. t=window.setTimeout("moveDisk()",delay);
  276. }
  277. else {
  278. if (t) {
  279. window.clearTimeout(t);
  280. btn.value="Solve";
  281. frm.btnIns.disabled=false;
  282. frm.btnRes.disabled=false;
  283. t = null;
  284. stop=true;
  285. demo=false;
  286. }
  287. }
  288. }
  289. function moveDisk(){
  290. frm = document.hanoi;
  291. disk=disksOnTowers[arrFr[pos]][0];
  292. pushDisk(disk,arrTo[pos]+1);
  293. getNewTop(arrFr[pos]+1,null);
  294. getNewTop(arrTo[pos]+1,disk);
  295. movectr++;
  296. frm.yourmove.value=movectr;
  297. pos++;
  298. if (movectr<parseInt(frm.minmove.value)) t=window.setTimeout("moveDisk()",delay);
  299. else {
  300. //alert("Can you do that in "+movectr+" moves?");
  301. swal({ title: "搞定了!", text: movectr+"步!你还能够更快完成它吗?", imageUrl: "images/pinpin.png" });
  302. //swal("Can you do that in "+movectr+" moves?");
  303. gameOver=true;
  304. stop=false;
  305. frm.btnSolve.value="Solve";
  306. frm.btnIns.disabled=false;
  307. frm.btnRes.disabled=false;
  308. }
  309. }
  310. function getMoves(from,to,empty,numDisk){
  311. if (numDisk > 1) {
  312. getMoves(from, empty, to, numDisk - 1);
  313. arrFr[idx] = from;
  314. arrTo[idx++] = to;
  315. getMoves(empty, to, from, numDisk - 1);
  316. }
  317. else {
  318. arrFr[idx] = from;
  319. arrTo[idx++] = to;
  320. }
  321. }
  322. function unDo(btn){
  323. disk=disksOnTowers[currTower-1][0];
  324. pushDisk(disk,prevTower);
  325. getNewTop(currTower,null);
  326. getNewTop(prevTower,disk);
  327. movectr--;
  328. document.hanoi.yourmove.value=movectr;
  329. btn.disabled=true;
  330. }
  331. function displayIns(){
  332. var msg = "你要将所有的盘子从TOWER 1移动到TOWER 3\n";
  333. msg += "你每次只能移动一个盘子。\n";
  334. msg += "游戏最重要的规则是大的盘子不能放在小的盘子上面!";
  335. // var msg="Try to move all the disks from TOWER 1 to TOWER 3.\n";
  336. // msg+="You may only move one disk at a time.\n";
  337. // msg+="You must never allow a bigger disk to go on top of a smaller disk.";
  338. //alert(msg);
  339. swal({
  340. title: "汉诺塔游戏规则",
  341. text: msg,
  342. imageUrl: 'images/capitaine.png'
  343. });
  344. }

html可以找我要

文章来源: fantianzuo.blog.csdn.net,作者:兔老大RabbitMQ,版权归原作者所有,如需转载,请联系作者。

原文链接:fantianzuo.blog.csdn.net/article/details/103934763

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。