こんにちは！
今回はenchant.jsというゲームエンジンを使ってゲームを作成しながらプログラミングにチャレンジしたいと思います！
enchant.jsとは
enchant.jsとは、HTML5+JavaScriptというプログラミング言語で簡単にゲームが作れるフレームワークです。
ゲームを作成するのに、特別なソフトを用意する必要がなく、ゲームをプレイする時もブラウザで出来るという手軽さが魅力的です。
code.9leap.netのアカウント取得
enchant.jsを学習する上でお勧めのサイトをご紹介します。
「code.9leap.net（コード・ナインリープ・ネット）」と呼ばれるサイトで、ゲームプログラミングに特化したオンライン学習サービスです。
早速、以下のリンクからcode.9leap.netにアクセスしてみましょう。
サイトにアクセスし、「新規登録」リンクを押しましょう。
次にユーザー名やパスワードなどを入力しましょう。
| username | ユーザー名。任意の英数字を入力 |
| password | パスワードを入力 |
| password confirm | 上と同じパスワードを再度入力 |
| 利用規約に同意します | チェックをつける |
全て入力が出来ましたら、「新規登録」ボタンを押して登録を完成させましょう。
code.9leap.netの良いところはメールアドレスの入力などが不要な為、簡単にアカウントを作れる点ですね！
アカウントの登録が完了し、ログインできると以下のような画面に移動出来たと思います。
code.9leap.netでは様々なサンプルプログラムが用意されています。
左にある一覧から「Fork」というボタンを押すと、サンプルプログラムと同じものを自身の作業スペース（プロジェクト）にコピーすることが出来ます。
キャラクターを表示させるプログラム
では、まずはキャラクターを表示させるシンプルなプログラムを見てみましょう。
左の一覧より「はじめてのenchant.js」→「STEP 2:スプライトを表示しよう」と書かれたサンプルをForkしましょう。
すると以下のような画面に移動します。
画面の見方ですが、右側に書かれた英語で書かれた命令文がプログラミングです。
左側の真っ白な四角は、作成したゲームをプレビューする画面です。
まずは「Run」ボタンを押してサンプルプログラムを動かしてみましょう！
STARTと表示された画面をクリックすると、くまが出現します。
画面をクリックすると、くまが移動・・・するようなプログラムではないので、くまが真ん中でぽつんと表示されているだけです（笑）
余談ですが、以前当ブログで紹介しましたMOONBlockは、enchant.jsがベースとなっている為、その時と同じくまです！
では、実際にプログラムを改造して、くまの位置を変えてみましょう。
左下の「課題1」に書かれている通り、左側のソースコード（命令文のことです）の8行目を「bear.x = 150;」から「bear.x = 50;」に変えましょう。
書き換えたら、再度Runボタンを押して、左側のゲーム画面を更新しましょう。
くまの位置が変わりました！
そして、課題1をクリアーし、新たに課題2が現れました。
課題2にもチャレンジしてみましょう、ソースコードの9行目を「bear.y = 150;」から「bear.y = 50;」に変えましょう。
書き換えたら、先ほどと同様にRunボタンを押して、左側のゲーム画面を更新しましょう。
くまが上に移動しました！
どうでしょう、少し書き換えるだけでキャラクターを移動させることが出来ました。
ソースコードの内容について解説しますと、bear.xというのはくまのX座標（一番左がX座標0）を意味し、bear.yというのはくまのY座標（一番上がY座標0）を意味します。
つまり、X座標が150から50に変えたことで画面の左側に移動し、Y座標が150から50に変えたことで画面の上側に移動するということになります。
他にも色んな命令文が書かれていますが、最初のうちは全ての命令文を理解することを目標とせずに、どこを書き換えたらどのように変化するのかという点に着目して少しずつ改良できるように練習するのが良いと思います。
次回はクリックした場所へくまを移動させるプログラムにチャレンジしたいと思います！
