前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >简单的贪吃蛇小游戏—TypeScript练习

简单的贪吃蛇小游戏—TypeScript练习

作者头像
岳泽以
发布2022-11-22 16:48:37
6290
发布2022-11-22 16:48:37
举报
文章被收录于专栏:岳泽以博客

在线试玩:https://www.zeyiwl.cn/snake/

TypeScript完成的一款简易贪吃蛇小游戏。

GitHub地址:https://github.com/Yue-Zeyi/sanke-TypeScript

游戏控制核心类:

代码语言:javascript
复制
class GameControl {
   // 三个属性
   snake: Snake;
   food: Food;
   scorePanel: ScorePanel;
 
   // 创建一个属性来存储蛇的移动方向,即按键方向
   direction: string = '';
 
   // 创建属性记录游戏是否结束
   isLive = true;
 
   constructor() {
     this.snake = new Snake();
     this.food = new Food();
     this.scorePanel = new ScorePanel(10, 2);
     this.init();
   }
 
   // 游戏初始化方法,调用后开始游戏
   init() {
     // 绑定键盘按键事件
     document.addEventListener('keydown', this.keydownHandler.bind(this));
     // 执行修改值,调用run方法使蛇移动
     this.run();
   }
   // 创建键盘响应函数
   keydownHandler(event: KeyboardEvent) {
     // 检查event.key是否合法,用户是否按的方向键
 
     // 修改direction属性
     this.direction = event.key;
     // console.log(event.key);
   }
 
   // 创建控制蛇移动的方法
   run() {
     /* 
     *根据方向来改变蛇的位置
     向上 top -
     向下 top +
     向左 left -
     向右 left +
     */
     //  蛇现在的坐标
     let X = this.snake.X;
     let Y = this.snake.Y;
 
     // 根据按键方向修改X值和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;
     }
     // 检查蛇是否吃到食物
     if (this.checkEat(X, Y)) {
       // console.log('吃到了');
       this.food.change();
       this.scorePanel.addScore();
       // 蛇身体增长
       this.snake.addBody();
     }
 
     // 修改蛇的值(+异常处理)
     try {
       this.snake.X = X;
       this.snake.Y = Y;
     } catch (e: any) {
       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) {
     return X === this.food.X && Y === this.food.Y;
   }
 }

教程地址

正在播放:尚硅谷TypeScript教程(李立超老师TS新课)

剧集列表

尚硅谷TypeScript教程(李立超老师TS新课)

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022 年 11 月,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档