知栈 Logo知栈

贪食蛇练习

目录结构

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
  }
}

最后更新于