如何創建自己的文字遊戲
像 Wordle 這樣的網頁遊戲是如何運作的?創建自己的遊戲需要了解什麼?
並非所有遊戲都需要龐大的開發團隊和多年的開發才能成為熱門遊戲。例如,Wordle 是 Josh Wardle 為其合作夥伴 Palak Shah 在短時間內創建的,儘管它簡單且功能很少,但其令人難以置信的受歡迎程度為它贏得了《紐約時報》的贖金。
像 Wordle 這樣的網頁遊戲是如何運作的
如果您有一個簡單但令人上癮的遊戲的想法,可以吸引全世界的注意力並讓您賺大錢,那麼您完全可以自己編寫一個像 Wordle 這樣的 Web 應用程序。
與任何網站一樣,Wordle 網站框架是 HTML,一種超文本標記語言。所有網站都依賴此代碼來告訴瀏覽器在頁面加載時將元素放置在何處。您當前正在閱讀的網站是 HTML 編碼的,不僅提供實際內容,還提供顯示該內容的說明(從菜單位置到字體大小)。
除了 HTML 之外,還有 CSS(層疊樣式表):這是對 HTML 的補充,以方便元素的佈局,無論它們是圖像的屬性還是文本塊。使用CSS,如果您的網站上有多個頁面,您可以一次設置它們的視覺屬性,而不是逐頁設置。
如果您希望能夠創建網頁,您需要學習 HTML 和 CSS,儘管許多服務允許您無需編寫任何代碼即可完成此操作。這些服務提供了在非常高級的界面中拖放元素並控制所有 HTML 和 CSS 的能力。
對於像 Wordle 這樣的完全交互的網站,您還需要 JavaScript 將靜態 HTML 和 CSS 頁面轉換為更加動態的頁面,無論是搜索框還是工具欄。JavaScript 可以操作 2D 或 3D 視頻、存儲用戶輸入的信息、從數據庫加載數據、執行計算、根據特定用戶操作執行預定義代碼等。
正如 Josh Wardle 向 TechCrunch 解釋的那樣,Wordle 是用 JavaScript 編寫的,該代碼在頁面加載時加載,允許遊戲在初始加載完成後離線玩。現代瀏覽器可以理解並執行 JavaScript,在我們的例子中,它從數據庫加載一個單詞,識別用戶輸入,並提供每個字母的信息。
喬什·沃德爾本人承認,這款遊戲的代碼並不是特別複雜,這解釋了為什麼在《紐約時報》購買它之前就可以下載完整的 Wordle,其中的所有單詞都在其數據庫中。還可以通過簡單地檢查網站的源代碼來找到解決方案。
創建自己的遊戲需要了解什麼?
但是您如何自己創建像 Wordle 這樣的遊戲呢?編程需要學習,但您不需要了解有關 HTML、CSS 和 JavaScript 的所有知識來創建 Wordle 級別的內容。正如 Codecademy 上所解釋的,所使用的編程技術之一是 for 循環,它檢查輸入的每個字母並以適當的顏色顯示它。
Codecademy是您可以免費學習 HTML、CSS、JavaScript 和許多其他 Web 開發語言的網站之一。這些練習結構良好,您始終可以通過在瀏覽器中正確進行練習來學習。您將看到如何做,並且能夠直接看到後果。一些高級功能和教程需要付費訂閱,但很多內容已經可以免費學習。
Treehouse比 Codecademy 更進一步,您需要每月支付 25 美元才能使用它(可以免費試用)。它是學習 HTML、CSS、JavaScript 等內容的更專業、更高效的資源,但遠遠超出了您玩 Wordle 等遊戲所需的資源。考慮一下是否想走得更遠。
樹屋的對面是Dash。該網站僅涵蓋 HTML、CSS 和 JavaScript 的基礎知識,但它完全免費,尤其適合初學者。一切都在您的瀏覽器中進行管理,就像 Codecademy 一樣,您通過實踐來學習,以充分利用這些語言所提供的功能。
這個列表遠非詳盡無遺,特別是因為這些資源只是英語資源,您可以輕鬆找到法語資源,但它們是開始學習 HTML、CSS 和 JavaScript 的良好基礎。由你來玩……和編碼!
發佈留言