こんにちは！
前回はcode.9leap.netのアカウント取得から、くまを表示させるところまで作りました。
今回はクリックした場所へくまを移動させるプログラムにチャレンジしたいと思います！
前回の記事
クリックした場所に瞬間移動
左の一覧より「enchant.jsサンプル(基礎編)」→「クリックしたところにキャラを移動させてみよう」と書かれたサンプルをForkしましょう。
Forkすると以下の画面が立ち上がりますので、まずはRunボタンを押して、ゲームを動かしてみましょう！
どうでしょう？
静止画なので、全く動いている感は伝わっていないかと思います（笑）が、緑の枠内の画面をクリックすると、そこにくまが移動できたと思います。
画面をクリックすることで、くまを移動させる為のソースコードでポイントとなる部分について、解説したいと思います。
//rootSceneへのイベントは画面全体のイベントとなる
game.rootScene.addEventListener('touchend', function(event) {
bear.x = event.x; //event変数にタップされた座標が入る
bear.y = event.y;
});
前回のサンプルコードで「bear.x」や「bear.y」の数値を変更すると、くまの位置が変わることは確認しました。
今回は直接数値を入れるのではなく「bear.x = event.x」や「bear.y = event.y」という書き方に変わっています。
event.xやevent.yは、画面をクリックした時のx座標やy座標が入ってきます。
game.rootScene.addEventListenerというのは、画面をタッチしたとか、Aボタンを押したとか、何かの条件を満たした時に実行するという命令になります。
今回、’touchend’と記載されている為、「画面をタッチし終わった後」に処理を実行するという条件になります。
では、どのような処理が画面をタッチし終わった後に実行されるのかと言うと、function(event) { から } の囲まれた間の処理を実行するという命令になります。
今回の場合、以下2行が画面をタッチし終わった後に実行されることになります。
bear.x = event.x; //event変数にタップされた座標が入る
bear.y = event.y;
ここで一つ試してほしいことがあるのですが、上の2行のうち「bear.x = event.x」を消してゲームをプレイするのと、「bear.y = event.y」を消してゲームをプレイするので違いを見比べてみて下さい。
bear.y = event.yだけ残した場合、クリックしても、くまは縦方向にしか動かなくなります。
逆にbear.x = event.xだけ残した場合、クリックしても、くまは横方向にしか動かなくなります。
実は、少しいじっただけでもゲーム性の違うものが作れます！
まとめ
これでキャラクターを操作することが出来るようになりました。
（瞬間移動するのではなく、もっと滑らかに動かせるようにもしたいですが、少し難しくなるので今はこのままで・・・）
しかし、まだクマしか登場していない為、他にも敵キャラを表示させたりしてみたいですね！