有趣的Axure案例:打地鼠游戲的設(shè)計

17 評論 24932 瀏覽 78 收藏 7 分鐘

一個有趣的實例,通過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ò)

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 能不能給下源文件鏈接,加了公眾號之后怎么下載吖,謝謝

    回復
  2. 作為營銷人士,最佩服的就是技術(shù)流!

    來自江蘇 回復
    1. 偽技術(shù)流 ??

      來自浙江 回復
  3. 了解下木槌伴隨鼠標移動的方式,還有整個打地鼠游戲的實現(xiàn)方式可以再詳細點嗎。

    回復
    1. 關(guān)注我公眾號找源程序吧 :mrgreen:

      來自浙江 回復
    2. 還有這個操作,不過我已經(jīng)會了 哈哈哈

      來自四川 回復
    3. 厲害哦

      來自浙江 回復
    4. 還不是因為反復看你的說明

      來自四川 回復
    5. 這么說我很開心啊

      來自浙江 回復
    6. 哈哈

      來自四川 回復
  4. 從體驗上還缺上一個隱藏的倒計時狀態(tài) 用戶在沒有觸發(fā)單機事件時 地鼠在倒計時為0時 隨機出現(xiàn)

    來自上海 回復
    1. 確實是哦,有興趣可以自己加一個~( ̄▽ ̄~)~

      回復
  5. 常說 產(chǎn)品人 的終極目標是改變世界,但事實····· 改變世界留給少數(shù)那些人,其他人就負責用技能溫暖世界吧

    來自浙江 回復
    1. 是的 ?? ??

      來自浙江 回復
  6. 牛逼了

    來自四川 回復
    1. 感謝認可

      來自浙江 回復