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

 クイズを作ったので、今度はゲーム作成に挑戦してみた。
クイズと違いゲームとなると、ある程度、動きのある
コンテンツ作成ということになる。

この時点でJavaScriptを使用しているページは、殆どがVer1.1で
新しい規格のVer1.2を扱うページは少なかったし、
見る人が使用しているブラウザも、
Ver1.1しか対応していなものが混在していると思われるし、

そもそもV1.2は難しそうだし
で、Ver1.1で作成することに。

V1.1で作るとなると、そんなに凝ったことは出来ず、
単純にアクション系のゲームがいいかなと。
どうせ作るのなら、野球関係のゲームにしよう。

ということで、頭に思い浮かんだのが「もぐらたたき」。
でも動画的なことは、とても無理なので、
叩くのは、マウスでクリックすればいいので、
そうすると、単純にボタンをクリックすればいい。

で基本構成は、ボタン内に表示する文字列を制御すれば
OKかなと。これであとは、ゲーム性を持たせて
遊んでくれる人が、熱くなるような肉付けをすればよい。

ということで、応援チームとそれ以外のチーム名を表示させ、
他のチーム名をクリックすれば得点し、応援チームを
クリックすると減点。さらに監督をクリックすると
さらに+何点、または−何点が与えられるようにした。

さらに応援チームをクリックすると、減点に加え、
ペネルティとして、数秒間、クリックできなくした。
「クリックもぐら」と命名し公開した。

ゲーム作成自体は、タイマで制御すればいいので単純。
ところが、NetscapeとIEでボタンの表示のされかたが違う。

IEだとボタン内に表示する文字列により、
ボタンの横幅が可変になる。

まあ、勝手にゲーム的には難しくなってるんだけどね。^^);;

それと、Mac使いの友達にMacで試してもらったら、全く動かないようだ。
状況がわからないので、対処のしようがない為、
JavaScriptの大家に質問したら、
どうもMacじゃ動作しないようで、別な手段で作成することに。

それは、ボタンの変りにボタン画像を表示し、
画像内でマウスイベントを取得する方法に替えたが、
こちらはこちらでマウスの表示が変るし、
クリック抜けもあるしで、積極的な公開は諦めました。

拍手[0回]

PR

 JavaScriptに出会った事で、まず思い付いたのがクイズ。

横浜ベイスターズに関したいろいろなクイズを出して、
それに答えてもらうベイスターズクイズ。

 さらに、単なるクイズでは面白くないので、
昔TVでやっていた、クイズタイムショックのように
時間制限でクイズを出題して行き、これに回答する
クイズ・タイムdeショット。

 さらに横浜ファンの度合いをチェックする、
ファン度チェック。

まずは、この3コンテンツを、一気に企画して作り上げた。
内容自体は、JavaScript1.1で出来るものなので、
そんなにプログラム自体は大したものではない。

ベイスターズクイズは、

FORM内のラジオボタンで選んだものを取り出して、
それが答えと合っているかを判断して、
結果をアラートで表示するだけ。

これは1日で出来て、問題文を考える方が大変だった。

タイムdeショットは、

60秒間の時計を表示させるのがメインのもの。
これは画像を単純に入れ替えるだけなので、

これも3日ぐらいで出来た。
こちらも問題を沢山作るのが大変だったですね。

ファン度チェックは、

これもFORM内のラジオボタンで選んだものを取り出して、
その選択内容により、どのランクに属するかを予め用意した境界値から判断して、
判定結果を表示するだけなので、

これも1日で出来た。
こちらも問題文を何にするかで悩みましたね。

なので、2週間も掛からずに出来てしまいました。

拍手[0回]

 まずは、JavaScriptで何が出来るかを、買ってきた本の例を
実際にHTMLソースに入力して、ブラウザで動かしてみた。

まずは、アラート。

おお、「Hi,こんちにちわ」と出るね。

これHTML文に単に数行追加しただけ、あとは保存して表示しただけ。

 普通プログラムというと、ソース書いて、コンパイル・リンクして、
実行させてと大変な作業が待っているが、

ことJavaScriptは、
HTML文を表示するときにブラウザが勝手に解釈して実行してくれるので、
使う側からすると
とっても使いやすいプログラム言語です。

 ただ、普通の人には、難しいかもね。
なにしろ、基本はプログラム言語であるC言語なので、
C言語をある程度書いた経験がある人でないと、
使いこなすのは大変です。

 その他にも、ボタンを配置して、それを押すことにより
例えばアラートを表示するとか、簡単にできた。

そうなると、画像を表示させるときも、その画像を違うのに
置き換えて表示させたり、ユーザが選んだ番号を知ったりと
いろいろできることが分かった。

これは使えるね。

拍手[0回]

 ここで、何しろJavaScriptと言っても、
昔カジッた程度なので、
要するに内容見ても分けが分からない。

そこで、まずはJavaScriptの本を買った。

JavaScriptに関する本は、
大きく分けて

  制御コマンド(プロパティ、オブジェクト等)を
  ひとつひとつ説明している本と、

  実際の使い方の例を挙げて、これの解説をしている本

の2つがあるが、

なにしろ直ぐ作りたいという状況なので、
コマンドの解説本より、使用例を解説した本の方が、
どうやって作るのか、必要なものは何?
といった基本的な疑問まで書いてあるので、
これはすぐ役に立ちそうだ、ということで解説本を選んだ。

この解説本の中でも実に知りたいことが的確に書いてあった
「だれでもカンタンJavaScriptサンプル集」を買った。

注1)この本の著作者が、後のゲームでお世話になる高橋登史郎さんでした。

注2)JavaScript作成に必要なものは、以下のものだけです。
   秀丸のようなテキストエディタ。
   コマンドを解説した本またはWebサイト

拍手[0回]

 段々年数が上がる度に、年毎のコンテンツが多くなり、
そのリンクを並べて表示していては煩雑になるので、
プルダウンメニューに表示して、それを選択したら
選択したコンテンツのページに飛ぶようなことができないか
探していたら、

 ありました。

なんと、JavaScriptでこれが出来るようです。
それも1行書くだけで出来てしまう。
そのHTML文見ても、よく分からない。^^);;

昔、といっても2年程前に、まだLiveScriptと呼ばれて
いた時に、HTMLの本で見たことがある。
この時は、document.write文しか出来ないと思ってたので、
カレンダなどをページに表示することはやったことがある。

そこで、JavaScriptなるものを調べたら、
なんとそのLiveScriptと同じで、いろんなことが出来る
ことが分かった。まさに目からウロコですね。

そこで、これを使うと、今まで考えもしなかったことが
出来てしまうのではと、いろいろ頭の中をコンテンツが
まわり始めました。

拍手[0回]

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

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