{"id":21802589,"url":"https://github.com/rayc2045/block-memory-game","last_synced_at":"2026-05-18T11:37:22.891Z","repository":{"id":140269776,"uuid":"321570567","full_name":"rayc2045/block-memory-game","owner":"rayc2045","description":"How many levels can you accomplish?","archived":false,"fork":false,"pushed_at":"2021-07-28T15:21:08.000Z","size":2206,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-16T20:41:34.510Z","etag":null,"topics":["game","memory-game","object-oriented","object-oriented-programming","responsive","responsive-design","responsive-layout","responsive-web-design","rwd","rwd-grid","rwd-response"],"latest_commit_sha":null,"homepage":"https://rayc2045.github.io/block-memory-game/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rayc2045.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-12-15T06:11:21.000Z","updated_at":"2021-07-28T15:21:12.000Z","dependencies_parsed_at":null,"dependency_job_id":"9f538aa2-3546-44e0-a3e4-bf953f667d06","html_url":"https://github.com/rayc2045/block-memory-game","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rayc2045%2Fblock-memory-game","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rayc2045%2Fblock-memory-game/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rayc2045%2Fblock-memory-game/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rayc2045%2Fblock-memory-game/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rayc2045","download_url":"https://codeload.github.com/rayc2045/block-memory-game/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244752360,"owners_count":20504256,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["game","memory-game","object-oriented","object-oriented-programming","responsive","responsive-design","responsive-layout","responsive-web-design","rwd","rwd-grid","rwd-response"],"created_at":"2024-11-27T11:29:35.801Z","updated_at":"2026-05-18T11:37:15.147Z","avatar_url":"https://github.com/rayc2045.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Block Memory Game\n\n![Photo](https://cdn.dribbble.com/users/3800131/screenshots/10000193/media/5a5acc6684a86a5f46a9b4cd34f4df8e.gif)\n\n[\u003e Block Memory Game](https://rayc2045.github.io/block-memory-game/)\n\n### 簡介\n相較於先前編號的作品，這次的「方塊記憶遊戲」是功能架構最複雜的專案。當中用了模組化的方式管理許多 prototype functions，如點按方塊時的閃爍及播放鋼琴音效、產生新的隨機關卡、題目播放時的點按封鎖、點按輸入時的進度點控制、檢查輸入是否完全符合答案的方塊全閃爍和聲效，以及每關一次的疏忽按錯補救措施；這次的專案也算是對程式碼撰寫風格的考驗，不同於以往使用 jQuery $(el) 直接抓取 HTML 元素，這次使用執行速度更快的原生 JS 撰寫，同時將所有 DOM 元素放在函式建構子統一管理，以減少瀏覽器引擎的操作成本。最後為了增進在各尺寸設備上的遊玩體驗，做了 RWD 響應式設計，在過程中也順便解決了移動設備觸所控造成的 hover 效果殘留問題。\n\n### 開發紀錄\n- 使用預處理器 Pug、Sass 撰寫 HTML、CSS；使用原生方式撰寫 JavaScript\n- 使用大量 ES6 語法（如 `.map()` 轉變資料型態；`.forEach()` 迴圈操作；`class` 物件導向開發，並搭配箭頭函式修正 `this` 指引對象）\n- 將所有 DOM 元素以變數形式包括在函式建構式（Function Constructor）當中，減少瀏覽器操作的成本\n- 使用 CSS 動畫時間差，加上增減 class 的方式做出燈光閃爍效果和播放鋼琴聲\n- 為增加遊戲性，遊戲關卡由隨機字串組成，關卡絕不重複\n- 利用變數值及條件運算式（if...else）控制玩家點按時機、疏忽按錯補救次數（每關一次）\n- 使用模板字符串（Template Literal）和三元運算子（Ternary Operator），搭配 DOM 操作做出遊戲關卡進度點\n- 使用 CSS Media Query 做響應式設計，及解決移動設備觸控造成的 hover 問題\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frayc2045%2Fblock-memory-game","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frayc2045%2Fblock-memory-game","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frayc2045%2Fblock-memory-game/lists"}