2048.vue 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
  1. <template>
  2. <div>
  3. <canvas id="canvas" width="400" height="400"></canvas>
  4. <el-button @click="reset" type="primary">重新开始</el-button>
  5. </div>
  6. </template>
  7. <script lang="ts">
  8. import { Component, Vue } from "vue-property-decorator"
  9. import { SCanvasView, SColor, SPainter, STextAlign } from "@persagy-web/draw/lib";
  10. /**
  11. * 2048
  12. *
  13. * @author 郝洁 <haojie@persagy.com>
  14. */
  15. class GameView extends SCanvasView {
  16. /** 游戏结束 */
  17. gameOver: boolean = false
  18. /** 格子宽度 */
  19. box_width: number = this.width * 0.8 * 0.25;
  20. margin_width: number = this.width * 0.2 * 0.20;
  21. /**
  22. * 构造函数
  23. *
  24. * @param id canvas DOM id
  25. */
  26. constructor(id: string) {
  27. super(id);
  28. this.init()
  29. }
  30. /**
  31. * 初始化游戏
  32. */
  33. init(): void {
  34. }
  35. /**
  36. * 键盘按下事件
  37. *
  38. * @param event 事件对象
  39. */
  40. onKeyDown(event: KeyboardEvent): void {
  41. if ( /* 游戏结束*/ 1) {
  42. return;
  43. }
  44. // 按键判断
  45. switch (event.code) {
  46. case "KeyW": // 上移动作
  47. case "ArrowUp":
  48. // 判断游戏是否继续,底部产生随机位置随机数
  49. break;
  50. case "KeyA": // 左移动作
  51. case "ArrowLeft":
  52. // 判断游戏是否继续,右部产生随机位置随机数
  53. break;
  54. case "KeyD": // 右移动作
  55. case "ArrowRight":
  56. // 判断游戏是否继续,左部产生随机位置随机数
  57. break;
  58. // 按键 下
  59. case "KeyS": // 下移动作
  60. case "ArrowDown":
  61. // 判断游戏是否继续,上部产生随机位置随机数
  62. break;
  63. default :
  64. // do nothing
  65. }
  66. // 更新视图
  67. }
  68. /**
  69. * 生成随机的格子
  70. */
  71. generateOneNumber(): void {
  72. if ( /* 游戏结束*/ 1) {
  73. return;
  74. }
  75. //随机一个位置,取新方块出现的位置
  76. //随机一个数字 2 或 4 ,在随机位置显示随机数字
  77. return;
  78. }
  79. /**
  80. * 新生成的数的位置,位置随机产生,位置不可被占用,不可重叠
  81. *
  82. * @param indexArray 小格子对应的索引
  83. */
  84. newLocationRandomNumber(indexArray: []) {
  85. }
  86. /**
  87. * 绘制游戏画面
  88. *
  89. * @param canvas 画布
  90. */
  91. onDraw(canvas: SPainter): void {
  92. canvas.clearRect(0, 0, this.width, this.height)
  93. //绘制格子
  94. if (this.gameOver) {
  95. canvas.brush.color = SColor.Red;
  96. canvas.font.size = 40;
  97. canvas.font.textAlign = STextAlign.Center;
  98. canvas.drawText("Game Over");
  99. }
  100. this.update();
  101. return;
  102. }
  103. }
  104. @Component
  105. export default class Gcanvas extends Vue {
  106. /** 实例化 */
  107. view: GameView | null = null;
  108. /**
  109. * 页面挂载完成
  110. */
  111. mounted(): void {
  112. this.view = new GameView('canvas')
  113. }
  114. /**
  115. * 重置操作
  116. */
  117. reset(): void {
  118. this.view!!.init()
  119. document.getElementById("canvas")!!.focus()
  120. }
  121. }
  122. </script>
  123. <style scoped>
  124. </style>