Browse Source

doc:docs> 2048文档

shaun-sheep 4 years ago
parent
commit
b5b2618607
2 changed files with 188 additions and 0 deletions
  1. 145 0
      docs/.vuepress/components/engine/demo/2048.vue
  2. 43 0
      docs/guides/engine/demo/2048.md

+ 145 - 0
docs/.vuepress/components/engine/demo/2048.vue

@@ -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>

+ 43 - 0
docs/guides/engine/demo/2048.md

@@ -0,0 +1,43 @@
+# 2048
+
+::: details 目录
+[[toc]]
+:::
+
+规则 游戏画布大小 4 * 4
+
+初始化 两个方块 数字为2
+
+可以上下左右移动,相同数字叠加(任意两个格子合并后,新增分数为合并后格子的值),叠加颜色变化
+
+移动的同一行,或同一列相同的可以叠加
+
+若所有数字都在同一侧,则操作无反应
+
+eg:都在左侧,操作左移,无反应
+
+每次移动的时候,若有空格,操作的相反方向则可以生出来一个格子2
+
+随机生成数字,如何去判断随机生成的位置,位置要求为空。
+
+#### 生成小方格算法
+
+1. 选择在哪行/列生成数字:当用户左移合成时,则选择在最右侧一列生成数字; 当用户上移合成时,则选择在最下侧一行生成数字;其他情况以此类推
+
+2. 在这行/列的4个位置中哪个位置生成数字:
+
+    a)将这行/列取出,有数字的记录数字,无数字的记为0,遍历每一项,将为0项的索引记录出来
+
+    b)在这些索引中随机取一项,作为生成数字的位置
+
+3. 将数字2 根据第一步获取到的行 以及 第2步 b)获取到的索引填到对应的位置,
+
+
+
+
+按键: wasd,上下左右指令
+
+game over : 画布上没有空格,并且所有的数字都无法叠加
+
+预判:执行上下左右移动,是否融合,如果都无法叠加,则结束
+