どーもねことあひる@Bokunoikinukiです。今回はunityはおいておいて、javascriptをいじる。
先日ブロガーの集まりではたぼー主催のプログラミング教室があった。
そこでプログラミング教室が開かれ、そこでもらった教材でプログラミングをやろうと思ったきっかけであるクリッカーゲームが作れるという。
早速作っていこう！(本当に作れるのかはわからない)
『出会えてよかった』
見出しがおかしい。しかし、はたぼー主催のプログラミング、いや、ブロガーの集まりが素晴らしいものだった。
だから、『出会えてよかった』
まぁその出会いについて書くと長くなるので、また別の機会にしよう。
その集まりでプログラミングも少し教えてもらった。
王様の教材が素晴らしい
教材として渡されたのが、unitaro.js
なんでunitaroなのか全然聞いてなかったが、気になる。
この教材を作ったのははたぼーの旦那さんの王様。
教材はここからダウンロードできる。
本題:早速ゲーム作っていく
このunitaro.jsのファイルの中の『sample-minimum』をchromeで開いてもらうとすごい単純な動きをする。
(ちょっとgifを作るのが面倒だったので、スクリーンショットで)
左右のみ動くのだ。
赤い四角より右にクリックしたら右に、左にクリックしたら左に
これに色々追加して擬似クリッカーゲームにしていく。
クリックしたら増えるようにする
クリッカーでは左右に動く必要はないので赤には止まっていてもらう。下記の太字の部分をなくすと止まった。
var PLAYER={
(中略)
update:function(){
if (this.tx < this.x){
this.x -= 1;
}
if (this.tx > this.x){
this.x += 1;
}
},
};
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;
}
};
気持ち悪いことこの上ない。小さくして色を変える。 太文字の部分を変えると変わる。
var PLAYER={
w:20,
h:20,
color:'red',
(中略)
};
そしてこんな感じに。
一旦今回はここまで、このあとめちゃくちゃいじって、本当に放置ゲーム感が出てきた。