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

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

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

当前游戏也是如此,引入了 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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/791307.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

ADS基础教程24 - Gerber文件的导入

EM介绍 一、引言二、基本概念1.仿真文件下载2.仿真文件介绍 二、导入步骤1.新建workspace2.选择Layout结构3.导入设计4.选择文件类型5.导入文件6.预览文件内容7.铜皮离散问题 四、总结 一、引言 本章节开始介绍在ADS中进行PCB仿真&#xff0c;首先讲解如何将Gerber文件导入到A…

顺序结构 ( 四 ) —— 标准数据类型 【互三互三】

序 C语言提供了丰富的数据类型&#xff0c;本节介绍几种基本的数据类型&#xff1a;整型、实型、字符型。它们都是系统定义的简单数据类型&#xff0c;称为标准数据类型。 整型&#xff08;integer&#xff09; 在C语言中&#xff0c;整型类型标识符为int。根据整型变量的取值范…

【RHCE】基于用户认证和TLS加密的HTTP服务(HTTPS)

目录 一、创建用户账号 二、TLS加密 三、配置http服务子配置文件 四、创建访问http服务的文件夹以及输入重定向到文件 五、配置Linux本地仓库以及Windows下的本地仓库 六、基础操作 七、测试 一、创建用户账号 用户认证 # 创建两个账户 [rootlocalhost ~]# htpasswd -…

YOLOv10改进 | 损失函数篇 | SlideLoss、FocalLoss、VFLoss分类损失函数助力细节涨点(全网最全)

一、本文介绍 本文给大家带来的是分类损失 SlideLoss、VFLoss、FocalLoss损失函数&#xff0c;我们之前看那的那些IoU都是边界框回归损失&#xff0c;和本文的修改内容并不冲突&#xff0c;所以大家可以知道损失函数分为两种一种是分类损失另一种是边界框回归损失&#xff0c;…

【安全设备】数据库审计

一、什么是数据库审计 数据库审计&#xff08;简称DBAudit&#xff09;是一种以安全事件为中心&#xff0c;实时记录网络上的数据库活动&#xff0c;并对数据库操作进行细粒度审计的合规性管理技术。它通过对用户访问行为的记录、分析和汇报&#xff0c;帮助用户事后生成合规报…

一套基于 Ant Design 和 Blazor 的开源企业级组件库

前言 今天大姚给大家分享一套基于Ant Design和Blazor的开源&#xff08;MIT License&#xff09;、免费的企业级组件库&#xff08;喜欢Ant Design风格的同学推荐使用&#xff09;&#xff1a;Ant Design Blazor。 项目特性 提炼自企业级中后台产品的交互语言和视觉风格。 开…

Codeforces Round #956 (Div. 2) and ByteRace 2024 E. I Love Balls(概率期望)

题目 思路来源 官方题解 题解 特殊球不会改变普通球的顺序&#xff0c;所以都是alice拿一半里较多的部分 n-k1一半向上取整就是(n-k2)/2&#xff0c;同理n-k个一般向上取整(n-k1)/2 每个特殊球独立地来看&#xff0c;在每个空隙的概率相同 所以分别统计特殊球和非特殊球的…

《Windows API每日一练》9.1.5 自定义资源

自定义资源&#xff08;Custom Resources&#xff09;是在 Windows 程序中使用的一种资源类型&#xff0c;用于存储应用程序特定的数据、图像、音频、二进制文件等。通过自定义资源&#xff0c;开发者可以将应用程序所需的各种资源文件集中管理和存储&#xff0c;便于在程序中访…

华为HCIP Datacom H12-821 卷34

1.单选题 防火墙默认已经创建了一些安全区域,以下哪一个安全区域不是防火墙上默认存在的? A、Trust B、DMZ C、Internet D、Local 正确答案&#xff1a; C 解析&#xff1a; 防火墙默认情况下为我们提供了三个安全区域&#xff0c;分别是 Trust、DMZ和Untrust 2.判断题 …

【RHCE】实验(HTTP,DNS,SELinux,firewalld的运用)

