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";
- 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;
-
- constructor(id: string) {
- super(id);
- this.init()
- }
-
- init(): void {
- }
-
- 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 :
-
- }
-
- }
-
- generateOneNumber(): void {
- if ( 1) {
- return;
- }
-
-
- return;
- }
-
- newLocationRandomNumber(indexArray: []) {
- }
-
- 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>
|