日期:2014-05-17  浏览次数:20714 次

使用HTML5和Google Maps构建手机LBS游戏

HTML5赋予Web开发人员更加强大的能力。其中的GeoLocation属性,可以让开发人员非常方便地获取用户的地理位置。结合Google Maps提供的API,就可以直观地在地图上将用户的位置标注出来。

今天带来的是我和Aj同学(博客)几个月前完成的一个小游戏。手机用户直接访问网址,即可参与该游戏。该游戏取材于经典的吃豆人游戏(Pac Man),所不同的是,玩家需要移动自己的真实的地理位置才能移动游戏中角色的位置。该游戏也支持多人对战,不同的玩家分别扮演吃豆人和鬼。

游戏的后端使用的是GAE。

先看模拟器上的截图:


1. 房间列表(index)


2. 创建游戏

?



?

3. 游戏进行中

?


现将开发中的一些心得,尤其是关于前端实现的心得,总结一下,以作抛砖引玉之用。


1. 如何自定义地图样式。

为了尽可能地和原作贴合,我们需要将地图绘制成黑底蓝条的模样,黑色代表可以通行的部分,蓝条代表“墙”或边界。所幸的是google maps已经提供给我们这个方法:



// 自定义地图样式,注意先后顺序不能调换
  var stylez = [
    {
      featureType: "all",
      stylers: [
        { hue: "#0000ff" },
        { saturation: 100 },
		{ lightness: -40}
      ]
    },
    {
      featureType: "road",
      stylers: [
        { hue: "#000000" },
        { saturation: 75 },
        { lightness: -100}
      ]
    }
  ];

var styledMapOptions = {
    name: "Pac Man"
  };
 
  // 设置地图类型
  var PacManMapType = new google.maps.StyledMapType(stylez, styledMapOptions);
  map.mapTypes.set(MY_MAPTYPE_ID, PacManMapType);


2. 如何获取玩家位置并显示在地图上
?

?

// 获取用户位置
	  navigator.geolocation.getCurrentPosition(function(position) {
			lastPos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
			map.setCenter(lastPos);
			// 初始化地标
			origin = new google.maps.Marker({ 
				position: lastPos,
				map: map,
				draggable: true
			});
			
			addMarkerClickListener(origin, messages.prefix_ori);
			google.maps.event.trigger(origin, 'click');
			
		}, function() {
			alert(messages.geoservice_failed);
	  });

?

?那么如何做到实时更新用户的位置呢,也非常简单:


?

// 监听用户位置
	navigator.geolocation.watchPosition(function(position) {
			// 上传最新位置,不做任何事
			var curPos=new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
			var data='roomName='+roomInfo.roomName+'&location='+curPos.toUrlValue()+'&userName='+roomInfo.me;
			Ajax.post('updatelocation', data, function(){});
		}, function() {
			alert(messages.geoservice_failed);
		}, positionOptions);

?

?每当用户位置发生改变时,watchPosition将会被自动回调。


3. 如何在用户选定的出发点和目的地间均匀的绘制豆子。


?

// 绘制豆子
function dr