如何利用nodejs实现命令行游戏


Posted in NodeJs onNovember 24, 2020

本文以贪吃蛇为例, 一步一步地分析如何实现一个命令行游戏.

如何利用nodejs实现命令行游戏

实现原理

命令行输入

  • 通过 process.stdin 监听命令行输入的按键, 改变小蛇的前进的方向

画面渲染

  • 通过 ANSI 转义序列 擦除之前的输出
  • 通过 process.stdout 每隔一段时间将画面帧输出到命令行

源码解析

监听按键事件

使用过 yarn upgrade-interactive 命令更新 npm 依赖, 或者使用过 vue-cli 等脚手架创建过新项目的同学应该都见过: 这些工具会在命令行输出很多选项, 通过上下按键可以移动焦点, 通过空格键可以选择

那么这些操作是如何实现的呢? 下面通过 readline 和 process.stdin 来实现命令行监听按键事件:

process.stdin 是一个可读流, 通过 readline.emitKeypressEvents 可以给可读流注册 keypress 事件, 通过 keypress 事件就能获取到按键的值

readline.emitKeypressEvents(process.stdin) // 注册 keypress 事件

process.stdin.setRawMode(true) // 开启原始模式, 使输入的每个字符带上各种详细属性

process.stdin.on('keypress', (...args) => {
 console.log(args)
 // 按下方向键会输出
 // [
 //  undefined,
 //  {
 //   sequence: '\u001b[A',
 //   name: 'up',
 //   ctrl: false,
 //   meta: false,
 //   shift: false,
 //   code: '[A'
 //  }
 // ]
})

注意: setRawMode 会使命令行按下 ctrl + c 不再发送终止信号, 可能需要自行处理退出逻辑

绘制帧画面

输出到命令行的游戏画面默认为 30 行 x 50 列, 将其划分为一个二维数组, 每隔一段时间将二维数组的值打印出来并擦除之前打印的值, 即完成一次帧画面的渲染

process.stdout 是一个可写流, 调用 process.stdout.write 可以向命令行写入数据, nodejs 中 console.log 其实就是将数据写入到 process.stdout 并换行

通过向命令行写入开头为 ANSI 转义序列 的字符串可以 光标移动/滚动屏幕/擦除显示/颜色文本 等等功能, 想要深入了解可以自行搜索关键字学习, 本文使用 ansi-escapes npm 包实现擦除功能

const ansiEscapes = require('ansi-escapes')

function clear(lines) {
 process.stdout.write(ansiEscapes.eraseLines(lines)) // 可以擦除指定行数的输出
}

根据游戏画面的宽高定义一个二维数组, 小蛇的头和身体视为画面中的点, 值为非空值, 空白画面则为空字符串

let dots = []
for (let col = 0; col < wall.height; col++) {
 dots[col] = new Array(wall.width).fill(' ')
}

在每一帧中, 小蛇的头会向前进的方向前进一个, 头接着的第一节身体则会移动到上一帧头所在的位置, 以此类推每一节身体都会移动到前一节身体的位置上, 所以需要定义一个数据记录之前的头和身体的位置

const SNAKE_HEAD = '@' // 头的符号
const SNAKE_BODY = '○' // 身体的符号

function drawFrame() {
 let dots = []
 for (let col = 0; col < wall.height; col++) {
  dots[col] = new Array(wall.width).fill(' ')
 }

 let nextBody = []
 let head = next(snake.body[0]) // next 方法传入当前点的 x, y 坐标, 返回向前进方向前进一个的 x, y 坐标
 nextBody.push(head)
 dots[head.y][head.x] = SNAKE_HEAD
 for (let i = 1; i < snake.length; i++) {
  let body = snake.body[i - 1]
  dots[body.y][body.x] = SNAKE_BODY
  nextBody.push(body)
 }
 
 screen.draw(dots) // 将二维数组中的点输出到命令行中
 
 // 更新蛇的状态
 snake.body = nextBody
 snake.head = snake.body[0]
}

蛇吃鸟蛋逻辑

小蛇每吃到一个鸟蛋, 身体会长一节, 并在画面中随机生成另一个鸟蛋. 到了这一步其实就很简单了, 随机生成一个点作为鸟蛋的位置, 插入到之前的二维数组中.

function layAEgg() {
 let x = ~~(wall.width * Math.random())
 let y = ~~(wall.height * Math.random())
 return { x, y }
}

当小蛇的头的位置与鸟蛋的位置相同时, 则视为蛇吃到鸟蛋, 蛇的长度加一, 并在尾部增加一节上一帧蛇尾的节点位置

const SNAKE_HEAD = '@'
const SNAKE_BODY = '○'
const BIRD_EGG = '●'

