cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv headernumbered-list123split-screen
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

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.

Comments

  1. Waw. Reminds me my childhood. :)

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

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

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

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

  6. 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.

  7. 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 :)

  8. Haha! That's awesome!

  9. Just... wow. Amazing work!

  10. 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. =(

  11. Very Nice WORK ! BONNE CONTINUATION ! ;)

  12. Very cool stuff, great work man!

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

  14. bravo bravo bravo!!

  15. 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!

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

  17. awesome stuff!!

  18. holly macaroni

  19. "Now I must defeat the world's greatest fight-fighters. Take me to the Soviet Union!" --Rumble McSkirmish

    I kinda though you could turn in the other direction in the game.. Also, a little bit of flexboxing will allow you to center the game to the screen.

    BTW, I would really like to smash up the car.

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.
Loading...
Loading...