ティラノスクリプトでクリックゲームをつくってみた

*10/8 クリックの挙動を修正。パソコンからでも5000狙えるでー！

クリックゲーム……正式名称がよくわからないのですが、要するにマリオペイントのハエたたきです。驚異の中毒性で多くの子供たちの反射神経とマウスさばきが鍛えられたあのゲームです。もちろんそんな伝説のゲームの足元にも及ばないのですが、ティラノでそれっぽいものをつくってみました。

おばけアタック（仮）
http://nanayen.web.fc2.com/obakeattack/index.html

素材が使いまわしだったり動きがむにゃっとしてたりしますが、タグでここまで頑張ったでー！というのを見てほしかったのです。

遊び方は単純です。スタートを押すとゲームが始まります。ランダムに出現するおばけくんをバシバシクリックしていきましょう。ときどき反撃してきて、攻撃を受けると赤いゲージが減っていきます。このゲージが0になるとゲーム終了です。スコアが表示されますのでハイスコアを目指してリプレイするもよし、ツイッターで結果をつぶやくもよし。

わたしはパソコンからだと2500くらいが平均で、スマホからだと3000くらいが平均でした。やっぱりこういうゲームはタップとの相性がいいですね。

ちょこっと中身の解説をします。まずおばけくんがランダムに出現する、という部分。これはイラストを表示する座標を乱数にしただけです。

[eval exp="tf.乱数1 = Math.floor(Math.random() * 300 + 10)"]
[eval exp="tf.乱数2 = Math.floor(Math.random() * 300 + 10)"]
[image storage="obake.png" layer=0 left="&tf.乱数1" top="&tf.乱数2" name="おばけ" visible=true]
[kanim name="おばけ" keyframe="ふわふわ" time=2000 count=infinite direction=alternate]

キーフレアニメの勉強もいかしてふわふわさせてみたよ！おばけっぽいね！

[keyframe name="ふわふわ"]
[frame p=0% y=20]
[endkeyframe]

攻撃エフェクトは前回と同じです。あと体力ゲージも前回の使いまわし経験を活かしてanimタグでつくっています。

おばけくんはたまに反撃してくるのですが、これは出現してから攻撃するまで制限時間があるからです。制限時間内に攻撃できれば時間はちょっと回復し、攻撃できなければ反撃される、という仕様です。なのでタイミングよく連続で攻撃していくことがハイスコアを取るために大切になってきます。（最後の方は反撃が激しくなるのでほとんど攻撃できませんが……）

制限時間の実装は、かなり力業なのですが、waitタグと変数を利用しました。

*攻撃チャンス
[button graphic="toumei.png" target="*攻撃" x="&tf.乱数1" y="&tf.乱数2" clickimg="cursor.png" enterimg="cursor.png"]
[wait time="&tf.制限時間"]
[jump target="*時間減らす"]

*時間減らす
[eval exp="tf.制限時間 = tf.制限時間 - 100"]
[jump target="*時間判定"]

*時間判定
[if exp="tf.制限時間 > 0"]
[jump target="*攻撃チャンス"]
[else]
[jump target="*ダメージ"]
[endif]

なにをやっているのかわからないと思うが……自分でもわかってないんだ……。とりあえず制限時間が0以上のときのみ攻撃チャンスのラベルに飛んで、攻撃チャンスの時に敵シンボルをクリックしない限り時間を減らすラベルに飛ばされる、というのを繰り返しています。

たぶん普通にやるならティラノwikiさんに載っているjavascriptを使う方法のが簡単でスマートだと思います……タグだけでやることにこだわった結果めんどくさいことになりました。本末転倒ですね。

tyrano.wiki.fc2.com

このページの「選択肢に制限時間」の欄に載ってます。

このゲームのポイントはスコアをツイッターでつぶやけるシステムです。最近のブラウザゲームやスマホゲームには当たり前のように付いている機能ですが、プログラミングがさっぱりの自分がやろうと思ったらとてつもなく難しかったです。

ツイートボタンを設置するところまでは公式でもそういう機能があるので簡単だったんですが、今回はプレイヤーによって変動するスコアをツイートにねじこみたかったんですね。そうなってくるとさっぱりです。

で、色々調べてなんとなく希望通りの結果になったので実装してみました。ゲーム終了後に出てくる青いボタンをクリックするとスコアとゲームのURLをつぶやくためのウインドウが出てきます。

[html]
<a id="twitter_button" class="tweetbtn">結果をツイートする</a>
[endhtml]

[iscript]
//tf.scoreの値をvalに代入
var val = this.kag.variable.tf["score"];
//ツイートする内容をtweet_contentsに代入（日本語はUTF-8でURLエンコードする）
var tweet_contents = "おばけアタック（仮）のスコアは【" + val + "】でした！http://nanayen.web.fc2.com/obakeattack/index.html";

//ツイートボタンを押したときの動作
$('#twitter_button').click(function() {
// 新規ウィンドウを開く
window.open('https://twitter.com/intent/tweet?text='+tweet_contents);
});
[endscript]

いろんなやり方があると思うんですが、とりあえず動いたのでこれでいいのかなー。どうなのかなー。わかる人から見れば「なんでそんなことで悩んでるのん？」って感じだと思いますが、こうやってひとつずつ勉強していくしかないんですよね……。

参考：ツイートボタンのURLの作り方 | Kiteretsu Flash Blog

このゲームを元に、も少しボリュームアップさせたり動きを調整したりストーリーをつけたりして、ひとつのゲームをつくってみたいと思っています。もっといろんなことができるようになりたいなー。