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