--------

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
2011-10-24

入力と出力回りを実装~


仕事があって、土日そんなに進まなかった・・・

土日で出力周りと入力周りを実装しました。

出力部分、これも前回のゲームループ実装と同様に予想外に苦労しました。
最初はC#のコンポーネントを操作するノリで
var piyo = document.getElementById("text00");    //text00は段落<p>
piyo.title = "あいうえお"; // C#のtextコンポーネントとかはこれで表示できてたw

ってやってみたけど何も表示されず、

var piyo = document.getElementById("text00");    //text00は段落<p>
var textNode = document.createTextNode( "あいうえお" );    //! テキスト用のノードを作成
piyo.appendChild(textNode);    //! piyo要素の子としてノードを追加

ってやってみたらうまく表示されました。

でも、いちいちテキストを取り扱うのにツリーの操作するのは
面倒なので他の方法を模索していたところ
エレメントの.innerHTMLパラメータに文字列を設定すれば
うまくいくことが分かりました。

どうやら、innerHTMLでHTMLのソースを書き換えられるみたいで
一番簡単なやり方っぽいです。
<p id="text00">[ここを書き換えられる]</p>

入力周りは、imageのonclickイベント用の関数を作ったら終わった・・・
なぜか、styleを設定しなければ座標移動とかしてくれなかったぞなもし
<img id="img00" src="img.gif" style="position:absolute" onclick="onPushImg(0)">


次はゲームフローを作ります。
だいぶ残念なソースになってますが、次から途中経過をどっかにあげてみます。

theme : JavaScript
genre : コンピュータ

2011-10-22

ゲームループ実装でけた

9leapsの投稿に向けて引き続きJavaScriptのお勉強
残り二日(笑)

予想外に苦労したのはゲームループ部分実装
適当にsleepとか入れてwhileでループ回せばいけるだろうと思っていたら
JavaScriptって基本的に永久ループは無しの設計になっているみたいで

while(1)
{
~ゲームコード部~
}

なんて書いてしまったらブラウザに更新が入らず、永久ループ余裕でした。

setTimeoutってのを使うといいって聞いたので

function hoge(){
~ゲームコード部~
   setTimeout( "hoge()", 1000 );
}

って書いてみたらこれまた永久ループ。

よーわからんので、グーグル先生のお力を借りたところ
usamimi.info/~ide/programe/jshooting/jsprogramming.pdf
でなにやらゲームループについて書いてあったので参考にしました。

結果はこんな感じでうまくいきました。
this.timerId = setTimeout("",0);
this.run = function() {
    this.core = function() {
        clearTime(this.timerId);
        this.timerId = setTimeout( fuction() {
              ~ゲームコード部~
        setTimeout( arguments.callee, 100 );
      }
   }
}


つぎは入力周りを実装せねば・・・

theme : JavaScript
genre : コンピュータ

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。