网站管理入口全国疫情实时资讯

写在前面：

这是自己自学前端之路上第一次写博文，希望以此来巩固自己所学的知识，也希望能和大家多多交流！

这个小案例是韩顺平的js学习视频中的案例，视频中给出了一部分的实现，之后由本人补充了一些功能并改进了页面布局。

功能需求分析：

1)通过上下左右四个button控制马里奥的移动

2)使用面向对象的思想，设计Mario的类，并为Mario添加方法

3)注意Mario移动不能跑出游戏界面(边界检测)

4)Mario遇到得分物体获得加分(碰撞检测+得分统计)

页面初步布局：

设置控制中心，可通过table标签实现，表格中的内容可添加input标签， type="button" value="上/下/左/右"的箭头符号

控制中心初步效果

设置游戏区域div，命名为gamefield，并添加一张马里奥的图片，游戏主角，以及草莓的图片作为可得分物体。