手撸俄罗斯方块(五)——游戏主题
创始人
2025-01-11 08:35:45
0

手撸俄罗斯方块(五)——游戏主题

当确定游戏载体(如控制台)后,界面将呈现出来。但是游戏的背景色、方块的颜色、方框颜色都应该支持扩展。

当前游戏也是如此,引入了 Theme 的概念,支持主题的扩展。

AbstractTheme

系统抽象了一个AbstractTheme,它将一些渲染过程中的行为进行了抽象,抽象定义如下:

abstract class AbstractTheme {   /**    * 设置外框的样式,如外框的颜色、整体的背景等。    * @param outer 指代外框对象的元素,通过修改其内容改变显示样式。    */   abstract outStyle(outer: any): void;   /**    * 设置内框的样式,如内框的颜色、整体的背景等。    * @param inner 指代内框对象的元素,通过修改其内容改变显示样式。    */   abstract innerStyle(inner: any): void;   /**    * 设置分数的样式。    * @param score 指代分数对象的元素,通过修改其内容改变显示样式。    */   abstract scoreStyle(score: any): void;   /**    * 设置状态栏的样式    * @param status 指代状态对象的元素。    */   abstract statusStyle(status: any): void;   /**    * 分数的格式化字符串,输入一个分数的数字,将其转换为目标的样式;    * @param score {number} 当前游戏的分数    */   abstract scoreTemplate(score: number): string;   abstract nextStyle(blocks: any): void;   abstract currentStyle(current: any): void;   /**    * 设置方块区域的样式    * @param block 指代当前方块区域    */   abstract blockStyle(block: any): void;   /**    * 设置current区域和已填充区域的小方块的样式    * @param blockItem 当前小方块,如一个IBlock会拆分成4各BlockItem。    * @param point 当前小方块的位置信息,包括`x`轴和`y`轴的坐标等信息    */   abstract blockPointStyle(blockItem: any, point: Point): void;   /**    * 设置next区域的小方块的样式    * @param blockItem    * @param point    */   abstract nextPointStyle(blockItem: any, point: Point): void; } 

注释已经描述得比较清晰了,分别对外框、内框等进行了设定。

控制台如何实现主题

为了使主题生效,需要在AbstractCanvas子类中调用Theme提供的方法。这里以ConsoleCanvas为例,它的实现如下:

