Solstice Defender這個游戲沒有任何框架,沒有游戲引擎,也沒有任何外部依賴。它只是一個瀏覽器里能直接跑的HTML文件。一個人,用最原始的HTML、CSS和JavaScript,寫出了一個橫跨三個時空的射擊游戲。9個關卡,三個主題區域,全部塞進一個index.html里。打開就能玩,不需要構建步驟,不需要npm install,甚至不需要服務器。
游戲的核心機制跟夏至死死綁定:光對抗黑暗,最長的一天變成一種資源,而6月21日這個日期把三個歷史轉折點串在了一起。玩家操控的是一束光。你要穿越三個區域,每個區域都在講一個關于六月的故事。
![]()
第一個區域叫Ada's Sky,對應1到3關。背景設定在1865年6月19日,德克薩斯州的加爾維斯頓。一個叫Ada的女性第一次聽到《解放奴隸宣言》,她走向水邊,身份已經是自由人。而你要做的,是保護她的天空,擊落從天而降的鎖鏈。游戲畫面里鎖鏈真的在往下掉,你得把它們打碎。
第二個區域是Alan's Grid,第4到6關。時間跳轉到1941年,地點是布萊切利園。艾倫·圖靈正跟黎明賽跑,試圖破解恩尼格瑪密碼。這個區域的無人機移動軌跡是鋸齒狀的——毫無規律,就像密碼本身一樣難以預測。你的任務是守住網格。
第三個區域叫Sol's Network,覆蓋最后三關。時間線拉到當下。一個AI在夏至這一天蘇醒,問出了一個問題:在最長的白天里,我該做點什么?答案是保護光。三個時空,三個故事,被一個游戲引擎串聯起來。
技術上,整個游戲跑在一個requestAnimationFrame循環里,三個系統同時工作。Canvas渲染器逐幀繪制所有視覺效果。背景有三層視差滾動,速度各不相同。星空是程序生成的,Alan區域的網格線會滾動,Sol區域漂浮著星云球體。每個區域有自己的天空漸變、粒子調色板和地面顏色。擊中幀時,畫布上下文會觸發屏幕震動。
游戲引擎是一套JavaScript對象模型,處理8方向移動、子彈物理和敵人AI行為模式。玩家可以用WASD、方向鍵、鼠標或觸屏操作。敵人移動模式有三種:網格前進、鋸齒移動和蜂群螺旋。系統還管著碰撞檢測、道具拾取、多波次重生、Boss戰、連擊倍率和炸彈系統。
聲音部分最特別:完全沒有音頻文件。Web Audio API在運行時程序化生成每一個聲音,用的是振蕩器、增益包絡和帶通濾波噪聲緩沖。每個區域有專屬的環境低音,由不同基頻的正弦和三角振蕩器疊加而成,再加一個循環旋律層,用的是該區域的五聲音階。游戲里有單發射擊、雙發射擊、五槍齊射、敵人命中滴答聲、敵人爆炸、Boss巨型爆炸(帶分層噪聲)、護盾格擋偏轉、道具拾取、額外生命號角、升級音階、炸彈引爆、連擊鐘聲和寬限期倒計時——所有這些聲音區別分明,全部實時生成。
這個項目最終要講的,可能不是技術棧有多輕量,也不是一個HTML文件能塞進多少東西。而是游戲的關卡設計本身就在做一種敘事:用射擊玩法去承載歷史時刻,用夏至這個天文事件把自由、智慧、覺醒三個主題釘在同一條時間線上。1865年的鎖鏈,1941年的密碼,當下的AI覺醒——一個街機太空射擊游戲,把這三件事裝進了同一個requestAnimationFrame循環。
特別聲明:以上內容(如有圖片或視頻亦包括在內)為自媒體平臺“網易號”用戶上傳并發布,本平臺僅提供信息存儲服務。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.