Tag Archives: javascript教學

jQuery 射擊遊戲/復古雷電 遊戲 簡易教學

教學用jQuery撰寫簡單的射擊遊戲/復古雷電遊戲,因為是簡易版,供新手學習因此遊戲場景元素很多都會簡化不做,重點放在最主要的碰撞部份。

例如子彈碰到敵人、玩家飛機碰到敵人怎麼偵測的,以及如何使用jQuery撰寫。只要碰撞部份能學會,其他的較花俏的東西如”生命、金幣”哪些都好搞定,待未來教學進階版時撰寫,此次重點放在”碰撞偵測”部份。

在jquery部份都會有中文註解,供方便理解學習。

jquery-shooting-game-raiden-easy

作者遊戲範例:jQuery雷電

jQuery 記憶&配對卡牌遊戲 簡易版本 教學

教學用jQuery撰寫記憶&配對卡牌遊戲,此次教學式簡易版本,只會配對一組卡牌。要讓玩家在許多的卡牌內找到相對應的卡片,大家可以試著跟著以下教學寫,下次會教學多組配對的遊戲撰寫方式喔。

memory-game-jquery-easy
遊戲範例:點我

jQuery 紅包落下、紅包雨 簡易教學 適合新手、視覺設計師。

jQuery 紅包落下、紅包雨 簡易教學 適合jQuery 新手、視覺設計師。

現在的購物網站或者APP常常會有紅包落下的效果,只要點擊到就能夠得到禮券之類的。此篇文章要教學用簡單的jQuery方法,製作出此效果,而為了讓語法可以直接複製貼上到自己的網頁使用,因此本篇文章的紅包不使用圖檔,而是svg語法,可以直接複製貼上使用,不用擔心圖片路徑問題。使用的jQuery也是jQuery官方線上最新的喔。

cash-red-envelope