Javascript Cookie Clicker下載 - Javascript Cookie Clicker原始碼下載

Javascript Cookie Clicker

JAVA源碼

1.0.0

下載

Javascript - Cookie Clicker

作業來源：https://github.com/becodeorg/BXL-Swartz-5.34/blob/main/1.The-Field/12.Javascript/cookieClicker.md

連結到即時版本：https://teo-cozma.github.io/Javascript/

團隊成員

Brigita Sabutyte（Javascript 和 HTML）
大衛‧蒂雷爾 (Javascript)
Teodora Cozma（HTML 和 CSS）

語言

超文本標記語言
CSS
JavaScript

工具

Visual Studio Code（文字編輯器）
Discord、Google Meet、Github、Replit（通訊）
Adobe XD（原型設計）
W3C 標記驗證服務（HTML 檢查）
W3C CSS 驗證服務（CSS 檢查）
Google Lighthouse（效能檢查）

影像

餅乾點擊器

資源

什麼是 Cookie Clicker？

http://orteil.dashnet.org/cookieclicker/
https://en.wikipedia.org/wiki/Cookie_Clicker
https://cookie-clicker2.com/
https://article-clicker.web.cern.ch/
https://www.youtube.com/watch?v=2Dx76lD8Scc&t=69s

我們專案的教學：

https://www.flaticon.com/free-icons/cookie
https://www.youtube.com/watch?v=uUgOBe_wb6E
https://www.youtube.com/watch?v=j_nI6G3ZDiE
https://codesource.io/how-to-disable-button-in-javascript/
https://stackoverflow.com/questions/57477529/disable-a-button-if-empty-input
https://www.youtube.com/watch?v=PSEhNb69XpI
https://www.youtube.com/watch?v=vU2akkCSV-g
https://www.youtube.com/watch?v=PSEhNb69XpI
https://www.youtube.com/watch?v=KgYkgBno5Gs
https://stackoverflow.com/questions/8583524/how-to-set-time-limit

驗證服務：

https://validator.w3.org/#validate_by_input
http://jigsaw.w3.org/css-validator/

專案日誌

第一天 (25/10)

說明書審查

什麼：Cookie Clicker。
為什麼：鞏固專案（主要是Javascript技能）。
時間：從今天開始，為期 4 天的團隊工作，直到 28/10。
方式：三人一組，協作並使用各自的程式語言。
主演：Teodora Cozma、Brigita Sabutyte、David Tirel。
- 哪些角色？有前端、後端和專案管理。所有角色都可以互換，而且程式碼無論如何都是共享的，但總的來說，一個人可以更專注於某一特定角色。
  - 後端（Javascript）：大衛。
  - 後端（Javascript）+前端（HTML 結構）：Brigita。
  - 前端（CSS + 也許是 Sass）+ 專案經理：Teodora。

腦力激盪

3 個部分：

Cookie 部分：Cookie 計數器的標頭 1。 H1為點擊量。
- 互動式 cookie + 其標題 + cookie 計數器 = 第 1 部分。
- “在 HTML 中，放置一個單擊按鈕，該按鈕將增加計數器和初始化為 0 的標籤以顯示所述計數器。”
分數部分：
- 分數部分：分數計數。
- 1 cookie ：cookie 是它自己的按鈕。

（餅乾+分數=左半部）

商店部分：
- 成就和升級？
- 商店部分 = 按鈕升級答題器 + 積分計數器 = 第二部分：
  - 做一個乘數（雙倍或三倍點）-->這一步驟進行審查
  - 乘數價格（已購買）
  - 分數更新
  - 乘數內的計數器
  - 成本增加（更高乘數的成本）
    - 還有專用顯示器（下面有一個按鈕？）
  - 步驟12：必要的元素，某些按鈕被停用。例如：低於 20 點，玩家無法存取某些功能。

（右半部）

範例（參考）：http://orteil.dashnet.org/cookieclicker/。

今天的任務

今天早上（10:30 - 12:30）

專案研究（作業說明）。
- 查看與目前強制步驟相對應的內容（暫時保留獎金）。
深入查看原始 cookie Clicker 的程式碼。

