使用HTML5和Google Maps构建手机LBS游戏
HTML5赋予Web开发人员更加强大的能力。其中的GeoLocation属性,可以让开发人员非常方便地获取用户的地理位置。结合Google Maps提供的API,就可以直观地在地图上将用户的位置标注出来。
今天带来的是我和Aj同学(博客)几个月前完成的一个小游戏。手机用户直接访问网址,即可参与该游戏。该游戏取材于经典的吃豆人游戏(Pac Man),所不同的是,玩家需要移动自己的真实的地理位置才能移动游戏中角色的位置。该游戏也支持多人对战,不同的玩家分别扮演吃豆人和鬼。
游戏的后端使用的是GAE。
先看模拟器上的截图:
1. 房间列表(index)
2. 创建游戏
?
?
3. 游戏进行中
?
现将开发中的一些心得,尤其是关于前端实现的心得,总结一下,以作抛砖引玉之用。
1. 如何自定义地图样式。
为了尽可能地和原作贴合,我们需要将地图绘制成黑底蓝条的模样,黑色代表可以通行的部分,蓝条代表“墙”或边界。所幸的是google maps已经提供给我们这个方法:
2. 如何获取玩家位置并显示在地图上
??
?