ボタンを作ってもっとゲームらしく！【0からゲーム作成日記第三回】
どーもねことあひる@Bokunoikinukiです。
放置ゲーム作るのにハマり、記事作成せずに一気に進めすぎてちょっとサボってた…
しかし、できた放置ゲームは素晴らしい！バランスは微妙だけどぜひプレイしてみて欲しい！
ねことあひるが作ったゲームデータはこちら↓↓PCで！
やり方がわからなかったらこちらの記事参考にどうぞ
さて、今回は放置ゲームを作るぞ！の第一弾の続きから説明していく。
前回は画面のどこかをクリックすると白いものが増えていくところまで行った。
紆余曲折あったが、まずはボタンを作ってもっとゲームらしくしよう。
擬似ボタンを作る
まずは擬似ボタンを作る。
var PLAYER=とvar APP = の間にこの文を入れる。
var BUTTON={
w:100, //横の長さ
h:20, //縦の長さ
color:'white',//色
init:function(x,y){ //重要だが、あまり深いことは考えなくていい
this.x=x;
this.y=y;
},
};
自分で放置ゲームを作って思ったのは最初から全てのことを知ろうと思わないことが大切だ。
次はこれを画面上に表示するためのコードを入れる。赤文字のところだけ追加しよう。var APPのinit: functionの中に入れる。
var APP = {
WIDTH: 320,
HEIGHT: 500,
init: function(){
this.player=new unitaro.Task(PLAYER,100,100);
this.Button=new unitaro.Task(BUTTON,160,50); //これを入れる
},
(中略)
};
Visual Stadio Code上で保存。macbookならcommand+S。windowsならCtrl+Sだ。
保存したらchrome上で一度ページ更新をしよう。そうすることでVisual Stadio Codeで変更したhtmlが更新される。
これで横長のボタンらしきものが表示されるはずだ。
ちょっと擬似ボタンをいじって見よう
まずは自分で変えられる数値だけいじってその変化を体験することでなんとなく理解してくる。
横の長さと縦の長さは変えてみて見よう。var BUTTON=の中のw:とh:が横と縦の長さに相当する数値になる。
数値をいじってVisual Stadio Code上で保存。macbookならcommand+S。windowsならCtrl+Sだ。
保存したらchrome上で一度ページ更新をしよう。そうすることでVisual Stadio Codeで変更したhtmlが更新される。
例えば横の長さを10にするととても短くなる。
次回はこのボタンを押せるようにしよう！
本気でプログラミングをするならこちらを利用するのもいい！
