commit

package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve --open",
+    "start": "ng serve --open --host 0.0.0.0",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
     "test": "ng test"

src/app/app.component.spec.ts

@@ -1,35 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
-import { AppComponent } from './app.component';
-
-describe('AppComponent', () => {
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [
-        RouterTestingModule
-      ],
-      declarations: [
-        AppComponent
-      ],
-    }).compileComponents();
-  });
-
-  it('should create the app', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app).toBeTruthy();
-  });
-
-  it(`should have as title 'snake-game-ng'`, () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app.title).toEqual('snake-game-ng');
-  });
-
-  it('should render title', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('.content span')?.textContent).toContain('snake-game-ng app is running!');
-  });
-});

src/app/services/snake/food.service.spec.ts

@@ -1,16 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { FoodService } from './food.service';
-
-describe('FoodService', () => {
-  let service: FoodService;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-    service = TestBed.inject(FoodService);
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-});

src/app/services/snake/game-control.service.spec.ts

@@ -1,16 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { GameControlService } from './game-control.service';
-
-describe('GameControlService', () => {
-  let service: GameControlService;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-    service = TestBed.inject(GameControlService);
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-});

src/app/services/snake/game-control.service.ts

@@ -4,7 +4,7 @@
  * @Author: Ruin 🍭
  * @Date: 2021-12-09 15:25:45
  * @LastEditors: 刘引
- * @LastEditTime: 2021-12-16 09:26:41
+ * @LastEditTime: 2021-12-17 16:38:58
  */
 import { Injectable } from "@angular/core";
 import { FoodService } from "./food.service";
@@ -38,7 +38,7 @@ export class GameControlService {
     document.addEventListener("keydown", this.keyDownHandle.bind(this));
     // 调用run方法
     this.run();
-    console.log("触发init");
+    // console.log("触发init");
   }
 
   keyDownHandle(event: KeyboardEvent) {
@@ -87,6 +87,7 @@ export class GameControlService {
     } catch (e: any) {
       // 进入到catch说明出现了异常
       alert(e.message + "GAME OVER");
+      return;
       // this.init();
       // this.isLive = false;
     }
@@ -97,7 +98,7 @@ export class GameControlService {
     // 开启定时器调用
     setTimeout(() => {
       this.run();
-    }, 500 - this.scorePanel.levelNum * 30);
+    }, 300 - this.scorePanel.levelNum * 30);
   }
   // 定义一个方法检查蛇是否吃到食物
   checkEat(X: number, Y: number) {
@@ -105,12 +106,12 @@ export class GameControlService {
     this.food.getFoodDom();
 
     if (X === this.food.X && Y === this.food.Y) {
+      // 蛇要增加一节
+      this.snake.addBody();
       //食物的位置要进行重置
       this.food.change();
       // 分数增加
       this.scorePanel.addScore();
-      // 蛇要增加一节
-      this.snake.addBody();
     }
   }
 }

src/app/services/snake/main-snake.service.spec.ts

@@ -1,16 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { MainSnakeService } from './main-snake.service';
-
-describe('MainSnakeService', () => {
-  let service: MainSnakeService;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-    service = TestBed.inject(MainSnakeService);
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-});

src/app/services/snake/main-snake.service.ts

@@ -4,7 +4,7 @@
  * @Author: Ruin 🍭
  * @Date: 2021-12-09 14:52:26
  * @LastEditors: 刘引
- * @LastEditTime: 2021-12-17 13:21:37
+ * @LastEditTime: 2021-12-17 16:44:48
  */
 import { Injectable } from "@angular/core";
 
