スポンサーサイト

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

Gooブログでゲームシリーズ その4 イベント処理の記述

 マウスが押されたり、クリックされたりすることをイベントといいますが、それによって行われる処理を記述することによって、対話型の画面が出来上がります。

 ここでは、その処理についてかいてみたいと思います。

 Javascriptのスクリプトは、HTML文のヘッダー領域に記入されるのが普通です。そこでは何行にもわたるスクリプトがかけて、いろいろなところから参照できる変数(グローバル変数という)も定義できます。しかしフリーのGooブログではHTML文を書き換えることが出来ません。そのため、イベントの処理でスクリプトを記述するしかありませんでした。

 ところが私はつい最近になるまで、Gooブログ投稿上のonclickなどのイベントで記述できるスクリプトは一行だけと思っていました。一行というよりひとつの処理だけと勘違いをしていました。またほとんどのサンプルは、そうでした。

 もしかしてと思い、複数のスクリプトを一行の中に入れてみますと、考えれば当たり前なのですが、ちゃんと実行してくれるんです。たとえば下のような処理を記述してみました。このalert命令は、テキストとして囲まれたものを、ウインドウの注意喚起メッセージとして表示するものです。

 onclick="alert('最初の処理');alert('2番目の処理');alert('3番目の処理');"

そうすると、きちんと3つのウインドウが順番に表示されました。
これが出来るなら、いろいろなゲーム的なものができると思ったわけです。

 しかし、変数がタグの中だけにしか記述できないために、クリックするたびに同じ処理しかできないという問題にぶつかりました。そのために最初に思いついたのが乱数をスクリプトで発生させて、その数値によって処理を振り分けるということです。今日はその乱数をつかった処理について書いてみたいと思います。

乱数を発生する関数は以下のように記述します
   Math.floor(Math.random()*[発生する乱数の数]);

さいころを念頭にいれて、
     0から5までの整数をランダムに発生させるには
   Math.floor(Math.random()*6);

ということになります。

そこで次のような赤い矩形をクリックすることによって乱数出力の処理が記述できます。
<<div style="width:50px;height:50px;background-color:red;" onclick="saikoro_num=Math.floor(Math.random()*6);alert(saikoro_num);" ></div>>

<
>


これができれば、乱数の数字に応じて、条件分岐の式を記述してクリックするたびに異なった6種類の処理が可能です。
この応用は、さいころに使ったり、おみくじに使ったり、Gooが使ってりうランダムリックに応用したり、さまざまな利用法があります。

条件分岐のやり方については次回に譲ります。







コメントの投稿

非公開コメント

FC2カウンター
プロフィール

dongwcat

Author:dongwcat
FC2ブログへようこそ!

最新記事
最新コメント
最新トラックバック
カテゴリ
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

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