function drawFrame() {
 let dots = []
 for (let col = 0; col < wall.height; col++) {
  dots[col] = new Array(wall.width).fill(' ')
 }

 let nextBody = []
 let head = next(snake.body[0])
 nextBody.push(head)
 dots[head.y][head.x] = SNAKE_HEAD
 for (let i = 1; i < snake.length; i++) {
  let body = snake.body[i - 1]
  dots[body.y][body.x] = SNAKE_BODY
  nextBody.push(body)
 }

 // 判断蛇头位置在上一帧中是否为鸟蛋位置, 为真视为蛇吃到鸟蛋
 if (prevDots && prevDots[head.y][head.x] === BIRD_EGG) {
  let body = snake.body[snake.length - 1]
  dots[body.y][body.x] = SNAKE_BODY
  nextBody.push(body)
  snake.length += 1
  egg = null
  prevDots = null
 }

 if (!egg) {
  egg = layAEgg()
  while (dots[egg.y][egg.x] !== ' ') {
   egg = layAEgg()
  }
 }
 dots[egg.y][egg.x] = BIRD_EGG

 prevDots = dots // 保存上一帧的数据, 用于下次绘制时判断逻辑

 screen.draw(dots)
 snake.body = nextBody
 snake.head = snake.body[0]
}

总结

至此, 命令行贪吃蛇游戏基本逻辑都已实现, 剩下的就是使用定时器每隔一段时间绘制一次帧画面. 其实几乎任何像素游戏(如俄罗斯方块/吃豆人等)都可以按照这个流程实现, 不同的只是帧画面的处理逻辑而已. 如果感兴趣的话, 可以去我的 github 查看该 贪吃蛇游戏源码

到此这篇关于如何利用nodejs实现命令行游戏的文章就介绍到这了,更多相关nodejs实现命令行游戏内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

NodeJs 相关文章推荐
nodejs读取memcache示例分享
Jan 02 NodeJs
nodejs教程之环境安装及运行
Nov 21 NodeJs
轻松创建nodejs服务器(7):阻塞操作的实现
Dec 18 NodeJs
nodejs 整合kindEditor实现图片上传
Feb 03 NodeJs
详解nodejs与javascript中的aes加密
May 22 NodeJs
在windows上用nodejs搭建静态文件服务器的简单方法
Aug 11 NodeJs
详解nodejs 文本操作模块-fs模块(四)
Dec 22 NodeJs
基于Nodejs利用socket.io实现多人聊天室
Feb 22 NodeJs
NodeJS创建最简单的HTTP服务器
May 15 NodeJs
nodejs集成sqlite使用示例
Jun 05 NodeJs
typescript nodejs 依赖注入实现方法代码详解
Jul 21 NodeJs
详解利用nodejs对本地json文件进行增删改查
Sep 20 NodeJs
NodeJS模块Buffer原理及使用方法解析
Nov 11 #NodeJs
nodejs中内置模块fs,path常见的用法说明
Nov 07 #NodeJs
Nodejs + sequelize 实现增删改查操作
Nov 07 #NodeJs
nodejs+koa2 实现模仿springMVC框架
Oct 21 #NodeJs
nodejs使用Sequelize框架操作数据库的实现
Oct 21 #NodeJs
用Nodejs实现在终端中炒股的实现
Oct 18 #NodeJs
Nodejs在局域网配置https访问的实现方法
Oct 17 #NodeJs
You might like
修改php.ini实现Mysql导入数据库文件最大限制的修改方法
2007/12/11 PHP
调试一段PHP程序时遇到的三个问题
2012/01/17 PHP
php 函数中使用static的说明
2012/06/01 PHP
CI框架数据库查询缓存优化的方法
2016/11/21 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
PHP智能识别收货地址信息实例
2019/01/05 PHP
laravel5.1框架model类查询的实现方法
2019/10/08 PHP
在laravel框架中实现封装公共方法全局调用
2019/10/14 PHP
jquery 模式对话框终极版实现代码
2009/09/28 Javascript
jquery html动态生成select标签出问题的解决方法
2013/11/20 Javascript
javascript模拟实现C# String.format函数功能代码
2013/11/25 Javascript
js实现网页自动刷新可制作节日倒计时效果
2014/05/27 Javascript
深入浅析JavaScript中的constructor
2016/04/19 Javascript
JS中如何实现复选框全选功能
2016/12/19 Javascript
浅谈JavaScript的计时器对象
2016/12/26 Javascript
Mac下使用charles遇到的问题以及解决办法
2017/01/10 Javascript
AngularJS 中的数据源的循环输出
2017/10/12 Javascript
VSCode配置react开发环境的步骤
2017/12/27 Javascript
Vue.js 中 axios 跨域访问错误问题及解决方法
2018/11/21 Javascript
JS实现的杨辉三角【帕斯卡三角形】算法示例
2019/02/26 Javascript
微信小程序自定义联系人弹窗
2020/05/26 Javascript
JS中的继承操作实例总结
2020/06/06 Javascript
python引入导入自定义模块和外部文件的实例
2017/07/24 Python
wxpython实现图书管理系统
2018/03/12 Python
python可视化爬虫界面之天气查询
2019/07/03 Python
浅析Python语言自带的数据结构有哪些
2019/08/27 Python
Python 实现Serial 与STM32J进行串口通讯
2019/12/18 Python
如何使用Python发送HTML格式的邮件
2020/02/11 Python
利用python下载scihub成文献为PDF操作
2020/07/09 Python
纯CSS实现颜色渐变效果(包含环形渐变、线性渐变、彩虹效果等)
2014/05/07 HTML / CSS
关于赌博的检讨书
2014/01/24 职场文书
好听的队名和口号
2014/06/09 职场文书
党在我心中的演讲稿
2014/09/13 职场文书
乡镇党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
小学体育组工作总结
2015/08/13 职场文书
JavaScript实现复选框全选功能
2021/04/11 Javascript