【無料】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の基礎を学びたい方はぜひ遊んでみてください。(お疲れ様でした🍮)

JavaScript 第7版
JavaScriptは最も多くのソフトウェア開発者に使用されているプログラミング言語です。JavaScriptを包括的に解説する本書は、第6版から大幅に加筆および更新し、全面改訂しました。 はじめにJavaScript言語仕様の基本的な構文と機能について豊富なサンプルコードを使って学習します。そしてJavaScript...
おさかな
おさかな

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

ナビまる
ナビまる

チートやめろ!笑

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

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

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

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

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

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