みなさんこんにちは!おさかなです!
今回は「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の基礎を学びたい方はぜひ遊んでみてください。(お疲れ様でした🍮)
おさかなは浮遊するから、秒速クリアーっ!!
チートやめろ!笑
これで全ての操作は完了です。(やった~!)
お疲れ様でした☕
ここまで読んでくださり、ありがとうございました!