html_actuator.js 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  1. function HTMLActuator() {
  2. this.tileContainer = document.querySelector(".tile-container"),
  3. this.scoreContainer = document.querySelector(".score-container"),
  4. this.bestContainer = document.querySelector(".best-container"),
  5. this.messageContainer = document.querySelector(".game-message"),
  6. this.steps_num = 0,
  7. this.score = 0
  8. }
  9. HTMLActuator.prototype.actuate = function(e, t) {
  10. var n = this;
  11. window.requestAnimationFrame(function() {
  12. n.clearContainer(n.tileContainer),
  13. e.cells.forEach(function(e) {
  14. e.forEach(function(e) {
  15. e && n.addTile(e)
  16. })
  17. }),
  18. n.updateScore(t.score),
  19. n.updateBestScore(t.bestScore),
  20. t.terminated && (t.over ? n.message(!1) : t.won && n.message(!0))
  21. })
  22. },
  23. HTMLActuator.prototype.continueGame = function() {
  24. this.clearMessage()
  25. },
  26. HTMLActuator.prototype.clearContainer = function(e) {
  27. while (e.firstChild) e.removeChild(e.firstChild)
  28. },
  29. HTMLActuator.prototype.addTile = function(e) {
  30. var t = this,
  31. n = document.createElement("div"),
  32. r = document.createElement("div"),
  33. i = e.previousPosition || {
  34. x: e.x,
  35. y: e.y
  36. },
  37. s = this.positionClass(i),
  38. o = ["tile", "tile-" + e.value, s];
  39. e.value > 512 && o.push("tile-super"),
  40. this.applyClasses(n, o),
  41. r.classList.add("tile-inner");
  42. switch (e.value) {
  43. case 2:
  44. r.textContent = "我要对象";
  45. break;
  46. case 4:
  47. r.textContent = "苹果手机";
  48. break;
  49. case 8:
  50. r.textContent = "出国旅游";
  51. break;
  52. case 16:
  53. r.textContent = "看世界杯";
  54. break;
  55. case 32:
  56. r.textContent = "英雄联盟";
  57. break;
  58. case 64:
  59. r.textContent = "德玛西亚";
  60. break;
  61. case 128:
  62. r.textContent = "我在沭阳";
  63. break;
  64. case 256:
  65. r.textContent = "发现梦想"
  66. break;
  67. case 512:
  68. r.textContent = "梦想成真"
  69. }
  70. e.previousPosition ? window.requestAnimationFrame(function() {
  71. o[2] = t.positionClass({
  72. x: e.x,
  73. y: e.y
  74. }),
  75. t.applyClasses(n, o)
  76. }) : e.mergedFrom ? (o.push("tile-merged"), this.applyClasses(n, o), e.mergedFrom.forEach(function(e) {
  77. t.addTile(e)
  78. })) : (o.push("tile-new"), this.applyClasses(n, o)),
  79. n.appendChild(r),
  80. this.tileContainer.appendChild(n)
  81. },
  82. HTMLActuator.prototype.applyClasses = function(e, t) {
  83. e.setAttribute("class", t.join(" "))
  84. },
  85. HTMLActuator.prototype.normalizePosition = function(e) {
  86. return {
  87. x: e.x + 1,
  88. y: e.y + 1
  89. }
  90. },
  91. HTMLActuator.prototype.positionClass = function(e) {
  92. return e = this.normalizePosition(e),
  93. "tile-position-" + e.x + "-" + e.y
  94. },
  95. HTMLActuator.prototype.updateScore = function(e) {
  96. this.clearContainer(this.scoreContainer);
  97. var t = e - this.score;
  98. this.score = e,
  99. this.scoreContainer.textContent = this.score,
  100. share_score = this.score;
  101. if (t > 0) {
  102. var n = document.createElement("div");
  103. n.classList.add("score-addition"),
  104. n.textContent = "+" + t,
  105. this.scoreContainer.appendChild(n)
  106. }
  107. },
  108. HTMLActuator.prototype.updateBestScore = function(e) {
  109. this.bestContainer.textContent = e
  110. },
  111. HTMLActuator.prototype.message = function(e) {
  112. var t = e ? "game-won": "game-over",
  113. n = e ? "挑战成功!": "挑战失败!";
  114. this.messageContainer.classList.add(t),
  115. this.messageContainer.getElementsByTagName("p")[0].textContent = n
  116. },
  117. HTMLActuator.prototype.clearMessage = function() {
  118. this.messageContainer.classList.remove("game-won"),
  119. this.messageContainer.classList.remove("game-over")
  120. }