123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535 |
- <template>
- <div style="position: relative;">
- <canvas :id="id" width="320" height="620" tabindex="0"/>
- <div style="position: absolute;top: 0;left: 350px;">
- <p>{{score}}</p>
- <el-button @click="reset">reset</el-button>
- </div>
- </div>
- </template>
- <script lang="ts">
- import { Component, Vue } from "vue-property-decorator";
- import { v1 as uuid } from "uuid";
- import { SCanvasView, SColor, SPainter, STextAlign } from "@persagy-web/draw/lib";
- class TestView extends SCanvasView {
-
- map: number[][] = [];
-
- boxType: number = Number(Math.floor(Math.random() * 7));
-
- dir: number = Number(Math.floor(Math.random() * 4));
-
- box: number[][][] = [
- [
- [0, 0, 0, 0],
- [0, 1, 1, 0],
- [0, 1, 1, 0],
- [0, 0, 0, 0],
- ],
- [
- [0, 0, 0, 0],
- [0, 1, 1, 0],
- [0, 1, 1, 0],
- [0, 0, 0, 0],
- ],
- [
- [0, 0, 0, 0],
- [0, 1, 1, 0],
- [0, 1, 1, 0],
- [0, 0, 0, 0],
- ],
- [
- [0, 0, 0, 0],
- [0, 1, 1, 0],
- [0, 1, 1, 0],
- [0, 0, 0, 0],
- ],
- [
- [0, 1, 0, 0],
- [0, 1, 0, 0],
- [0, 1, 0, 0],
- [0, 1, 0, 0],
- ],
- [
- [0, 0, 0, 0],
- [1, 1, 1, 1],
- [0, 0, 0, 0],
- [0, 0, 0, 0],
- ],
- [
- [0, 0, 1, 0],
- [0, 0, 1, 0],
- [0, 0, 1, 0],
- [0, 0, 1, 0],
- ],
- [
- [0, 0, 0, 0],
- [0, 0, 0, 0],
- [1, 1, 1, 1],
- [0, 0, 0, 0],
- ],
- [
- [0, 0, 0, 0],
- [0, 1, 1, 0],
- [1, 1, 0, 0],
- [0, 0, 0, 0],
- ],
- [
- [0, 1, 0, 0],
- [0, 1, 1, 0],
- [0, 0, 1, 0],
- [0, 0, 0, 0],
- ],
- [
- [0, 0, 0, 0],
- [0, 0, 1, 1],
- [0, 1, 1, 0],
- [0, 0, 0, 0],
- ],
- [
- [0, 0, 0, 0],
- [0, 1, 0, 0],
- [0, 1, 1, 0],
- [0, 0, 1, 0],
- ],
- [
- [0, 0, 0, 0],
- [0, 1, 1, 0],
- [0, 0, 1, 1],
- [0, 0, 0, 0],
- ],
- [
- [0, 0, 0, 0],
- [0, 0, 1, 0],
- [0, 1, 1, 0],
- [0, 1, 0, 0],
- ],
- [
- [0, 0, 0, 0],
- [1, 1, 0, 0],
- [0, 1, 1, 0],
- [0, 0, 0, 0],
- ],
- [
- [0, 0, 1, 0],
- [0, 1, 1, 0],
- [0, 1, 0, 0],
- [0, 0, 0, 0],
- ],
- [
- [0, 0, 0, 0],
- [0, 1, 1, 0],
- [0, 0, 1, 0],
- [0, 0, 1, 0],
- ],
- [
- [0, 0, 0, 0],
- [0, 0, 1, 0],
- [1, 1, 1, 0],
- [0, 0, 0, 0],
- ],
- [
- [0, 1, 0, 0],
- [0, 1, 0, 0],
- [0, 1, 1, 0],
- [0, 0, 0, 0],
- ],
- [
- [0, 0, 0, 0],
- [0, 1, 1, 1],
- [0, 1, 0, 0],
- [0, 0, 0, 0],
- ],
- [
- [0, 0, 0, 0],
- [0, 1, 1, 0],
- [0, 1, 0, 0],
- [0, 1, 0, 0],
- ],
- [
- [0, 0, 0, 0],
- [1, 1, 1, 0],
- [0, 0, 1, 0],
- [0, 0, 0, 0],
- ],
- [
- [0, 0, 1, 0],
- [0, 0, 1, 0],
- [0, 1, 1, 0],
- [0, 0, 0, 0],
- ],
- [
- [0, 0, 0, 0],
- [0, 1, 0, 0],
- [0, 1, 1, 1],
- [0, 0, 0, 0],
- ],
- [
- [0, 0, 0, 0],
- [0, 0, 1, 0],
- [0, 1, 1, 1],
- [0, 0, 0, 0],
- ],
- [
- [0, 0, 0, 0],
- [0, 1, 0, 0],
- [0, 1, 1, 0],
- [0, 1, 0, 0],
- ],
- [
- [0, 0, 0, 0],
- [1, 1, 1, 0],
- [0, 1, 0, 0],
- [0, 0, 0, 0],
- ],
- [
- [0, 0, 1, 0],
- [0, 1, 1, 0],
- [0, 0, 1, 0],
- [0, 0, 0, 0],
- ]
- ];
-
- x = 5;
-
- y = 0;
-
- t = Date.now();
-
- gameOver: boolean = false;
-
- boxColor: SColor = new SColor();
-
- constructor(id: string) {
- super(id);
- this.initMap();
- this.initColor();
- }
-
- onKeyDown(event: KeyboardEvent): void {
-
- if (this.gameOver) {
- return;
- }
- if (event.code == "KeyW") {
-
- if (!this.checkKnocked(this.x, this.y, (this.dir + 1) % 4)) {
-
- this.dir = (this.dir + 1) % 4;
- }
- } else if (event.code == "KeyA") {
-
- if (!this.checkKnocked(this.x - 1, this.y, this.dir)) {
-
- this.x--;
- }
- } else if (event.code == "KeyD") {
-
- if (!this.checkKnocked(this.x + 1, this.y, this.dir)) {
-
- this.x++;
- }
- } else if (event.code == "KeyS") {
- if (!this.checkKnocked(this.x, this.y + 1, this.dir)) {
-
- this.y++;
- } else {
- this.fillMap();
- }
- }
-
- this.update();
- }
-
- onDraw(painter: SPainter): void {
-
- if (this.gameOver) {
- painter.brush.color = SColor.Blue;
- painter.font.size = 20;
- painter.font.textAlign = STextAlign.Center;
- painter.drawText("GAME OVER", 180, 30);
- return;
- }
-
- painter.clearRect(0, 0, this.width, this.height);
- painter.pen.color = new SColor("#0bc0ff");
- painter.brush.color = new SColor("#2accc7");
- this.drawMap(painter);
- painter.pen.color = this.boxColor;
- painter.brush.color = this.boxColor;
-
- this.drawBox(painter);
-
- if (Date.now() - this.t > 500) {
- if (!this.checkKnocked(this.x, this.y + 1, this.dir)) {
- this.y++;
- } else {
- this.fillMap();
- }
- this.t = Date.now();
- }
-
- this.update();
- }
-
- initMap(): void {
- this.gameOver = false;
- this.map = [];
- for (let row = 0; row < 22; row++) {
- const m1: number[] = [];
- for (let col = 0; col < 14; col++) {
- if (row > 19 || col < 2 || col > 11) {
-
- m1.push(-1);
- } else {
- m1.push(0);
- }
- }
- this.map.push(m1);
- }
- }
-
- initBox(): void {
-
- this.x = 5;
- this.y = 0;
-
- this.boxType = Number(Math.floor(Math.random() * 7));
- this.dir = Number(Math.floor(Math.random() * 4));
- this.initColor();
- }
-
- initColor(): void {
- const a = Number(Math.floor(Math.random() * 128));
- const b = Number(Math.floor(Math.random() * 128));
- const c = Number(Math.floor(Math.random() * 128));
- this.boxColor = new SColor(a, b, c);
- }
-
- private drawMap(painter: SPainter): void {
-
- for (let row = 0; row < 22; row++) {
-
- for (let col = 0; col < 14; col++) {
- this.drawShape(painter, row, col, this.map[row][col]);
- }
- }
- }
-
- private drawShape(painter: SPainter, row: number, col: number, type: number): void {
- const x = col * 30 + 11 - 60;
- const y = row * 30 + 11;
- switch (type) {
- case 0:
- break;
- case -1:
- painter.drawRoundRect(x, y, 28, 28, 6);
- break;
- default:
- painter.drawRoundRect(x, y, 28, 28, 6);
- break;
- }
- }
-
- private drawBox(painter: SPainter): void {
- for (let row = 0; row < 4; row++) {
- for (let col = 0; col < 4; col++) {
- this.drawShape(painter, row + this.y, col + this.x, this.box[this.boxType * 4 + this.dir][row][col]);
- }
- }
- }
-
- private checkKnocked(x: number, y: number, dir: number): boolean {
- for (let row = 0; row < 4; row++) {
- for (let col = 0; col < 4; col++) {
-
- if (this.box[this.boxType * 4 + dir][row][col] != 0 && this.map[y + row][x + col] != 0) {
- return true;
- }
- }
- }
-
- return false;
- }
-
- private fillMap(): void {
- for (let row = 0; row < 4; row++) {
- for (let col = 0; col < 4; col++) {
- if (this.box[this.boxType * 4 + this.dir][row][col] == 1) {
-
- this.map[this.y + row][this.x + col] = 1;
- }
- }
- }
- this.initBox();
- if (this.checkKnocked(this.x, this.y, this.dir)) {
-
- this.gameOver = true;
- }
- this.remove();
- }
-
- private remove(): void {
-
- let removeCount = 0;
-
- for (let row = 0; row < 20; row++) {
-
- let flag = true;
-
- for (let col = 2; col < 12; col++) {
- if (this.map[row][col] == 0) {
- flag = false;
- break;
- }
- }
- if (flag) {
- this.map.splice(row, 1);
-
- this.map.unshift(this.randomRow(10, 0));
-
- removeCount++;
- }
- }
- if (removeCount > 0) {
- this.$emit("score", removeCount);
-
- this.map.shift();
-
- this.map.splice(19, 0, this.randomRow());
- }
- }
-
- private randomRow(len: number = 10, num: number = 2): number[] {
- let array = new Array(len + 4).fill(-1);
-
- for (let i = 2; i < array.length - 2; i++) {
- array[i] = Math.floor(num * Math.random());
- }
- return array;
- }
- }
- @Component
- export default class ElsfkCanvas extends Vue {
-
- id: string = uuid();
-
- scoreList: number[] = [100, 300, 600, 1000];
-
- score: number = 0;
-
- view: TestView | undefined = undefined;
-
- mounted(): void {
- this.view = new TestView(this.id);
- this.view.connect("score", this, this.changeScore);
- document.getElementById(this.id)!!.focus();
- }
-
- changeScore(v: SCanvasView, count: number[]) {
-
- this.score += this.scoreList[count[0] - 1];
- }
-
- reset() {
- this.view!!.initMap();
- this.view!!.initBox();
- this.score = 0;
- this.view!!.update();
- document.getElementById(this.id)!!.focus();
- }
- }
- </script>
|