前回記事
https://simblo.net/u/Nz7RmE/post/457242
前回の作ったファイルに続けて書き込んでいく感じになります。

今回はタッチ（クリック）処理です。
プレイヤーの行動が反映されるとちょっとゲーム感が出てきます。

タッチ処理 #

前回やったtimer処理の上のあたりにある
hokug.touchDown
hokug.touchMove
hokug.touchUp
を使います。

タッチした場所に文字を移動する #

変数とか他の処理は前のままにして
hokug.touchDown = function(x,y){}
に書き込んでいきます。

ここはタッチ（クリック）した瞬間に行われる処理です。
タッチとクリックの判定はhokug内で自動でやってくれています。

x,yは特殊な変数です（引数と言います、詳しくはry）
function(x,y)の部分で設定したことになっているので新たに宣言する必要はありません。
このx,yにはタッチした位置のx,y座標が入るのでそのままtextX,textYに入れます。

hokug.touchDown = function(x,y){
	textX = x;
	textY = y;
}

これだけでタップした場所に文字列が移動します。簡単です。
これをhokug.touchMoveのところに書けばドラッグすると着いてくるようになります。
hokug.touchUpのところなら離したときの座標に移動します。


文字列がはみ出す位置をタップするとブルブルすると思いますがこれは移動量に-1を掛けても反転位置の判定から外れないので毎回反転してしまうためです。

余裕があったら反転処理の前にはみ出ていたら枠内に戻す処理を入れてみてください。

ランダムで色を変える #

タップするとランダムで色も変わるようにもしてみます。
変数指定の場所に色の設定を3つくらい追加しましょう。

let textColor〜の下に追加です。

let textColor1 = new hokug.Class.Color(0,200,0,1);
let textColor2 = new hokug.Class.Color(200,0,0,1);
let textColor3 = new hokug.Class.Color(200,200,0,1);

もちろん色は好きに設定してください。

タッチ処理の部分に追記して行きます
javascriptの乱数はMath.random()というのを使います。
0〜1未満（0.999...)の小数が出ます（0は含む）。

変数に入れて分岐判定に使います。
ついでに分かりやすく整数に直します。
任意の数をかけてMath.floor()という文で小数以下を切り捨て。

Math.floor( Math.random() * 3);
これで0,1,2の3つの数がランダムで出ます。

let random = Math.floor( Math.random() * 3);
if(random == 0){
	textColor = textColor1;
} else if(random == 1){
	textColor = textColor2;
} else {
	textColor = textColor3;
}

条件判定で等値を表す場合は==です。

textColorは文字列の色を設定している変数なので別の色を入れてやれば表示色を変更できます。

関数を作ってみる #

モニスクで乱数はrand[最小値,最大値]で取得できました。
関数を使えば同じように書けるので作ってみます。
自作のコマンドみたいなものです。

ファイルの1番下にまとめときます（別に上の方でもいいですが）。

function rand(min, max) {
	return Math.floor(Math.random() * (max - min + 1)) + min;
}

「javascript 乱数 整数で」とか検索すると出てくるやつです。
そのまま使っちゃいます。

使うときはrand(最小値、最大値）で使えます、モニスクっぽくなりました。

乱数取得するところを関数に換えてみます。
let random = rand(0,2);
です、楽ちんです。

終わり #

関数を使い始めるとプログラムっぽくなって楽しい気がします。
説明あんまりしてないので詳r

タッチした場所に移動する処理を関数化してtouchDownとtouchMoveに入れたりとかしてもいいかもしれません。

次で少しゲーム要素をいれてみます。