larryyangsen / SFRyu

Use javascript and css to build a StreetFighter Ryu , walk ,jump,basic punch kick,fire a fireball and dragon punch

SFRyu

Use javascript and css to build a StreetFighter Ryu,walk,jump,basic punch kick,launch fireball and dragon punch.

因為小時候就很喜歡玩快打旋風，於是用Javascript,CSS設計一個快打旋風遊戲角色Ryu來娛樂一下，可以走動、跳、基本拳打腳踢、發氣功以及昇龍拳。

Demo

運用的程式技術

1. 運用了CSS animation+keyframes來達成出招(參考資料來源)。
2. 運用了Javascript來偵測角色移動範圍設定場景的ScrollLeft，達成橫向卷軸移動舞台背景的效果，達成實際電玩相同的效果。
3. 原本一開始搭JQuqery，為了後續計畫增加連線對打功能改用Pure Javascript。

操作方法

1. 方向鍵的【左】與【右】可往前往後行走，【下】=蹲下。
2. 【空白鍵】=跳躍，搭配左右鍵可往前跳、往後跳。
3. 【a】=輕拳，【s】=重拳。
4. 【z】=輕腳，【x】=重腳。
5. 【ctrl+a】=發氣功，【ctrl+q】=昇龍拳。

圖片來源

1. Ryu招式圖檔：https://spritedatabase.net/
2. 舞台場景：https://twitter.com/streetfighter/status/1248329659147669505?lang=zh-Hant

引用版權聲明

1. 此專案所使用到的StreetFighter的角色、招式以及場景版權皆屬Capcom公司所有。
2. 此專案運用網頁技術來開發類似StreeFighter遊戲角色Ryu，純粹是磨練程式開發技術練習之用，並無商業營利行為。

ryu.mp4