忍者ブログ
[1] [2] [3] [4] [5]

公式戦の開幕に向けて以下のコンテンツをJavaScriptで作成した。

勝敗グラフ

  ・例えば○●△雨だけ入力すれば、自動折れ線グラフを
   作成するJavaScriptアプリを作成する。

  ・当初EXCELや、グラフソフトとかでグラフ書いて、
   それをGIFに落としてUPしようとか考えたけど、
   時間掛かるし、そもそも140試合全部を
   表示してGIFに変換しようとしても、
   数試合分がなぜかカットされる。^^);;

  ・なので、JavaScriptで作成する無謀なことを考えた。
   この折れ線グラフをJavaScriptで書いてあるページは
   探したけど無かった。そこで、どうやってやるか考えて、
   思いついたのが、単純にグラフをGIF画像に分解して、
   GIF画像をタイル式に貼り付けて行く形態で作成。

  ☆その後、これだとグラフ以外の隙間も空白画像で埋める
   ので表示時間が物凄く掛かるため、
   ダイナミックHTMLでグラフ部分のみ画像を配置する
   ように書き直した。

  ☆さらに直線部分を図形用のVMLで描画するバージョンも
   作成したが、こちらはIE専用ということもあって
   未公開のままですね。

拍手[1回]

PR

 Geoの掲示板設置でいろいろ苦労していた時に、
ふと思いついたんですが、もしかして、この掲示板で
リアルタイム性のあるアンケート、いやクイズ的なものが
出来るんじゃないかと。

すなわち、普通のアンケートCGIだと、データをサーバ
に蓄えて、サーバのデータを元にアンケート結果を表示するが、
さすがにGeoはCGI使用を許していないので、これが出来ない。

しかし、書き込み後のHTML内にINPUTタグでHIDDENタイプに
して選択値をVALUE属性に書き込んでおけば、
それを元にJavaScriptで集計し、
その集計データをグラフ化が出来そうである。

この思い付きを具体的にやってみました。
初めは苦労したが、基本が出来たら、あとは飾り付けるだけ。
ということで、一気にリアルタイムクイズを作っちゃいました。

あとは盛り上がりそうな内容の問題文を考えて公開した。
そしたら、掲示板は書き込みゼロだけど、こちらは
反応早かったですね。皆さん結構答えてくれました。

やはり掲示板となると、書き込みは敷居が高いようですね。
クイズの方は、自分のコメントとか書かないため、
気楽に書き込みできることが、反応が良い点かな。
ゲームの方も、そういう点でアクセスがありますね。

拍手[0回]

 ゲームとか作り始めて行くと、大きな問題にぶち当たりました。
それは、JavaScriptのバージョンで、
このバージョンにより出来る機能が違ってる。

すなわち、Ver1.1以前であれば、レイヤ機能がないので
画像を細かく動かして操作するようなゲームは出来ない。
これが出来るのがVer1.2以降なんだけど。

このバージョンは、ブラウザのバージョンに依存してる。
すなわち、NetscapeもIEも、最新のVer4以上でないとレイヤ機能は
使えない。

ということで、
今までは、ブラウザも古いバージョンのものを
使ってる人もかなりいるだろうな、ということで、
JavaScript Ver1,1の機能で可能な範囲しか考えていなかった。

ところが、当サイトのアクセス解析を行った結果、
IEが約70%、NNは約30%、

でブラウザのバージョンも
最新のバージョンが、約70%と高かったので、

うーーん、これは、このままJavaScript1.1にこだわって、
新しい機能を捨てるのは、もったいない環境だということが
分かった。

確かに、まだ古いバージョンを使っている人もいるが
これらの人は、PC買い換えたり、ブラウザの最新版も
雑誌にCDで添付されてるし、最新の環境にバージョンUP
することは、そんなに大変なことではない。

また、JavaScript1.1で使えるゲームは既にあるし、
今後は、JavaScript1.1でゲームを作ることは、
ネタ的にも、あまりなさそうだし。

ここは、こだわりを捨てて、新しいバージョンへジャンプ
した方がよさそうである。

