【從零開始攻略前端!00】轉生為lv1前端史萊姆聊視覺小說作品官網

更新 發佈閱讀 8 分鐘
應該是第一個說:「因為想做『視覺小說』官網風格的網站,所以開始學前端」的中文開發者。

在████,每一個人都必須參與「十二年戰爭」。

由於不可抗力,他們懂事以後就被強制加入騎士團,培養為騎士候選人。

十二年後,他們就會被送去魔界,以後再也不能回家。為了得到更豐富的資源在魔界活下去,騎士候選人之間必須互相競爭,在每一季的考試中取得好成績,在適者生存的巨大壓力中努力活下去。因此這個階段被稱為「十二年戰爭」。

每一個參與「十二年戰爭」的人,都相信贏家只會是那些在訓練場上無比認真、廢寢忘食地學習的騎士候選人;所有騎士候選者都認為只有這樣的人才能在魔界活下去。

然而我一直認為,魔界比起騎士團的規則更寬容,至少它容許我當個小史萊姆。


很快十二年過去,競爭力沒多少的我,沒拿到多少資源就進了魔界。

在魔界不工作沒有飯吃,領著微薄的薪水,幹著三、四個人的活。

很快我的身體和精神就熬不住。於是我決定離職。

離職以後,我必須尋找能繼續生存的方法。我的技術棧太廣泛了,上一份工作讓我接觸到了從商業開發到市場營銷、全端開發、網點運營、社交媒體,最後還摻了人事管理。加上本來就屬於興趣的寫作和自動化工作流,基本上就是承包一整家公司的活。當然,這種什麼都會卻什麼都不精通的情況,為我在魔王城尋找下一個東家而言是一個極大的阻礙。

尋找工作十個月不果。一天下午四點了,因為吃不起午飯,正打算去吃下午茶的時候,我因為血糖過低在餐廳門口倒下。

就在快要失去意識的時候,腦海中忽然浮現一句話。

「轉生為史萊姆吧。」

「成交。」我爽快的回應了那個聲音。

「嗯...轉生不同種族的話需要重置經驗值,現在擁有的技能也不能保留喔」

聲音從我後面傳來,但是有猛烈的強光罩住了那個身影,它身上的白衣把這束光更集中在它的身上,形成一個由強光組成的人影,如果我回頭去看,恐怕會被直接灼傷得化成灰燼吧。

「行吧,只要不是人類就好。」我閉上眼等待奇蹟的到來。

「你這個人!我是來自████,隸屬於██國的幸福向上管理局,二等兵亞維拉,本來是想來鼓勵你,再熬一會就可以找到新工作,再過不久你會組建家庭生兒育女,兒子是我們的陸軍上將、女兒會是世界議會的眾議院院長...他們的成就全在你手上啊!」

「什麼東西?」

「幸福向上管理局,負責觀測過去因為懷才不遇而自憐自艾的人,把他們的人生改造,變成可以報效國家和社會的棟樑。」亞維拉洋洋得意地說著。

「人生改造,那你可以把我變成史萊姆,對吧?我願意放棄所有技能,給我有自給自足的能力就好。我不會成為你口中的棟樑,但也保證不去傷害人。」

「你...算了,反正我這個月的業績跑完了,你愛怎麼樣就怎麼樣。睜開眼睛吧,之後你會看到只屬於魔物的技能面板,現在應該是沒有任何東西的。我無法刪除記憶,你就過你的爛泥人生去吧。」

我跟著亞維拉的指示睜開眼睛,街上的人、車、房子,全都變成了擋在我面前的城牆。

我從軟乎乎的身體中拿出居民平板,那是在魔界證明自己身份的物品,每個人和魔物都必須隨時攜帶。以前我從來沒有在意這個東西,偶爾因為違規停車需要交給執法人員紀錄,我也不曾看過自己的居民證。

我從以前暗自調查關於魔界內部的經歷中得知了居民證還有一個隱藏用法,那個幸福向上管理局所擁有的資料,可以在居民證的面板調用顯示。亞維拉大概也是按照管理局的內部紀錄來尋找目標人物的吧。如果亞維拉所說的是真話,那麼我以後還會變回人,變回人就要工作來維持生活。命運真是糟糕透了。好在史萊姆生存的條件非常低,只要有水分和一點熱量就足夠了,一時半刻我是不用煩惱生存問題了。

我長嘆一口氣,打開居民證面板,發現頁面上只有四行黑色的文字。

---

名字:███████

種族:史萊姆 (SLIME)

經驗值:0 / 等級:1

技能:按此查看

---

沒有顏色、沒有粗體、沒有大小寫!

我放下平板,伸出觸手點在了「按此查看」的文字上。沒有反應。

