SFRyu
Use javascript and css to build a StreetFighter Ryu,walk,jump,basic punch kick,launch fireball and dragon punch.
因為小時候就很喜歡玩快打旋風,於是用Javascript,CSS設計一個快打旋風遊戲角色Ryu來娛樂一下,可以走動、跳、基本拳打腳踢、發氣功以及昇龍拳。
運用的程式技術
- 運用了CSS animation+keyframes來達成出招(參考資料來源)。
- 運用了Javascript來偵測角色移動範圍設定場景的ScrollLeft,達成橫向卷軸移動舞台背景的效果,達成實際電玩相同的效果。
- 原本一開始搭JQuqery,為了後續計畫增加連線對打功能改用Pure Javascript。
操作方法
- 方向鍵的【左】與【右】可往前往後行走,【下】=蹲下。
- 【空白鍵】=跳躍,搭配左右鍵可往前跳、往後跳。
- 【a】=輕拳,【s】=重拳。
- 【z】=輕腳,【x】=重腳。
- 【ctrl+a】=發氣功,【ctrl+q】=昇龍拳。
圖片來源
- Ryu招式圖檔:https://spritedatabase.net/
- 舞台場景:https://twitter.com/streetfighter/status/1248329659147669505?lang=zh-Hant
引用版權聲明
- 此專案所使用到的StreetFighter的角色、招式以及場景版權皆屬Capcom公司所有。
- 此專案運用網頁技術來開發類似StreeFighter遊戲角色Ryu,純粹是磨練程式開發技術練習之用,並無商業營利行為。