loading...
Cover image for How I made my CV, based on Age of Empires game

How I made my CV, based on Age of Empires game

vivirenremoto profile image Miquel Camps ・3 min read

Hi there!

My name is Miquel Camps, I'm a freelance web developer based in Spain, you can find me on twitter and linkedin.

I think I'm not the best programmer to give some advice, my code is not clean at all, but maybe you can learn something new of my two day struggling to make a playable CV.

The website is
https://vivirenremoto.com/aoe/en.php

Information

The map is randomly generated, in each visit it can change the environment, weather, position of trees, buildings, music, etc.

You can move the villager around the map with the cursor as the current game and if you want you can use the keyboard arrows too.

The Idea

I've to admit that the first moment my idea was not to make a CV, I wanted to replicate the user interface of Age of Empires with web technologies just for fun.

What I used

  • Graphics
  • Music and sounds from youtube videos
  • HTML
  • CSS
  • jQuery to write less code
  • Google fonts
  • Javascript library to make the snow effect from Trent Willis

The stages

1- Start with the basics
2- Little details
3- Responsive design
4- Polish the code
5- Get some feedback and improve it

Start with the basics

First thing I put on the map was the villager a simple DIV on the BODY tag, a plain image without fancy walking animations.

Then I add a DIV that is above all the DIV layers with a click event to move the villager arround the screen.

Then I put one tree, one house, one university, and so on..

Finally I put the informative modal that appears when the villager is over any building.

The best advice I can give is go step by step, try and failure, change and reload, don't give up if it doesn't work at the first time.

Little details

Once the basic interaction is done, the first detail I added was the eagle that flies from the top left or right to bottom of the screen.

Then I made the random environment, weather, music, sounds.. to give some life and personality to the plain website.

Did you notice when you move the villager there are two kind of sounds?

Responsive design

The CV website was made to work in desktop mode and mobile devices in vertical mode.

The main differences is the position of buildings that I will talk later in this post, the size of the buildings and the number of elements like trees and snow flakes that are smaller or lower in mobile devices.

Polish the code

I know the code it still can be improved by far, basically I remove some duplicate code.

1- For the interaction of each building I was using four "if" conditions then I've changed to one "while" and just one "if", I think its more simple and easy to mantain.

2- At the begining I was printing five trees individualy instead using a loop "for", so by this way is easy to print 10 or 20 trees, i've only to change one variable.

What have been the most difficult things for me?

At the begining the buildings can appear in any position of the screen, sometimes one building can appear above another one and it was a complete mess.

So i made virtual grid with an array, in desktop the screen is divided by two columns and two rows, in mobile is divided by one column and four rows proportional to the screen size.

All the buildings appers in a random position inside each cell of the virtual grid.

What other problems I found?

This is inevitable, you can't try your thing in each device in the world, as a Android user I don't have any iPhone, so someone with an iOS device told me that in Safari browser the images doesnt work, the solution was easy, I replace the WEBP images to PNG and GIF images instead.

Final message

I hope you like it, get some inspiration and it would be great if you can share it to your family and friends who ever play once Age of empires to bring back some good memories.

Disclaimer

The Copyright policy sets out information and rules for respecting Microsoft's copyrights and trademarks in its works. In order to reproduce any of Microsoft's content, including images, characters, storylines, or text, we must have Microsoft's clear permission to do so.

Posted on by:

Discussion

markdown guide
 

This is so awesome! I had a similar idea of using Phaser to create a pixel art RPG, where you would talk to villagers to read my CV. But it was more work than I thought so I ended up just using reveal.js to create my CV :)

 

thank Kimmo! your idea sounds really good too, BTW i'm not sure if this kind of CV can help if you are not a game developer, in my case i'm not but it was a challange and fun weekend project.

this the first time I hear about Phaser and reveal.js i will take a look at them, thanks for sharing

 

As a former player of Age of Empires, this is amazing dude. Hahaha. Good job on this. The nostalgia is bubbling up.

 

thanks Traek! nice to hear that :)

 
 
 

ROFL! Are you following the current scene? If yes, who are your favorite players and streamers? :-)

hey Ankush, i'm currently out of the scene, but some time ago i played in a few clans, nothing profesional just for fun, good memories :)

 

That's great work. But I want to be a monk. They are funnier.

It's Age of Kings, by the way, or Age of Empires 2. It's not the same. #purist

 

thanks Matthieu! i added a "wololo" mode check it out :)
vivirenremoto.com/aoe/en.php?wololo

 

This is the most beautiful thing I've ever seen!

 
 

Thanks Franciszek! it's great to see people arround the world who values the work of others :)

 
 

thanks Marcell, i really appreciate it :)

 
 

Thanks Norro for your comment! :)

 

Wow, this is creative! 👍 I'm getting incredibly nostalgic now too, lol. Great job on this!

 
 

please add a seizure warning to the wololo

 

Sorry! I made the wololo guy slower i think It was too fast, too furious 😅

 

Extremely well done. Now "how do you turn this on" if you know what I mean.

 
 
 

Nice job. I really enjoyed that, is awesome.

 

Thank you Jose! Happy to hear that :)

 
 

Nicely done! Now I want to play my copy of Age of Empires 2 Definitive Edition 😁

 

Yessss! Thats great to know :) thanks

 

Man, this is genius on so many levels! I really love how you've tied each section closely to the building type! 🤣🤣🤣

 

Hi Ankush, I tried my best to do this little detail, thanks for appreciating it :)

 
 

thanks everyone for your kind words,
i'm totally surprised of this community good vibes.

keep calm and wololo!

 

New update! I just added some new modes "wololo" and "how to turn this on", check it out!

 

This is great! I signed up to dev.to and am following you now!
I love AOE!