2009-11-29 00:18:53

宝探しゲーム更新

テーマ:宝探しゲーム

宝探しゲームでやってくれる人がいたので、問題を2問追加した。


サスペンス劇場の名所


渦巻きを探せ



他にも問題はあるのでやってみてください。


http://www.ylw.mmtr.or.jp/~jkondou/takara/rpgtakarasagashi.htm


AD
いいね!した人  |  コメント(0)  |  リブログ(0)
2009-11-22 13:16:03

JavaScript:Google Maps APIで2点間の距離計測とマーカー表示方法

テーマ:JavaScript

Googleマップサンプル集 もいよいよ大詰め。

クリックすると2点間の距離を測定し、また、マーカーのアイコンの変更を行って地図に書き込む。

作成したHTML文書はこちら
以下にソースの説明をしていきます。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Google map</title>
<script src="http://maps.google.com/maps? file=api&amp;v=2&amp;sensor=false&amp;key=
ABQIAAAAJXYwFgs3R54rlXBVQrZ-
QRSQX0zcyHiuBBtvLf60RI8qT6jGRBQ
Gp1BCIcxnSAnD57RevlOVEHHbMQ"
type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
  var map = new GMap2(document.getElementById("map_canvas"));
  var x = 35.186225462776335;
  var y = 136.8989610671997;
  var z = 13;
  map.setCenter(new GLatLng(x, y), z);
  map.addControl(new GSmallMapControl());
  map.addControl(new GMapTypeControl());
  var point = new GLatLng(x, y);
  map.addOverlay(new GMarker(point));
  map.openInfoWindow(point,document.createTextNode("名古屋の中心名古屋城"));
  var ICONS = [];
  var icon = new GIcon();
  icon.image = "hata.gif";
  icon.iconAnchor = new GPoint(16, 16);
  icon.infoWindowAnchor = new GPoint(16, 0);
  icon.iconSize = new GSize(26, 24);
  ICONS[0]=icon;

  
  マーカーのアイコンの設定。icon.iconAnchorでマーカー表示するときの位置を設定する。
  icon.iconAnchorは設定しておかないと表示されない。
  icon.iconWindowAnchorで情報ウィンドウの位置を指定。なくても問題ない。
  icon.iconSizeでアイコンのサイズを設定。
  ICONS[0]はアイコンを複数登録したいため配列にした。


  GEvent.addListener(map,"click", function(overlay,latlng) {
    if (overlay) {
      // ignore if we click on the info window
      return;
    }
    var polyline = new GPolyline([
      new GLatLng(x,y),
      new GLatLng(latlng.lat(),latlng.lng())
    ], "#ff0000", 10, 1);

    
    GPolyline([],a,b,c)の[]で2点間の距離をmで測定してくれる。
   後のa,b,cは2点間を結ぶ線の設定。
   map.addOverlayで2点間の線を表示させることができるが、今回は表示しない。


var value = polyline.getLength();
    value = value / 1000;
    var myHtml = "緯度:"+latlng.lat()+"<br/>経度: "+latlng.lng()+"<br/>名古屋城からの距離:"+value+"km";
    map.openInfoWindow(latlng, myHtml);
    map.addOverlay(new GMarker(latlng, { icon: ICONS[0] }));
    ↑
    マーカーを追加するが、iconは設定したICON[0]で表示する。

  });
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 500px; height: 400px"></div>
<p id=aa>a</p>
<p id=bb>b</p>
</body>
</html>

だいぶGoogle Maps API リファレンス にも慣れてきた。

サンプル集とAPIリファレンスがあるので、初心者の私でも理解しやすい。

初めてAPIという代物に挑戦するにはGoogleマップがやっていて面白くて理解しやすいのではないかと思う。

ここまできたら、位置ゲーもどきを作って、Googleマップは終了しよう。

次のAPIを攻略しよう。


詳細はこちらに記載しました。

http://www.d3.dion.ne.jp/~jkondou/javascript/5.htm



PS.


宝探しゲームを作成したが、なかなか好評にならない。


http://www.ylw.mmtr.or.jp/~jkondou/takara/rpgtakarasagashi.htm


暇だったので、ドラクエ9をやってみたが、作業の繰り返しで疲れる。


だが、作業をやり終えた時の達成感はある。


特に、ラスボスが急に強くなり、レベル上げとお金稼ぎが必要となって、はぐれメタル狩りで全員にパラディンのスキル100と、錬金でのゴールド稼ぎでドラゴンメイル、水のはごろもを装備させたら、受けるダメージは1程度、こちらの攻撃は200以上と一方的に倒すことができて楽しかった。


後はクエストと宝の地図だが、結構面倒だが全クリアを目指している。


1週1問づつ増やして、ステータスで達成履歴でもつけてみるか。



AD
いいね!した人  |  コメント(0)  |  リブログ(0)
2009-11-14 12:00:34

JavaScriptでGoogle Maps APIを挿入 クリックでイベント発生

テーマ:JavaScript

Googleマップサンプル集 でいろいろ遊んでみた。

マップをクリックすると、緯度、経度、ズームレベルが表示される。