(https://www.youtube.com/watch?v=2Dx76lD8Scc&t=69s)遊戲描述（及其存在品質！）

1 次點擊 = 1 個 cookie。
15 次點擊 = 15 個 cookie = 1 個遊標（已購買）。
10 個遊標 = 1 個 cookie/秒 (CpS)。
100 塊餅乾 = 奶奶生產並銷售你的餅乾。
Cookie 是一種貨幣，可以讓你購買農場、礦場、工廠等。這擴展成最終的cookieverse。
超越存在=提升並重新開始。
金餅乾隨機生成。
為祖母擔心什麼：潛在的叛亂和啟示錄。用經濟收益拯救每個人，或利用他們來創造更多財富。
控制台中的小「程式碼駭客」：Game.Earn(x)。

（http://orteil.dashnet.org/cookieclicker/）

資訊日誌/版本歷史

安全保存
遊標顯示樣式
匯入/匯出功能：從onld版本擷取已儲存的遊戲（一週後停用）
賣出按鈕
隨機金色餅乾（如何確定其頻率）
點選統計
點擊提升
奶奶的不滿與啟示－>產生了消耗餅乾的生物
用於升級和成就的統計菜單部分
- 奶味成就-_-
選項選單：
- 一般：保存+自動儲存、匯出/匯入、擦除儲存；
- 設定：音量、精美的圖形、聲音......這些都是獎勵。

代碼背後（與檢查員一起調查）

HTML 結構（我們可能為了外觀而保留的內容）：
- Head ：所有樣式和腳本的連結（標題閃爍...）
- 身體 :
  - 沒有橫幅包裝
  - 上欄：版權和社交媒體連結（類似頁腳，但位於頁面頂部）。今年，我們肯定需要在我們的名字中包含版權內容，並連結到我們的登陸頁面（？）。
  - Div id:"game" ：遊戲的實際部分。
    - 這些部分位於標籤「section」下，並根據其位置（左、右、中）+分隔符號擁有自己的名稱。
    - 主播：他們是屬於自己的階級類型嗎？查一下。
    - Cookie 錨點 = 可點擊的 cookie ！
      - 畫布標籤
    - 我們是否加上一個虛構的後台名稱？
    - 餅乾計數器：x 餅乾；每秒：s。
  - 我們是否建立一個包含選項、統計資料、資訊...的選單？
    - 另外，每個選單項目的小節？
  - （技術問題：頁面不斷刷新以更新數據，很難在閃爍之前停留在某一部分上查看程式碼）
  - 「b」標籤：它有什麼用？
  - 有些div被隱藏了？
  - 商店部分：
    - 買入/賣出：這些應該連結到 Javascript 事件，因為它們的值會隨著每次點擊而改變。
    - 產品（地雷、祖母）：當遊戲第一次開始時，這些應該被隱藏/遮蔽。 （另一個有趣的參考：https://article-clicker.web.cern.ch/）

今天下午（13:30 - 17:00）

收集想法、研究並彙集資源。
未來可能面臨哪些技術困難/挑戰？
- 乘法器如何運作？
- 顯示部分及其按鈕的佈局（儘管這並不是特別令人擔心）。
- 了解如何應用 Javascript。
  - 收集有關如何為每個按鈕編寫程式碼的資源和資訊。

我們的團隊合作方法是什麼？

我們每個人是如何運作的？
- 獨自的
- 研究重點
- 專注於編碼
- 我們是否進行“即時編碼會議”，即我們共享螢幕並鍵入代碼，並且每個人都當場給出自己的輸入？
我們怎麼才能讓這個最後期限對我們有利呢？
我們如何拆分編碼工作？我們如何確定以下任務並委派它們？如果我們每個人都按照自己的時間工作，我們如何達成一致並鞏固最終的程式碼？
決定如何溝通和分享資訊：
- 在 Discord 上，房間 4（聊天 + 通話）。
- ……（其他協作工具）。
- 當然是 Github，儲存庫將被共用。
決定下一步：
- 今天完成研究嗎？
- 開始規劃（+ 編寫？）HTML 結構？ JavaScript 結構？
- 我們是否嚴格遵循每一步？
  - 已經決定，至少將包括強制性步驟（具有最重要功能的所有輸入和按鈕），並且獎金暫時已保留（但如果可能的話可能會包括在內。）
  - 這些步驟是一個接一個地執行，還是同時執行？
    - 這是一個需要提出的重要問題，因為角色是共享的：2 個人在後端協作，2 個人在前端協作。
    - 因此，在Javascript中，這些步驟會被分發嗎？
- 在實際建立專案時，我們從原始專案中藉鑑了多少，又將多少變成了我們自己的？
日常工作方法：
- 我們每個人一開始都是自己工作，在一天結束時，透過 Discord 分享我們的程式碼，然後在 Replit 上「提交」所有內容。

提前思考 - 評估部分

定期評估進度並確保包含必備功能。
定期更新自述文件。
在最後（在最後一天，甚至在編碼過程中），使用驗證和效能工具（請參閱 Lighthouse 和 W3C 驗證工具）；也許在星期四。

今天下午的步數（14:30 - 16:30）

更多研究並規劃明天的任務：
- Brigita：HTML 研究和寫作。
- David：Javascript 研究。
- Teodora：視覺研究和原型設計。

第二天 (26/10)

上午 9:00 會議：

第 5 步完成。
共享代碼。
技術問題：將 HTML 與 Javascript 連接起來，讓功能正常運作。
此外，獎金是給玩家的，因此步驟 11 及後續步驟是強制性的。
Autoclicker 是由 David 開發的。
乘數由 Brigita 完成；也待定。
解決腳本中的問題。

今天早上（9:30 - 12:30）

繼續指定的步驟。調查任何問題。 13.30 召開會議，討論進度並解決任何問題。

今天下午（13:30 - 16:30） Teo：使網站具有響應能力。注意：乘數按鈕也應該包括成本！ + 找到根據 cookie 數量停用某些按鈕的腳本。大衛：分享職能；載入功能已解決。 Brigita：共享程式碼和函數；語法問題已解決。

Scrum 會議（16:30 - 17:00）

做了什麼？
- 乘數步數
出現了哪些問題並解決了？
- 乘數的問題。
下一步是什麼？
問題：
- 弄清楚如何使元素居中！！（不得不再次刷新我的記憶）。
- 如何使用 Javascript 停用按鈕：編碼困難。
- 儲存和載入不適用於乘法器。
- 由於將問題編譯到主 CSS 中，無法繼續使用 Sass。回到使用普通 CSS 進行樣式設計。
明天要解決哪些問題：
- 儲存和載入按鈕；
- 讓乘數再增加 2；
- 根據條件啟用/停用按鈕（步驟 12）；
- 獎金：第11步。

第三天 (27/10)

早會（9:00）

昨天做了什麼：
- 響應（待定）
- 保存/載入調查（待定）
- 乘數（已解決）
今天需要做什麼：
- 致力於禁用按鈕（步驟 12）。
- 檢查步驟 8。
- 重做 JavaScript。
  - 解決乘法器的技術問題（載入和遞增）；待辦的。
- 比較 Javascript 程式碼（Brigita、David）。
- 比較並合併 HTML 檔案並套用 CSS 樣式。
- 外觀方面：我們是否需要 cookie 和遊標以及其他按鈕的按鈕標籤？
  - 答：是的。只是不一定包含“a”標籤。
- 對於響應式：使設定適合小移動螢幕。

晚會（16:45 - 17:00）

我們成功做到了：
- 啟用/停用按鈕
- 讓乘數起作用（僅適用於 AutoClicker）
- 開始研究助推器（獎勵）
  - 倒數有效！
- 響應式CSS
明天需要做什麼：
- 完成所有 Javascript 步驟：
  - 讓助推器發揮作用
  - 新增重置功能
- 使用正確的腳本更新「主」HTML 程式碼，並設定其樣式。
- 部署頁面並使用 LightHouse 檢查可存取性、可用性、SEO 等。

第四天 (28/10)

早會（9:00 - 9:30）

今天需要做什麼：

修復腳本中的技術問題。
- 讓助推器發揮作用。
- 使點擊獨立工作。
- 防止腳本自行運行。
- 在沒有 AutoClick 的情況下實現乘數功能。
使用正確的標籤更新 HTML 和 CSS。
- 新增頁尾！

下午工作（13:30 - 16:00）

W3C HTML 驗證工具（問題）：
- 「標籤」元素不能有多個後代。
- 「p」元素不能是標籤的後代。
- 具有「for」屬性的「label」的任何「button」元素後代都必須具有與該屬性相符的 ID 值。
  - 解決方案：所有標籤都可以插入按鈕內，但也必須插入段落內。
W3C CSS 驗證工具：沒有問題。
部署並運行站點，並使用 LightHouse 進行效能測試。結果=
- 性能=86；
- 可達性=95；
- 最佳實踐=100；
- 搜尋引擎優化 = 92 ；
修復測試中出現的問題。
- 「消除渲染阻塞資源」（匯入字體樣式時出現問題）。
- “圖像元素沒有明確的寬度和高度。”