如何利用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 相关文章推荐
抛弃Nginx使用nodejs做反向代理服务器
Jul 17 NodeJs
Windows 系统下设置Nodejs NPM全局路径
Apr 26 NodeJs
Nodejs从有门道无门菜鸟起飞必看教程
Jul 20 NodeJs
使用nodejs下载风景壁纸
Feb 05 NodeJs
nodejs爬虫遇到的乱码问题汇总
Apr 07 NodeJs
docker中编译nodejs并使用nginx启动
Jun 23 NodeJs
Nodejs中使用phantom将html转为pdf或图片格式的方法
Sep 18 NodeJs
nodejs取得当前执行路径的方法
May 13 NodeJs
Nodejs中怎么实现函数的串行执行
Mar 02 NodeJs
nodejs 递归拷贝、读取目录下所有文件和目录
Jul 18 NodeJs
Nodejs 识别图片类型的方法
Aug 15 NodeJs
nodejs实现百度舆情接口应用示例
Feb 07 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
apache rewrite_module模块使用教程
2008/01/10 PHP
PHP数组对比函数,存在交集则返回真,否则返回假
2011/02/03 PHP
jQuery 源码分析笔记
2011/05/25 PHP
Yii框架中memcache用法实例
2014/12/03 PHP
php生成不重复随机数、数组的4种方法分享
2015/03/30 PHP
wampserver改变默认网站目录的办法
2015/08/05 PHP
Symfony2框架创建项目与模板设置实例详解
2016/03/17 PHP
php下的原生ajax请求用法实例分析
2020/02/28 PHP
javascript removeChild 使用注意事项
2009/04/11 Javascript
推荐20家国外的脚本下载网站
2011/04/28 Javascript
Extjs4实现两个GridPanel之间数据拖拽功能具体方法
2013/11/21 Javascript
javascript操作html控件实例(javascript添加html)
2013/12/02 Javascript
javascript中parseInt()函数的定义和用法分析
2014/12/20 Javascript
JS 作用域与作用域链详解
2015/04/07 Javascript
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
2017/07/10 Javascript
Angular.js中$resource高大上的数据交互详解
2017/07/30 Javascript
JS中图片压缩的方法小结
2017/11/14 Javascript
react-native封装插件swiper的使用方法
2018/03/20 Javascript
JavaScript常用数学函数用法示例
2018/05/14 Javascript
使用jquery模拟a标签的click事件无法实现跳转的解决
2018/12/04 jQuery
JavaScript实现网页tab栏效果制作
2020/11/20 Javascript
js调用网络摄像头的方法
2020/12/05 Javascript
[03:42]2014DOTA2西雅图国际邀请赛 Navi战队巡礼
2014/07/07 DOTA
[05:28]刀塔密之一:团结则存
2014/07/03 DOTA
Python3安装Scrapy的方法步骤
2017/11/23 Python
python+django+sql学生信息管理后台开发
2018/01/11 Python
在IPython中进行Python程序执行时间的测量方法
2018/11/01 Python
Pytorch 使用opnecv读入图像由HWC转为BCHW格式方式
2020/06/02 Python
Python openpyxl模块实现excel读写操作
2020/06/30 Python
英国品牌男装折扣网站:Brown Bag
2018/03/08 全球购物
Unix/Linux开发面试题
2016/08/16 面试题
大学生饮食配送创业计划书
2014/01/04 职场文书
2014年党员创先争优承诺书
2014/05/29 职场文书
户籍证明格式
2014/09/15 职场文书
六查六看剖析材料
2014/10/06 职场文书
2015年教师节演讲稿范文
2015/03/19 职场文书