【無料】JavaScript学習サイト【JSROBOT】とは?

テクノロジー
スポンサーリンク

みなさんこんにちは!おさかなです!

今回は「JSROBOT」について、書いていこうと思います!

それでは、レッツゴー!!!!!

想定読者
・ブラウザ上でJavaScriptを動かしたい方
・JavaScriptの基礎を学びたい方
・ゲーム感覚で楽しく学習したい方

「JSROBOT」って何?

JSROBOT」とは、(@reaalkhalil)さんが開発した、PC上でロボットを動かしながら「JavaScript」が学べるサイトのことです。チュートリアル付きで遊びながら、JSの基礎が学べます!(面白い!)

JSRobot
Learn JavaScript by playing a platform game: Control a robot to collect coins, avoid obstacles and reach the flag at the end of the level.
【JavaScript】でハッカー体験ができるゲーム【Bitburner】とは?
みなさんこんにちは!おさかなです!今回は「Bitburner」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・ハッカー体験がしたい方・ハッキングゲームで遊びたい方・セキュリティを勉強中の方...

実際に使ってみよう!

基本操作

それでは早速サイトにアクセスしましょう!

まずは「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関数」で繰り返して実行すると、こんな感じでロボットが前進しましたー!(やったー✨)

(ロボットくん万歳してて可愛い✨)

【無料】充電可能なカフェを検索できる【電源カフェ】とは?
みなさんこんにちは!おさかなです!今回は「電源カフェ」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・電源・充電可能なカフェを探している方・フリーWi-Fi・ネット環境を探している方・カフ...

レベルアップ……どんどん進めよう!

Next Level」を押すと、次の課題へと進めます。(わー!)

レベル2では「階段」のようなステージを進む処理を書いてきます!(ゲームっぽくなってきた)

レベル3では、落ちたらライフが減りそうな「凸凹ステージ」…。

ここでは「ジャンプ」という新しい動きを付けることで、クリアしました〜!(やったぜ★)

レベル4では、解説がなく自力で解くスタイルとなっています。(頑張るぞー🚩)

今までの知識を活用して……なんとか障害物を避けつつクリアできました!
更にレベルが上がると「API」などの技術も出てくるので、JavaScriptの基礎を学びたい方はぜひ遊んでみてください。(お疲れ様でした🍮)

https://amzn.to/3CUqpHS
おさかな
おさかな

おさかなは浮遊するから、秒速クリアーっ!!

ナビまる
ナビまる

チートやめろ!笑

これで全ての操作は完了です。(やった~!)
お疲れ様でした☕

ここまで読んでくださり、ありがとうございました!

Webサイト上で読める、JavaScriptの無料本!【Deep JavaScript】とは?
みなさんこんにちは!おさかなです!今回は「Deep JavaScript」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・JavaScriptの学習している方・JavaScriptのおすす...
おさかな

文章が書けちゃう、新種のおさかなです。

元不登校。紆余曲折あり、現在はライターとして活動中。IT技術、サブカルチャーから、シナリオまで色々書きます。
SAOのユウキが好きです!

おさかなをフォローする
タイトルとURLをコピーしました