Giter Club home page Giter Club logo

sfryu's Introduction

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

sfryu's People

Contributors

hahalin avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.