From 6cbd7bbe42479e40a88588d4a3580d98d69bce23 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=BF=9B=E8=BF=9B=E5=95=8A?= <1830275783@qq.com> Date: Fri, 24 Dec 2021 09:56:57 +0800 Subject: [PATCH] commit --- package.json | 2 +- src/app/app.component.spec.ts | 35 ----------- src/app/services/snake/food.service.spec.ts | 16 ----- .../snake/game-control.service.spec.ts | 16 ----- .../services/snake/game-control.service.ts | 11 ++-- .../services/snake/main-snake.service.spec.ts | 16 ----- src/app/services/snake/main-snake.service.ts | 62 ++++++++++++++++--- .../snake/score-panel.service.spec.ts | 24 ------- src/app/views/snake/snake.component.html | 4 +- src/app/views/snake/snake.component.scss | 2 + src/app/views/snake/snake.component.spec.ts | 24 ------- src/app/views/snake/snake.component.ts | 7 ++- 12 files changed, 67 insertions(+), 152 deletions(-) delete mode 100644 src/app/app.component.spec.ts delete mode 100644 src/app/services/snake/food.service.spec.ts delete mode 100644 src/app/services/snake/game-control.service.spec.ts delete mode 100644 src/app/services/snake/main-snake.service.spec.ts delete mode 100644 src/app/services/snake/score-panel.service.spec.ts delete mode 100644 src/app/views/snake/snake.component.spec.ts diff --git a/package.json b/package.json index a708551..eb2d7b5 100644 --- a/package.json +++ b/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" diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts deleted file mode 100644 index af20e35..0000000 --- a/src/app/app.component.spec.ts +++ /dev/null @@ -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!'); - }); -}); diff --git a/src/app/services/snake/food.service.spec.ts b/src/app/services/snake/food.service.spec.ts deleted file mode 100644 index e01ffce..0000000 --- a/src/app/services/snake/food.service.spec.ts +++ /dev/null @@ -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(); - }); -}); diff --git a/src/app/services/snake/game-control.service.spec.ts b/src/app/services/snake/game-control.service.spec.ts deleted file mode 100644 index 4f2fd5e..0000000 --- a/src/app/services/snake/game-control.service.spec.ts +++ /dev/null @@ -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(); - }); -}); diff --git a/src/app/services/snake/game-control.service.ts b/src/app/services/snake/game-control.service.ts index 0d45121..9b15fa3 100644 --- a/src/app/services/snake/game-control.service.ts +++ b/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(); } } } diff --git a/src/app/services/snake/main-snake.service.spec.ts b/src/app/services/snake/main-snake.service.spec.ts deleted file mode 100644 index b90c162..0000000 --- a/src/app/services/snake/main-snake.service.spec.ts +++ /dev/null @@ -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(); - }); -}); diff --git a/src/app/services/snake/main-snake.service.ts b/src/app/services/snake/main-snake.service.ts index 6e1031a..80682ae 100644 --- a/src/app/services/snake/main-snake.service.ts +++ b/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.element.insertAdjacentHTML("beforeend", "
"); + this.snakeBodies.push(this.bodies.length); } //遍历获取所有的身体 - // for (let index = 0; index < this.bodies.length; index++) { - // const element = array[index]; - - // } - // 遍历一个数 + moveBody() { + 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("蛇撞到自己了"); + } + } + } } diff --git a/src/app/services/snake/score-panel.service.spec.ts b/src/app/services/snake/score-panel.service.spec.ts deleted file mode 100644 index 489c986..0000000 --- a/src/app/services/snake/score-panel.service.spec.ts +++ /dev/null @@ -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(); - }); -}); diff --git a/src/app/views/snake/snake.component.html b/src/app/views/snake/snake.component.html index b36c262..1587fbb 100644 --- a/src/app/views/snake/snake.component.html +++ b/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 -->
@@ -14,7 +14,7 @@
-
+
diff --git a/src/app/views/snake/snake.component.scss b/src/app/views/snake/snake.component.scss index 346634e..4339493 100644 --- a/src/app/views/snake/snake.component.scss +++ b/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 { diff --git a/src/app/views/snake/snake.component.spec.ts b/src/app/views/snake/snake.component.spec.ts deleted file mode 100644 index b91b707..0000000 --- a/src/app/views/snake/snake.component.spec.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { ComponentFixture, TestBed } from "@angular/core/testing"; - -import { SnakeComponent } from "./snake.component"; - -describe("SnakeComponent", () => { - let component: SnakeComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [SnakeComponent], - }).compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(SnakeComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it("should create", () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/views/snake/snake.component.ts b/src/app/views/snake/snake.component.ts index e391790..99290c1 100644 --- a/src/app/views/snake/snake.component.ts +++ b/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(); } }