|
@@ -0,0 +1,379 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <canvas :id="id" width="320" height="620" tabindex="0"/>
|
|
|
+ <p>{{score}}</p>
|
|
|
+ <el-button @click="reset">reset</el-button>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts">
|
|
|
+ import { Component, Prop, 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[][] = [];
|
|
|
+ fkType: number = Number((Math.random() * 6).toFixed()); // 0-6
|
|
|
+ dir: number = Number((Math.random() * 2).toFixed()); // 0-3
|
|
|
+ fk: 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;
|
|
|
+ xzColor: SColor = new SColor(254*this.random(), 254*this.random(), 254*this.random());
|
|
|
+
|
|
|
+ constructor(id: string) {
|
|
|
+ super(id);
|
|
|
+ this.initMap();
|
|
|
+ }
|
|
|
+
|
|
|
+ onKeyDown(event: KeyboardEvent): void {
|
|
|
+ if (this.gameOver) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (event.code == "KeyW") {
|
|
|
+ if (!this.isPz(this.x, this.y, (this.dir + 1) % 4)) {
|
|
|
+ this.dir = (this.dir + 1) % 4;
|
|
|
+ }
|
|
|
+ } else if (event.code == "KeyA") {
|
|
|
+ if (!this.isPz(this.x - 1, this.y, this.dir)) {
|
|
|
+ this.x--;
|
|
|
+ }
|
|
|
+ } else if (event.code == "KeyD") {
|
|
|
+ if (!this.isPz(this.x + 1, this.y, this.dir)) {
|
|
|
+ this.x++;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ else if (event.code == "KeyS") {
|
|
|
+ if (!this.isPz(this.x, this.y + 1, this.dir)) {
|
|
|
+ this.y++;
|
|
|
+ } else {
|
|
|
+ this.fullMap();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ 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 = SColor.Transparent;
|
|
|
+ painter.brush.color = this.xzColor;
|
|
|
+ this.drawFk(painter);
|
|
|
+
|
|
|
+ if (Date.now() - this.t > 500) {
|
|
|
+ if (!this.isPz(this.x, this.y + 1, this.dir)) {
|
|
|
+ this.y++;
|
|
|
+ } else {
|
|
|
+ this.fullMap();
|
|
|
+ }
|
|
|
+ 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(2);
|
|
|
+ } else {
|
|
|
+ m1.push(0);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.map.push(m1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ private drawMap(painter: SPainter): void {
|
|
|
+ for (let row = 0; row < 22; row++) {
|
|
|
+ for (let col = 0; col < 14; col++) {
|
|
|
+ const n = this.map[row][col];
|
|
|
+ if (n == 1 || n == 2) {
|
|
|
+ painter.drawRect(col * 30 + 11 - 60, row * 30 + 11, 28, 28);
|
|
|
+ }
|
|
|
+ // if (n == 0) {
|
|
|
+ // painter.drawRect(col * 30 + 11 - 60, row * 30 + 11, 28, 28);
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ private drawFk(painter: SPainter): void {
|
|
|
+ for (let row = 0; row < 4; row++) {
|
|
|
+ for (let col = 0; col < 4; col++) {
|
|
|
+ if (this.fk[this.fkType * 4 + this.dir][row][col] == 1) {
|
|
|
+ painter.drawRect((col + this.x) * 30 + 11 - 60, (row + this.y) * 30 + 11, 28, 28);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ private isPz(x: number, y: number, dir: number): boolean {
|
|
|
+ for (let row = 0; row < 4; row++) {
|
|
|
+ for (let col = 0; col < 4; col++) {
|
|
|
+ if (this.fk[this.fkType * 4 + dir][row][col] == 1 && this.map[y + row][x + col] != 0) {
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ private fullMap() {
|
|
|
+ for (let row = 0; row < 4; row++) {
|
|
|
+ for (let col = 0; col < 4; col++) {
|
|
|
+ if (this.fk[this.fkType * 4 + this.dir][row][col] == 1) {
|
|
|
+ this.map[this.y + row][this.x + col] = 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ this.x = 5;
|
|
|
+ this.y = 0;
|
|
|
+ this.fkType = Number((Math.random() * 6).toFixed());
|
|
|
+ this.dir = Number((Math.random() * 2).toFixed());
|
|
|
+
|
|
|
+ if(this.isPz(this.x, this.y, this.dir)){
|
|
|
+ this.gameOver = true;
|
|
|
+ }
|
|
|
+ this.xc();
|
|
|
+ this.xzColor = new SColor(254*this.random(), 254*this.random(), 254*this.random());
|
|
|
+ }
|
|
|
+
|
|
|
+ private xc(): void{
|
|
|
+ let xcSum = 1;
|
|
|
+ for (let row = 0; row < 20; row++) {
|
|
|
+ let flag = true;
|
|
|
+ for (let col = 0; col < 14; col++) {
|
|
|
+ if (this.map[row][col] == 0) {
|
|
|
+ flag = false;
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if(flag){
|
|
|
+ this.map.splice(row,1);
|
|
|
+ this.map.unshift([2,2, 0,0,0,0,0,0,0,0,0,0,2,2]);
|
|
|
+ xcSum++;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (xcSum > 1) {
|
|
|
+ this.$emit('score', xcSum);
|
|
|
+ this.map.shift();
|
|
|
+ this.map.splice(19, 0, [2,2, this.random(),this.random(),this.random(),this.random(),this.random(),this.random(),this.random(),this.random(),this.random(),this.random(),2,2])
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ private random():number{
|
|
|
+ return Number(Math.random().toFixed())
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @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] - 2];
|
|
|
+ }
|
|
|
+
|
|
|
+ reset(){
|
|
|
+ this.view!!.initMap();
|
|
|
+ this.score = 0;
|
|
|
+ this.view!!.update();
|
|
|
+ document.getElementById(this.id)!!.focus();
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|