獨家 用Axure 實現「打飛機」,騷年,來一發

2021-02-06 人人都是產品經理
本文由人人都是產品經理專欄作家 @陳濱淋(微信公眾號:iambin) 獨家發布於人人都是產品經理 。未經人人都是產品經理許可,禁止轉載。違者追究責任,謝謝合作。

看到標題想歪的,請先面壁三秒鐘,我向來是一位嚴肅正經有節操的人。

話說,前段時間忽然懷念微信5.0的黑白版的飛機大戰,進微信遊戲大廳尋了個遍,好像找不到了,有種物是人非的趕腳。突發奇想利用業餘時間用Axure打造了一個飛機大戰,在空虛寂寞冷的時候可以擼一把。效果如下方左圖:

有無限多的敵機無恥地向你撲面而來;

你用鍵盤的方向鍵控制戰鬥機參加戰鬥(被敵機撞擊算報廢,你一共有3架戰鬥機);

戰鬥機可以源源不斷地向敵機發射子彈;

計分系統(打掉一架敵機得100分);

難度等級系統(打10架敵機增加一個難度等級,敵機飛行速度加快);

因為涉及知識點比較多,又希望將他們描述清楚,所以本文只實現上方右圖的效果。①讓敵機循環飛行②讓子彈連續發射。請基礎較好的童鞋見諒。

敵機.png、戰鬥機.png、子彈.png(為了效果好,老老實實用PS摳出2個透明背景的飛機,此處省略N個字)、拉出四個矩形用途和尺寸分別為:450*530px作為背景、2個450*42px分別作為地面和天花板、開始按鈕。將敵機.png、戰鬥機.png、子彈.png按照下圖方式打包成「戰鬥機+子彈」、「敵機-殼」兩個動態面板。

實現方法:

用一個空的動態面板命名為「循環」,協助敵機實現循環飛行。流程開始後,設置動態面板「循環」顯示→「循環」顯示後觸發:「敵機-殼」復位:移動敵機到界面頂部絕對位置(範圍內隨機,0)的位置and啟動飛機:相對位置移動敵機(0,1),「敵機-殼」在移動的情況下設置用例→如果「敵機-殼」撞擊到地面,隱藏「循環」,「循環」隱藏後觸發顯示「循環」的用例→「敵機-殼」未接觸到地面,則繼續向下飛行,從而達到敵機飛行的循環。具體流程圖如下所示:

在上述流程圖中,紅色的閉環促進敵機不斷地繼續向前飛行,藍色的閉環促進敵機不斷重現。

下面貼出「循環」和「敵機-殼」的交互用例

根據同樣的原理,我們可以做出子彈循環向上飛行的樣子。區別在於①子彈飛行的方向在縱坐標的負方向。②子彈飛行速度較快。③子彈在「子彈軌道」這個動態面板裡飛行。因此子彈在移動時觸發每一個移動單位是(0,-20),子彈撞擊天花板之後復位的位置是絕對位置(0,390)。具體用例不在此複述。

在上述用例中出現兩處函數,在此進行簡單講解

1、敵機撞擊地面後,觸發「循環」對敵機進行復位的用例

[[Math.floor(Math.random()*300+80)]]

Math.random()函數的作用是在[0-1]區間產生一個任意數,這個用法與該函數在Java或js裡都是相通的。

要函數返回指定範圍的隨機數(m-n之間)的公式如是:Math.random()*(n-m)+m;而在本文中,我們希望敵機在[0,450]區間產生隨機數,因此理論上應該是Math.random()*450,其中450是背景矩形的寬度,但是由於Axure認為元件的坐標就是元件從左上角頂點的坐標,而敵機自身的寬度為72px,因此正確的表達式應該為Math.random()*(450-72),本人在試驗中發現疑似由於瀏覽器的兼容問題,這樣控制範圍仍然會出現飛機飛出範圍外,因此將範圍進行適當縮小最終設定的公式定位文中的數據。