@@ -19,11 +19,12 @@ export class MainSnakeService {
   bodies!: HTMLCollection;
   // 获取蛇的容器
   element!: HTMLElement;
+  snakeBodies: any = [1, 2, 3, 4];
   constructor() {}
   getSnakeDom() {
     this.element = document.getElementById("snake") as HTMLElement;
     this.head = document.querySelector("#snake>div") as HTMLElement;
-    this.bodies = this.element.getElementsByTagName("snake") as HTMLCollection;
+    this.bodies = this.element.getElementsByTagName("div") as HTMLCollection;
   }
   // 获取蛇的X坐标(蛇头坐标)
   get X() {
@@ -46,7 +47,23 @@ export class MainSnakeService {
       // 进入判断说明蛇撞墙了
       throw new Error("蛇撞墙了");
     }
+    // 修改x时，是在修改水平坐标，蛇在左右移动，蛇在向左移动时，不能向右掉头，反之亦然
+    if ((this.bodies[3] as HTMLElement).offsetLeft + 10 === value) {
+      // console.log((this.bodies[3] as HTMLElement).offsetLeft + 10, value);
+
+      if (value < this.X) {
+        value = this.X - 10;
+        console.log("value", value, "x", this.X);
+        console.log("向左掉头");
+      } else if (value > this.X) {
+        value = this.X + 10;
+        console.log("value", value, "x", this.X);
+        console.log("向右掉头");
+      }
+    }
+    this.moveBody();
     this.head.style.left = value + "px";
+    this.checkHeadBody();
   }
 
   set Y(value: number) {
@@ -58,19 +75,44 @@ export class MainSnakeService {
       // 进入判断说明蛇撞墙了,抛出一个异常
       throw new Error("蛇撞墙了");
     }
+    // 修改x时，是在修改垂直坐标，蛇在左右移动，蛇在向左移动时，不能向右掉头，反之亦然
+    if ((this.bodies[3] as HTMLElement).offsetTop + 10 === value) {
+      // console.log((this.bodies[3] as HTMLElement).offsetLeft + 10, value);
+
+      if (value < this.Y) {
+        value = this.Y - 10;
+      } else if (value > this.Y) {
+        value = this.Y + 10;
+      }
+    }
+    this.moveBody();
     this.head.style.top = value + "px";
+    this.checkHeadBody();
   }
 
   // 蛇增加身体的方法
   addBody() {
-    // 向element中添加一个div
+    this.snakeBodies.push(this.bodies.length);
-
-    this.element.insertAdjacentHTML("beforeend", "<div></div>");
   }
   //遍历获取所有的身体
-  // for (let index = 0; index < this.bodies.length; index++) {
+  moveBody() {
-  //   const element = array[index];
+    for (let i = this.bodies.length - 1; i > 0; i--) {
-
+      // 获取前边身体的位置
-  // }
+      let X = (this.bodies[i - 1] as HTMLElement).offsetLeft;
-  // 遍历一个数
+      let Y = (this.bodies[i - 1] as HTMLElement).offsetTop;
+      // 将值设置到当前身体上
+      (this.bodies[i] as HTMLElement).style.left = X + "px";
+      (this.bodies[i] as HTMLElement).style.top = Y + "px";
+    }
+  }
+  // 用来检查蛇头是否撞到身体的方法
+  checkHeadBody() {
+    for (let i = 1; i < this.bodies.length; i++) {
+      let bd = this.bodies[i] as HTMLElement;
+      if (this.X === bd.offsetLeft && this.Y === bd.offsetTop) {
+        // 进入判断说明蛇头撞到了身体
+        throw new Error("蛇撞到自己了");
+      }
+    }
+  }
 }

src/app/services/snake/score-panel.service.spec.ts

@@ -1,24 +0,0 @@
-/*
- * @Description: {{ByRuin}}
- * @Version: 2.0
- * @Author: Ruin 🍭
- * @Date: 2021-12-09 13:24:13
- * @LastEditors: 刘引
- * @LastEditTime: 2021-12-17 11:47:49
- */
-import { TestBed } from "@angular/core/testing";
-
-import { ScorePanelService } from "./score-panel.service";
-
-describe("ScorePanelService", () => {
-  let service: ScorePanelService;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-    service = TestBed.inject(ScorePanelService);
-  });
-
-  it("should be created", () => {
-    expect(service).toBeTruthy();
-  });
-});

src/app/views/snake/snake.component.html

@@ -4,7 +4,7 @@
  * @Author: Ruin 🍭
  * @Date: 2021-12-09 10:12:01
  * @LastEditors: 刘引
- * @LastEditTime: 2021-12-17 13:13:21
+ * @LastEditTime: 2021-12-17 14:40:49
 -->
 <!-- 创建游戏主容器 -->
 <div class="root">
@@ -14,7 +14,7 @@
       <!-- 设置蛇 -->
       <div class="snake" id="snake">
         <!-- snake内部的div表示蛇的各部分 -->
-        <div></div>
+        <div *ngFor="let item of snake.snakeBodies"></div>
       </div>
       <!-- 设置食物 -->
       <div class="food" id="food">

src/app/views/snake/snake.component.scss

@@ -24,6 +24,8 @@
           height: 10px;
           background-color: black;
           border: 1px solid $bg-color;
+          top: 0px;
+          left: 0px;
         }
       }
       .food {

src/app/views/snake/snake.component.spec.ts

@@ -1,24 +0,0 @@
-import { ComponentFixture, TestBed } from "@angular/core/testing";
-
-import { SnakeComponent } from "./snake.component";
-
-describe("SnakeComponent", () => {
-  let component: SnakeComponent;
-  let fixture: ComponentFixture<SnakeComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [SnakeComponent],
-    }).compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(SnakeComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it("should create", () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/views/snake/snake.component.ts

@@ -4,7 +4,7 @@
  * @Author: Ruin 🍭
  * @Date: 2021-12-09 10:12:01
  * @LastEditors: 刘引
- * @LastEditTime: 2021-12-17 10:46:49
+ * @LastEditTime: 2021-12-17 14:39:17
  */
 import { Component, OnInit } from "@angular/core";
 import { FoodService } from "src/app/services/snake/food.service";
@@ -37,8 +37,11 @@ export class SnakeComponent implements OnInit {
   ngOnInit(): void {
     // this.keyDownHandle();
     // this.snake.getSnakeDom();
+    // this.snakeBodies = [1, 2, 3, 4];
   }
   ngAfterViewInit(): void {
+    this.game.init();
+
     //Called after ngAfterContentInit when the component's view has been initialized. Applies to components only.
     //Add 'implements AfterViewInit' to the class.
     // 测试代码
@@ -47,7 +50,5 @@ export class SnakeComponent implements OnInit {
     // this.food.Y;
     // this.food.change();
     // this.snake.X = 100;
-    this.game.init();
-    this.snake.addBody();
   }
 }