ということで、今後はJavaScript1.2前提で作成していく
ことに決めた次第です。

拍手[0回]

 JavaScript1.2で作成することを決めてから、
レイヤの勉強を始めた。

 で、作成する基本は、
IEでもNetscapeでも動くことが前提。

これは、IEより自分としてはNetscapeの方が好きだったこともあるので、
IE自体の方がユーザは多いけど、やはりNetscapeを大事にしたかったので。

で、まずは、ローズジャンプもある「カラオケ応援歌」を作った。
これは、歌詞をリズムに合わせてカラオケのように文字の色を変えていく、
そして、同時にてんてん丸が応援バッドを叩くというもんだけど、
まあ、なんとか面白いものが出来た。でも音がないんでね。^^);;

でも応援歌は選手毎にたくさんあるので、それらは、
ひらがな歌詞、歌詞の時間間隔、応援バッドの動作をコマンドとして
書いておき、それを読み込ませて、動作させるものにした。

で、このコマンドを作るのが大変なのよね。
いちいち歌いながら、作ってくんだけど、1曲1時間はかかるね。

でも、これは、後である事情により削除しました。T T);;;

拍手[0回]

 次に、ゲームに挑戦ということで、何をやるか考えたが
当然野球関係のゲームを前提として、なにしろ、ちまたに
あるゲームやプレステのゲームを見ていると、
上下左右のボタンで操作するので、実際のイメージと
全くかけ離れたゲームの操作性になっている。

これが気にくわなくて、どうしたら実際と同じような
イメージのゲームが出来るか考えていたら、結論として
やっぱマウスで操作するのが、一番しっくりくることに。

というわけで、マウスで野球ゲームということで、
まずは、ノックのイメージが湧いたので、これを作ることに。

基本は、マウスをグラブにして、ボールを投げて、
それをグラブを動かしてキャッチする。

で、グラブを動かすのに、どうしたらイメージ通りか考えて
普通ゲームで使われている、マウスを動かして、
キャッチするときにクリックする方式だと、
キャッチする感覚がなーーーーーーい。

そこで、逆にドラグしながら動かして、キャッチする時に
マウスを離す方式だと、イメージにぴったりということで、
この方式で作成することにけってーーーーーい。

ということで、基本構成が決まったので、まずは、
マウスをドラグしてボールを掴むところを作ったが、
これが思うようには行かない。

 JavaScript1.2の使い方もまだ修行中の身だし、
JavaScript1.2自体にも問題があり
それを回避する手段を考えなくてはいけないしと、
まあ、いろいろ試行錯誤もあり、なんとか基本形を
作った。でも疲れました。

基本形が出来れば、あとはゲーム性とか、表示の飾り
付けの部分は、既にYB関係のもので一応経験している
機能を使うので、単に作って行くだけのため、
スムーズに運んだ。

この辺の開発秘話はNGWサイトのメルマガに書きました。

ということで、ゲームの名前は「1000本ノック」に。
そしてノッカーは、デザインの才能がないので、適当に
作ったけど、髪の毛なんか小さなマスにデザインするの無理だよ
ってことで、いっそハゲにしちゃいました。
そしたら、顔は似てないけど、誰かさんみたいになっちゃった。^^)

そして、Webの仲間や友人に頼んで、テストしてもらい、
まあ、なんとかまともになったので、JavaScripゲームの普及作成支援を
行っているNGW(New Game Web)に登録しました。

まあ、このような絵を使った動きのある本格的なゲームは初めてだったけど、
出来としては単純で分かり易いのが出来たんじゃないかと、
まあ、自分なりに満足したかな。。。。

拍手[0回]

忍者ブログ [PR]
カレンダー
02 2024/03 04
S M T W T F S
1 2
3 4 5 6 7 8 9
10 11 12 13 15 16
17 18 19 20 21 22 23
25 26 27 28 29 30
31
フリーエリア
[-]最新トラックバック
プロフィール
HN:
7maru
性別:
非公開
自己紹介:

バーコード
ブログ内検索
[+]アーカイブ
アクセス解析