Math.floor()是向下取整的函數,由於Math.random()產生的是多位小數。因此在取整函數裡嵌套一個隨機函數的目的是在一定範圍內產生一個隨機整數,得益於這兩個函數的使用,才讓敵機能在不同軌道上飛行。

2、敵機正常飛行用例中的函數

[[Math.log(level)+0.5]]

寫到此我居然忘了一件重要的事情,為以後完善遊戲的難度系統做準備,我們應該建立兩個全局變量「level」和「fighter」通過「level」的值來控制敵機飛行速度,通過「fighter」的值來檢測戰鬥機剩餘數量,從而隨時判斷遊戲是否結束。在點擊」開始遊戲「的時候給」level「賦值2,給」fighter「賦值3這是初始化數據。回到函數的話題,這個函數的值最終將成為敵機在固定時間內(用例執行的時間是1ms固定不變)飛行的距離,也就是說敵機的飛行速度成正比。在本遊戲中預想設定每擊落10架敵機level的值加1,這樣不同level下,敵機的飛行速度是成線性增長的。

我們先來回顧一下中學時期學到關於對數函數和直線函數曲線的區別:

從上圖不難看出,我使用對數函數的目的是為了控制敵機飛行速度的增量。拉長用戶可升級的空間,增加遊戲的可玩性。在Axure裡[[Math.log(x)]]函數使用數學常量e作為對數的底(e約為2.71828),因此範圍的只一定為正數。但是當x比較小的時候log(x)返回的值仍然比較小這就意味著在前幾個level裡飛機的飛行速度非常慢,近乎龜速,用戶會沒耐心玩,遊戲可玩性不高。這也是為什麼我會在函數後面加一個常量0.5的原因。

希望感興趣的同學別心急,先按跟著本文的進展動起來,讓敵機起飛,讓子彈飛一會兒!後面會更精彩。

最後照舊,獻上本文效果的rp源文件,回復關鍵詞「打飛機」獲取下載地址,同時也歡迎來公眾號找我。

12月19日,中國上海,大咖雲集,2015產品運營年終大會強勢來襲,剩餘極少的搶票機會, 猛戳【閱讀原文】立即搶票。

