|
@@ -22,9 +22,9 @@ class TestView extends SCanvasView {
|
|
|
/** 背景表示数组 */
|
|
|
map: number[][] = [];
|
|
|
/** 方块类型索引 0-6 */
|
|
|
- boxType: number = Number(Math.floor(Math.random() * 7));
|
|
|
+ boxType: number = Number(Math.floor(Math.random() * 7));
|
|
|
/** 方块变形索引 0-3 */
|
|
|
- dir: number = Number(Math.floor(Math.random() * 4));
|
|
|
+ dir: number = Number(Math.floor(Math.random() * 4));
|
|
|
/** 所有方块集合 */
|
|
|
box: number[][][] = [
|
|
|
[
|
|
@@ -196,9 +196,9 @@ class TestView extends SCanvasView {
|
|
|
[0, 0, 0, 0],
|
|
|
]
|
|
|
];
|
|
|
- /** 方块初始位置x坐标 */
|
|
|
+ /** 方块初始位置 x 坐标 */
|
|
|
x = 5;
|
|
|
- /** 方块初始位置y坐标 */
|
|
|
+ /** 方块初始位置 y 坐标 */
|
|
|
y = 0;
|
|
|
/** 记录上次刷新时间 */
|
|
|
t = Date.now();
|
|
@@ -216,7 +216,7 @@ class TestView extends SCanvasView {
|
|
|
super(id);
|
|
|
this.initMap();
|
|
|
this.initColor();
|
|
|
- }
|
|
|
+ } // Constructor
|
|
|
|
|
|
/**
|
|
|
* 键盘按下事件
|
|
@@ -224,32 +224,40 @@ class TestView extends SCanvasView {
|
|
|
* @param event 事件对象
|
|
|
*/
|
|
|
onKeyDown(event: KeyboardEvent): void {
|
|
|
- if (this.gameOver) { // 游戏结束
|
|
|
+ // 如果游戏结束, 不响应任何键
|
|
|
+ if (this.gameOver) {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
- if (event.code == "KeyW") { // 按键 w
|
|
|
- if (!this.checkKnocked(this.x, this.y, (this.dir + 1) % 4)) { // 检查变形后是否碰撞
|
|
|
+ if (event.code == "KeyW") { // 用户按下 W 键,变形
|
|
|
+ // 如果变形不会碰撞
|
|
|
+ if (!this.checkKnocked(this.x, this.y, (this.dir + 1) % 4)) {
|
|
|
+ // 进行变形操作
|
|
|
this.dir = (this.dir + 1) % 4;
|
|
|
}
|
|
|
- } else if (event.code == "KeyA") { // 按键 a
|
|
|
- if (!this.checkKnocked(this.x - 1, this.y, this.dir)) { // 检查左移后是否碰撞
|
|
|
+ } else if (event.code == "KeyA") { // 用户按下 A 键,左移
|
|
|
+ // 如果左移不会碰撞
|
|
|
+ if (!this.checkKnocked(this.x - 1, this.y, this.dir)) {
|
|
|
+ // 左移
|
|
|
this.x--;
|
|
|
}
|
|
|
- } else if (event.code == "KeyD") { // 按键 d
|
|
|
- if (!this.checkKnocked(this.x + 1, this.y, this.dir)) { // 检查右移后是否碰撞
|
|
|
+ } else if (event.code == "KeyD") { // 用户按下 D 键,右移
|
|
|
+ // 如果右移不会碰撞
|
|
|
+ if (!this.checkKnocked(this.x + 1, this.y, this.dir)) {
|
|
|
+ // 右移
|
|
|
this.x++;
|
|
|
}
|
|
|
- } else if (event.code == "KeyS") { // 按键 s
|
|
|
- if (!this.checkKnocked(this.x, this.y + 1, this.dir)) { // 检查下移后是否碰撞
|
|
|
+ } else if (event.code == "KeyS") { // 用户按下 S 键,下移
|
|
|
+ if (!this.checkKnocked(this.x, this.y + 1, this.dir)) {
|
|
|
+ // 下移
|
|
|
this.y++;
|
|
|
} else {
|
|
|
this.fillMap();
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
+ // 更新视图
|
|
|
this.update();
|
|
|
- }
|
|
|
+ } // Function onKeyDown()
|
|
|
|
|
|
/**
|
|
|
* Item 绘制操作
|
|
@@ -257,15 +265,15 @@ class TestView extends SCanvasView {
|
|
|
* @param painter 绘制对象
|
|
|
*/
|
|
|
onDraw(painter: SPainter): void {
|
|
|
-
|
|
|
- if (this.gameOver) { // 游戏结束绘制文字
|
|
|
+ // 如果游戏结束,绘制文字
|
|
|
+ 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");
|
|
@@ -277,8 +285,8 @@ class TestView extends SCanvasView {
|
|
|
// 绘制图形
|
|
|
this.drawBox(painter);
|
|
|
|
|
|
-
|
|
|
- if (Date.now() - this.t > 500) { // 下落速度,下移一格
|
|
|
+ // 判断是否到了 box 下落的时间(用时间间隔判断,不会受机器的性能影响)
|
|
|
+ if (Date.now() - this.t > 500) {
|
|
|
if (!this.checkKnocked(this.x, this.y + 1, this.dir)) { // 下移是否碰撞
|
|
|
this.y++;
|
|
|
} else {
|
|
@@ -286,8 +294,9 @@ class TestView extends SCanvasView {
|
|
|
}
|
|
|
this.t = Date.now();
|
|
|
}
|
|
|
+ // 刷新游戏画面
|
|
|
this.update();
|
|
|
- }
|
|
|
+ } // Function onDraw()
|
|
|
|
|
|
/**
|
|
|
* 初始化背景
|
|
@@ -307,18 +316,20 @@ class TestView extends SCanvasView {
|
|
|
}
|
|
|
this.map.push(m1);
|
|
|
}
|
|
|
- }
|
|
|
+ } // Function initMap()
|
|
|
|
|
|
/**
|
|
|
* 初始化方块形状
|
|
|
*/
|
|
|
initBox(): void {
|
|
|
+ // box 的初始位置
|
|
|
this.x = 5;
|
|
|
this.y = 0;
|
|
|
+ // box 的类型与方向
|
|
|
this.boxType = Number(Math.floor(Math.random() * 7));
|
|
|
this.dir = Number(Math.floor(Math.random() * 4));
|
|
|
this.initColor();
|
|
|
- }
|
|
|
+ } // Function initBox()
|
|
|
|
|
|
/**
|
|
|
* 初始化方块颜色
|
|
@@ -328,7 +339,7 @@ class TestView extends SCanvasView {
|
|
|
const b = Number(Math.floor(Math.random() * 128));
|
|
|
const c = Number(Math.floor(Math.random() * 128));
|
|
|
this.boxColor = new SColor(a, b, c);
|
|
|
- }
|
|
|
+ } // Function initColor()
|
|
|
|
|
|
/**
|
|
|
* 绘制背景
|
|
@@ -336,12 +347,14 @@ class TestView extends SCanvasView {
|
|
|
* @param painter 绘制对象
|
|
|
*/
|
|
|
private drawMap(painter: SPainter): void {
|
|
|
- for (let row = 0; row < 22; row++) { // 行数
|
|
|
- for (let col = 0; col < 14; col++) { // 列数
|
|
|
+ // 遍历行
|
|
|
+ for (let row = 0; row < 22; row++) {
|
|
|
+ // 遍历列
|
|
|
+ for (let col = 0; col < 14; col++) {
|
|
|
this.drawShape(painter, row, col, this.map[row][col]);
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
+ } // Function drawMap()
|
|
|
|
|
|
/**
|
|
|
* 绘制实体图形
|
|
@@ -367,7 +380,7 @@ class TestView extends SCanvasView {
|
|
|
painter.drawRoundRect(x, y, 28, 28, 6);
|
|
|
break;
|
|
|
}
|
|
|
- }
|
|
|
+ } // Function drawShape()
|
|
|
|
|
|
/**
|
|
|
* 绘制方块
|
|
@@ -380,7 +393,7 @@ class TestView extends SCanvasView {
|
|
|
this.drawShape(painter, row + this.y, col + this.x, this.box[this.boxType * 4 + this.dir][row][col]);
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
+ } // Function drawBox()
|
|
|
|
|
|
/**
|
|
|
* 是否碰撞
|
|
@@ -399,8 +412,9 @@ class TestView extends SCanvasView {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ // 返回不发生碰撞
|
|
|
return false;
|
|
|
- }
|
|
|
+ } // Function checkKnocked()
|
|
|
|
|
|
/**
|
|
|
* 将方块合到背景中
|
|
@@ -422,7 +436,7 @@ class TestView extends SCanvasView {
|
|
|
}
|
|
|
|
|
|
this.remove();
|
|
|
- }
|
|
|
+ } // Function fillMap()
|
|
|
|
|
|
/**
|
|
|
* 消除满行
|
|
@@ -446,6 +460,7 @@ class TestView extends SCanvasView {
|
|
|
this.map.splice(row, 1);
|
|
|
// 顶部加一行空行
|
|
|
this.map.unshift(this.randomRow(10, 0));
|
|
|
+ // 统计消除的行数
|
|
|
removeCount++;
|
|
|
}
|
|
|
}
|
|
@@ -457,7 +472,7 @@ class TestView extends SCanvasView {
|
|
|
// 底部随机产生一行
|
|
|
this.map.splice(19, 0, this.randomRow());
|
|
|
}
|
|
|
- }
|
|
|
+ } // Function remove()
|
|
|
|
|
|
/**
|
|
|
* 随机数组生成
|
|
@@ -472,7 +487,7 @@ class TestView extends SCanvasView {
|
|
|
}
|
|
|
|
|
|
return array;
|
|
|
- }
|
|
|
+ } // Function randomRow()
|
|
|
}
|
|
|
|
|
|
@Component
|