Skip to content

shi3z式ゲームプログラミング #6 覚えておくといいテクニック

shi3zだ。
この短期集中連載。本当に短期に集中していて僕も驚いているが、ゲームを作るために必要な本当の意味での基礎の基礎は前回までで一通り教えたつもりなんだ。

でもねー、もちろんゲームとはそれだけでは完成しない。
それに、「ゲームっぽく作るなら○○がしたいんだけどどうすればいいんだろう」という疑問にも答えておきたい。

そこで今回はゲームを作る上で知っておくと便利な諸々の知識について紹介するぞ

続きは以下のリンクから

好きな画像を表示したい

タイトル画面やゲームオーバー画面、そのほか、キャラクターの画面とかまあいろいろと好きな画像を表示したいことはあるだろうね。

キャラクターの表示はImageクラスを使うと便利だけど、大きな画像を表示するにはあまり向いてない。
大きな画像を表示したかったら、いっそLabelクラスを使った方が早いぞ

function onLoad() {
    imageLabel = new Label(
        "<img src='http://wise9.tv/img/logo15.png' alt='' />",30,200); // A src=のあとに画像のURLを書いている

}

このシンプルなコードを実行するとこんな感じ

どう?
便利でしょ。

ちなみにブラウザ上で画像を右クリックして「イメージのアドレスをコピー」すると、画像のURLを簡単に取り出すことができる。

これさえ知っていればなんでも自分のプログラムに登場させることができるぞ。
また、PC側に保存されている画像を使いたい場合は、imgフォルダにコピーして"img/ファイル名"として呼び出すか、gyazoというソフト(http://gyazo.com/ja)を使うとPC上にある画像を瞬間的にアップロードしてURLを発行してくれるぞ。

ボタンを出現させてユーザに押させたい

ボタン、いわゆるを出したいこともあるだろう。
これを押させてゲームを進行させたいこともあるに違いない。

これもLabelクラスを使えば瞬間OKだ。

callback = function(name){       //Aコールバック関数を定義
  alert(name+"がおされた!");
};

function onLoad() {
    buttonLabel = new Label(
    "
<input onclick='callback(¥"
りんご¥")' type='button' value='りんご' />"+ //B りんごボタン
    "
<input onclick='callback(¥"
みかん¥")' type='button' value='みかん' />"   //C みかんボタン
    ,30,200);

}

Aでクリックされたときに実行されるコールバック関数を書いている。
コールバック関数は大人の事情で変数のように書いているが単なる関数宣言であることに変わりはない。

さて、BとCではHTMLでラベルに直接ボタンを出現させている。

このHTMLに注目してみよう。

"<input type=button onclick=callback('りんご') value='りんごボタン'>"

これ、いくらかは解説が必要だろう。
<input>タグは、お察しの通り、なにかを入力してもらうためのタグだ。
そこにtype=buttonという文字列を付け加えると(これを属性と呼ぶ)、ボタンになる。試しに「type=text」に変えるとテキストボックスになってしまう。

続くonclick=では、お察しの通りコールバック関数を指定している。
ここで注意したいのは'りんご'と「"(ダブルクオーテーション)」ではなく、「'(シングルクオーテーション)」で囲んでいるところだ。

実はJavaScriptではダブルクオーテーションとシングルクオーテーションは同じ意味である。
ではなぜ同じ意味の記号が二種類混在しているのか?

それはまさしくこのような場合のときに使う。
よく見てほしい。「<input type=button」から始まる全体が「"(ダブルクオーテーション)」で囲まれていて、callbackの後に続くパラメータ列の'りんご'だけがシングルクオーテーションで囲まれている。

こうすると、シングルクオーテーションでくくった部分も含めて全体をダブルクオーテーションで囲むことができる。

このテクニックを使わないとプログラムはおかしくなってしまうから注意が必要だ。
さらに、つづくvalueでは、実際のボタンに表示される文字を指定している。

これで「りんごボタン」を押すとcallback関数に「りんご」というパラメータが渡されて「りんごがおされた」とアラートが表示されるというわけだ。

ボタンはLabelに書いてあるので、Labelを動かすことも出来る。
Labelを動かすには以下のようにする

callback = function(name){
  buttonLabel.setXY(rand(320),rand(480)); //A ラベルを移動
};

function onLoad() {
    buttonLabel = new Label(  // ↓onclickのかわりにonmouseoverを使用
    "
<input onmouseover='callback()' type='button' value='押して押して' />"
//B
    ,30,200);
}

ボタンを押そうとしてマウスカーソルを近づけるとランダムにワープして逃げるラベルができあがった。

ラベルの移動はsetXY関数を使う(A)。
クリックしたら逃げる、ではつまらないので、Bの行では、onclickのかわりにonmouseoverを使っている。
これでボタンにマウスが重なっただけでワープするようになる。

これ、やってみると意外と面白い。

簡単なゲームを作ってみる

今回学んだことをもとにして簡単なゲームを作ってみます。

function onLoad() {
    titleLabel = new Label("
<h1>ハイ&ロー</h1>
"
+
                        "1から13までのランダムな数をひきます
"
+
                        "7より大きいか小さいか当てて下さい
"
,60,100);

    answer = rand(13);//答えを先に求める

    buttonLabel = new Label(
    "<input onclick='high()' type='button' value='ハイ' />"+ //ハイかローかあてさせる
        "<input onclick='low()' type='button' value='ロー' />",80,250);
}

high = function(){
    titleLabel.node.innerHTML = '答えは・・・'+answer+'でした';
    if( answer > 7){
        titleLabel.node.innerHTML += 'あたりです';
    }else{
        titleLabel.node.innerHTML += 'ハズレです';
    }
};
low = function(){
    titleLabel.node.innerHTML = '答えは・・・'+answer+'でした';
    if( answer < 7){
        titleLabel.node.innerHTML += 'あたりです';
    }else{
        titleLabel.node.innerHTML += 'ハズレです';
    }
};

実際に入力して遊んでみてね。
非常に単純ですが、一応ゲームっぽくはなってるよ。

練習問題もやってみて。

練習問題

1)ハイ&ローゲームのあたりとハズレのメッセージを変えてみよう
2)ハイ&ローゲームのタイトル部分にトランプの画像を出してみよう
3)スコア表示をつくり、連続で正解したらスコアが倍々で上がっていくようにして、外れたらスコアが0になるようにしてみよう

このエントリーをはてなブックマークに追加
はてなブックマーク - shi3z式ゲームプログラミング #6 覚えておくといいテクニック
Post to Google Buzz
Share on GREE

Related posts:

  1. shi3z式ゲームプログラミング #5 Twitterと連携だっ!
  2. shi3z式ゲームプログラミング入門 #4 バナナと配列
  3. shi3z式ゲームプログラミング入門 #3 “ゲームらしく”する
  4. shi3z式ゲームプログラミング入門 #2 あと48時間でゲームプログラマになる方法
  5. shi3z式ゲームプログラミング入門 #1 72時間でゲームプログラマになる方法

Facebook comments:

Post a Comment

Your email is never published nor shared. Required fields are marked *
*
*