|
@@ -1,8 +1,10 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
+ <div style="position: relative;">
|
|
|
<canvas :id="id" width="320" height="620" tabindex="0"/>
|
|
|
- <p>{{score}}</p>
|
|
|
- <el-button @click="reset">reset</el-button>
|
|
|
+ <div style="position: absolute;top: 0;left: 350px;">
|
|
|
+ <p>{{score}}</p>
|
|
|
+ <el-button @click="reset">reset</el-button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
@@ -189,11 +191,12 @@
|
|
|
y = 0;
|
|
|
t = Date.now();
|
|
|
gameOver: boolean = false;
|
|
|
- xzColor: SColor = new SColor(254*this.random(), 254*this.random(), 254*this.random());
|
|
|
+ xzColor: SColor = new SColor();
|
|
|
|
|
|
constructor(id: string) {
|
|
|
super(id);
|
|
|
this.initMap();
|
|
|
+ this.initColor();
|
|
|
}
|
|
|
|
|
|
onKeyDown(event: KeyboardEvent): void {
|
|
@@ -238,7 +241,7 @@
|
|
|
painter.brush.color = new SColor("#2accc7");
|
|
|
this.drawMap(painter);
|
|
|
|
|
|
- painter.pen.color = SColor.Transparent;
|
|
|
+ painter.pen.color = this.xzColor;
|
|
|
painter.brush.color = this.xzColor;
|
|
|
this.drawFk(painter);
|
|
|
|
|
@@ -269,12 +272,27 @@
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ initXZ(){
|
|
|
+ this.x = 5;
|
|
|
+ this.y = 0;
|
|
|
+ this.fkType = Number((Math.random() * 6).toFixed());
|
|
|
+ this.dir = Number((Math.random() * 2).toFixed());
|
|
|
+ this.initColor();
|
|
|
+ }
|
|
|
+
|
|
|
+ initColor(){
|
|
|
+ const a = Number((200*Math.random()).toFixed());
|
|
|
+ const b = Number((200*Math.random()).toFixed());
|
|
|
+ const c = Number((200*Math.random()).toFixed());
|
|
|
+ this.xzColor = new SColor(a, b, c);
|
|
|
+ }
|
|
|
+
|
|
|
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);
|
|
|
+ painter.drawRoundRect(col * 30 + 11 - 60, row * 30 + 11, 28, 28, 6);
|
|
|
}
|
|
|
// if (n == 0) {
|
|
|
// painter.drawRect(col * 30 + 11 - 60, row * 30 + 11, 28, 28);
|
|
@@ -287,7 +305,7 @@
|
|
|
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);
|
|
|
+ painter.drawRoundRect((col + this.x) * 30 + 11 - 60, (row + this.y) * 30 + 11, 28, 28, 6);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -313,16 +331,12 @@
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- this.x = 5;
|
|
|
- this.y = 0;
|
|
|
- this.fkType = Number((Math.random() * 6).toFixed());
|
|
|
- this.dir = Number((Math.random() * 2).toFixed());
|
|
|
+ this.initXZ();
|
|
|
|
|
|
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{
|
|
@@ -371,6 +385,7 @@
|
|
|
|
|
|
reset(){
|
|
|
this.view!!.initMap();
|
|
|
+ this.view!!.initXZ();
|
|
|
this.score = 0;
|
|
|
this.view!!.update();
|
|
|
document.getElementById(this.id)!!.focus();
|