手把手教你将 7 年前的 OpenSC2K 开源游戏项目重见天日运行教程

Ne0inhk

— 9 min read
手把手教你将 7 年前的 OpenSC2K 开源游戏项目重见天日运行教程

前言

最近尝试运行一个有趣的开源项目 OpenSC2K——一个用 JavaScript 编写的《模拟城市 2000》开源重制版。这个项目使用 Phaser 3 游戏引擎和 WebGL 渲染。本文记录了从克隆项目到成功运行的完整过程，以及遇到的各种问题和解决方案。

项目背景

  • 项目名称：OpenSC2K
  • 技术栈：JavaScript, Phaser 3, WebGL, Webpack 4
  • 原作者：Nicholas Ochoa (原 GitHub 用户名: rage8885)
  • 特点：需要原版 SimCity 2000 的游戏资源文件
在这里插入图片描述

遇到的问题与解决方案

问题 1：依赖包 404 错误

在这里插入图片描述

错误信息：

error Error: https://codeload.github.com/rage8885/dat.gui/tar.gz/3ea8447b2ced3f08eb25ec2a89e0e22baec91b40: Request failed "404 Not Found" error Error: https://codeload.github.com/rage8885/bmp-js/tar.gz/...: Request failed "404 Not Found"

原因分析：

  • 项目的原始 package.json 中引用了作者自己 fork 的依赖库
  • 原作者的 GitHub 用户名从 rage8885 改为了 nicholas-ochoa
  • 但是那些 fork 的依赖库（rage8885/bmp-js, rage8885/dat.gui）并没有随用户名一起迁移
  • 这些旧的 fork 仓库已经不存在，导致依赖包无法从 GitHub 下载

原始的 package.json 依赖部分：

