Zenn
Open4

CLI GAME 遊び: ぷよぷよ

JavaScript
CLI
Game
Node.js
学習記録
mae616mae616

TechCommitでゲームを公開されている方のぷよぷよが面白かったのでCLIのJavaScriptで実装してみる遊び

まだ途中
https://github.com/mae616/puyo

参考になりそうなの

https://kiryuanzu.hatenablog.com/entry/2020/04/15/005934

https://www.npmjs.com/package/tetris?activeTab=code

下記のパッケージを入れるみたい
https://www.npmjs.com/package/clivas

https://www.npmjs.com/package/keypress

余談
https://www.npmjs.com/package/convas

というのも面白そう。もしかしたらこっち使った方がいいのかな？
まあ、一旦いいや。

https://www.npmjs.com/package/blessed

GitHub Copilotさんに勧められたこれも面白そう

https://qiita.com/toshi-toma/items/ea76b8894e7771d47e10

これも今度いろいろみたい

mae616mae616

パッケージを作る

mkdir puyo
cd puyo

npm init
; 全てEnter

touch index.js

npm install clivas
npm install keypress

; 確認
npm list
package.json
{
  "name": "puyo",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
+    "start": "node index.js"
-    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "clivas": "^0.2.0",
    "keypress": "^0.2.1"
  }
}
mae616mae616

2024/11/24 日 とりあえず何か描画して表示する

index.js
const clivas = require("clivas");
const keypress = require("keypress");

keypress(process.stdin);
const color = ["red", "green", "blue", "yellow", "cyan", "magenta", "white"];
const HEIGHT = 10;
const WIDTH = 5;

clivas.cursor(false);

const randomColor = () => color[Math.floor(Math.random() * color.length)];

const fields = new Array(WIDTH).fill("").map(() => new Array(HEIGHT).fill("."));

fields[2][0] = "red";
fields[2][1] = "green";

const draw = () => {
  clivas.clear();

  const fields2 = new Array(HEIGHT)
    .fill("")
    .map(() => new Array(WIDTH).fill("."));
  for (let column = 0; column < WIDTH; column++) {
    for (let row = 0; row < HEIGHT; row++) {
      fields2[row][column] = fields[column][row];
    }
  }

  clivas.line("{white:┌──────────┐}");
  for (const row of fields2) {
    clivas.write("{white:│}");
    for (const column of row) {
      if (column === ".") {
        clivas.write("{2}");
      } else {
        clivas.write(`{2+${column}:●}`);
      }
    }
    clivas.write("{white:│}\n");
  }
  clivas.line("{white:└──────────┘}");
};

draw();

process.stdin.on("keypress", (ch, key) => {
  if (key && key.ctrl && key.name === "c") {
    process.exit();
  }
  if (key.name === "left") {
    // move left
  }
  if (key.name === "right") {
    // move right
  }
  if (key.name === "down") {
    // move down
  }
  if (key.name === "up") {
    // rotate
  }
  draw();
});


動かないけど。

mae616mae616

とりあえず落としてみた

const clivas = require("clivas");
const keypress = require("keypress");

keypress(process.stdin);
process.stdin.setRawMode(true);
process.stdin.resume();

const color = ["red", "green", "blue", "yellow", "cyan", "magenta", "white"];
const HEIGHT = 10;
const WIDTH = 5;

clivas.cursor(false);
clivas.pin(HEIGHT);

const randomColor = () => color[Math.floor(Math.random() * color.length)];

const fields = new Array(WIDTH).fill("").map(() => new Array(HEIGHT).fill("."));

fields[2][0] = "red";
fields[2][1] = "green";

const draw = () => {
  const fields2 = new Array(HEIGHT)
    .fill("")
    .map(() => new Array(WIDTH).fill("."));
  for (let column = 0; column < WIDTH; column++) {
    for (let row = 0; row < HEIGHT; row++) {
      fields2[row][column] = fields[column][row];
    }
  }

  clivas.line("{white:┌──────────┐}");
  for (const row of fields2) {
    clivas.write("{white:│}");
    for (const column of row) {
      if (column === ".") {
        clivas.write("{2}");
      } else {
        clivas.write(`{2+${column}:●}`);
      }
    }
    clivas.write("{white:│}\n");
  }
  clivas.line("{white:└──────────┘}");
};

let flame = 0;
setInterval(function () {
  clivas.clear();
  fields[2].pop();
  fields[2].unshift(".");
  draw();
  flame++;
}, 800);

process.stdin.on("keypress", (ch, key) => {
  if (key && key.name === "return") {
    return;
  }
  if (key && key.ctrl && key.name === "c") {
    process.exit();
  }
  if (key.name === "left") {
    // move left
  }
  if (key.name === "right") {
    // move right
  }
  if (key.name === "down") {
    // move down
  }
  if (key.name === "up") {
    // rotate
  }
  draw();
});

今日は一旦ここまで。また明日。