天啊這是什麼UX (User Experience, 用戶體驗) 災難!

我決定先給這個面板做點修飾,要我一輩子看著這個黑白色的面板,我被太陽蒸發掉算了。

更重要的是,我需要的關鍵信息,都因為這個愚蠢的前端給隱藏掉了。

我得想辦法把我需要的資料調出來。


嗯,用文字推進劇情,如果我還會畫圖的話,那麽就可以做成視覺小說了。

不過就算是人的時候,美術也不是我擅長的領域,更何況現在是史萊姆,筆都拿不起來就不獻醜了。

言歸正傳,我做這個欄目的原因有兩個:

第一個原因是在疫情後,視覺小說 (Visual Novel, VN)可以說是遊戲界最慘淡的業界。遊戲銷售量大幅下降,一些紳士們耳熟能詳的開發公司已經沒有辦法用愛發電。VN本來長年深受盜版和劣質免洗作品影響,對於被VN的深奧世界觀、冗長的文本勸退,沒有接觸過被改編成動漫的作品的人來說,視覺小說就是便宜、草率、讓人尷尬的約會模擬遊戲的代名詞。但是對於從小就接觸VN的人來說,VN就是一種回憶,在屬於我們的年代,是一本教會我們「愛情」這個概念的教科書。

在AI年代的前端也遭遇了類似的情況。AI熱潮在2023年開始,每次語言大模型有新的版本出現,科技圈的Youtuber就會拍攝自己如何在不寫一行代碼的情況下完成一個網站。久而久之,每次AI的網站成品更進階,從純靜態頁面到動態再到Saas都可以在AI輔助的代碼編輯器上完成,就會出現一種論調「前端工程師要失業了」。

但是每當我打開日本的設計參考網站,如果說AI真的要取代前端工程師,那麼為什麼AI做不出他們的網站?

所以我希望以前端框架貫通兩者,重新讓人認識到兩者的價值和意義。

第二個原因比較單純,就是上個月偶然看見的貼文說:中文內容正在互聯網上逐步消失。箇中原因有很多,包括短影音平台的紅利、演算法鼓勵創作者轉向短影音,文字的價值也隨著AI出現變得更難定義。以往依賴展示廣告維持網站營運的部落格或其他資料庫,也隨著人們開始轉向詢問AI多於自己尋找資料而變得難以維持。更甚者,即使有獨特的公開內容,創作者也會擔心爬蟲機器人讀取到這些資料後,被AI一字不漏地剽襲自己的心血。因此很多創作者為了保持出品質量,都會選擇採用付費會員的方式經營。

身為創作者,我樂見消費者認同我的作品價值,願意掏錢支持自己,這是對創作者最大的鼓勵。可是我不樂見中文內容在互聯網上消失,互聯網是一個能容納各種獨特的聲音和意見的空間,允許所有人在上面互相交流。我學習前端的經歷並不順利,三種基本語法中,唯一學不會Javascript。我知道有很多熱心的工程師願意分享中文的教程,他們大多都是深入淺出,甚至很用心的錄製了幾個小時的教程。但是我沒有辦法把練習中 var a = 1的內容跟實際開發聯繫上,我需要更活生生的例子。

於是就有了這個欄目。

本文同時於Matters上發佈,自由分享,禁止商業及AI餵食。

神奇數字:待更新

