使用webpack+ts做一个贪吃蛇游戏（四）---实现游戏功能
通过分析，将整个游戏拆分成四个对象，食物、蛇、记分牌和游戏控制器[*]食物类
属性：食物的dom
方法：1. 获取食物dom左上角坐标
2. 食物被吃后，随机修改食物位置的方法
// modules/food.tsexport default class Food { element: HTMLElement; constructor() { this.element = document.getElementById('food')!; } get X() { return this.element.offsetLeft; } get Y() { return this.element.offsetTop; } // 修改食物的位置 change() { // Math.random()生成0~1的隨機數，不包括0和1，乘以29就生成0~29的随机数，不包括0和29，然后再四舍五入，就可以得到包括0~29的数字 // stage的宽高是304，减去边框为300，食物的宽高为10，一次移动一格，所以食物左上角坐标的范围是0~290，且为整十的数 const x = Math.round(Math.random() * 29) * 10; const y = Math.round(Math.random() * 29) * 10; // todo 食物也不应该出现在蛇的身体上 this.element.style.left = x + 'px'; this.element.style.top = y + 'px'; }}
[*]记分牌类
属性：最大等级、升级需要的分数、分数的dom、等级的dom、分数、等级
方法：1. 加分
2. 升级
// modules/scorePanel.tsexport default class ScorePanel { score = 0; level = 1; scoreEle: HTMLElement; levelEle: HTMLElement; maxLevel: number; upScore: number; constructor(maxLevel:number = 10, upScore:number = 5) { this.scoreEle = document.getElementById('score')!; this.levelEle = document.getElementById('level')!; this.maxLevel = maxLevel; this.upScore = upScore; } // 加分 addScore() { this.scoreEle.innerHTML = ++this.score + ''; if (this.score % this.upScore === 0) { this.levelUp() } } // 升级 levelUp() { if (this.level < this.maxLevel) { this.levelEle.innerHTML = ++this.level + ''; } }}
[*]蛇类
属性：蛇头dom、蛇身体dom（包括蛇头）、蛇容器dom
方法：1. 获取蛇头坐标
2. 设置蛇头坐标（检查是否掉头、检查是否撞墙、移动蛇身体（将每一节身体都移动到前一节身体的位置上）、检查是否撞到自己的身体）
3. 增加蛇身体（吃到食物后）
// modules/snake.tsexport default class Snake { // 蛇的容器 element: HTMLElement; // 蛇头 head: HTMLElement; // 蛇的身体 bodies: HTMLCollection; constructor() { // 这里不加！会ts报错，因为有可能没有#snake这个dom，但我们知道有，通过加一个！阻止报错 this.element = document.getElementById('snake')!; // querySelector方法获取的是一个Element对象，与我们设置的HTMLElement不匹配，所以这里我们使用类型断言as this.head = document.querySelector('#snake > div') as HTMLElement; this.head.style.background = 'red'; this.bodies = this.element.getElementsByTagName('div')!; } // get方法是ts类中的语法糖，你还是可以通过snake1.x的方法获取该属性，但我们可以在这个get方法中写入判断逻辑，将控制权握在开发者手里 // 获取蛇头的x坐标 get X() { return this.head.offsetLeft; } get Y() { return this.head.offsetTop; } set X(value: number) { if (this.X === value) { return; } // 检查是否掉头 value = this.checkIsTurn(value, this.X, 'X') // 检查是否撞墙 this.checkWall(value) // 移动身体 this.moveBodies() this.head.style.left = value + 'px' // 检查是否撞到自己的身体 this.checkBoomBody(value) } set Y(value: number) { if (this.Y === value) { return; } // 检查是否掉头 value = this.checkIsTurn(value, this.Y, 'Y') // 检查是否撞墙 this.checkWall(value) // 移动身体 this.moveBodies() this.head.style.top = value + 'px' // 检查是否撞到自己的身体 this.checkBoomBody(value) } // 检查是否撞墙 checkWall(value:number) { if (value < 0 || value > 290) { throw new Error('蛇撞墙了！'); } } // 检查是否掉头 checkIsTurn(value:number, currentValue: number, type:string) { const firstBody = this.bodies as HTMLElement; const position = type === 'Y' ? firstBody?.offsetTop : firstBody?.offsetLeft; if (value === position) { // 如果发生了掉头，让蛇向反方向继续移动 if (value > currentValue) { value = currentValue - 10 } else { value = currentValue + 10 } } return value } // 检查是否撞到自己的身体 这个方法要在本次蛇的坐标更改后再进行判断 checkBoomBody(value:number) { for(let i = 1; i < this.bodies.length; i++) { const bd = this.bodies as HTMLElement if (this.X === bd.offsetLeft && this.Y === bd.offsetTop) { throw new Error('撞到了自己的身体！'); } } } addBodies() { this.element.insertAdjacentHTML('beforeend', "<div></div>") } moveBodies() { // 后面一格身体的坐标修改为前一节身体的坐标，以此类推 // 这里for循环的停止条件是i > 0,因为蛇头的位置在外面已经设置了 for(let i = this.bodies.length - 1; i > 0; i--) { // 获取前一格身体的坐标 let X = (this.bodies as HTMLElement).offsetLeft; let Y = (this.bodies as HTMLElement).offsetTop; (this.bodies as HTMLElement).style.left = X + 'px'; (this.bodies as HTMLElement).style.top = Y + 'px'; } }}
[*]控制器类
属性：蛇、食物、记分牌（引用并创建实例）、蛇移动的方向（按键方向）、游戏是否结束
方法：1. 开始游戏（绑定键盘事件、开启定时器更改蛇的坐标）
2. 蛇吃食物
// modules/gameController.tsimport Food from './food'import Snake from './snake'import ScorePanel from './scorePanel'export default class GameController { food: Food; snake: Snake; scorePanel: ScorePanel; // 按键的方向（蛇移动的方向） direction: string = ''; // 游戏是否结束 isLive = true; constructor() { this.food = new Food() this.snake = new Snake() this.scorePanel = new ScorePanel() // 创建对象后即游戏开始 this.init() } init() { console.log('游戏开始') // 绑定键盘事件 document.addEventListener('keydown', this.keydownHandler.bind(this)) this.run() } /** * ArrowUp Up * ArrowDown Down * ArrowLeft Left * ArrowRight Right * 上面是键盘按上下左右后返回的event.key * 由于IE浏览器不合群，所以事件名称和其他浏览器有区别 * */ keydownHandler(event: KeyboardEvent) { // 根据event.key来判断上下左右 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; default: } // 检查蛇是否吃到了食物 this.checkEat(X, Y) try { this.snake.X = X; this.snake.Y = Y; } catch (e) { alert(e.message+ 'Game Over！') this.isLive = false } // 开启一个定时器 this.isLive && setTimeout(this.run.bind(this), 300 - (this.scorePanel.level - 1) * 30) } checkEat(x:number, y:number) { if (x === this.food.X && y === this.food.Y) { this.snake.addBodies() this.food.change() this.scorePanel.addScore() } }}
以上，整个贪吃蛇的游戏就完成了，大家可以在以下链接下载完成代码
https://gitee.com/loversong/snake
npm inpm run start
命令行执行以上代码即可体验。
以上代码还遗留了一个bug，就是在移动食物的时候，没有考虑到食物随机分布到蛇身体上的情况，大家可以自己尝试补一下。
还有什么问题，欢迎评论区指正。
页:
[1]