|
@@ -0,0 +1,145 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <canvas id="canvas" width="400" height="400"></canvas>
|
|
|
+ <el-button @click="reset" type="primary">重新开始</el-button>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts">
|
|
|
+import { Component, Vue } from "vue-property-decorator"
|
|
|
+import { SCanvasView, SColor, SPainter, STextAlign } from "@persagy-web/draw/lib";
|
|
|
+
|
|
|
+/**
|
|
|
+ * 2048
|
|
|
+ *
|
|
|
+ * @author 郝洁 <haojie@persagy.com>
|
|
|
+ */
|
|
|
+class GameView extends SCanvasView {
|
|
|
+ /** 游戏结束 */
|
|
|
+ gameOver: boolean = false
|
|
|
+ /** 格子宽度 */
|
|
|
+ box_width: number = this.width * 0.8 * 0.25;
|
|
|
+ margin_width: number = this.width * 0.2 * 0.20;
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 构造函数
|
|
|
+ *
|
|
|
+ * @param id canvas DOM id
|
|
|
+ */
|
|
|
+ constructor(id: string) {
|
|
|
+ super(id);
|
|
|
+ this.init()
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 初始化游戏
|
|
|
+ */
|
|
|
+ init(): void {
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 键盘按下事件
|
|
|
+ *
|
|
|
+ * @param event 事件对象
|
|
|
+ */
|
|
|
+ onKeyDown(event: KeyboardEvent): void {
|
|
|
+ if ( /* 游戏结束*/ 1) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ // 按键判断
|
|
|
+ switch (event.code) {
|
|
|
+ case "KeyW": // 上移动作
|
|
|
+ case "ArrowUp":
|
|
|
+ // 判断游戏是否继续,底部产生随机位置随机数
|
|
|
+ break;
|
|
|
+
|
|
|
+ case "KeyA": // 左移动作
|
|
|
+ case "ArrowLeft":
|
|
|
+ // 判断游戏是否继续,右部产生随机位置随机数
|
|
|
+ break;
|
|
|
+
|
|
|
+ case "KeyD": // 右移动作
|
|
|
+ case "ArrowRight":
|
|
|
+ // 判断游戏是否继续,左部产生随机位置随机数
|
|
|
+ break;
|
|
|
+ // 按键 下
|
|
|
+ case "KeyS": // 下移动作
|
|
|
+ case "ArrowDown":
|
|
|
+ // 判断游戏是否继续,上部产生随机位置随机数
|
|
|
+ break;
|
|
|
+ default :
|
|
|
+ // do nothing
|
|
|
+ }
|
|
|
+
|
|
|
+ // 更新视图
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 生成随机的格子
|
|
|
+ */
|
|
|
+ generateOneNumber(): void {
|
|
|
+ if ( /* 游戏结束*/ 1) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ //随机一个位置,取新方块出现的位置
|
|
|
+
|
|
|
+ //随机一个数字 2 或 4 ,在随机位置显示随机数字
|
|
|
+
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 新生成的数的位置,位置随机产生,位置不可被占用,不可重叠
|
|
|
+ *
|
|
|
+ * @param indexArray 小格子对应的索引
|
|
|
+ */
|
|
|
+ newLocationRandomNumber(indexArray: []) {
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 绘制游戏画面
|
|
|
+ *
|
|
|
+ * @param canvas 画布
|
|
|
+ */
|
|
|
+ onDraw(canvas: SPainter): void {
|
|
|
+ canvas.clearRect(0, 0, this.width, this.height)
|
|
|
+ //绘制格子
|
|
|
+ if (this.gameOver) {
|
|
|
+ canvas.brush.color = SColor.Red;
|
|
|
+ canvas.font.size = 40;
|
|
|
+ canvas.font.textAlign = STextAlign.Center;
|
|
|
+ canvas.drawText("Game Over");
|
|
|
+ }
|
|
|
+ this.update();
|
|
|
+ return;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@Component
|
|
|
+export default class Gcanvas extends Vue {
|
|
|
+ /** 实例化 */
|
|
|
+ view: GameView | null = null;
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 页面挂载完成
|
|
|
+ */
|
|
|
+ mounted(): void {
|
|
|
+ this.view = new GameView('canvas')
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 重置操作
|
|
|
+ */
|
|
|
+ reset(): void {
|
|
|
+ this.view!!.init()
|
|
|
+ document.getElementById("canvas")!!.focus()
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+
|
|
|
+</style>
|