最近教學講到了javascript,所以我就想說與其每個指令一個一個說明,倒不如直接拿個實例來講解比較完整,也比較好了解實際的應用會是如何,但是大多的實例其實也都只使用到一小塊的功能,所以最後我決定找個小遊戲來做練習,首先找上的是翻牌記憶小遊戲,透過這個小遊戲,希望讓學生一次了解到使用原生的javascript,如何去做到對DOM元件的控制.
這樣一個範例講解下來,也花了一天的時間,過程中也讓自己對js有更多的熟悉,不然前陣子都是使用jQuery,己經快把原生的程式都忘光了。
在這個範例中,我希望學生學到的內容包括了:
- 啟動遊戲前的遊戲畫面製作及半透明遮蓋效果
- 進入遊戲前對牌面做亂數出牌的算法及迴圈的使用
- 對牌面的動畫操作及變形效果的使用
- click事件綁定的做法
- 抓取事件元素的內容並進行判斷
- 全域/區域變數的差別及陣列的應用
- setinterval及時間函式的使用
- 結果判定及後續的動畫配合(翻回去或是消失)
- 遊戲結束後的成果說明
- 重置遊戲時,如何初始化相關的變數/陣列/牌面等等
課程己經過了一半,目前才剛講完所有網頁設計相關的技術的基礎(PHP/MySQL/Javascrip/Html/CSS),接下來的時間主要都是整合實例的演練,希望學生可以吸收得了
留言