ぼくの息抜き

読者です 読者をやめる 読者になる 読者になる

ぼくの息抜き

気ままな二人が記事を書くことで息抜きしていくブログ

CSS MenuMaker

擬似ボタン完成!指定の範囲をクリックした時に反応するようになるぞ!【0からゲーム作成日記第四回】

どーもねことあひる@Bokunoikinukiです。

前回の続き。擬似ボタンの枠を作った。今回は実際に押せるようにする。

データを持っていない場合はこちらから。

指定の範囲クリックのみ反応させる

var APPの中に黄色のコードを消し、赤いコードを追加。これで白い擬似ボタンを押した時に白い四角が増えるようになる。

var APP = {
(中略)
onclick: function(x,y){
new unitaro.Task(PLAYER,Math.random() * 300,( Math.random() * 400) + 50);
this.player.tx=x;
this.player.ty=y;
this.tx=x;
this.ty=y;
if (this.tx >= 110 && this.tx <= 210 && this.ty >= 40 && this.ty <= 60){
new unitaro.Task(PLAYER,Math.random() * 300,( Math.random() * 400) + 50);
}
},
};

 

きちんと白い擬似ボタンを押した時だけに反応することを確認しよう!

f:id:bokunoikinuki:20170411162824p:plain

好きなところに擬似ボタンを設置してみよう

var APP内onclickの

if (this.tx >= 110 && this.tx <= 210 && this.ty >= 40 && this.ty <= 60)

この数値を変えることでタッチ範囲を変えることができる。

ifの意味や&&などの意味が知りたい場合はこちらのページが参考になる。

JavaScript_条件分岐

おさらい

白い部分は下の赤い数値を変えると場所が変わる。ここを変えてもタッチの範囲は変わらない。

this.Button=new unitaro.Task(BUTTON,160,50);

左上が(x,y)=(0,0)だ。Yは下に行くと増える点に注意。

f:id:bokunoikinuki:20170411184518p:plain

タッチの範囲はこっちの数値を変えることで変えることができる。

if (this.tx >= 110 && this.tx <= 210 && this.ty >= 40 && this.ty <= 60)

わからない場合はぜひコメントで質問をどうぞ!

本気でプログラミングをするならこちらを利用するのもいい!

オンラインプログラミング研修のCodeCamp