Xander's Super Wario Bros! ~ HTML5 Engine Demo!

[Xander]

Hi Everyone!

I've been messing about with the HTML5 game engine called Impact. It's pretty awesome. It works by using the HTML5 <canvas> tag paired with a whole whack of javascript. As long as you have a modern web browser, you are good to go, with Chrome being the best.

Why is Chrome the best? Because it supports native Gamepad support! So if you have a Gamepad plugged into your computer, you can use it without any setup! Apparently Firefox has decent support now too. And MS Edge. You can even boot up my game on the Xbox One's Edge web browser, pretty cool.

I've spent a couple of weeks adapting the engine to simulate a Mario game. While there is still work to be done, I feel it's finally at a place where it's worth showing.

There's nothing to install, you just play it right in the browser. And if you have a gamepad, it'll just work.

http://xandor.ca/superwario/

Just click the link, and you can start playing!

While I do know there are some bugs (you can't fully die just yet, there's no strict level-ending, among others), feedback is appreciated!

Thanks!

[Khyze]

Well, hard to tell, since you are "copying" an Original game is hard to have issues, of course, if you like to hear that it looks like the Original mario games, then hear it, it looks pretty cool!

You already mentioned the bugs, i cant remember if this happen on Mario, but when i jump and a box is on top of me, you will keep "flying" till the Jump timer is over :s, i dont know another way to explain it u.u

Are you planning to update it? is good enough, the only issue is that i dont like Wario

Thx for sharing it with us

[Xander]

Well, hard to tell, since you are "copying" an Original game is hard to have issues, of course, if you like to hear that it looks like the Original mario games, then hear it, it looks pretty cool!

You already mentioned the bugs, i cant remember if this happen on Mario, but when i jump and a box is on top of me, you will keep "flying" till the Jump timer is over :s, i dont know another way to explain it u.u

Are you planning to update it? is good enough, the only issue is that i dont like Wario

Thx for sharing it with us

Yes, it's definitely designed to feel very close to Super Mario World.

Yes, right now, when he jumps, he sticks to the underside of collisions instead of bouncing back down. I do plan to fix this.

I will definitely be updating it. My aim is to turn it into a full game asap, then build new levels and worlds, all the while keeping the game in a complete state. Next up is adding a title screen and world map, a proper level ending animation, and then I should be all set to build levels!

The game will likely feature Wario, Waluigi, Princess Daisy and Toadette as a sort twist on a SMB2 throwback.

Thanks for the feedback! Much appreciated.

EDIT:

I'm really motivated by this project so far and am making consequential additions as often as I can.

I started working on an Overworld Map last night and made some progress in about an hour:


Right now you just walk in 16 pixel increments, much like SMB3 or pokemon. There are no barriers right now though, so you can just walk anywhere, heh. I plan to continue on this tonight and maybe address some bug fixes.

[Ton]

These are gorgeous! Glad to see you here again. I don't think we've seen your take on Waluigi yet! I'll be watching this.

[Xander]

These are gorgeous! Glad to see you here again. I don't think we've seen your take on Waluigi yet! I'll be watching this.

Thanks!!!

Yeah, I don't really know how I plan to do him. I have the sprites, but some kind of custom jump and actions would be cool. I still need to add some custom actions to Wario himself.

[Khyze]

-I noticed a little Bug, it was hard to find it, Sometimes when you are Grow Up, and get hitted (So, becoming a Kid), The Sprite gets a little bit Down, i did it by accident, now that i want to do it again i cant :s

-There is another one, sometimes when you are running (Pressing the key for speed) and jump it get "super" speed (Just it goes a little bit more faster) i dont know if it was on purpose

I guess the new update will have World Selection and "Blocked" movements

Btw, i didnt saw Wario as a kid, the first time i didnt get hurt, this time i lose so badly >.<

Keep working! Looks nice (Too bad not that many comments u.u)

[Xander]

-I noticed a little Bug, it was hard to find it, Sometimes when you are Grow Up, and get hitted (So, becoming a Kid), The Sprite gets a little bit Down, i did it by accident, now that i want to do it again i cant :s

-There is another one, sometimes when you are running (Pressing the key for speed) and jump it get "super" speed (Just it goes a little bit more faster) i dont know if it was on purpose

I guess the new update will have World Selection and "Blocked" movements

Btw, i didnt saw Wario as a kid, the first time i didnt get hurt, this time i lose so badly >.<

Keep working! Looks nice (Too bad not that many comments u.u)

Thanks for the feedback Khyze!

The bug has to do with death, which isn't handled properly yet. If you die, then get a power-up, your collision box hasn't been enlarged, so the sprite offset shoots you through the floor for a second.

If has Super Mario World style running. So once Wario's arms fly to the sides, you are at top speed!

Glad you liked it!

[iyenal]

Very good,continue ! Do you can share assets for enemies and powerups?
I'm doing also a game in HTML5, but with Mario,HD sprites and levels created with Tiled : http://www.vg-resource.com/thread-28613-...#pid608193
But the sprite scaling(too smooth on big screen) and colors have to be improved.

[Xander]

Very good,continue ! Do you can share assets for enemies and powerups?
I'm doing also a game in HTML5, but with Mario,HD sprites and levels created with Tiled : http://www.vg-resource.com/thread-28613-...#pid608193
But the sprite scaling(too smooth on big screen) and colors have to be improved.

Thanks! Most of the sprites can be found in the links in my signature. Cool game, I left a comment on your thread.

I made a bunch of updates to my game.

- You can now properly die and be returned to the overworld screen.
- The overworld screen now has a path to follow.
- You can complete the level with a small animation and return to the overworld screen.
- The overworld screen has some WIP enemy encounters, though I still need to make them trigger.

Thanks for the feedback, everyone.

[iyenal]

I have the sprites, thanks anyway. I'm asking you if you can share JS scripts by assets.

[Xander]

I have the sprites, thanks anyway. I'm asking you if you can share JS scripts by assets.

I'm not quite sure what you are asking. Can you be more descriptive?

[iyenal]

What do you use to program powerups and enemies? Normally it's JavaScript.

[Xander]

I'm using the Impact Engine, which uses Javascript, yes.

[iyenal]

Do you have separated Javascript files for enemies AI and powerup transformations ?
If yes, do you can share it ? Thanks.

[Xander]

Do you have separated Javascript files for enemies AI and powerup transformations ?
If yes, do you can share it ? Thanks.

My code for the powerup transformations wouldn't make much sense without understanding the engine I am using.

Enemy AI code might be useful, but again, it's engine specific and might not help you very much.

Here's the code that handles turning around on platforms, it's pretty rudimentary.

Code:

            if( !ig.game.collisionMap.getTile
                 (
                this.pos.x + (this.flip ? -1 : this.size.x + 1), //the x position when traveling left (add a minus 1 for the next position), the x position plus the width of the entity when going right + 1 for the next tile over
                this.pos.y + this.size.y+1 //y position plus the height gets the ground position, adding 1 lowers the creature into the floor
                )
              )
            { //so if the entity is at the edge, then adding 1 to the x axis and 1 to the y axis would produce no collision since that point would not be touching a collision tile
                this.flip = !this.flip;
            }
            
            if (this.standing) {
                //this.accel.x = this.flip ? -100 : 100;
                this.vel.x = this.flip ? -this.maxVel.x : this.maxVel.x;
            }
            this.currentAnim.flip.x = this.flip;