ぼくの息抜き

ぼくの息抜き

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

CSS MenuMaker

考えて理解しよう!ボタンを押して数字が増えるように【0からゲーム作成日記第五回】

 f:id:bokunoikinuki:20170413180107p:plain

 

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

プログラミングを知らなくても数日でゲームが作れる!

5年以上放置ゲーム作りたくても勉強が続かなかった自分が、なんと!少し教わってからたったの数日で普通に遊べる放置ゲームを作ることができた!

ぜひこの感動をみんなにも感じて欲しい!放置ゲームは想像以上に簡単にできるよ!

第一回の記事は↓

今回はボタンを押した時に数字が増えるようにする。ボタンに連動して数字が増えていくとグッとゲームっぽくなる。

今回の内容

  • 数字を表示させる
  • ボタンを押した時に数字が増えるようにする

下の画像が完成時のイメージ

f:id:bokunoikinuki:20170413170843p:plain

今日から質問形式でまとめることにする。

なぜかというと

考えることでプログラミング力が上がるからだ。

プログラミング初めたばかりで一丁前なこと言っているが、実際そうだと思う。

ぜひ考えて見よう!最後にいつものように答えを載せる。

考えて見よう!

ヒント1:好きなところにテキストを表示する

下の黄色のコードがテキストを表示する魔法の言葉だ。

var APP = {
(中略)
update: function(age){
unitaro.dib.box(0,0,this.WIDTH,this.HEIGHT,"rgb(40,40,40)");
unitaro.dib.textout(50,20,"minimum sample","yellow",100);
},
(中略)
};

この黄色い魔法の言葉を使ってすでに表示されている。

f:id:bokunoikinuki:20170413173228p:plain

これを数字で表示すればいいわけだけだ。

だが、数字はボタンを押した時に増えるようにしなければならない。ただのテキストではない。

ヒント2:変数を使おう!

変数とは箱のようなものだ。数字や文字といった情報を入れる箱だ。

詳しく説明できる気がしないのでよくわからない場合はこちらを参考にして欲しい。

JavaScript_変数

箱を作る

<body>
<script>

var num = 1;
var PLAYER={

<script>以下に赤字の部分を追加する。これでnumという箱に1という数字が入った。

これとテキストを表示する魔法の言葉を使って箱の中の数字を表示する。

ヒント3:テキストではなく箱を表示するには""はいらない

ヒント4:ボタンを押した時に箱の中の数字を増やす

num += 1;という魔法のコードでボタンを一回押した時にnumの数字を1増やす。最初が1なら2になる。

+= などの演算子についてはここがわかりやすく参考になる。

JavaScript_演算子

num += 1;という魔法のコードをどこに入れるか。

ボタンを押した時に白い点が増えるコードはどこにあるか。めちゃくちゃヒントだ。

答え

まずは変数varを追加。

<body>
<script>

var num = 1;

次にテキストを表示する魔法で変数を表示するにはこうする。赤文字を追加。

var APP = {
(中略)
update: function(age){
unitaro.dib.box(0,0,this.WIDTH,this.HEIGHT,"rgb(40,40,40)");
unitaro.dib.textout(50,20,"minimum sample","yellow",100);
unitaro.dib.textout(70,55,num,"white",100);
},
(中略)
};

赤文字を追加すると1という数字が表示されるようになる。70,55というのは座標でx,yだ。ここを変えることで好きな場所に数字を表示することができる。

きちんと表示されることが確認できたら次。

ボタンを押した時に数字が増えるようにするには赤文字を追加する。

var APP = {
(中略)
onclick: function(x,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);
num += 1;
}
},
};

これで擬似ボタンの横に数字が表示され、ボタンを押した時に数字が増えることが確認できると思う。

今回はここまで!すぐにはわからなかった人も気にしないで大丈夫だ!少しずつ学んで自分のものにしていこう!

間違っている部分やわからない部分があればコメントをどうぞ!

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

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