Ruin/snake-game-ng
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

commit

Browse Source
This commit is contained in:
进进啊
2021-12-24 09:56:57 +08:00
parent 8be0b462f0
commit 6cbd7bbe42
12 changed files with 67 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -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"

35
src/app/app.component.spec.ts
View File

@@ -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!');
});
});

16
src/app/services/snake/food.service.spec.ts
View File

@@ -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();
});
});

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

@@ -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();
});
});

11
src/app/services/snake/game-control.service.ts
View File

@@ -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();
}
}
}

16
src/app/services/snake/main-snake.service.spec.ts
View File

@@ -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();
});
});

62
src/app/services/snake/main-snake.service.ts
View File

@@ -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", "<div></div>");
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("蛇撞到自己了");
}
}
}
}

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

@@ -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();
});
});

4
src/app/views/snake/snake.component.html
View File

@@ -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">

2
src/app/views/snake/snake.component.scss
View File

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

24
src/app/views/snake/snake.component.spec.ts
View File

@@ -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();
});
});

7
src/app/views/snake/snake.component.ts
View File

@@ -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();
}
}