{"dependencies":{"@vingle/bmp-js":"rage8885/bmp-js",// ❌ 已失效"bmp-js":"rage8885/bmp-js",// ❌ 已失效"dat.gui":"rage8885/dat.gui",// ❌ 已失效"file-saver":"^2.0.0","jquery":"^3.4.0","jszip":"^3.1.5","phaser":"3.16.0-rc2"}}

解决方案：

用官方 npm 版本替代那些已失效的 GitHub 依赖。打开 package.json 文件，手动修改以下三个依赖：

修改后的依赖部分：

{"dependencies":{"@vingle/bmp-js":"^0.2.5",// ✅ 改为官方 npm 版本"bmp-js":"^0.1.0",// ✅ 改为官方 npm 版本"dat.gui":"^0.7.9",// ✅ 改为官方 npm 版本"file-saver":"^2.0.0",// 保持不变"jquery":"^3.4.0",// 保持不变"jszip":"^3.1.5",// 保持不变"phaser":"3.16.0-rc2"// 保持不变}}

同时更新 repository 相关字段（反映作者用户名变更）：

{"homepage":"https://github.com/nicholas-ochoa/OpenSC2K","repository":{"type":"git","url":"https://github.com/nicholas-ochoa/OpenSC2K.git"}}

完整步骤：

  1. 手动编辑 package.json：
    • 将上述三个依赖改为官方 npm 版本
    • 更新 homepage 和 repository.url

重新安装依赖：

yarninstall

清理 yarn 缓存：

yarn cache clean

清理旧的安装文件：

# Windows 命令行 del yarn.lock rmdir /s /q node_modules

为什么这样做有效？

  • 官方的 bmp-js、@vingle/bmp-js 和 dat.gui 包在 npm 上是可用的
  • 虽然可能与作者的 fork 版本略有不同，但核心功能是兼容的
  • 使用官方版本避免了对已删除 GitHub 仓库的依赖
  • 后续我们会修复因版本差异导致的代码兼容性问题（见问题 5）

问题 2：Webpack 配置文件路径错误

错误信息：

Error: Cannot find module 'D:\jiangcaidu\code\bs\OpenSC2K\'.\webpack.config.js''

原因分析：

  • package.json 中的 scripts 使用了单引号包裹路径
  • Windows 命令行处理单引号时产生了转义问题

解决方案：

修改 package.json 的 scripts 部分：

{"scripts":{"dev":"webpack-dev-server --progress --config webpack.config.js"// 原: "dev": "webpack-dev-server --progress --config './webpack.config.js'"}}

关键点：去掉路径两边的单引号，或者干脆省略 --config 参数（webpack 默认会查找 webpack.config.js）。

问题 3：Node.js 与 Webpack 4 兼容性问题

错误信息：

Error: error:0308010C:digital envelope routines::unsupported at new Hash (node:internal/crypto/hash:101:19) at Object.createHash (node:crypto:139:10)

原因分析：

  • 我使用了 Node.js v20（较新版本）
  • 项目使用 Webpack 4（较老版本）
  • Node.js 17+ 移除了 Webpack 4 使用的旧版 OpenSSL 加密算法

解决方案：

方案 A：使用环境变量（推荐）

修改 package.json：

{"scripts":{"dev":"set NODE_OPTIONS=--openssl-legacy-provider && webpack-dev-server --progress --config webpack.config.js"}}

方案 B：降级 Node.js

# 如果安装了 nvm (Node Version Manager) nvm install16 nvm use 16

方案 C：升级到 Webpack 5（需要修改配置，较复杂，不推荐新手）

推荐：方案 A 最简单，无需修改 Node.js 版本。

问题 4：游戏资源文件缺失，导致黑屏

在这里插入图片描述

错误信息（浏览器控制台）：

Failed to load resource: the server responded with a status of 404 (Not Found) :3000/assets/import/PAL_MSTR.BMP:1 :3000/assets/import/LARGE.DAT:1

原因分析：

  • OpenSC2K 需要原版 SimCity 2000 的游戏资源文件
  • 由于版权原因，这些文件不包含在项目仓库中
  • 必须合法获取原版游戏并提取资源

解决方案：

  1. 购买游戏（合法途径）：
    • GOG.com - 约 $3-5 美元（推荐）
    • Steam（如果有）
    • 其他密钥商店（G2A, Kinguin 等）

游戏安装目录通常在：

C:\GOG Games\SimCity 2000 Special Edition\ 或 C:\Program Files (x86)\GOG Galaxy\Games\SimCity 2000 Special Edition\

提取游戏文件：

# 创建目录mkdir assets mkdir assets\import # 从 SimCity 2000 安装目录复制以下文件到 assets\import\：# - PAL_MSTR.BMP# - LARGE.DAT# - 以及其他 .BMP 和 .DAT 文件
作者有提到，这个错误纯是因为一开始没仔细去读README.md文件
在这里插入图片描述

问题 5：bmp-js 库兼容性问题

错误信息（浏览器控制台）：

Uncaught TypeError: First argument must be a string, Buffer, ArrayBuffer, Array, or array-like object. at new palette (palette.js:10:35) at LoaderPlugin.<anonymous> (world.js:26:22)

原因分析：

  • 官方 bmp-js 库的 API 与作者修改版略有不同
  • bmp.decode() 方法对参数类型有严格要求

解决方案：

修改 src/import/palette.js 文件的 parse() 方法：

原代码（第 60-62 行）：

parse(){// decode BMP file into an array of pixels (rgba)let file = bmp.decode(this.buffer);

修改为：

parse(){// decode BMP file into an array of pixels (rgba)// Ensure buffer is in the correct format for bmp-jslet bufferData =this.buffer;if(!Buffer.isBuffer(bufferData)){ bufferData = Buffer.from(bufferData);}let file = bmp.decode(bufferData);

说明：这段代码确保传入 bmp.decode() 的参数是有效的 Buffer 对象，但好像也解决不了？就没有去做测试了（不想购买 SimCity 2000 的游戏资源文件），不知道是不是因为缺少资源 .BMP 和 .DAT 文件的原因？后续待定！！！！

完整的项目配置

最终的 package.json

{"name":"OpenSC2K","description":"An Open Source remake of SimCity 2000","author":"Nicholas Ochoa","version":"0.6.0","homepage":"https://github.com/nicholas-ochoa/OpenSC2K","repository":{"type":"git","url":"https://github.com/nicholas-ochoa/OpenSC2K.git"},"license":"GPL-3.0","main":"index.js","scripts":{"dev":"set NODE_OPTIONS=--openssl-legacy-provider && webpack-dev-server --progress --config webpack.config.js"},"dependencies":{"@vingle/bmp-js":"^0.2.5","bmp-js":"^0.1.0","dat.gui":"^0.7.9","file-saver":"^2.0.0","jquery":"^3.4.0","jszip":"^3.1.5","phaser":"3.16.0-rc2"},"devDependencies":{"@babel/cli":"^7.2.0","@babel/core":"^7.2.0","@babel/node":"^7.2.0","@babel/plugin-proposal-class-properties":"^7.2.1","@babel/plugin-proposal-optional-chaining":"^7.2.0","@babel/polyfill":"^7.0.0","@babel/preset-env":"^7.2.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.4","css-loader":"^2.0.0","eslint":"^5.10.0","eslint-config-standard":"^12.0.0","eslint-loader":"2.1.1","eslint-plugin-import":"^2.7.0","eslint-plugin-node":"^8.0.0","eslint-plugin-promise":"^4.0.1","eslint-plugin-standard":"^4.0.0","expose-loader":"^0.7.5","file-loader":"^3.0.1","html-webpack-plugin":"^3.0.6","raw-loader":"^1.0.0","source-map-support":"^0.5.4","style-loader":"^0.23.1","url-loader":"^1.0.1","webpack":"^4.1.1","webpack-cli":"^3.1.2","webpack-dev-server":"^3.1.1"}}

项目目录结构

OpenSC2K/ ├── assets/ │ └── import/ # 需要手动创建并添加游戏资源 │ ├── PAL_MSTR.BMP │ ├── LARGE.DAT │ └── ... (其他资源文件) ├── src/ │ ├── import/ │ │ └── palette.js # 需要修改的文件 │ └── ... ├── package.json # 需要修改依赖 ├── webpack.config.js └── ...

运行步骤总结

1. 克隆项目

git clone https://github.com/nicholas-ochoa/OpenSC2K.git cd OpenSC2K

2. 修改配置文件

  • 修改 package.json（依赖和 scripts）
  • 修改 src/import/palette.js（bmp-js 兼容性）

3. 安装依赖

yarninstall# 如果遇到 browserslist 警告（可选）yarn upgrade caniuse-lite browserslist

4. 添加游戏资源

  • 从合法渠道购买 SimCity 2000
  • 提取资源文件到 assets/import/ 目录

5. 启动开发服务器

yarn dev

6. 访问游戏

打开浏览器访问：http://localhost:3000/

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

总结

通过这次调试过程，我们成功让一个几年前的项目在现代环境中运行起来。这个过程涉及了依赖管理、版本兼容性、类型转换、版权问题等多个方面的知识。

OpenSC2K 是一个很有趣的项目，展示了如何用 Web 技术重制经典游戏。虽然遇到了一些问题，但通过系统的排查和解决，最终还是成功运行了。

相关链接：

希望这篇文章能帮助其他想要运行类似老项目的开发者！如果你在运行过程中遇到其他问题，欢迎在评论区交流。

Read more

Flutter 组件 jerelo 适配鸿蒙 HarmonyOS 实战：JSON-RPC 2.0 通讯，构建高性能远程过程调用与边缘端分布式协同架构

Flutter 组件 jerelo 适配鸿蒙 HarmonyOS 实战：JSON-RPC 2.0 通讯，构建高性能远程过程调用与边缘端分布式协同架构

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.ZEEKLOG.net Flutter 组件 jerelo 适配鸿蒙 HarmonyOS 实战：JSON-RPC 2.0 通讯，构建高性能远程过程调用与边缘端分布式协同架构 前言 在鸿蒙（OpenHarmony）生态迈向工业 4.0、涉及海量边缘节点调度、分布式服务调用及跨端轻量级 RPC（Remote Procedure Call）互联的背景下，如何实现一套低开销、标准化且具备“方法导理”能力的通讯协议，已成为决定分布式系统协同效率的关键工程命题。在鸿蒙设备这类强调微内核架构与软总线高效吞吐的环境下，如果应用依然依赖沉重的 HTTP/REST 封装进行频繁的小报文交互，由于由于 HTTP 协议头的冗余性，极易由于由于“通讯开销过高”导致实时监控系统的响应滞后。 我们需要一种能够支持请求/响应对齐、具备通知（Notification）机制且符合

By Ne0inhk
完整卸载 OpenClaw — 各平台卸载完全指南（Windows/macOS/Linux/npm/pnpm）

完整卸载 OpenClaw — 各平台卸载完全指南（Windows/macOS/Linux/npm/pnpm）

涵盖所有安装方式的逐步卸载教程 — Windows、macOS、Linux、npm、pnpm 全部搞定。 平台支持：🪟 Windows PowerShell · ⌨️ Windows CMD · 🍎 macOS / Linux · 📦 npm · ⚡ pnpm 目录 * 卸载前的准备工作 * Windows — PowerShell 安装的卸载方法 * Windows — CMD 安装的卸载方法 * macOS / Linux 安装的卸载方法 * A. 默认 npm 安装方式卸载 * B. git 源码安装方式卸载（`--install-method git`） * npm 全局安装的卸载方法 * pnpm 全局安装的卸载方法 * 卸载方式汇总对照表 卸载前的准备工作 在开始卸载之前，建议先做几件事情，确保卸载后不留残余文件。 步骤 1 — 停止正在运行的 OpenClaw 守护进程（

By Ne0inhk

Copilot使用体验

本篇是去年使用Copilot的记录，不代表目前水平，仅做个人记录同步，谨慎参考。 GitHub Copilot的订阅计划 https://docs.github.com/en/copilot/about-github-copilot/subscription-plans-for-github-copilot 个人版提供30天的免费试用。个人版每月10 美元或每年 100 美元。 Copilot操作文档 https://docs.github.com/en/copilot/quickstart 目前支持JetBrains IDEs，Vim/Neovim，Visual Studio，Visual Studio Code，Xcode。安装插件，登录Github账号就可以使用了，需要开代理。 基本操作 * 获取代码建议，输入代码时会自动触发，使用“Tab”键采纳。 * 切换建议，macOS使用“Option+]”或“

By Ne0inhk

Stable Diffusion底模对应的VAE推荐：提升生成质量的关键技术解析

Stable Diffusion底模对应的VAE推荐：提升生成质量的关键技术解析 引言：VAE在Stable Diffusion生态系统中的核心作用 变分自编码器（VAE）是Stable Diffusion生成架构中不可或缺的组件，负责将潜在空间表示与像素空间相互转换。尽管常常被忽视，VAE的质量直接影响图像生成的细节表现、色彩准确性和整体视觉效果。本文将深入解析不同Stable Diffusion底模对应的最优VAE配置，从技术原理到实践应用全面剖析VAE的选择策略。 VAE在Stable Diffusion中的核心功能包括： * 编码过程：将输入图像压缩到潜在空间表示（latent representation） * 解码过程：将潜在表示重构为高质量图像 * 正则化作用：确保潜在空间遵循高斯分布，便于扩散过程采样 一、VAE技术原理深度解析 1.1 变分自编码器的数学基础 变分自编码器的目标是学习数据的潜在表示，其数学基础建立在变分推断之上。给定输入数据 x x x，VAE试图最大化证据下界(ELBO)： log ⁡ p ( x ) ≥ E q ( z ∣

By Ne0inhk