作成したHTML文書はこちら
以下にソースの説明をしていきます。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Google map</title>
<script src="http://maps.google.com/maps?
file=api&amp;v=2&amp;sensor=false&amp;key=
ABQIAAAAJXYwFgs3R54rlXBVQrZ-
QRSQX0zcyHiuBBtvLf60RI8qT6jGRBQ
Gp1BCIcxnSAnD57RevlOVEHHbMQ"
type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
  var map = new GMap2(document.getElementById("map_canvas"));
  var x = 35.186225462776335;
  var y = 136.8989610671997;
  var z = 13;
  map.setCenter(new GLatLng(x, y), z);
  map.addControl(new GSmallMapControl());
  map.addControl(new GMapTypeControl());
  GEvent.addListener(map,"click", function(overlay,latlng) {
  ↑
  マップでイベントが起こったらfunction部分を実行。latlngには緯度経度、overlayはmarker、InfoWindow等(?)の情報が入る。mapをmarkerにすればmarkerでイベントが起こったら、clickをmoveendにすればmapの移動が終わったらと言う条件になる。


    if (overlay) {
      // ignore if we click on the info window
      return;
    }
    var tileCoordinate = new GPoint();
    var tilePoint = new GPoint();
    var currentProjection = G_NORMAL_MAP.getProjection();
    tilePoint = currentProjection.fromLatLngToPixel(latlng, map.getZoom());
    
    G.NORMAL.MAPは通常地図(G.SATELLITE.MAPは航空写真。G_HYBRID.MAPは地図+航空写真。)getProjectionで投影を手に入れて、fromLatLngToPixel(latlng, map.getZoom())で地図座標とズームレベルでピクセル座標を割り出す。
    戻り値はGPoint();になっているので、変数定義はvar tilePoint = new GPoint();とする。


    tileCoordinate.x = Math.floor(tilePoint.x / 256);
    tileCoordinate.y = Math.floor(tilePoint.y / 256);
    ↑
    tilePointにピクセル座標が入っているので256分割してタイル化(?)する。


    var myHtml = "緯度: " + tilePoint.x + "<br/>経度: " + tilePoint.y + "<br/>タイル座標は<br/> x: " + tileCoordinate.x + "<br/> y: " + tileCoordinate.y + "<br/>ズームレベルは " + map.getZoom() + "です。<br/>ピクセル位置は " + map.fromLatLngToDivPixel(latlng) +"<br/>緯度:"+latlng.lat()+"<br/>経度: "+latlng.lng();
    ↑
    表示されている地図を基点として地図座標からピクセル座標を割り出す。


    map.openInfoWindow(latlng, myHtml);
  });
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 500px; height: 400px"></div>
<p id=aa>a</p>
<p id=bb>b</p>
</body>
</html>

Google Maps APIリファレンス の読み方から理解しないといけない。。

難しいが、こういうものだと思ってやっていこう。。


詳細は下記を参照願います。

http://www.d3.dion.ne.jp/~jkondou/javascript/index.htm


PS.


宝探しゲームをアップしました。やってみてください。


http://www.ylw.mmtr.or.jp/~jkondou/takara/rpgtakarasagashi.cgi?hint=7




AD
いいね!した人  |  コメント(0)  |  リブログ(0)
2009-11-11 19:05:39

Google Maps API(グーグルマップ)を挿入するための準備

テーマ:JavaScript

Google MapはちょっとしたJavascriptを埋め込めば、簡単にホームページに導入できる。


ホームページに地図があって、来て欲しい場所にマーカーをつけておけば、アクセス情報を分かりやく提供できる。


まずは、準備編として、ホームページを書きましたので、そちらを見てください。


http://www.d3.dion.ne.jp/~jkondou/javascript/1.htm


DOCUMENTタイプをXHTMLに準拠させなければならない、文字コードをUTF-8にしなければならないと言うGoogleの制約はあるが、ほとんど枕詞なので、それさえ追加すれば、簡単に導入できる。


試してください。



PS.


謎解き宝探しゲームも6問まで作成した。


ヒントは歴史物ばかりであるが、試しに遊んでください。


http://www.ylw.mmtr.or.jp/~jkondou/takara/rpgtakarasagashi.htm




いいね!した人  |  コメント(0)  |  リブログ(0)
2009-11-07 16:05:43

宝探しゲームをJavaScriptで作成(Google Maps API)

テーマ:JavaScript

最近、JavaScriptゲームにはまっている。


GoogleがいろいろなAPIを公開しており、Googleマップを無料で使用できる。


Googleマップを使用して、宝探しゲームを作成したので、試しに見てください。


http://www.ylw.mmtr.or.jp/~jkondou/takara/index.htm

http://www.ylw.mmtr.or.jp/~jkondou/takara/rpgtakarasagashi.htm


JavaScriptもいろいろ勉強したので、作成方法等、書いていこうと思います。

いいね!した人  |  コメント(0)  |  リブログ(0)

AD

ろいた

Ameba人気のブログ

Amebaトピックス

      ランキング

      • 総合
      • 新登場
      • 急上昇
      • トレンド

      ブログをはじめる

      たくさんの芸能人・有名人が
      書いているAmebaブログを
      無料で簡単にはじめることができます。

      公式トップブロガーへ応募

      多くの方にご紹介したいブログを
      執筆する方を「公式トップブロガー」
      として認定しております。

      芸能人・有名人ブログを開設

      Amebaブログでは、芸能人・有名人ブログを
      ご希望される著名人の方/事務所様を
      随時募集しております。