與程式有關的遊戲三選 (1) – A=B
# 前端快要進入第十天了!中場休息一下,來分享幾個與寫程式或跟計算機有關的遊戲。今天要介紹的遊戲叫做 A=B,在 Steam 上可以購買,Windows 與 Mac 都可以下載來玩。
A=B 是遊戲中的主角設計的一門程式語言,只有 A=B 這個語法。你要用這個殘破的語法去解各種謎題,隨著解題越來越多,語法也會越來越豐富。
我們先來看看 Steam 的評論吧。

遊戲內容
遊戲當中你會遇到各種謎題,都是和字串處理有關的,其中 A=B 的語法可以將字串 A 取代為 B。假如程式為:aaa=bbb 且字串為 aaabbb 時,結果為 bbbbbb(將 aaa 取代為 bbb)。遊戲中關於語法的說明也相當簡介,直接丟一個 PDF 的連結給你,隨著劇情推進會有越來越多語法。
在這邊放幾個遊戲中的題目:
1. 排序 abc
給定一個字串,字串只會包含 abc 三個字母,長度最多為 7。在只能用 a=b 的語法下要怎麼寫呢?
這題答案很簡單,把三個變化都列舉出來就可以了:
ba=ab
ca=ac
cb=bc
假如輸入為:bcba
- 匹配
ba,將ba取代為ab,字串為bcab - 匹配
ca,將ca取代為ac,字串為bacb - 匹配
ba,將ba取代為ab,字串為abcb - 匹配
cb,將cb取代為bc,字串為abbc
以程式語言的角度來看,原本直接寫個 for 迴圈或是直接呼叫函數就能解決的問題,現在必須要發揮一點想像力。
2. 回文
這個章節多了幾個語法可以使用:
y=(return)false
當匹配到 y 時回傳 false
(start)a=(end)b
當匹配到開頭的字串 a 時,取代最後一個字母為 b。這個字首會改變字尾的特性看起來很不直覺,不過這個遊戲的設計會讓你自然而然地去學會使用這個語法。
題目是大家耳熟能詳的判斷字串是否為回文,輸入一樣只會包含三個字母 abc。
axAy=
bxBy=
cxCy=
(start)a=(end)xAy
(start)b=(end)xBy
(start)c=(end)xCy
yx=(return)false
=(return)true
乍看之下很難懂,不過稍微看一下程式碼之後也可以理解核心概念是什麼。
首先,如果匹配到 a,b,c 開頭的字串,就將結尾轉成 xAy 的形式,這邊 xy 換成其他字串也可以,代表已經處理過了。假設輸入字串為 abba,那麼經過第一輪處理後,字串會變成:bbaxAy
這時候執行 axAy= 就可以將一組回文消除。理想情況下所有的回文都會被消除,如果有剩下的話則會變成 yx 這種情況,代表有字串沒有匹配到。
感想
玩這個遊戲雖然不需要會任何程式語言,但如果沒有基本的解題概念的話,要直接遊玩也是有難度的。對軟體工程師來說,玩這個遊戲有點像是在用一個語法很爛的語言解題。
然而,我覺得這是件好事。因為我們已經習慣了程式語言的概念,寫習慣了迴圈跟函數,偶爾用不同的角度去思考,反而會有更多樂趣。
以上兩個例子,用程式語言解題只要幾分鐘就可以解決了,但是用 A=B 的語法來寫卻需要思考一段時間,然後衍伸出完全不同的思維來達到目的。
相關文章
- CSS field-sizing — 用一行 CSS 讓表單元素自動調整大小textarea 自動調整高度,以前只能靠 JavaScript 監聽 scrollHeight。CSS field-sizing: content 一行就能取代,支援 textarea、input、select。本文整理舊做法的痛點與 field-sizing 的用法。
- 讓你的超連結底線更好看:text-underline-offset預設的情況下底線跟文字很接近,有些設計師不喜歡這種樣式,我自己也覺得沒有很好看。
- 為什麼網頁不應該追求 Pixel Perfect只有在 Pixel Perfect 很重要的時候才應該關注他,否則往往會讓你得到一個雙輸的局面。
- 用 CSS HSL 來寫顏色吧!(以及更好的方法)在網頁開發中,傳統的 HEX 和 RGB 顏色表示法雖然廣泛使用,但存在不易閱讀和直觀性不足的問題,且在廣域的色彩空間如 P3 下表現能力受限。HSL(色相、飽和度、亮度)提供了一種更直覺的顏色定義方式,讓開發者能更輕鬆地理解與調整顏色。HSL 通過色相、飽和度和亮度三個維度來描述顏色,使得顏色的調整更加人性化,特別是在設計系統中,HSL 能更好地呈現色盤的亮度變化。