丸を動かしてみよう
丸を表示してみよう！
Atlas.js Editorを開きましょう．
ソース内の8,9行目を消します．この部分は右画面上に表示されているAtlas.jsの文字を表示するためのものです．
var text = new Text("Atlas.js","white",30);//textの内容を決めています
text.setPosition(20,20);//textの場所を決めています次に以下の文を先ほど消したところに挿入し，9行目のカッコ内を変更します．
var maru = new Shape.Circle("white",15);//白色 半径15の円を指定しています
game.addChild(maru);//text→maruに変更全体としてはこうなります．正しく書けたらリロードボタンを押しましょう．
Atlas();
window.onload = function(){
var game = new App();
game.setQuality(500,500);
game.setSize(500,500);
game.centerize();
game.setColor("black");
var maru = new Shape.Circle("white",15);//NEW!!
game.addChild(maru);//NEW!!
game.start();
};
動かすための命令を書いてみよう！
このままでは、丸を動かすことは出来ません．動かすためにはその命令が必要なのです！
以下のように記述しましょう．
var maru = new Shape.Circle("white",15);
//ここから
maru.touchStart = function(pos){
this.setPosition(pos.x,pos.y);//丸の場所を動かしています
};
//ここまでを新しく追加
game.addChild(maru);ここで少し解説を入れます．
以下の文はイベントリスナーと言って、特定の動作(入力)が行われると呼び出される関数です．
ここではmaruの中に，「クリックした"時"どのような動作をするか」の命令を記述しています．また，posにはマウスがクリックされた時の座標が含まれているので，pos.xにクリックした時のｘ座標，pos.yにクリックした時のｙ座標がそれぞれ格納されています．
pos.xとpos.yを入れ替えたりするとクリックした時の丸の位置が変わります．
maru.touchStart = function(pos){//イベントリスナー
this.setPosition(pos.x,pos.y);//丸の場所を動かしています
};他にも「クリックしている時」，「クリックが終わった時」，「キーボードのキーが押された時」などがあります．
これで丸を動かすことが出来るようになりました．
今回は丸の作り方とクリックした時にその場所に動かす事をしました．
特にイベントリスナーは今後プログラムを作成するにあたって非常に重要なものとなるので、覚えておくといいでしょう．
こちらが実行例になります。
Atlas Editor