一、题目 二、主服务器配置 1.下载HTTP服务&#xff0c;DNS服务 [rootlocalhost ~]# yum install -y httpd bind 2.开启防火墙&#xff0c;放行服务 # 开启防火墙 [rootlocalhost ~]# systemctl start firewalld # 放行服务 [rootlocalhost ~]# firewall-cmd --add-service…

日常学习-20240710

1、一次一千万条数据插入和删除案例&#xff1a; 第一次&#xff1a;插入--批量插入&#xff0c;每次插入5000条数据&#xff0c;总耗时28min,数据无异常 删除--通过sql语句一次性删除&#xff0c;总耗时1h52min;一次删除的数据过多导致mysql的备份恢复文件极其庞大&#xff0…

在CentOS7虚拟机上使用Ollama本地部署Llama3大模型中文版+Open WebUI

一、创建虚拟机 1.1按照常规的CentOS教程来安装就行&#xff0c;我用的是以下版本&#xff1a; VMware版本&#xff1a;VMware Workstation Full v12.1.0-3272444 中文正式版 镜像版本&#xff1a;CentOS-7-x86_64-DVD-2009 1.2虚拟机配置参数&#xff0c;如下&#xff1a; 二…

彩虹小插画:成都亚恒丰创教育科技有限公司

彩虹小插画&#xff1a;色彩斑斓的梦幻世界 在繁忙的生活节奏中&#xff0c;总有一抹温柔的色彩能悄然触动心弦&#xff0c;那就是彩虹小插画带来的梦幻与宁静。彩虹&#xff0c;这一自然界的奇迹&#xff0c;被艺术家们巧妙地融入小巧精致的插画之中&#xff0c;不仅捕捉了瞬…

Camera Raw:直方图

Camera Raw 的直方图 Histogram面板不仅提供了照片亮度和色彩分布信息&#xff0c;还具备多项实用功能&#xff0c;辅助评估和调整照片。 ◆ ◆ ◆ 直方图的构成 直方图是一个二维坐标系统&#xff0c;横坐标表示不同程度的像素亮度&#xff0c;从左到右通常对应的是 0 ~ 255…

14-60 剑和诗人34 - Kubernetes 是部署 LLM 的首选平台

​​​​ 介绍 近年来&#xff0c;大型语言模型 (LLM) 一直在彻底改变自然语言处理领域。从 GPT-3 到 PaLM 等&#xff0c;这些模型可以生成类似人类的文本、回答问题、总结文档等等。然而&#xff0c;训练和部署 LLM 需要大量的计算。随着这些模型的规模和能力不断增长&#…

three完全开源扩展案例01-三角形渐变

演示地址 import * as THREE from three import { OrbitControls } from three/examples/jsm/controls/OrbitControls.jsconst box document.getElementById(box)const scene new THREE.Scene()const camera new THREE.PerspectiveCamera(75, box.clientWidth / box.client…

Golang | Leetcode Golang题解之第227题基本计算器II

题目&#xff1a; 题解&#xff1a; func calculate(s string) (ans int) {stack : []int{}preSign : num : 0for i, ch : range s {isDigit : 0 < ch && ch < 9if isDigit {num num*10 int(ch-0)}if !isDigit && ch ! || i len(s)-1 {switch preS…

免杀笔记 ---> Session0--DLL注入

刚更新完上一篇&#xff0c;于是我们就马不停蹄的去跟新下一篇&#xff01;&#xff01; Session0注入 &#xff1a;&#xff1a; 各位看官如果觉得还不错的可以给博主点个赞&#x1f495;&#x1f495; 这次&#xff0c;我把这个脚本直接传到Github上了 喜欢的师傅点个Star噢…

VScode代码对齐快捷键

解决复制过来代码对齐格式问题。 左对齐&#xff1a;Ctrl[ 右对齐&#xff1a;Ctrl]

科普文:jvm笔记

一、JVM概述# 1. JVM内部结构# 跨语言的平台&#xff0c;只要遵循编译出来的字节码的规范&#xff0c;都可以由JVM运行 虚拟机 系统虚拟机 VMvare 程序虚拟机 JVM JVM结构 HotSpot虚拟机 详细结构图 前端编译器是编译为字节码文件 执行引擎中的JIT Compiler编译器是把字节…