贪食蛇练习
目录结构
snake
├── package-lock.json
├── package.json
├── src
│ ├── index.html
│ ├── index.ts
│ ├── moduls
│ │ ├── Food.ts
│ │ ├── GamaControl.ts
│ │ ├── ScorePannel.ts
│ │ └── Snake.ts
│ └── style
│ └── index.less
├── tsconfig.json
└── webpack.config.js核心文件
import Food from './Food';
import ScorePannel from './ScorePannel';
import Snake from './Snake';
// 游戏控制器,控制其他类
class GameControl {
// 定义三个属性
snake: Snake;
food: Food;
scorePannel: ScorePannel;
// 记录游戏是否结束
isLive: boolean = true;
// 创建一个属性来存储蛇的移动方向
direction: string = '';
constructor() {
this.snake = new Snake();
this.food = new Food();
this.scorePannel = new ScorePannel();
this.init();
}
// 游戏初始化
init() {
// 绑定键盘按键按下的事件
document.addEventListener('keydown', this.keydownHandler.bind(this));
this.run();
}
// 创建一个键盘按下的响应函数
keydownHandler(event: KeyboardEvent) {
// 需要检查是否按了正确的按键
this.direction = event.key;
}
// 让蛇移动
run() {
// 获取蛇的坐标
let X = this.snake.X;
let Y = this.snake.Y;
switch (this.direction) {
case 'ArrowUp':
case 'Up':
Y -= 10;
break;
case 'ArrowDown':
case 'Down':
Y += 10;
break;
case 'ArrowLeft':
case 'Left':
X -= 10;
break;
case 'ArrowRight':
case 'Right':
X += 10;
break;
}
this.check(X, Y);
try {
this.snake.X = X;
this.snake.Y = Y;
} catch (e) {
alert(e);
this.isLive = false;
}
this.isLive && setTimeout(this.run.bind(this), 300 - (this.scorePannel.level - 1) * 30);
}
// 定义一个方法,用来检查蛇是否迟到食物
check(X: number, Y: number) {
if (X === this.food.X && Y === this.food.Y) {
// 食物位置重置
this.food.change();
// 分数增加
this.scorePannel.addScore();
this.snake.addBody();
}
}
}
export default GameControl;配置文件
{
"compilerOptions": {
"module": "ES6",
"target": "ES6",
"strict": true,
"noEmitOnError": true
}
}最后更新于