/memory-game

Using Vue.js and Sass to create one of the most classic games -- Memory Game 🎮

Primary LanguageJavaScript

記憶遊戲

✨ 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

📮 License

MIT