相關焦點

  • 這位騷年要讓樂高模型飛機飛上天!
    話說,一般人都利用樂高積木做個模型什麼的但是Youtube上有位騷年就用樂高積木做了一架模型飛機關鍵是這架飛機還上天了。。。事情是這樣的。。。這位騷年是Youtube上的視頻博主PeterSripol,他是個模型飛機小能手,還用紙桶做模型飛機,也就是創客裡面腦洞最清奇的那種。。。有一天,他突發奇想,用樂高積木,做一個真的能飛的模型飛機!擱平常普通的樂高飛機模型,往天上一扔掉地上就摔散架,妥妥的~
  • 線上課程 | 「有原型作品展示優先考慮」,新人不會Axure原型怎麼拿...
    但因為之前沒怎麼用過Axure,大多以粘貼複製為主,頁面邏輯也很亂,被開發吐槽看不懂。她現在每天最擔心的,就是被老大問原型修改的進度情況;還有就是開始自我懷疑,對未來的產品路有些迷茫了。(2)蛋蛋,產品工作2年做產品兩年的蛋蛋,最近遇到一件糟心事。公司來了個新人,應屆畢業生,產品助理崗位。
  • 如何優雅的用Axure裝逼|高保真原型心得分享
    從產品流程來看,將想法形成草圖原型,原型再有設計師形成效果圖,程序猿們根據需求和效果圖開發,出來的軟體樣子就是和效果圖差不多。原型在過程中就是產品最終形態的骨架。低/中/高保真:根據圖的粗糙程度劃分,以最終效果圖為參照。保真程度越高,離最終效果圖越接近。Axure:工具只是實現想法的工具。
  • 用 Ruby 實現飛機自動駕駛儀
    可以通過 RPC 來控制遊戲。同時有第三方的 Ruby 客戶端:krpc-rb。和真實飛機不同的是,在砍巴拉遊戲中駕駛飛機是非常痛苦的,在沒有插件輔助的情況下,你看不到具體的 GPS 坐標,很多時候看到的都是和飛機駕駛無關的軌道參數,而一些關鍵的控制參數缺很難獲取。同時遊戲中也沒有自動駕駛儀。
  • Axure教程|淘寶網商品圖片放大鏡效果製作
    今天我們將來展示這個效果,axure製作這個功能並不是很困難,至少比作者之前的小遊戲容易太多了,其中唯一用到的高級功能就是函數,且都是直接使用,沒有複雜的全局變量以及觸發麵板。一、成果展示這樣基本就實現了整體布局,不過我們要的顯然不是一個靜止的圖片,還需要讓它隨著放大區域的不同而發生移動。3. 放大區域的滑鼠跟隨將放大區域命名為bfdq,然後設置其交互。
  • 飛機打多了會早洩?丁丁會變小?今天帶你走近「擼」的真相
    編者按+有人說,世界上的男性,98%會打飛機,剩下那2%在撒謊。他們即便沒有正兒八經的對象,每天也有五指姑娘作陪。那麼男生怎麼打飛機的呢?在諸多妹子心中,這可能是繼「資源從哪來」之後又一未解之謎。不過這個謎題的答案,今天可能有點眉目了,因為小編將帶大家走近「擼」的真相。
  • 用 Python 實現微信版飛機大戰
    2013 年微信 5.0 版本內置了一款經典小遊戲-灰黑色版飛機大戰,被稱為微信經典飛機大戰,在這個版本中微信甚至將歡迎設置了成了這款小遊戲,用戶首次登陸將會直接進入飛機大戰小遊戲,遊戲一經推出也是火爆異常,當時還出現了許多經典語錄。
  • 我梳了個飛機頭終於殺入暴走族
    飛機頭就這樣殺入了日本暴走族很多日本動漫作品中的不良少年英雄留的都是飛機頭,籃球飛人、熱血高校、北鬥神拳一抓一大把都是飛機頭,為了搞清楚不良少年和飛機頭這糾纏不清的關係,我可是給日本的歷史老溼打了電話問功課。
  • 你看好哪位「騷年」?
    你看好哪位「騷年」?你覺得哪位「騷年」可以晉級演播廳主場比拼?你覺得哪個團隊可以拿到由中青旅提供的「海南三亞雙飛六日遊」大獎?就為他(她)投一票吧!本節目由融和大廈獨家冠名播出。學生場是6月報名,7月初海選。這22名選手是從240名報名者中脫穎而出的,我們還要通過投票,大型公益活動以及拓展訓練,選出18名選手走進演播廳主場進行比拼!
  • 新手勿入:你是怎麼走上打飛機這條路的?
    但是我就好奇,究竟是什麼使你們走上了打飛機這條路?一下、兩下、BiuBiu~一直都會看到一句話叫小擼怡情大擼傷身強擼灰飛煙滅今天我們就來聊聊男生們究竟是怎樣走上打飛機這條路的(文章純屬娛樂不代表小編觀點~)01想必很多人冬天的時候都有把手夾在腿中間的習慣
  • 騷年,我們來秀恩愛吧!
    城事   / / /南京路燈管理處的小夥子用一句情話成功虐狗
  • 搞個"飛機頭「造型,10秒就行,你不想試一下嗎?
    源於路易十六的情婦蓬巴杜夫人的高聳髮型,但到現代卻成為了男士的潮流。 流行:1950~1960年代美國飛機頭髮型在 1950~1960年代美國非常流行,以貓王為始祖開始影響一代騷年,還演變出 Pomp 和 Regent兩種,其實都是往後梳,Regent
  • 約架、比胸、說渾話…看貴圈網癮騷年日常笑到肚子疼
    著火入魔的趙麗穎  把一段「發功舞」視頻發到網上然後把全劇組的人都拉來了  搞了一場群魔齊舞比賽連「摩嚴上仙」蔣一銘她都沒放過!這真是一枚畫風不一樣的趙麗穎沒想到隱藏在網上的她這麼歡脫呢果然精分騷年歡樂多~但其實貴圈網癮騷年可不止趙麗穎一個人哦前段時間鄭爽刷微博的事情上了熱搜
  • 大自然來「造」飛機
    大自然來告訴你答案。與飛機類似,對於像鷹和隼這樣的大型鳥類,如果其翅膀過長,轉向時的半徑就會過大,從而使其在飛翔時無法利用熱空氣柱上升。但是,鷹的翅膀完美地結合了最大的升力和最小的翅膀長度,它們在飛行時會將翅尖羽毛向上捲曲,從而形成近90度的夾角。這種形態可以減小空氣中的漩渦,提高鷹的飛行效率,並且可以實現遠距離滑翔。
  • 又一個發財致富的機會來啦!趕緊打飛機去美國!
    你們可能覺得不可思議,一包辣醬能火成這樣?當然啦!去年10月麥當勞就因為和四川辣醬上了熱搜了,比打什麼廣告都帶勁啊!按照98年的物價,20塊麥樂雞的售價為3.2美元.說了半天,這四川辣醬到底啥味?有人是這麼形容的:「有點甜,有點辣,這是一種能改變你生活的辣」。
  • 「一發不可收拾」用英語怎麼說?
    我對你的景仰如滔滔江水,連綿不絕又猶如黃河泛濫一發不可收拾這句經典的臺詞大家一定都聽說過吧~那麼問題來了「一發不可收」用英語該怎麼說?今天我們來學習一個比較地道的說法:one thing leads to another來看一下權威的解釋吧:One action has triggered others, especially
  • Zoe說,騷年,一起來浪吧!
    起航吧~騷年!        都是雞年惹得禍????剛進HR Center,HR就特意囑咐我,新員工美國港是沒有辦法出去的哦,但是其他的沒有問題,你都可以出去。快來找我哦,快來快來!        看著飛機從頭頂划過的聖馬丁,雖說經歷的颶風的蹂躪,可是你還是美啊:
  • 來,我們用數字解讀787飛機!
    轉眼兩年過去,波音787在全球包括中國市場的運營也日漸成熟。在實際運營過程中,787的表現究竟如何?為航空公司的市場發展起到什麼樣的作用?目前全球787機隊的整體狀態如何?16%:海南航空的實際運營數據表明,787飛機比其競爭機型在燃油消耗方面降低了16%,每年為航空公司節省燃油20萬噸。 油耗的降低主要通過改進發動機性能以及使用複合材料實現。787主體結構的50%,包括機身和機翼,都採用了複合材料,更輕、更簡單的構造提高了客機效率,從而降低油耗。
  • 飛機頭怎麼梳才比較帥?女人眼裡最好看的三種梳法
    現在男生都很喜歡留飛機頭,為啥叫飛機頭呢,這個我也不知道了。叫啥其實也不重要,關鍵是帥一切就OK了。飛機頭有一個特點,容易打理,這也是廣大騷年喜愛它的原因之一。只要找對髮型師,剔出正確的線條和長度,每天只需要洗髮、吹乾、用手簡易造型即可,完全不用花太多時間打理,造型品也只是需要噴霧和髮油,省事省心。那麼飛機頭怎麼打理比較帥?1,後梳男生髮型飛機頭其實最容易最瀟灑的,就是後梳的飛機頭了,看起來也比較像是成熟油頭。
  • 【獨家】太陽能飛機:渾身都是高科技!
    而且這是一個單座設計的飛機,飛行員在接下來的環球飛行中,有一段航程的設計是,要獨自一人在上面五天五夜(當然,在這架飛機的旁邊會有一架陪伴的飛機,但也只是伴飛,拍拍照,連連線採訪啥的……),如果一旦出現什麼危險,飛行員需要自己打破飛機上的保護罩,自己跳出飛機再通過降落傘逃生——因為飛機沒有彈射座椅。據說飛機上只有降落傘和簡易救生艇兩種逃生裝備。