人気記事

広告

記事検索

MOVION.netについて

WEB技術に関することや、気になるWEBサイトなどについて個人的なメモを残すためのブログです。

その他運営サイト

かかわっているサイト

2008年04月16日(水)

Ajax(Comet)対戦オセロゲームをApache&PHP&Javascriptで作成中

続・Ajax(Comet)対戦オセロゲーム 遊び方編 も参照してみてください。

ajax-reversi-01.jpg

http://play.ihihiworks.net/  (2012/4/24 AWSを利用)
※4人オセロゲームになっています。

※自宅サーバのため、常時稼働はしてません。たぶん12時~24時くらいは稼働させてます
※バグが多々多々あります。かつ、開発環境です。
※IEの場合ieerbugがでます。firefoxの場合FireBug入れてないといきなり変になるかも。

今さら感は否めませんが、Cometなオセロゲームを勢いで作成中です。

railthelloとかあったけど。オセロゲームなのは、Pontiyを作っててまんまオセロゲームの仕組みを使えたから。
どうせなんで、4人オセロとかに拡張しようかなぁとも思ってます。

でもって現実的にはやっぱり、FMSなりJavaアプレットなり使った方がよいなぁと。
jetty6もちょっとさわってみたけど、クライアント数が増えることを想定してないので、とりあえずApacheとPHPで実装中。
C10KいやC1Kどころか、C100にも耐えられるか謎です。

実装は、PHPだけでリアルタイムAJAXチャットシステムを構築する方法。
を参考にさせていただきました。

アクセス数さえ少なければ、負荷もたいしたことがないので、
レンタルサーバに設置しようかと思いましたが(こことか)、無限ループぽっくなったり、デットロックぽくなったり、怪しげな挙動をする可能性が高いので、現状自鯖です。
幾分、問題をなおしたものをここのサーバにも置いてみましたが、万一アクセスが多くなったら撤去します。

でもって、自鯖にしてるパソコンはどうも共振してあまりにうるさいので夜はshutdown -h nowしてます。
リンクつながらなかったらごめんなさいorz

て、このサイトで宣伝して人が来るとも思えませんが・・・。

参考:
おとこのCometアプリケーション! 非モテのためのJetty 6 Continuation入門まとめ(前編)
Lingr and Comet - 技術解説編(CNET Japan)

2008年02月17日(日)

GEvent.removeListenerで一時的にリスナーを消す

GoogleMapsAPIで、地図上にAjaxで動的なマーカーを表示する場合、
地図を移動したらマーカーを再度よみこみ直す処理をつくってみました。

が、マーカーにクリックイベントをつけて吹き出しを表示するようにすると、
場所によっては吹き出しを表示するときに地図が移動するので、
移動し終わった時にマーカーが再読込されて、吹き出しが消えてしまう問題が

他にもいい方法がありそうですが、とりあえずremoveListenerで一時的にリスナーを消して、
無理矢理問題解決してみました。
※追記:残念ながら、不具合があります。

removeListener部分を実装する前。

修正後。
一見同じですが、
秋田辺りにあるマーカーをクリックすると違いがわかると思います。


そのソースコードの抜粋。
実際の例は、このページを参照してください。12行目。addListener時に、消すリスナーを保持しておくために、
reloadMarkerEventで返値を受けておきます。

  1. var reloadMarkerEvent;
  2. function load() {
  3.         if (GBrowserIsCompatible()) {
  4.                 map = new GMap2(document.getElementById("map"));
  5.                 map.addControl(new GLargeMapControl());
  6.                 map.addControl(
  7.                         new GMapTypeControl(),
  8.                     new GControlPosition(G_ANCHOR_TOP_RIGHT,
  9.                     new GSize(10,10)));
  10.                 map.setCenter(new GLatLng(36.705663020513555, 137.76159691810608), 5);
  11.                 displayMark(map);
  12.                 reloadMarkerEvent = GEvent.addListener(map, "moveend", reloadMark);
  13.         }
  14. }

5~10行目。openInfoWindowHtmlの前にいったんリスナーを消してます。
openInfoWindowHtmlの後に、移動が終わったら再度Listenerを追加するようにしてます。

  1. function addMarker( map, p, text ) {
  2.         var marker = new GMarker(p);
  3.         var wattingEvent;
  4.         GEvent.addListener( marker, "click", function() {
  5.                 GEvent.removeListener(reloadMarkerEvent);
  6.                 marker.openInfoWindowHtml(text);
  7.                 var wattingEvent = GEvent.addListener(map, "moveend", function() {
  8.                         reloadMarkerEvent = GEvent.addListener(map, "moveend", reloadMark);
  9.                         GEvent.removeListener(wattingEvent);
  10.                         });
  11.  
  12.                 });
  13.         map.addOverlay(marker);
  14.         return marker;
  15. }