有趣的Axure案例:打地鼠游戲的設(shè)計
一個有趣的實例,通過axure制作一個打地鼠的游戲,可以進行難度選擇。其中如果選擇難度一地鼠為正常大小,選擇難度二,地鼠則為縮小版。雖然小游戲很簡單,但其中用到的axure技能并不簡單,接下來將為大家介紹其制作方法。
之前已經(jīng)發(fā)布過一個釣魚的小游戲《有趣的Axure案例:釣魚游戲的設(shè)計》,該游戲也有難度的變化等功能,某種程度上講,那一個實例的難度反而要大一些,因為涉及到小魚的往復運動以及自動轉(zhuǎn)身。
本實例相對比較簡單,但是難度切換的時候需要進行的工作量比較大,而小魚實例中僅僅修改一個數(shù)據(jù)即可以實現(xiàn)難度切換。
一、成果展示
交互內(nèi)容:
- 難度選擇:將鼠標移入相應(yīng)的難度框即可以實現(xiàn)難度切換,難度切換之后地鼠的大小將會發(fā)生變化;
- 打地鼠:將木槌移動到地鼠所在的位置,按下敲擊即可以實現(xiàn)打地鼠的動作,被敲打的地鼠將會被重置。
- 得分統(tǒng)計:上方的得分界面將會隨著打地鼠數(shù)量的增加而增加。
體驗地址:點我體驗
二、單難度制作過程
1.繪制基本元件
圖片可以從網(wǎng)上搜集,所需要的圖片有草地的圖片,老鼠洞的圖片,老鼠和洞的圖片,木槌的圖片,木槌砸下的圖片。當然對于圖片進行摳圖處理是必不可少的步驟。
2.設(shè)置動態(tài)面板
為了實現(xiàn)木槌的敲擊需要將木槌設(shè)置為動態(tài)面板,狀態(tài)1和狀態(tài)2分別為木槌的正常位置以及敲擊后的位置。老鼠的動畫實現(xiàn)方式也是一樣的,將狀態(tài)1設(shè)置為僅僅有一個洞,狀態(tài)2設(shè)置為老鼠從洞中爬出來,這樣就獲取了老鼠從洞中出現(xiàn)的動畫。
3.小木錘的動作實現(xiàn)
實現(xiàn)方式比較簡單,設(shè)置方式如上所示,即鼠標單擊的時候?qū)⒛鹃车臓顟B(tài)設(shè)置為敲打的狀態(tài),然后等待200毫秒后將木槌復位。
接著通過上圖的方式進行設(shè)置,使得小木槌可以跟隨鼠標。cursor.x為獲取當前鼠標所在位置的x坐標,cursor.y為獲取當前鼠標所在位置的y坐標。
4.設(shè)置全局變量
為了實現(xiàn)得分統(tǒng)計,需要一個全局變量score,其初始值為0,將隨著用戶擊打老鼠而增加。且每打中一只老鼠,其數(shù)值將會增加1。
5.地鼠動畫設(shè)計
觸發(fā)的條件為接觸觸發(fā),值得注意的是不是讓木槌的動態(tài)面板和地鼠接觸后觸發(fā),而是讓砸下狀態(tài)的木槌和地鼠接觸之后觸發(fā)。觸發(fā)后將會重置地鼠的位置,重置方式使用隨機函數(shù)來完成。
為了實現(xiàn)地鼠從洞中爬出來的動畫,先將地鼠的動態(tài)面板設(shè)置為狀態(tài)1等待500毫秒之后切換為狀態(tài)2,同時增加得分。
三、增加難度選項
1.增加狀態(tài)
將整個游戲界面轉(zhuǎn)化為動態(tài)面板,該界面將會成為狀態(tài)1,接下來再添加狀態(tài)2,將狀態(tài)2中的地鼠體積縮小到一定程度。
作為難度二的游戲界面,按照先前的方式為狀態(tài)二中的所有區(qū)域增加交互,這樣,我們就擁有了兩個不同難度的游戲。
2.狀態(tài)切換
增加兩個按鈕,即難度一和難度二,用于難度的切換。因為此時小木槌是跟隨鼠標的,所以我們并沒有辦法按到這兩個按鍵,因此將交互的方式設(shè)置為當鼠標移入時進行切換。
其中難度二是將頁面切換至狀態(tài)二,而難度一則是將頁面切換至狀態(tài)一。
四、總結(jié)
該例子的難度適合于有一定基礎(chǔ)的axure使用者,雖然總體思路不是很困難,但是如果基本操作不過關(guān),很容易導致游戲出了bug但是卻找不到在哪里。希望通過這個實例能夠讓大家對axure有更加深入的了解。
#專欄作家#
馬璐,人人都是產(chǎn)品經(jīng)理專欄作家。關(guān)注產(chǎn)品設(shè)計以及用戶體驗,力求在技術(shù)一定的情況下將產(chǎn)品做到極致,充分發(fā)揮技術(shù)的潛能。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自網(wǎng)絡(luò)
能不能給下源文件鏈接,加了公眾號之后怎么下載吖,謝謝
作為營銷人士,最佩服的就是技術(shù)流!
偽技術(shù)流 ??
了解下木槌伴隨鼠標移動的方式,還有整個打地鼠游戲的實現(xiàn)方式可以再詳細點嗎。
關(guān)注我公眾號找源程序吧
還有這個操作,不過我已經(jīng)會了 哈哈哈
厲害哦
還不是因為反復看你的說明
這么說我很開心啊
哈哈
從體驗上還缺上一個隱藏的倒計時狀態(tài) 用戶在沒有觸發(fā)單機事件時 地鼠在倒計時為0時 隨機出現(xiàn)
確實是哦,有興趣可以自己加一個~( ̄▽ ̄~)~
常說 產(chǎn)品人 的終極目標是改變世界,但事實····· 改變世界留給少數(shù)那些人,其他人就負責用技能溫暖世界吧
是的 ?? ??
牛逼了
感謝認可