最近教學講到了javascript,所以我就想說與其每個指令一個一個說明,倒不如直接拿個實例來講解比較完整,也比較好了解實際的應用會是如何,但是大多的實例其實也都只使用到一小塊的功能,所以最後我決定找個小遊戲來做練習,首先找上的是翻牌記憶小遊戲,透過這個小遊戲,希望讓學生一次了解到使用原生的javascript,如何去做到對DOM元件的控制.

翻牌記憶小遊戲

這樣一個範例講解下來,也花了一天的時間,過程中也讓自己對js有更多的熟悉,不然前陣子都是使用jQuery,己經快把原生的程式都忘光了。

在這個範例中,我希望學生學到的內容包括了:

  • 啟動遊戲前的遊戲畫面製作及半透明遮蓋效果
  • 進入遊戲前對牌面做亂數出牌的算法及迴圈的使用
  • 對牌面的動畫操作及變形效果的使用
  • click事件綁定的做法
  • 抓取事件元素的內容並進行判斷
  • 全域/區域變數的差別及陣列的應用
  • setinterval及時間函式的使用
  • 結果判定及後續的動畫配合(翻回去或是消失)
  • 遊戲結束後的成果說明
  • 重置遊戲時,如何初始化相關的變數/陣列/牌面等等

課程己經過了一半,目前才剛講完所有網頁設計相關的技術的基礎(PHP/MySQL/Javascrip/Html/CSS),接下來的時間主要都是整合實例的演練,希望學生可以吸收得了

最後修改日期: 2018-12-13

留言

撰寫回覆或留言

發佈留言必須填寫的電子郵件地址不會公開。