Category Archives: javascript教學

jQuery-給視覺設計師的語法教學-3-收合表格內容應用

此次教學會教學jQuery的 .siblings() 、.slideDown() 、 .slideUp() 、$(this),此四種應用。

jQuery遊戲製作教學-類似馬力歐的吃金幣遊戲-5(完成)

此篇第五章是吃金幣遊戲的最後一個教學,要將金幣加入遊戲畫面,並且跟角色碰撞時,可以增加分數,並且移除自己。

jQuery遊戲製作教學-類似馬力歐的吃金幣遊戲-4

第四章我們要教學在遊戲增加開始的按鈕,以及當角色走到底後的結束、重新啟動功能。

jQuery遊戲製作教學-類似馬力歐的吃金幣遊戲-3

第三章的jQuery類似馬力歐遊戲要加入人物的操作囉,javaScript的部份會越來越多。如果還不熟前兩章的朋友建議先回前兩章複習喔!

jQuery遊戲製作教學-類似馬力歐的吃金幣遊戲-2

接續前一章節,此章節要開始將背景放入,以及使背景移動。如果沒有看過jQuery遊戲製作教學-類似馬力歐的吃金幣遊戲-1,請先觀看喔。

jQuery遊戲製作教學-類似馬力歐的吃金幣遊戲-1

這一系列文章,會介紹如何使用jQuery製作類似馬力歐的吃金幣遊戲。過程會有點長(芋圓太懶..懶得一次寫完…),所以會分成幾篇教學完成。

jQuery-給視覺設計師的語法教學-2-返回頁面頂端click()與scrollTop()應用

製作網頁時,click()方法很常被使用到,並且此教學簡單帶到jQuery內的scrollTop()方法,配合click()實現回到網頁頂部教學範例。

jQuery-給視覺設計師的語法教學-1-基本認識jQuery

視覺類型的網頁設計師,應該都有聽過HTML、CSS,更甚至多少會撰寫一些HTML、CSS,但是對於javaScript可能就很頭大了,看著那密密麻麻的程式語法不知道從何入手,但是對於工作的要求?自我進修要求?多少都了解網頁的javaScript是什麼,如何開始開始入門?

芋圓我自己是網頁視覺類型的設計師,再精進學習javaScript跟jQuery、VUE,目的主要是想要獨立開發網頁小遊戲、小工具、APP開發,因此學習歷程會比較清楚視覺偏重的設計師會遇到什麼問題,因此此系列文章適合給非資訊類工程類型的人學習jQuery閱讀。

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

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

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

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

jquery-shooting-game-raiden-easy

作者遊戲範例:jQuery雷電