|
@@ -3,16 +3,14 @@
|
|
<canvas id="tetris1" width="320" height="620" style="border: 1px #ccc solid" tabindex="0"/>
|
|
<canvas id="tetris1" width="320" height="620" style="border: 1px #ccc solid" tabindex="0"/>
|
|
<div style="position: absolute;top: 0;left: 350px;">
|
|
<div style="position: absolute;top: 0;left: 350px;">
|
|
<p>{{view?view.score:0}}</p>
|
|
<p>{{view?view.score:0}}</p>
|
|
- <button @click="reset">重新开始</button>
|
|
|
|
|
|
+ <el-button @click="reset" type="primary">重新开始</el-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script lang="ts">
|
|
<script lang="ts">
|
|
import { Component, Vue } from "vue-property-decorator";
|
|
import { Component, Vue } from "vue-property-decorator";
|
|
-import { SColor } from "sybotan-base";
|
|
|
|
-import { SCanvas, SCanvasView, SPaint } from "sybotan-graph";
|
|
|
|
-import { SPaintStyle } from "sybotan-graph/lib";
|
|
|
|
|
|
+import { SCanvasView, SColor, SPainter, STextAlign } from "@persagy-web/draw/lib";
|
|
|
|
|
|
/**
|
|
/**
|
|
* 俄罗斯方块视图
|
|
* 俄罗斯方块视图
|
|
@@ -20,10 +18,6 @@ import { SPaintStyle } from "sybotan-graph/lib";
|
|
* @author 庞利祥 <sybotan@126.com>
|
|
* @author 庞利祥 <sybotan@126.com>
|
|
*/
|
|
*/
|
|
class TetrisView extends SCanvasView {
|
|
class TetrisView extends SCanvasView {
|
|
- /** 小格画笔 */
|
|
|
|
- gridPaint = new SPaint();
|
|
|
|
- /** 文字画笔 */
|
|
|
|
- textPaint = new SPaint();
|
|
|
|
/** 网格数组 (二维数组初始化) */
|
|
/** 网格数组 (二维数组初始化) */
|
|
gridMap = Array(20)
|
|
gridMap = Array(20)
|
|
.fill(null)
|
|
.fill(null)
|
|
@@ -226,14 +220,6 @@ class TetrisView extends SCanvasView {
|
|
constructor(id: string) {
|
|
constructor(id: string) {
|
|
super(id);
|
|
super(id);
|
|
|
|
|
|
- // 设置绘制网格的颜色
|
|
|
|
- this.gridPaint.fill = SColor.Red;
|
|
|
|
- this.gridPaint.style = SPaintStyle.Fill;
|
|
|
|
-
|
|
|
|
- // 设置 GameOver 文本的颜色与字体
|
|
|
|
- this.textPaint.fill = SColor.Blue;
|
|
|
|
- this.textPaint.font.size = 40;
|
|
|
|
-
|
|
|
|
// 初始化游戏
|
|
// 初始化游戏
|
|
this.init();
|
|
this.init();
|
|
}
|
|
}
|
|
@@ -303,9 +289,9 @@ class TetrisView extends SCanvasView {
|
|
*
|
|
*
|
|
* @param canvas 画布
|
|
* @param canvas 画布
|
|
*/
|
|
*/
|
|
- onDraw(canvas: SCanvas): void {
|
|
|
|
|
|
+ onDraw(canvas: SPainter): void {
|
|
// 清空画布
|
|
// 清空画布
|
|
- this.clear();
|
|
|
|
|
|
+ canvas.clearRect(0, 0, this.width, this.height);
|
|
|
|
|
|
// 绘制网格
|
|
// 绘制网格
|
|
this.drawGridMap(canvas);
|
|
this.drawGridMap(canvas);
|
|
@@ -313,8 +299,11 @@ class TetrisView extends SCanvasView {
|
|
// 如果游戏结束
|
|
// 如果游戏结束
|
|
if (this.isGameOver) {
|
|
if (this.isGameOver) {
|
|
// 闪烁显示 “Game Over”
|
|
// 闪烁显示 “Game Over”
|
|
|
|
+ canvas.brush.color = SColor.Blue;
|
|
|
|
+ canvas.font.size = 20;
|
|
|
|
+ canvas.font.textAlign = STextAlign.Center;
|
|
if (Date.now() % 1000 > 500) {
|
|
if (Date.now() % 1000 > 500) {
|
|
- canvas.drawText("Game Over", 50, 300, this.textPaint);
|
|
|
|
|
|
+ canvas.drawText("Game Over", 50, 300);
|
|
}
|
|
}
|
|
|
|
|
|
// 刷新游戏画面
|
|
// 刷新游戏画面
|
|
@@ -342,7 +331,7 @@ class TetrisView extends SCanvasView {
|
|
*
|
|
*
|
|
* @param canvas 画布
|
|
* @param canvas 画布
|
|
*/
|
|
*/
|
|
- private drawGridMap(canvas: SCanvas): void {
|
|
|
|
|
|
+ private drawGridMap(canvas: SPainter): void {
|
|
// 遍历行
|
|
// 遍历行
|
|
for (let r = 0; r < 20; r++) {
|
|
for (let r = 0; r < 20; r++) {
|
|
// 遍历列
|
|
// 遍历列
|
|
@@ -358,7 +347,7 @@ class TetrisView extends SCanvasView {
|
|
*
|
|
*
|
|
* @param canvas 画布
|
|
* @param canvas 画布
|
|
*/
|
|
*/
|
|
- private drawFallBox(canvas: SCanvas): void {
|
|
|
|
|
|
+ private drawFallBox(canvas: SPainter): void {
|
|
// 遍历 box 的行
|
|
// 遍历 box 的行
|
|
for (let r = 0; r < 4; r++) {
|
|
for (let r = 0; r < 4; r++) {
|
|
// 遍历 box 的列
|
|
// 遍历 box 的列
|
|
@@ -410,11 +399,13 @@ class TetrisView extends SCanvasView {
|
|
* @param row 行
|
|
* @param row 行
|
|
* @param col 列
|
|
* @param col 列
|
|
*/
|
|
*/
|
|
- private drawGird(canvas: SCanvas, type: number, row: number, col: number): void {
|
|
|
|
|
|
+ private drawGird(canvas: SPainter, type: number, row: number, col: number): void {
|
|
// 如果类型不为 0
|
|
// 如果类型不为 0
|
|
if (type != 0) {
|
|
if (type != 0) {
|
|
// 绘制小格
|
|
// 绘制小格
|
|
- canvas.drawRect(col * 30 + 11, row * 30 + 11, 28, 28, this.gridPaint);
|
|
|
|
|
|
+ canvas.pen.color = SColor.Transparent;
|
|
|
|
+ canvas.brush.color = SColor.Red;
|
|
|
|
+ canvas.drawRect(col * 30 + 11, row * 30 + 11, 28, 28);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|