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

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.

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