ぼくの息抜き

ぼくの息抜き

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

CSS MenuMaker

javascriptをいじって放置ゲームを作る【0からゲーム作成日記】

f:id:bokunoikinuki:20170405163328p:plain

どーもねことあひる@Bokunoikinukiです。プログラミングを少しずつ独学で頑張ることを宣言した。毎日何かしら進捗作って19時に記事をアップする。

 

どーもねことあひる@Bokunoikinukiです。今回はunityはおいておいて、javascriptをいじる。

 

先日ブロガーの集まりではたぼー主催のプログラミング教室があった。

そこでプログラミング教室が開かれ、そこでもらった教材でプログラミングをやろうと思ったきっかけであるクリッカーゲームが作れるという。

早速作っていこう!(本当に作れるのかはわからない)

『出会えてよかった』

見出しがおかしい。しかし、はたぼー主催のプログラミング、いや、ブロガーの集まりが素晴らしいものだった。

だから、『出会えてよかった』

まぁその出会いについて書くと長くなるので、また別の機会にしよう。

その集まりでプログラミングも少し教えてもらった。

おおさまの教材が素晴らしい

教材として渡されたのが、unitaro.js

なんでunitaroなのか全然聞いてなかったが、気になる。

この教材を作ったのははたぼーの旦那さんのおおさま。

教材はここからダウンロードできる。↓↓

ここの右上の緑のボタンのdownloadでdownloadZipでZipを落とす。

f:id:bokunoikinuki:20170406082634p:plain

本題:早速ゲーム作っていく

このunitaro.jsのファイルの中の『sample-minimum』をchromeで開いてもらうとすごい単純な動きをする。

f:id:bokunoikinuki:20170405080351p:plain

(ちょっと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;
}
}; 

参考:JavaScriptでランダムの数(乱数)を作る方法

f:id:bokunoikinuki:20170405081626p:plain

気持ち悪いことこの上ない。小さくして色を変える。 太文字の部分を変えると変わる。

var PLAYER={
w:20,
h:20,
color:'red',
(中略)
}; 

そしてこんな感じに。

f:id:bokunoikinuki:20170405083028p:plain

一旦今回はここまで、このあとめちゃくちゃいじって、本当に放置ゲーム感が出てきた。