Loading ..................

Ken's Street Fighter II with animated sprites


Make Ken walk / punch / kick / jump / etc. with your keyboard. I assigned portions of png sprites to css class names, then added some css animations in it and finally used simple JS events to add / remove them on Ken.


  1. css
  2. animation
  3. sprites
  4. street fighter


  1. How difficult would hit detection be in JS? ;-)

  2. Awesome! Great job! I love how the Hadoken goes all the way across the browser window!

  3. Thank you guys. There is already a hit detection :) the fireball detects the end of the screen.

  4. Oh I love this so much. I played Street Fighter II (SNES) with my friends on New Year's Eve all day long :D

  5. Argh I just want to play this all day now. Even without audio I feel like I can actually hear him saying "Hadoken!" Oh man, I'm bringing in my SEGA Genesis to work.

  6. lol I made a private demo with sound effects, background music and a better collisions detection. It renders wonderful but I don't want to have problems with Capcom :)

  7. Cool. Common HTML5 bug, though: needs e.stopPropagation() and e.preventDefault() for keydown events on any keycode you care about. As is, it bubbles your keys to the browser, where things like typeahead find grab focus. =(


  9. Very cool stuff, great work man!

  10. @Ilia thanks but u know what? your clock rocks!

  11. I'm a girl but I used to play street fighter too as a kid and I loved it and this is just FANTASTIC! bravo!

  12. Can you help me add the attack animations to my game? Here's the link to it - http://codepen.io/TristanGames/pen/MajPJG

Leave a Comment Markdown supported. Double-click names to add to comment.

You must be logged in to comment.
  • 475 Hearts