手把手教你将 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

保姆级教程：从零搭建AI系统权限控制系统

保姆级教程：从零搭建AI系统权限控制系统

保姆级教程：从零搭建AI系统权限控制系统 手把手教你，如何在3小时内搭建完整的AI权限安全架构，避免Meta式的数据“裸奔”事故 前言：为什么要学这个？ 2026年3月22日，Meta AI发生重大数据泄露事故——敏感数据“全员可见”2小时。如果你也正在开发AI项目，这种事故也可能发生在你身上。 本教程将带你从零开始，一步步搭建一个完整的、可实战的AI权限控制系统。无论你是个人开发者、小团队，还是大型AI项目，都能直接应用。 预计完成时间： 3小时 所需技能： 基础Python、Linux命令行、Git 第一阶段：准备工作（15分钟） 第1步：环境准备 # 1. 安装Python和相关依赖 pip install casbin flask sqlalchemy redis # 2. 安装数据库（推荐PostgreSQL） sudo apt-get install postgresql

By Ne0inhk
文科生封神！Python+AI 零门槛变现：3 天造 App，指令即收入（附脉脉 AI 沙龙干货）

文科生封神！Python+AI 零门槛变现：3 天造 App，指令即收入（附脉脉 AI 沙龙干货）

🎁个人主页：User_芊芊君子 🎉欢迎大家点赞👍评论📝收藏⭐文章 🔍系列专栏：AI 文章目录： * 一、前言：打破“AI是理科生专属”的迷思 * 二、行业新趋势：为什么文科生学Python+AI更有优势？ * 2.1 文科生 vs 理科生：AI时代的核心竞争力对比 * 2.2 核心变现逻辑：靠Python+AI，“指令即收入” * 三、Python+AI零基础学习路径（文科生专属版） * 3.1 学习路径流程图 * 3.2 分阶段学习核心内容（新颖且落地） * 阶段1：Python核心基础（7天）—— 只学“AI开发必备” * 阶段2：AI大模型交互（10天）

By Ne0inhk
Flutter 组件 deepseek 的适配 鸿蒙Harmony 实战 - 驾驭国产最强大模型 API、实现鸿蒙端 AI 原生对话与流式渲染的高效集成方案

Flutter 组件 deepseek 的适配 鸿蒙Harmony 实战 - 驾驭国产最强大模型 API、实现鸿蒙端 AI 原生对话与流式渲染的高效集成方案

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.ZEEKLOG.net Flutter 组件 deepseek 的适配 鸿蒙Harmony 实战 - 驾驭国产最强大模型 API、实现鸿蒙端 AI 原生对话与流式渲染的高效集成方案 前言 在 AI 浪潮席卷全球的今天，大模型（LLM）已成为移动应用创新的核心引擎。而在众多的国产模型中，DeepSeek 凭借其卓越的算法效率和极致的性价比，正成为开发者们的“真香”选择。 将 DeepSeek 这种顶尖的认知能力，植入到全面拥抱智能化、万物互联的鸿蒙（OpenHarmony）系统中，将碰撞出怎样的火花？ deepseek 库为 Flutter 提供了极简的 API 封装，它完美支持了 SSE（流式事件流）响应，能让你的鸿蒙 App

By Ne0inhk
【Linux信号】Linux进程信号（上）：信号产生方式和闹钟

【Linux信号】Linux进程信号（上）：信号产生方式和闹钟

🎬 个人主页：艾莉丝努力练剑 ❄专栏传送门：《C语言》《数据结构与算法》《C/C++干货分享&学习过程记录》 《Linux操作系统编程详解》《笔试/面试常见算法：从基础到进阶》《Python干货分享》 ⭐️为天地立心，为生民立命，为往圣继绝学，为万世开太平 🎬 艾莉丝的简介： 文章目录 * 1 ~> 理解信号是什么，为什么要有？生活中的信号 * 1.1 信号是什么？ * 1.1.1 普通信号和实时信号 * 1.1.2 信号的本质 * 1.2 生活中有哪些信号？以及一些结论总结 * 1.2.1 man 7 signal：查看信号部分的内容 * 1.2.

By Ne0inhk