iT邦幫忙

2022 iThome 鐵人賽

DAY 16
0
自我挑戰組

那些八年級生的經典迷你遊戲,前端JS自學之路系列 第 20

小朋友下樓梯 - 遊戲說明與元素

  • 分享至 

  • xImage
  •  

小朋友下樓梯真的是八年級生非常經典的遊戲,相信這年代的人都玩過吧XD

https://ithelp.ithome.com.tw/upload/images/20221006/201126746IWWVNlCTD.png
圖片出處

遊戲說明

遊戲開始後,畫面的元素都會一直往上移動,要一直讓人物往下墜在某個平台上,避免被上方的刺刺到。
如上圖,遊戲中不單只有平凡的平台,也有可能出現刺,或其他元素將列在下方。當被任何刺刺到時,上方的血條就會減少,一直到血條歸零,或是人物掉入深淵沒被任何元件接住,遊戲就結束~
這遊戲讓人追求的就是可以撐多久(多少階數)都不會掛掉。

素材

在開始實作整個功能前,先確認會需要用到哪些素材

  1. 階梯
  2. 帶刺平台
  3. 假平台 (碰到後只有短暫停留,接著往下墜)
  4. 彈簧 (碰到後,人物往上)
  5. 向右滾輪 (讓人物向右加速,向左減速)
  6. 向左滾輪
  7. 最上方的刺
  8. 主角 - 人物 (分成五個面向)
    • 向左預備
    • 向右預備
    • 向左跑
    • 向右跑
    • 面對玩家
  9. 掛掉聲音 XDD

預期困難點

想像這遊戲最麻煩的地方在於畫面的移動,元素要一直向上,而唯獨人物,在平台上時跟著畫面往上走,然而一旦離開就要反向操作的墜落,或是跳起
剩下的則是依事件的發生來寫條件判斷,難度應該還好,例如: 碰到刺=>扣血,遇到彈簧=>向上,鍵盤左右=>預備/跑


上一篇
CSS 學習 - 使用float擺放的注意事項
系列文
那些八年級生的經典迷你遊戲,前端JS自學之路20
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言