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.github.io/ageofcv/en.html
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.
Take a look at my other resumes
Top comments (37)
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
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!
wicked.
Wololo !
Nicely done! Now I want to play my copy of Age of Empires 2 Definitive Edition 😁
Yessss! Thats great to know :) thanks
Pure beauty
Thanks Franciszek! it's great to see people arround the world who values the work of others :)
This is so great
thanks Marcell, i really appreciate it :)
Awesome bro ! nice work :D
Thanks Norro for your comment! :)
Wow, this is creative! 👍 I'm getting incredibly nostalgic now too, lol. Great job on this!
Thanks David :)
Extremely well done. Now "how do you turn this on" if you know what I mean.
hi Ankit! are you ready for this?
vivirenremoto.com/aoe/en.php?howto...
please add a seizure warning to the wololo
Sorry! I made the wololo guy slower i think It was too fast, too furious 😅