Mario Racing Game - HTML /CSS - 1st Project

Hey everyone,

I just made a mario racing game with HTML/CSS.

I know its nothing crazy but its the first project I’ve taken on by myself and with no tutorials so I wanted to share. Mainly just used it as a chance to practice keyframes and animations.

LINK: https://dobs1993.github.io/dobs1993.github-io/

FOR BEST VIEWING EXPERIENCE -
Screen Width: 1366 pixels
Screen Height: 768 pixels

My screen resolution which made the transitions from page to page and grabbing the power ups flawless and in sync are below. The site hasnt been modifeid or adjusted to other screen sizes or devices. So the power ups dont look very smooth or in line at all on other screen sizes. The player icons may not even be in line with the track on most devices…

Again, the dimensions below for it to render properly.

Screen Width: 1366 pixels

Screen Height: 768 pixels

3 Likes

It’s obviously a bit fragile, but just thinking about doing this with just HTML and CSS makes my head spin, so well done! I’m sure you learned a lot in the process.

Yes very much so. The screen resolution just changes in the slightest and the timing and everything is off.

Question:
( to anyone who has the time to reply or knows the answer)

I’m sure there is an easier way to do this but if your wanting to do multiple animations on one property is this easy to do? In my case, I did the following for the player driver icons I was using the same image twice and positioning it where the other image ends and starting up a new keyframe and animation for the second image. That sounds confusing. To sum it up, when peach slips on the banana and is rotated 360 deg from there I set up another image of peach where the first image ended ( stopped spinning ) and started a new keyframe. This way on my screen resolution anyways it syncs directly in line and acts like the same property. Hope that makes sense. Just wondering how practical this is.

I think the more you want to do this type of sequential logic the more it becomes worthwhile to manage the animations with javascript instead. I’m not very proficient with animations myself though, so take that with a grain of salt.

I figured as much. I just wanted to see how far I could take it with just HTML/CSS. Thanks for taking the time to reply to me! Have a great day!

Wow! This is a pretty cool project. I can’t wait until you start integrating JavaScript and React into your projects!

1 Like

Thanks for this comment! Means a lot. I am starting to move on to Javacript more seriously soon!