留言
avatar-img
前端史萊姆的精神時光屋
0會員
1內容數
沒有公開的現實案例和需求都會在這邊更新喔 歡迎交流
你可能也想看
Thumbnail
創作不只是個人戰,在 vocus ,也可以是一場集體冒險、組隊升級。最具代表性的創作者社群「vocus 野格團」,現在有了更強大的新夥伴加入!除了大家熟悉的「官方主題沙龍」,這次我們徵召了 8 位領域各異的「個人主題專家」,將再度嘗試創作的各種可能,和格友們激發出更多未知的火花。
Thumbnail
創作不只是個人戰,在 vocus ,也可以是一場集體冒險、組隊升級。最具代表性的創作者社群「vocus 野格團」,現在有了更強大的新夥伴加入!除了大家熟悉的「官方主題沙龍」,這次我們徵召了 8 位領域各異的「個人主題專家」,將再度嘗試創作的各種可能,和格友們激發出更多未知的火花。
Thumbnail
看完上篇 4 位新成員的靈魂拷問,是不是意猶未盡?別急,野格團新血的驚喜正接著登場!今天下篇接力的另外 4 位「個人主題專家」,戰力同樣驚人──領域從旅行美食、運動、商業投資到自我成長;這些人如何維持長跑般的創作動力?在爆紅的文章背後,又藏著哪些不為人知的洞察?5 大靈魂拷問繼續出擊
Thumbnail
看完上篇 4 位新成員的靈魂拷問,是不是意猶未盡?別急,野格團新血的驚喜正接著登場!今天下篇接力的另外 4 位「個人主題專家」,戰力同樣驚人──領域從旅行美食、運動、商業投資到自我成長;這些人如何維持長跑般的創作動力?在爆紅的文章背後,又藏著哪些不為人知的洞察?5 大靈魂拷問繼續出擊
Thumbnail
學習如何在 15 分鐘內設定免費的 Cloudflare R2 圖片託管。10GB 儲存、無限流量、全球 CDN。不需要寫程式,完整步驟教學。
Thumbnail
學習如何在 15 分鐘內設定免費的 Cloudflare R2 圖片託管。10GB 儲存、無限流量、全球 CDN。不需要寫程式,完整步驟教學。
Thumbnail
想快速建立你的線上課程事業?本文提供一個月內完成線上課程錄製、網站架設到自動化銷售的完整指南,包含工具推薦、影片錄製技巧及克服完美主義的方法。
Thumbnail
想快速建立你的線上課程事業?本文提供一個月內完成線上課程錄製、網站架設到自動化銷售的完整指南,包含工具推薦、影片錄製技巧及克服完美主義的方法。
Thumbnail
這篇文章分享了作者使用GPT-5開發塔防遊戲的經驗,從一句話生成遊戲到逐步優化畫面、加入裝備系統,以及過程中遇到的錯誤和解決方法。作者強調AI開發的迭代過程和關鍵字的重要性,並分享了應對AI理解偏差和重複錯誤的技巧。文章也提及了AI在遊戲開發中的優缺點,以及如何更好地利用AI進行遊戲原型設計。
Thumbnail
這篇文章分享了作者使用GPT-5開發塔防遊戲的經驗,從一句話生成遊戲到逐步優化畫面、加入裝備系統,以及過程中遇到的錯誤和解決方法。作者強調AI開發的迭代過程和關鍵字的重要性,並分享了應對AI理解偏差和重複錯誤的技巧。文章也提及了AI在遊戲開發中的優缺點,以及如何更好地利用AI進行遊戲原型設計。
Thumbnail
打給賀!挖系Serpens Spirit Studio 正在開發遊戲ㄉ新手——蛇靈(S0)~~ 蛇靈的最終目標是想製作出自己的遊戲, 所以來和大家分享日常生活ㄉ觀察, 未來製作遊戲可能會用上ㄉ觀察&研究小筆記! 重拾自學練習像素畫的過程, 觀看了大量YT影片, 找到一個當你想統一風
Thumbnail
打給賀!挖系Serpens Spirit Studio 正在開發遊戲ㄉ新手——蛇靈(S0)~~ 蛇靈的最終目標是想製作出自己的遊戲, 所以來和大家分享日常生活ㄉ觀察, 未來製作遊戲可能會用上ㄉ觀察&研究小筆記! 重拾自學練習像素畫的過程, 觀看了大量YT影片, 找到一個當你想統一風
Thumbnail
最近AI圈吹起一股迷幻風潮:「我只輸入一句話,Perplexity就幫我生成了一整個網站!」 Facebook動態充滿了這類炫耀型貼文,圖文並茂,UI華麗、介面精緻,甚至還有圖表和提醒設定,搞得好像用AI生成網站根本跟煮泡麵一樣簡單。你看著這些截圖,開始懷疑是不是自己活在錯誤的時空,怎麼別人一鍵做
Thumbnail
最近AI圈吹起一股迷幻風潮:「我只輸入一句話,Perplexity就幫我生成了一整個網站!」 Facebook動態充滿了這類炫耀型貼文,圖文並茂,UI華麗、介面精緻,甚至還有圖表和提醒設定,搞得好像用AI生成網站根本跟煮泡麵一樣簡單。你看著這些截圖,開始懷疑是不是自己活在錯誤的時空,怎麼別人一鍵做
Thumbnail
EP11精華重點:   1.盤點利害關係人,畫出同心圓圖,中心是公司,往外層層是股東、員工、客戶、供應商、銀行、輔導單位等。 2.穩固既有利害關係人關係,考慮每個決策對他們的影響,做好溝通補償。 3.擴展人脈關係鏈,參加活動、講座、使用名片管理軟體、建立資料庫。 4.維繫人脈,發送電子報、
Thumbnail
EP11精華重點:   1.盤點利害關係人,畫出同心圓圖,中心是公司,往外層層是股東、員工、客戶、供應商、銀行、輔導單位等。 2.穩固既有利害關係人關係,考慮每個決策對他們的影響,做好溝通補償。 3.擴展人脈關係鏈,參加活動、講座、使用名片管理軟體、建立資料庫。 4.維繫人脈,發送電子報、
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News