增加碰撞检测

web/src/assets/scripts/GameMap.js

@@ -24,7 +24,7 @@ export class GameMap extends AcGameObject{
         this.cols = 14;
 
         // 绘制棋盘内部区域的障碍物(墙)的数量
-        this.inner_walls_count = 50;
+        this.inner_walls_count = 20;
 
         // 存储所有的墙
         // 上面的 super() 会先将 AcGameObject 先绘制, walls 的绘制在后面执行,因此墙最后会覆盖原棋盘格进行绘制
@@ -196,6 +196,33 @@ export class GameMap extends AcGameObject{
               snake.next_step();
         }
     }
+    
+    // 增加碰撞检测:检测目标位置是否合法:没有撞到蛇的身体和墙
+    check_valid (cell) {
+        // 碰墙检测
+        for (const wall of this.walls){
+            if (wall.r === cell.r && wall.c === cell.c)
+                return false;
+        }
+
+        // 蛇身碰撞检测
+        for (const snake of this.snakes) {
+            // 先特判蛇尾碰撞情况
+            let k = snake.cells.length;
+            // 当蛇尾可以前进(蛇尾可以前进说明此回合蛇尾没有增加)的时候,蛇尾不要判断
+            if (!snake.check_tail_increasing()) {
+                k --;
+            }
+            // 判断蛇身现有结点是否碰撞
+            for (let i = 0; i < k; i++) {
+                if (snake.cells[i].r === cell.r && snake.cells[i].c === cell.c)
+                    return false
+            }
+        }
+
+        // 没有撞到障碍物时, return true 
+        return true;
+    }
 
     update(){
         this.update_size();

web/src/assets/scripts/Snake.js

@@ -80,6 +80,11 @@ export class Snake extends AcGameObject {
             // 这里需要使用 JSON 方法进行深度复制,以产生新的对象避免数据出错
             this.cells[i] = JSON.parse(JSON.stringify(this.cells[i - 1]));
         }
+
+        // 如果下一步操作的目标位置碰撞检测不合法,则蛇直接去世
+        if (!this.gamemap.check_valid(this.next_cell)){
+            this.status = "die";
+        }
     }
 
 
@@ -150,8 +155,13 @@ export class Snake extends AcGameObject {
         const L = this.gamemap.L;
         const ctx = this.gamemap.ctx;
 
-        // 画圆(蛇的身体结点)
+        // 定义填充颜色
         ctx.fillStyle = this.color;
+        // 当蛇已经去世了,将其颜色变成惨白色
+        if (this.status === "die") {
+            ctx.fillStyle = "#ffffff";
+        }
+
         // 蛇的身体不止一节,需要枚举画出所有的肢结。of 遍历 cells 值
         for(const cell of this.cells){
             // 画成正方形