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

  •  
  •  
  •  
  •  

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

Welcome to wanchen travel blog website : )
歡迎來到玩轉芋圓部落格網站,最新豐富的美食餐廳與飯店心得,讓你熟知旅行大小事,跟著玩轉芋圓旅遊去!

遊戲試玩

我們先預覽試玩一下完成的樣子,所有完成的語法都貼到CodePen了,因此如果有jQuery或者javaScript底子的讀者,也可以自行先試做看看!

電腦操作 空白鍵 = 跳躍

手機操作 點擊遊戲畫面 = 跳躍


遊戲布局思考

因為是用網頁製作遊戲,因此也要考慮到現在大部份上網的裝置都是手機裝置,所以製作遊戲前,操作方面要先思考以下兩點。

  • 電腦版本跟手機版本的操作方式如何替換?
  • 遊戲視窗的比例跟大小,如何在不同裝置間切換?

因為芋圓的工作是行銷單位內的網頁視覺設計師,不是專業的遊戲設計師,因此製作的遊戲都偏向”簡單、快速”和”輔助活動主軸”為導向。所以遊戲並不是重點,而是整個行銷活動才是本體,所以在遊戲操作上不宜太複雜。

因此類似馬力歐的遊戲,只需要跳躍就很適合製作成網頁行銷活動的小遊戲,人人都可以上手。

所以跳躍的操作,在電腦版芋圓是以”空白鍵”為跳躍,手機版本是”點擊畫面”,即可操作遊戲角色跳躍。因此我們在操作的部份會使用到:

touchstart、touchend、onkeydown、onkeyup

網頁遊戲視窗RWD小技巧

再來要思考的是,遊戲視窗如何在電腦版本與手機版本中切換。畢竟在撰寫CSS時或者DOM寬高時,px的寫死來製作遊戲,需要判斷主角位置時,會比百分比方便。

所以芋圓在為工作製作網頁遊戲時,在儘量讓總寬度不要超過400px~500px,並且遊戲畫面比例上會以直的長方形,或是四方形為主要設計,方便遊戲在轉換成手機版本視窗時好偷吃步

遊戲視窗做小、做直的好處

  • 視窗不要太大,能讓遊戲的畫面、介面不會做到太複雜,因此縮小到手機時,也能清楚看見。
  • 類似直條的視窗,在手機時CSS能夠直接用transform的scale縮小比例,直接搞定,超級偷吃步…..

jQuery遊戲製作開始

畫出遊戲場景

首先要先畫出遊戲的場景,以這次類似馬力歐的遊戲,芋圓是將寬定義在400px、高500px。

定義了一個div,取名class為stage,css部份position:relative非常重要,之後的所有遊戲元素都會被加入position: absolute,並且以stage作為定位判斷。

什麼是position、relative、absolute

CSS的position、relative、absolute是很多網頁從業者的夢靨,這三項也是芋圓在面試網頁設計師時會問的問題,很容易就可以看出CSS的熟練程度。芋圓簡單的說明relative、absolute的差別,請看下圖:

什麼是position、relative、absolute

很多人看到教學都會說”絕對定位”以及”相對定位”,但是請忘掉以上兩個名詞。只要記得一件事情就好,如下圖桌子與咖啡杯的範例。

桌子 = relative,杯子 = absolute 。杯子可以任意擺放在桌上的位置,而這擺放的距離與方位,則用座標軸top、left作為撰寫依據。

杯子可以自由的擺在桌上的任意位置,就是relative(桌子)跟absolute(茶杯)的差別。而擺的位置是由桌子(relative)的左上角坐標軸開始計算的。而HTML寫法如下,杯子必須被包在桌子內

<div class="桌子">
   <div class="杯子"></div>
</div>

所有的遊戲原件都會以場景作為定位點

所以回到遊戲的製作,我們往下再看一次場景(stage)的CSS,需要加入 position:relative,這下了解原因了吧?因為遊戲內的元素(角色、金幣、背景)都會以場景(stage)為擺放準則計算喔!


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

玩轉芋圓讀者優惠專區

★喜歡玩轉芋圓旅遊手札嗎?歡迎下載APP 把部落格文章帶著走!

玩轉芋圓app

★信用卡推薦
台新Richart開戶優惠 限量健身包連結登記或輸入專屬代碼「PIXNET111」

★wanchen畫的line貼圖
實用橘貓貼圖 Orange cat オレンジ ねこ→前往貼圖

★預訂門票行程推薦klook

★買藥妝必領 2020日本藥妝家電優惠
松本清藥妝品項齊全藥妝店
日本札幌藥妝1萬日圓折500日圓、3萬日圓折2000日圓
唐吉訶德折價券滿額免稅享折扣
Japantaxi 「88DFB5」日本計程車折價券 ¥500jpy
Amazon 日本亞馬遜 挖寶購物好好買
BicCamera優惠券 日本家電電器折價券
樂天銀座優惠券 樂天免稅店折價券

★飯店訂房
agoda限定優惠台灣人高使用率訂房網站
booking中文訂房全球旅遊玩透透
relux 新用戶領取好友邀請9折優惠券
stay japan 預訂合法日本民宿
airbnb優惠 領1100旅遊金

★機票預訂
skyscanner機票比價快速好用找便宜機票

★其他優惠
日本電器家電優惠券 EDION免稅+93折優惠
餐廳訂位eztable 新會員優惠 抽紅包壽星優惠餐廳
Willer Travel預訂日本高速巴士車票
otomo travel日本導遊預約「MLKLX0PR」 折扣300元
GLOBAL WiFi上網分享器租借8折

★外送叫餐app/台北叫車
foodpanda外送優惠 輸入手機號碼領優惠
ubereats優惠「eats-7vh9sk」2次NT$100元折扣
uber優惠「wanchen120」首次搭乘uber省120


  •  
  •  
  •  
  •  

發表迴響

Up ↑