我是如何根据《帝国时代》游戏制作我的简历的
你好呀！
我叫米格尔·坎普斯，是一名居住在西班牙的自由网页开发人员，你可以在推特和领英上找到我。
我觉得我不是最适合提供建议的程序员，我的代码一点也不简洁，但也许你能从我这两天努力制作一个可玩的简历的过程中学到一些新东西。
该网站是
https://vivirenremoto.github.io/ageofcv/en.html
信息
地图是随机生成的，每次访问都会改变环境、天气、树木位置、建筑物、音乐等等。
在当前游戏中，您可以使用光标在地图上移动村民，如果您愿意，也可以使用键盘方向键。
这个想法
我必须承认，我最初的想法并不是要制作一份简历，我只是想用网络技术复制《帝国时代》的用户界面，纯粹是为了好玩。
我使用的东西
- 图形
- 来自 YouTube 视频的音乐和声音
- HTML
- CSS
- 使用 jQuery 可以编写更少的代码
- 谷歌字体
- Trent Willis开发的用于制作雪花效果的Javascript 库
阶段
1. 从基础开始
2. 关注细节
3. 响应式设计
4. 优化代码
5. 获取反馈并改进
从基础开始
我首先在地图上放置的是村民，一个位于 BODY 标签上的简单 DIV，一张没有花哨行走动画的普通图片。
然后我添加了一个位于所有 DIV 层之上的 DIV，并添加了一个点击事件，使村民可以在屏幕上移动。
然后我放了一棵树、一栋房子、一所大学，以此类推……
最后，我添加了当村民悬停在任何建筑物上方时出现的提示框。
我能给出的最好建议就是一步一步来，尝试失败，改变策略，重新开始，如果第一次不成功也不要放弃。
小细节
基本交互完成后，我添加的第一个细节是老鹰从屏幕左上角或右上角飞到屏幕底部。
然后我制作了随机的环境、天气、音乐、音效……给这个普通的网站增添了一些生机和个性。
你有没有注意到，移动村民时会发出两种不同的声音？
响应式设计
该简历网站的设计使其既能在桌面模式下运行，也能在移动设备上以竖屏模式运行。
主要区别在于建筑物的位置（我将在本文后面讨论）、建筑物的大小以及树木和雪花等元素的数量，这些元素在移动设备上会显得更小或更低。
润色代码
我知道这段代码还有很大的改进空间，我主要删除了一些重复的代码。
1- 对于每栋建筑的交互，我之前使用了四个“if”条件，后来我改用了一个“while”和一个“if”，我觉得这样更简单，也更容易维护。
2- 一开始我是逐个打印五棵树，而不是使用“for”循环，所以这样很容易打印10棵或20棵树，我只需要更改一个变量。
对我来说，最困难的事情是什么？
游戏开始时，建筑物可以出现在屏幕上的任何位置，有时一个建筑物会出现在另一个建筑物的上方，场面一片混乱。
所以我用数组创建了一个虚拟网格，在桌面端，屏幕被分成两列两行，在移动端，屏幕被分成一列四行，行数与屏幕尺寸成正比。
所有建筑物都随机出现在虚拟网格的每个单元格内。
我还发现了哪些其他问题？
这是不可避免的，你不可能在世界上的每一台设备上都进行测试。作为一名安卓用户，我没有iPhone，所以一位拥有iOS设备的人告诉我，在Safari浏览器中图片无法显示。解决方法很简单，我把WEBP图片替换成了PNG和GIF图片。
最后的信息
希望您喜欢，并从中获得一些灵感。如果您能将它分享给曾经玩过《帝国时代》的家人和朋友，让他们重温美好的回忆，那就太好了。
免责声明
版权政策阐述了尊重微软作品中版权和商标的信息和规则。如需复制微软的任何内容，包括图像、角色、故事情节或文本，我们必须获得微软的明确许可。
请查看我的其他简历
文章来源：https://dev.to/vivirenremoto/how-i-made-my-cv-based-on-age-of-empires-game-1ade