Home > WEB | javascript > Google ストリートビューで鬼ごっこ

Google ストリートビューで鬼ごっこ

2008-08-25 (月) 20:07
WEB | javascript
googlemaps | javascript | ストリードビュー | 鬼ごっこ

北海道までライジングサンを見に遊びにいってきました。ただいま！

今回は、現在までのストリートビューのプログラムを組み合わせて、
地図上を複数のキャラクターが動き回るサンプルを作ってみました。

クリックで新しいウィンドウにサンプル表示

一応IEでも確認しましたが、FireFox３環境を激しく推奨。
（IE謎のエラーがたまにでる・・・）

基本は、以前のサンプルの自動で動き回るキャラクターを複数にしただけです。
当たり判定とかも加えてゲームらしくしようかと思ったんですが、そこは挫折しましたｗ

↓以下ソース全部

>>text

JAVASCRIPT:

var lastPanoId = null; // 最後にいた場所のPanoID
var nowLatLng;
var map;
var streetViewClient;
var streetPanorama;
var enemyList = [];
var enemyMarker;
var zakoIcon;
// GoogleMapsの初期化
function initMap(lat, lng){
map = new GMap2(document.getElementById("map"));
map.disableDragging();
var ctrlObj = new GMapTypeControl();
var pos = new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(5, 15));
map.addControl(ctrlObj, pos);
map.setCenter(new GLatLng(lat, lng), 18);
initMarker();
initPanorama(lat, lng);
}
function initMarker(){
zakoIcon = new GIcon();
zakoIcon.image = "./zako_front.gif";
zakoIcon.iconSize = new GSize(30, 57);
zakoIcon.iconAnchor = new GPoint(15, 57);
}
function initPanorama(lat, lng){
streetViewClient = new GStreetviewClient;
streetPanorama = new GStreetviewPanorama(document.getElementById("pano"));
nowLatLng = new GLatLng(lat, lng);
streetViewClient.getNearestPanoramaLatLng(nowLatLng, function(latlng){
if(latlng == null){
document.getElementById("pano").style.display = "none";
return;
}
nowLatLng = latlng;
streetPanorama.setLocationAndPOV(nowLatLng, {yaw: 180, pitch: 0, zoom: -1});
GEvent.addListener(streetPanorama,
"yawchanged",
function(yaw){
changeYaw(yaw);
});
GEvent.addListener(streetPanorama,
"initialized",
function(location){
panoramaInitialized(location);
});
});
// キャラクタを配置
enemyOptions = [ { lat:35.661821, lng:139.666685},
{ lat:35.662404, lng:139.665810},
{ lat:35.66215, lng:139.665270}
];
for(i = 0; i <enemyOptions.length; i++){
var enemy = new Object;
enemy.lat = enemyOptions[i]["lat"];
enemy.lng = enemyOptions[i]["lng"];
enemy.marker = new GMarker(new GLatLng(enemy.lat, enemy.lng),{draggable:false, icon:zakoIcon});
map.addOverlay(enemy.marker);
enemy.moveInterval = setInterval("toNextPanorama("+i+")", 2000);
enemyList[i] = enemy;
}
}
// 次の位置へ移動
function toNextPanorama(enemy_num){
var enemy = enemyList[enemy_num];
clearInterval(enemy.moveInterval);
enemy.pt = map.fromLatLngToContainerPixel(new GLatLng(enemy.lat, enemy.lng));
/*
if(enemy.pt.x> 210 && enemy.pt.x <230 && enemy.pt.y> 192 && enemy.pt.y <270){
//alert("hit");
}
*/
// 現在の表示位置の緯度経度を取得
streetViewClient.getNearestPanorama(new GLatLng(enemy.lat, enemy.lng), function(streetData){
var neighbourCount = streetData.links.length; // 隣接するパノラマの数
var nextPanoId; // 次に向かうパノラマのID
if(neighbourCount == 1){
// 隣接するパノラマが１つだった場合はそこへ移動
enemy.nextYaw = streetData.links[0].yaw;
nextPanoId = streetData.links[0].panoId;
}else{
while(1){
i = Math.floor( Math.random() * neighbourCount );
if(enemy.lastPanoId != streetData.links[i].panoId){
nextPanoId = streetData.links[i].panoId;
enemy.nextYaw = streetData.links[i].yaw;
break;
}
}
}
enemy.lastPanoId = streetData.location.panoId; // 今いた場所を覚えておく
streetViewClient.getPanoramaById( nextPanoId,
function(nextStreetData){
enemy.nowLatLng = nextStreetData.location.latlng;
var pov = streetPanorama.getPOV();
nowYaw = pov.yaw;
if(nowYaw> 360) nowYaw -= 360;
if(Math.abs(nowYaw - enemy.nextYaw)> 180){
if(nowYaw> enemy.nextYaw) enemy.nextYaw += 360;
}
map.removeOverlay(enemy.marker);
zakoIcon.image = getIconFromYaw(enemy.nextYaw);
enemy.marker = new GMarker(new GLatLng(enemy.nowLatLng.lat(), enemy.nowLatLng.lng()),{draggable:false, icon:zakoIcon});
map.addOverlay(enemy.marker);
enemy.lat = enemy.nowLatLng.lat();
enemy.lng = enemy.nowLatLng.lng();
enemy.pt = map.fromLatLngToContainerPixel(enemy.nowLatLng);
/*
if(enemy.pt.x> 210 && enemy.pt.x <230 && enemy.pt.y> 192 && enemy.pt.y <270){
//alert("hit");
}
*/
enemy.moveInterval = setInterval("toNextPanorama("+enemy_num+")", 2000);
enemyList[enemy_num] = enemy;
}
);
});
}
function getIconFromYaw(yaw){
gifFile = "./zako_f.gif";
if( yaw> 360 ) yaw -= 360;
if( yaw>= 315 || yaw <45 ) gifFile = "./zako_back.gif";
else if( yaw>= 45 && yaw < 135 ) gifFile = "./zako_right.gif";
else if( yaw>= 135 && yaw < 225 ) gifFile = "./zako_front.gif";
else if( yaw>= 225 || yaw <315 ) gifFile = "./zako_left.gif";
return gifFile;
}
function changeYaw(yaw){
var gifFile;
if( yaw> 360 ) yaw -= 360;
if( yaw>= 315 || yaw <45 ) gifFile = "ue.gif";
else if( yaw>= 45 && yaw < 135 ) gifFile = "migi.gif";
else if( yaw>= 135 && yaw < 225 ) gifFile = "shita.gif";
else if( yaw>= 225 || yaw <315 ) gifFile = "hidari.gif";
document.getElementById("girl").innerHTML = '<img src="'+ gifFile +'" alt="gial"/>';
}
function panoramaInitialized(location){
map.panTo(location.latlng);
}

Comments:0

Trackbacks:1

Trackback URL for this entry: http://parpue.net/web/259/trackback
Listed below are links to weblogs that reference: Google ストリートビューで鬼ごっこ from parpue.net

trackback from わらびっち Tech館 09-03-15 (日) 3:29

Google StreetView でゲーム作成

Google StreetView 逃走ゲーム

某逃走ゲームの番組が好きで、、、
鬼ごっこを　Google ストリートビューを使って
ゲーム作ってみましたー

とり…

Home > WEB | javascript > Google ストリートビューで鬼ごっこ

最近の記事

カテゴリ