みなさんこんにちは！おさかなです！
今回は「JSROBOT」について、書いていこうと思います！
それでは、レッツゴー！！！！！
・ブラウザ上でJavaScriptを動かしたい方
・JavaScriptの基礎を学びたい方
・ゲーム感覚で楽しく学習したい方
「JSROBOT」って何？
「JSROBOT」とは、(@reaalkhalil)さんが開発した、PC上でロボットを動かしながら「JavaScript」が学べるサイトのことです。チュートリアル付きで遊びながら、JSの基礎が学べます！(面白い！)
#JSRobot 🤖 New features coming soon! Yup.. that’s a portal pic.twitter.com/u3w5PoQLdI
— Reaal (@reaalkhalil) December 7, 2017
実際に使ってみよう！
基本操作
それでは早速サイトにアクセスしましょう！
まずは「Start」ボタンをクリック！(えーい！)
すると…このような「学習画面」が表示されます。
「Script」タブに切り替えると…？
こんな感じで「コードの入力画面」が表示されます！(おー！)
「Console」タブでは…？
「コンソール」が表示されます。
「Properties」タブに切り替えると…？
「プロパティ」が確認できます。(ふむふむ…。)
ページ上部にある「Run」ボタンを押すと、プログラムを実行できます！(よし！)
(寒いから温かくしてね…🔥)
レベル1を攻略しよう！
それではチュートリアルに沿って、課題を進めていきましょう！(おー🚩)
まずはコンソールで「5+3」と入力……(どんな計算式でもOKです)
「Run」ボタンを押して実行すると…こんな感じで「8」と、計算結果が表示されます。
他にもチュートリアル内に記述されていた、色々なプロパティを実行してみました…！(いえい)
ちなみに「robot.info().x」の値が「80」、「robot.info().y」の値が「279 .13…」であることから、ロボットの位置座標が（x=80）（y=279 .13…）だとわかりました。(メモメモ…)
続いて「Script」タブへと切り替えて、それぞれの関数の動きを見てみます。
まず1つ目の「init関数」内に、console.logを記述すると…？
こんな感じで、Consoleに「Hello Navi!」とテキストが表示されました！(パチパチ👏)
先ほどと同じコードを、今度は2つ目の「loop関数」へと入れてみます！(えいやー！)
すると先程とは違い、テキストが複数表示されていることがわかります。
このように2つ目のloop関数では、同じ動作を繰り返す（ループ処理）が使えます！(なるほど！)
これを応用して、ロボットくんを動かします。
1つ目の「init関数」に、ロボットを動かすプログラムを記述すると…1歩だけ進みます！笑
これを2つ目の「loop関数」で繰り返して実行すると、こんな感じでロボットが前進しましたー！(やったー✨)
(ロボットくん万歳してて可愛い✨)
レベルアップ……どんどん進めよう！
「Next Level」を押すと、次の課題へと進めます。(わー！)
レベル2では「階段」のようなステージを進む処理を書いてきます！(ゲームっぽくなってきた)
レベル3では、落ちたらライフが減りそうな「凸凹ステージ」…。
ここでは「ジャンプ」という新しい動きを付けることで、クリアしました〜！(やったぜ★)
レベル4では、解説がなく自力で解くスタイルとなっています。(頑張るぞー🚩)
今までの知識を活用して……なんとか障害物を避けつつクリアできました！
更にレベルが上がると「API」などの技術も出てくるので、JavaScriptの基礎を学びたい方はぜひ遊んでみてください。(お疲れ様でした🍮)
おさかなは浮遊するから、秒速クリアーっ！！
チートやめろ！笑
これで全ての操作は完了です。(やった～！)
お疲れ様でした☕
ここまで読んでくださり、ありがとうございました！
