如何利用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中自定义事件实例
Jun 20 NodeJs
Nodejs实现的一个静态服务器实例
Dec 06 NodeJs
Nodejs获取网络数据并生成Excel表格
Mar 31 NodeJs
Nodejs进阶:如何将图片转成datauri嵌入到网页中去实例
Nov 21 NodeJs
详解nodejs 文本操作模块-fs模块(五)
Dec 23 NodeJs
nodejs搭建本地服务器并访问文件的方法
Mar 03 NodeJs
nodejs socket实现的服务端和客户端功能示例
Jun 02 NodeJs
浅析 NodeJs 的几种文件路径
Jun 07 NodeJs
nodejs异步编程基础之回调函数用法分析
Dec 26 NodeJs
Nodejs实现的操作MongoDB数据库功能完整示例
Feb 02 NodeJs
通过实例了解Nodejs模块系统及require机制
Jul 16 NodeJs
Nodejs 微信小程序消息推送的实现
Jan 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使用curl访问https示例分享
2014/01/17 PHP
Array.slice()与Array.splice()的返回值类型
2006/10/09 Javascript
javascript 原型模式实现OOP的再研究
2009/04/09 Javascript
JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具
2010/12/10 Javascript
动态改变div的z-index属性的简单实例
2013/08/08 Javascript
js实现的map方法示例代码
2014/01/13 Javascript
js数组的操作指南
2014/12/28 Javascript
JavaScript版的TwoQueues缓存模型
2014/12/29 Javascript
Windows下用PyCharm和Visual Studio开始Python编程
2015/10/26 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
2015/10/28 Javascript
JS中的forEach、$.each、map方法推荐
2016/04/05 Javascript
JS模仿腾讯图片站的图片翻页按钮效果完整实例
2016/06/21 Javascript
纯原生js实现table表格的增删
2017/01/05 Javascript
微信小程序异步处理详解
2017/11/10 Javascript
Layer+Echarts构建弹出层折线图的方法
2019/09/25 Javascript
用Angular实现一个扫雷的游戏示例
2020/05/15 Javascript
如何在postman测试用例中实现断言过程解析
2020/07/09 Javascript
vue 实现根据data中的属性值来设置不同的样式
2020/08/04 Javascript
python 中文字符串的处理实现代码
2009/10/25 Python
Python实现的异步代理爬虫及代理池
2017/03/17 Python
Windows上使用Python增加或删除权限的方法
2018/04/24 Python
浅谈django的render函数的参数问题
2018/10/16 Python
flask框架蓝图和子域名配置详解
2020/01/25 Python
python计算导数并绘图的实例
2020/02/29 Python
python实现图像拼接功能
2020/03/23 Python
python except异常处理之后不退出,解决异常继续执行的实现
2020/04/25 Python
宝塔面板出现“open_basedir restriction in effect. ”的解决方法
2021/03/14 PHP
用HTML5制作烟火效果的教程
2015/05/12 HTML / CSS
德国著名廉价网上药店:Shop-Apotheke
2017/07/23 全球购物
财务部总监岗位职责
2014/03/12 职场文书
人民教师求职自荐信
2014/03/12 职场文书
竞选大学学委演讲稿
2014/09/13 职场文书
2016元旦晚会主持词
2015/07/01 职场文书
Python初识逻辑与if语句及用法大全
2021/08/07 Python
讨论nginx location 顺序问题
2022/05/30 Servers
vue ant design 封装弹窗表单的使用
2022/06/01 Vue.js