Skip to main content

8bit Mario with css grids

The point of this task was to get more familiar with css grids. I aimed to use as little divs as possible but I wanted it to be to scale. 

You can view it below or on Codepen.

See the Pen mario with grids by Mel (@Mellydevs) on CodePen.

Making Mario

As I was making a 8bit character I made a 64 by 64 grid and made each grid size 8px by 8px. This allowed me to make Mario to scale. 
NB: I do not own anything to do with Mario I am just a fan :).



So after using reference images I managed to make divs turn into Mario by changing their position in the grid and background colour. If you want to learn more about grids I recommend css tricks article on it or Grid garden which is a game that helps you learn grids. It turned out quite good and I was happy with it.

I thought I was done but then....

I thought why not make him do a idle animation, So I looked at some sprite sheets (whats a sprite sheet?) Kirby's idle seemed to be the easiest so I chose to try and achieve that. So my idea was to loop through the parts I wanted to move and make them go down one so it would create a squish motion and then go back to normal.

I did this by setting the ending placement of the blocks by using &.resting in sass then I used a set interval to loop around the divs to toggle off and on the class - creating a resting motion.

Which is cool but can we make it better ?

Yes is the answer, so I added a floor  and a sky and now I might as well make it into a game.



Gaming time

So I will be basically be re-creating the chrome dino game when you are offline. As I know what grid Mario is in I can check when the box reaches it and check if Mario is jumping. If he is jumping and the box makes it passed Mario the game continues and adds to your score, if not game over.

I will be moving the box with another setInterval and once it reaches the end (i < 2) I will reset it back to the start. If it hits then It will give the user a message saying 'game over' and reset the game.  

I then moved onto the jumping and did the styles that will be added when you hit the up key (or button) for an amount of time then it will be removed.

I also added a counter for every box you jump to add some method of scoring and I will also be using this count to increase the speed of the box to make it harder as time goes on. I've also added a high score that will save the users highs score to the local storage on their client. I didn't really have a style in mind for this I just went for simple and 8bit (kinda :P).

Thanks for reading, this was a practically fun Sunday funday project and I am happy with it. If you have any suggestion's leave a comment or if you liked it let me know :). 

Labels:

Comments

Post a Comment

Popular posts from this blog

Ionic RSS feed using Feednami

Tutorial of how to make a RSS feed using Feednami which is an alternative to google api which no longer works. This is a basic example and can be improved. First go ahead and make a new ionic project $ npm install -g cordova ionic $ ionic start exampleProject blank Now find index.html and insert... <script src="https://storage.googleapis.com/feednami-static /js/feednami-client-v1.0.1.js"></script> Into the header, then in <ion-content> below Ionic Blank Starter insert a new div <div id ="feed" ng-controller="feedCtrl"> </div> Open app.js, now we are going to make the controller from Feednami that will get our rss feed. .controller('feedCntl', function(){ var url = 'http://daringfireball.net/feeds/articles' feednami.load(url,function(result){ if(result.error){ console.log(result.error) } else{ var entries = result.feed.entries for(var i = 0; i < entri...
Post a Comment
Read more

Sunday funday project - LightReact

Sunday fun day project - LightReact Update every week So I'm in my third year (finally!) and decided to do more things this year (2017)  1. To increase my skills and 2. To have fun! This year we are having our end of year show at The University of Winchester and I wanted to make a VR game for Google cardboard. The winner at the end of the day would get a £10 steam gift voucher. Below is my WIP for this mini project. Week 1 - inspiration and 3d modelling  I wanted to make a very simple game for VR, no not a horror game. LightReact is based on a game you would typically play at an arcade where you have a bunch of lights and you have to switch them off as fast as possible. However, instead of switching them off with your hands you use your eyes. The example in the video below. So you get the point you look at them they switch off. The person to do it in quickest time wins.  The wonderful world of blender  I am primarily a dev...
Post a Comment
Read more

Signing apk from ionic

This post will show you how to sign your apk manually, from ionic framework for release. Recently I signed my first apk from ionic and ran into some issues that will be ironed out in this blog. 1. You will need to have the sdk and jdk / jdr tools installed. 2. Have a ionic project with the Android platform installed. LETS START You need to build your app using below in the cmd line then move that project-release.apk file into this directory   ionic build android --release exampleApp\platforms\android MAKING THE KEYSTORE You then need to make the key store in that file and write in all the info. Do not lose the key file and keep a record of the information. keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000 SIGN THE APK Now we have to sign the apk jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore HelloWorld-release-unsigned.apk alias_name no...
1 comment
Read more