export class ConsoleCanvas extends AbstractCanvas {   render(): void {     const { game } = this;     if (!game) {       return;     }     const { stage, dimension } = game;     const printArray: string[] = [];     console.clear();     const { score, current, next } = stage;     const { xSize, ySize } = dimension;     const outLength = 1 + 1 + xSize + 1 + this.rightWidth + 1;     if (!this.isHideOuter) {       // 1. 渲染外边框的上边框       const outLine1 = this.getOutterLine(         this.outerLeftTopChar +           this.createChar(xSize + 2 + this.rightWidth, this.horizonalChar) +           this.outerRightTopChar       );       printArray.push(outLine1);     }      // 2. 渲染score     const scoreText = this.theme.scoreTemplate(score);     const scoreConsoleChar = ConsoleChar.create(scoreText);     this.theme.scoreStyle(scoreConsoleChar);     // 计算左侧需要补充的空格     const leftSpace = this.rightWidth - scoreText.length - 3;     // 右侧需要补充的空格     const rightSpace = 3;     let scoreLine =       this.getOutterLine(this.outerLeftVerticalChar) +       this.createChar(xSize + 2 + leftSpace) +       scoreConsoleChar.ch +       this.createChar(rightSpace) +       this.getOutterLine(this.outerRightVerticalChar);     printArray.push(scoreLine);      // 3. 渲染内边框的上边框     let line1 =       this.getOutterLine(this.outerLeftVerticalChar) +       this.getInnerLine(this.innerLeftTopChar);     for (let x = 0; x < xSize; x++) {       const oneBlockItem = current?.points.find((item) => item.x === x);       if (oneBlockItem) {         line1 += this.getInnerLine(bold(this.horizonalChar));       } else {         line1 += this.getInnerLine(this.horizonalChar);       }     }     line1 +=       this.getInnerLine(this.innerRightTopChar) +       this.createChar(this.rightWidth) +       this.getOutterLine(this.outerRightVerticalChar);     printArray.push(line1);     let line2 =       this.getOutterLine(this.outerLeftVerticalChar) +       this.getInnerLine(this.innerLeftBottomChar);     for (let x = 0; x < xSize; x++) {       const oneBlockItem = current?.points.find((item) => item.x === x);       if (oneBlockItem) {         line2 += this.getInnerLine(bold(this.horizonalChar));       } else {         line2 += this.getInnerLine(this.horizonalChar);       }     }     line2 +=       this.getInnerLine(this.innerRightBottomChar) +       this.createChar(this.rightWidth) +       this.getOutterLine(this.outerRightVerticalChar);     printArray.push(line2);     if (!this.isHideOuter) {       const outLine2 = this.getOutterLine(         this.outerLeftBottomChar +           this.createChar(xSize + 2 + this.rightWidth, this.horizonalChar) +           this.outerRightBottomChar       );       printArray.push(outLine2);     }     if (this.exitMessage) {       printArray.push(this.exitMessage);     } else {       printArray.push("");     }     process.stdout.write(this.handleOutput(outLength, printArray).join("\n"));   } } 

我们看到渲染上边框,调用了getOutterLine方法,这个方法是在AbstractCanvas中定义的,它的实现如下:

export class ConsoleCanvas extends AbstractCanvas {   // ...   getOutterLine(char: string): string {     if (this.isHideOuter) {       return "";     }     const consoleChar = new ConsoleChar(str || "|");     this.theme.outStyle(consoleChar);     return consoleChar.ch;   }   // ... } 

它内部调用了 theme.outStyle 方法,对应我们上述 theme 的定义。

类似的,对于内边框的渲染,也是调用了getInnerLine方法,它的实现如下:

export class ConsoleCanvas extends AbstractCanvas {   // ...   getInnerLine(char: string): string {     const consoleChar = new ConsoleChar(str || "|");     this.theme.innerStyle(consoleChar);     return consoleChar.ch;   }   // ... } 

这样,我们就实现了主题的扩展。

主题的扩展

我们可以通过继承AbstractTheme,实现自己的主题,比如实现一个RedTheme

export class RedTheme extends DefaultTheme {   outStyle(outer: any): void {     outer.ch = color.red(outer.ch);   } } 

它实现了outStyle方法,将外边框的颜色设置为红色。

我们使用该主题,效果如下

在这里插入图片描述

详细内容可以我的git项目: https://github.com/shushanfx/tetris
也可以关注我的git账号: https://github.com/shushanfx

自此手撸俄罗斯方块的代码部分就讲到这里,后续将依次为开始展开,从俄罗斯方块开始,我们能走多远。

相关内容

热门资讯

一分钟内幕!科乐吉林麻将系统发... 一分钟内幕!科乐吉林麻将系统发牌规律,福建大玩家确实真的是有挂,技巧教程(有挂ai代打);所有人都在...
一分钟揭秘!微扑克辅助软件(透... 一分钟揭秘!微扑克辅助软件(透视辅助)确实是有挂(2024已更新)(哔哩哔哩);1、用户打开应用后不...
五分钟发现!广东雀神麻雀怎么赢... 五分钟发现!广东雀神麻雀怎么赢,朋朋棋牌都是是真的有挂,高科技教程(有挂方法)1、广东雀神麻雀怎么赢...
每日必看!人皇大厅吗(透明挂)... 每日必看!人皇大厅吗(透明挂)好像存在有挂(2026已更新)(哔哩哔哩);人皇大厅吗辅助器中分为三种...
重大科普!新华棋牌有挂吗(透视... 重大科普!新华棋牌有挂吗(透视)一直是有挂(2021已更新)(哔哩哔哩)1、完成新华棋牌有挂吗的残局...
二分钟内幕!微信小程序途游辅助... 二分钟内幕!微信小程序途游辅助器,掌中乐游戏中心其实存在有挂,微扑克教程(有挂规律)二分钟内幕!微信...
科技揭秘!jj斗地主系统控牌吗... 科技揭秘!jj斗地主系统控牌吗(透视)本来真的是有挂(2025已更新)(哔哩哔哩)1、科技揭秘!jj...
1分钟普及!哈灵麻将攻略小,微... 1分钟普及!哈灵麻将攻略小,微信小程序十三张好像存在有挂,规律教程(有挂技巧)哈灵麻将攻略小是一种具...
9分钟教程!科乐麻将有挂吗,传... 9分钟教程!科乐麻将有挂吗,传送屋高防版辅助(总是存在有挂)1、完成传送屋高防版辅助透视辅助安装,帮...
每日必看教程!兴动游戏辅助器下... 每日必看教程!兴动游戏辅助器下载(辅助)真是真的有挂(2025已更新)(哔哩哔哩)1、打开软件启动之...