资讯详情

资讯详情

Calendar 游戏 JavaScript 移植全解析:从 1978 年 BASIC 到浏览器端日历生成

示例工程【免费下载链接】basic-computer-gamesAn updated version of the classic Basic Computer Games book, with well-written examples in a variety of common MEMORY SAFE, SCRIPTING programming languages. See https://coding-horror.github.io/basic-computer-games/项目地址https://gitcode.com/gh_mirrors/ba/basic-computer-games点击查看免费下载本篇文章以21_Calendar目录下的 JavaScript 移植21_Calendar/javascript/README.md、calendar.js 与 calendar.html为研究对象结合原始 calendar.bas 与其他语言移植版本完整拆解这款经典程序的玩法规则、移植思路与核心算法。读完本文你将掌握这个零日期库依赖的纯算法日历生成器的工作原理并能在浏览器中直接运行它。一、游戏背景与玩法规则1.1 程序缘起Calendar 是 1978 年《Basic Computer Games》一书收录的经典程序之一由美国罗德岛州 Portsmouth 的 Abbey 修道院的 Geoffrey Chase 编写。程序的功能很纯粹打印任意年份的 12 个月日历。在今天看来这平淡无奇但在 1978 年的微型计算机时代这是一个展示字符排版与日期推算能力的经典范例。在 21_Calendar/README.md 中项目对该程序的玩法说明如下程序为任意年份打印日历你必须指定该年份一周从星期几开始闰年时需要对代码做两处修改程序的输出是一份排版工整的 12 个月月历。1.2 起始星期参数约定原程序以偏移量而非自然数来编码一年第一天的星期参数含义0星期日Sunday-1星期一Monday-2星期二Tuesday-3星期三Wednesday-4星期四Thursday-5星期五Friday-6星期六Saturday这套0 表示周日、负数向前回溯的约定来源于 BASIC 原版的注释REM 1979 STARTS ON MONDAY (0SUN, -1MON, -2TUES...)见 calendar.bas。正如 21_Calendar/README.md 所指出的玩家可以先用同仓库的WEEKDAY程序95_Weekday查出任一年份第一天的星期再据此设定参数。1.3 闰年的两处修改原版 BASIC 通过代码中两处REM注释明确指出了闰年的调整点见 calendar.bas月份天数表DATA 0,31,28,31,30,31,30,31,31,30,31,30,31中的 2 月需从 28 改为 29注释为0,31,29, ..., ON LEAP YEARS年末剩余天数标题行打印的365-S需改为366-S注释为366-S; ON LEAP YEARS。JavaScript 移植版同样保留了这两处注释便于需要时修改见 calendar.js 与第 60 行的// 366 - s on leap years。1.4 移植说明Porting Notes21_Calendar/README.md 给出了两条重要的移植约定现代环境普遍自带日期/时间函数本可以大大简化程序但这些移植版本刻意不借助日期库忠实保留原程序的纯算法风格部分移植版本选择主动询问用户起始星期与是否为闰年而不是要求玩家修改代码以提高交互性。二、JavaScript 移植整体架构JavaScript 移植由两个文件组成位于 21_Calendar/javascriptcalendar.html页面外壳负责加载脚本并渲染输出calendar.js核心算法共 89 行由 Oscar Toledo G.nanochess从 BASIC 转换而来。HTML 页面的结构非常精简见 calendar.htmlhtml head titleCALENDAR/title link relstylesheet href../../00_Utilities/javascript/style_terminal.css / /head body pre idoutput/pre script srccalendar.js/script /body /html关键点输出目标是一个pre idoutput元素保证等宽字体与空格的忠实呈现复用了仓库公共终端样式 00_Utilities/javascript/style_terminal.css让输出具有复古终端观感由于算法采用空格排版pre是唯一合适的容器——普通 HTML 会折叠连续空格破坏日历列对齐。2.1 输出原语print 与 tabJavaScript 移植没有使用console.log而是将 BASIC 的PRINT/TAB直接翻译为两个 DOM 操作函数见 calendar.jsfunction print(str) { document.getElementById(output).appendChild(document.createTextNode(str)); } function tab(space) { var str ; while (space-- 0) str ; return str; }其中print()对应 BASIC 的PRINT每次追加一段文本节点tab(n)对应TAB(n)返回 n 个空格字符串。这种每次 append 一个文本节点的方式与 BASIC 的流式打印一一对应是最直观的翻译策略。程序开头的标题打印即由二者组合而成calendar.jsprint(tab(32) CALENDAR\n); print(tab(15) CREATIVE COMPUTING MORRISTOWN, NEW JERSEY\n); print(\n); print(\n); print(\n);这与 BASIC 第 10~30 行PRINT TAB(32);CALENDAR等完全一致保留了原版的CREATIVE COMPUTING, MORRISTOWN, NEW JERSEY题头与垂直留白。三、核心算法逐段拆解整个程序不依赖任何日期 API仅靠三样东西一张月份天数表、一个累计天数变量s、以及一个全局递增的日期游标d。3.1 月份天数表与年份起点// 0, 31, 29 ON LEAP YEARS var m [0, 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; // VALUES FOR 1979 - SEE NOTES for (i 1; i 6; i) print(\n); d -1; // 1979 starts on Monday (0 Sun, -1 Monday, -2 Tuesday) s 0;数组m[0]是一个哑元占位对应 BASIC 的DIM M(12)与DATA首项 0m[1]到m[12]才是 1 月至 12 月的天数默认配置是1979 年d -1表示该年从周一开始对应 calendar.jss是本月之前已过去的天数累计初始为 0开头的 6 个空行对应 BASIC 第 120 行FOR I1 TO 6: PRINT CHR$(10): NEXT I用于在滚动终端上留出顶部空白。3.2 逐月循环与装饰性标题主体是一个for (n 1; n 12; n)的大循环calendar.js每月打印一份日历。首先是标题行s s m[n - 1]; str ** s; while (str.length 7) str ; for (i 1; i 18; i) str *; switch (n) { case 1: str JANUARY ; break; ... case 12: str DECEMBER; break; } for (i 1; i 18; i) str *; str (365 - s) **; // 366 - s on leap years print(str \n);逐段理解s s m[n-1]进入第 n 月前把上一月的天数累加进s。于是打印 1 月时s 0打印 2 月时s 31以此类推左端装饰**加累计天数如**0不足 7 列用空格补齐再接 18 个*月份名通过switch在标题中央输出月份英文名JANUARY、FEBRUARY…DECEMBER对应 BASIC 的ON N GOTO ...分支结构calendar.bas右端装饰再补 18 个*随后打印365 - s年内剩余天数与**结尾。这正是闰年需要修改的第二处把365换成366。3.3 星期表头与分隔线print( S M T W T F S\n); print(\n); str ; for (i 1; i 59; i) str *;星期表头S M T W T F S中每列占据 8 个字符宽度4 个空格 8 列单位正好对应后面日期数字的列宽设计随后打印 59 个*作为每月标题区与日期区的分隔线对应 BASIC 第 380~410 行。3.4 周网格生成日期游标算法这是全程序最巧妙的部分calendar.jsfor (week 1; week 6; week) { print(str \n); str ; for (g 1; g 7; g) { d; d2 d - s; if (d2 m[n]) { week 6; break; } if (d2 0) str d2; while (str.length 4 8 * g) str ; } if (d2 m[n]) { d g; break; } } d - g; print(str \n);算法逻辑拆解全局日期游标d程序运行期间d从-1一路单调递增每打印一个日期格子d。它表示从 1 月 1 日设为日序 0以来的天数d2 d - s用全局游标减去本月初之前的累计天数s得到本月的第几天。当d2为 0 或负数时说明该格子仍属上一个月打印空格d2 0才打印日期数字列宽控制while (str.length 4 8 * g) str ;保证每个日期占据 8 字符宽的列起始 4 空格从而与星期表头对齐边界条件if (d2 m[n])说明本月已打印完强制退出week 6 breakif (d2 m[n])恰好打完最后一天时通过d g让游标跨过本行已消费的格子数再退出行尾回退每次内层循环结束后d - g把游标回退到刚打印完的那一周的起点保证下一周从正确位置继续——这是移植中最容易出错的细节之一也是对齐打印的关键。外层最多循环 6 周week 6这是一个月最多占用的行数含空白填充保证任何月份的日历都能完整打印且各月版式一致。3.5 与 BASIC 原版的逐行对照功能BASIC 原版JavaScript 移植标题打印calendar.bas10~30 行calendar.js月份天数表calendar.basDATA 语句calendar.js数组字面量起始星期calendar.basD-1calendar.jsd -1月份名分支calendar.basON N GOTOcalendar.jsswitch星期表头calendar.bas380~400 行calendar.js周网格循环calendar.bas430~560 行calendar.js可以发现JavaScript 版几乎是一比一的结构化翻译DATA→ 数组、ON N GOTO→switch、PRINT TAB()→print(tab())甚至注释都一一保留。这为理解BASIC 结构化重构提供了绝佳范例。四、运行方式4.1 浏览器运行JavaScript 版由于 calendar.html 是纯静态页面只需在浏览器中直接打开即可# 在仓库根目录下直接用浏览器打开 open 21_Calendar/javascript/calendar.html # macOS xdg-open 21_Calendar/javascript/calendar.html # Linux页面加载后会自动执行 calendar.js在pre区域逐行渲染出 1979 年 12 个月的完整日历。页面依赖的终端样式位于 00_Utilities/javascript/style_terminal.css需要保持仓库目录结构完整才能正确显示直接复制单个 HTML 文件会丢失样式。4.2 体验其他语言移植仓库为 Calendar 提供了大量语言的移植版本各子目录的 README 均声明原始源码下载自 Vintage Basic转换为对应语言例如21_Calendar/python/calendar.pyPython21_Calendar/csharp/Program.csC#21_Calendar/java/Calendar.javaJava21_Calendar/ruby/calendar.rbRuby21_Calendar/rust/src/main.rsRust21_Calendar/perl/calendar.plPerl其中 C# 有完整的 Calendar.csproj 与 Calendar.sln 工程文件Rust 版则带 Cargo.toml 与 Cargo.lock均可按对应语言的常规方式直接运行如python 21_Calendar/python/calendar.py、cargo run。各个移植版在算法上与 JavaScript 版同源对照阅读可以横向比较不同语言对同一算法的表达方式。五、运行效果与验证要点程序运行后应输出 12 个月份的月历每个月的版式一致可重点核对以下两点列对齐星期表头S M T W T F S与每个日期数字严格按 8 字符列对齐1 月 1 日应落在 Monday 一列之下默认d -1月份衔接相邻两个月的日期不重不漏。例如 1 月打印到 31 日2 月的第一天应紧接其后且 2 月有 28 天非闰年默认配置。验证时还可修改 calendar.js 的d值与第 25 行的二月天数观察不同起始星期与闰年配置下的输出变化——这正是原版要求玩家自行修改的设计意图。六、总结Calendar 的 JavaScript 移植是一份小而美的经典移植样例不足百行代码却完整承载了 1978 年 BASIC 原版的全部算法逻辑——累计天数、日期游标、8 字符列宽排版、闰年双修改点。它刻意绕开现代日期库用最朴素的纯算法实现日历生成既保留了原版的可玩性自行修改参数又为学习者提供了一份低门槛、可对照 BASIC 逐行研读的移植教材。若想进一步理解程序在真实环境中的行为直接运行 calendar.html 即可在浏览器中复现这份来自 1978 年的复古月历。赞分享示例工程【免费下载链接】basic-computer-gamesAn updated version of the classic Basic Computer Games book, with well-written examples in a variety of common MEMORY SAFE, SCRIPTING programming languages. See https://coding-horror.github.io/basic-computer-games/项目地址https://gitcode.com/gh_mirrors/ba/basic-computer-games点击查看免费下载相关推荐MiniScript 移植版 Calendar 程序解析从 1978 年 BASIC 经典到可交互的年历打印器MiniScript 移植版 Calendar 程序解析从 1978 年 BASIC 经典到可交互的年历打印器 导读 本文围绕仓库中的 MiniScript示例工程Bug 游戏 Python 移植版源码解析从 1978 年 BASIC 到 dataclass 的骰子拼虫游戏Bug 游戏 Python 移植版源码解析从 1978 年 BASIC 到 dataclass 的骰子拼虫游戏 本指南以 16_Bug/python/READ示例工程Archon Monorepo 上下文预热指南用 Prime 命令为 AI Agent 建立完整的代码库认知Archon Monorepo 上下文预热指南用 Prime 命令为 AI Agent 建立完整的代码库认知 本文围绕 Archon 仓库中面向编码 Agen示例工程上一篇Android序列化利器Parceler库详解下一篇OpenBidKit_Yibiao文件解析原理如何让AI精准理解招标文件创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
觉得有用,分享给同行:

为您的企业打造数字门面

稳重轻奢商务风格,端正雅致视觉,长效耐看不易过时。

立即咨询 →