首页 >> js开发 >> JavaScript如何利用nodejs实现命令行游戏
JavaScript如何利用nodejs实现命令行游戏
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
本文以贪吃蛇为例, 一步一步地分析如何实现一个命令行游戏.实现原理命令行输入
通过 process.stdin 监听命令行输入的按键, 改变小蛇的前进的方向
通过 process.stdin 监听命令行输入的按键, 改变小蛇的前进的方向画面渲染
通过 ANSI 转义序列 擦除之前的输出
通过 process.stdout 每隔一段时间将画面帧输出到命令行
通过 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'
//
}
// ]
})
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)) // 可以擦除指定行数的输出
}
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(' ')
}
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]
}
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 }
}
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]
}
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 查看该 贪吃蛇游戏源码贪吃蛇游戏源码
通过 process.stdin 监听命令行输入的按键, 改变小蛇的前进的方向
通过 process.stdin 监听命令行输入的按键, 改变小蛇的前进的方向画面渲染
通过 ANSI 转义序列 擦除之前的输出
通过 process.stdout 每隔一段时间将画面帧输出到命令行
通过 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'
//
}
// ]
})
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)) // 可以擦除指定行数的输出
}
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(' ')
}
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]
}
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 }
}
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]
}
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 查看该 贪吃蛇游戏源码贪吃蛇游戏源码
刚刚发布热门点击发布时间
- [07/09]Chrome抓取页面内容代码|chrome插件获取页面数据
- [07/09]谷歌浏览器数据采集插件开发|谷歌浏览器的采集功能
- [07/09]Chrome插件轻松抓取网络数据,Chrome插件轻松抓取网页源码数据
- [07/09]chrome插件怎么安装?chrome插件开发如何安装chrome插件
- [07/09]快速chrome插件开发-北京chrome插件开发外包
- [12/31]清大光德落地护眼灯|清大光德儿童护眼灯
- [07/20]网站无障碍适老化外包改造私有化过程遇到问题整理
- [07/19]适老化改造工信部明确APP适老化规范：禁广告弹窗，网站需提供特大字体
- [07/19]适老化改造包括哪些方面?
- [07/19]什么是适老化改造？
- [07/19]适老化与信息无障碍是什么关系，二者有何异同？
- [07/19]网站如何进行适老化改造？
- [07/12]老年群体面临“数字鸿沟” 数字化网站适老化改造服务彰显人文关怀
- [07/12]数字适老化改造方案 老龄群体数字化改造受关注
- [07/11]什么是重绘?什么是回流?常见引起回流属性和方法：
