記憶遊戲
✨ Demo
https://achinchen.github.io/memory-game/
📜 介紹介紹
用 Vue.js、Sass 來寫個經典小遊戲,記憶遊戲 🎮
四種不同顏色及形狀組合成遊戲的關卡設計,
當然難度會隨著關卡的推進不斷上升 😜
玩看看吧 😏
🔓 刻意練習
- 從零開始設定 webpack ,包括模組化基本設定、開發模式及生產模式。
當然還包含了在 package.json 增加相關的 script 設定。 - 實作 Sass 提供的模組,例如 @function。
嘗試組合像是包含 media query 的字級設定的工具包。 - 使用 Cdn 引入 Vue.js 實作。
💿 開發設定
# 安裝依賴
npm install
# 在 localhost:8081 跑範例
npm run dev
# 打包 dist 檔案
npm run build
Memory Game
📜 Description
Using Vue.js and Sass to create one of the most classic games -- Memory Game 🎮
There are 4 different shapes and colors which constitute the base of level setting.
Of course with the passage of hurdles, the difficulty will change. 😜
Enjoy 😏
🔓 Methods of deliberate practice
- From Zero to One, webpack configure setting includes base, development and production.
Sure thing, script in package.json was adjusted. - Exploring modules which Sass provide e.g. @function.
Trying to combine the toolbox like fonts with media query! - Using Vue.js from CDN
💿 Development Setup
# install dependencies
npm install
# server examples at localhost:8081
npm run dev
# build dist files
npm run build