シェアしたくなる最新のWebサービス・ITニュース情報をチェック!
  • follow us in feedly

アプギガトップ > プログラミング > JavaScriptでマインクラフト風の建造物が作れる無料Webアプリ「Web Blocks」で遊んでみた!
注目記事ピックアップ
1枚の写真だけで超リアルな3D顔面をWeb上で高速生成できる「3D Face Reconstruction」を使ってみた!
share0
1枚の写真だけで超リアルな3D顔面をWeb上で高速生成できる「3D Face Reconstruction」を使ってみた!
コピペ一発!どんなWebサイトもチャットサポートを無料で導入可能な「Crisp」を使ってみた!
share0
コピペ一発!どんなWebサイトもチャットサポートを無料で導入可能な「Crisp」を使ってみた!
筆跡がリアルに変化する「自作Webフォント」を生成可能な「Calligraphr」で自分用フォントを手書きしてみた!
share0
筆跡がリアルに変化する「自作Webフォント」を生成可能な「Calligraphr」で自分用フォントを手書きしてみた!
編集ソフト不要!アップロードした画像のURLをいじるだけで多彩な加工編集を実現する「Scaley.io」が登録不要で無料公開中!
share0
編集ソフト不要!アップロードした画像のURLをいじるだけで多彩な加工編集を実現する「Scaley.io」が登録不要で無料公開中!
スクショ付きでブックマークを一元管理できるWebアプリ「Bookmark OS」を使ってみた!
share0
スクショ付きでブックマークを一元管理できるWebアプリ「Bookmark OS」を使ってみた!
ブログ感覚でWebアプリやサイトの更新履歴を作成&公開できる「Barelog」を使ってみた!
share0
ブログ感覚でWebアプリやサイトの更新履歴を作成&公開できる「Barelog」を使ってみた!
ブログ感覚でオンラインのプログラミング講座を作成・公開できる「educative」は課金機能も無料で利用可能!
share0
ブログ感覚でオンラインのプログラミング講座を作成・公開できる「educative」は課金機能も無料で利用可能!
まだ進化を続けるGoogle検索の特殊機能12選をまとめてみた!
share0
まだ進化を続けるGoogle検索の特殊機能12選をまとめてみた!
ブラウザから即起動!ゼロからSVG画像を作成できるWebエディタ「Vectr」が完全無料で公開中!
share0
ブラウザから即起動!ゼロからSVG画像を作成できるWebエディタ「Vectr」が完全無料で公開中!
開発が面倒なWebコンテンツを「ウィジェット化」して誰でも利用可能にする無料サービス「Widgetic」を使ってみた!
share0
開発が面倒なWebコンテンツを「ウィジェット化」して誰でも利用可能にする無料サービス「Widgetic」を使ってみた!
JavaScriptの学習にオススメなWebコードエディタ「Carbide」の万能すぎる可視化ウィジェットがヤバイ!
share0
JavaScriptの学習にオススメなWebコードエディタ「Carbide」の万能すぎる可視化ウィジェットがヤバイ!
今すぐブラウザ上に「ライブ配信」のスタジオ環境をタダで構築できる「Lightstream」を使ってみた!
share0
今すぐブラウザ上に「ライブ配信」のスタジオ環境をタダで構築できる「Lightstream」を使ってみた!
思わずWeb開発したくなる最強のJavaScriptライブラリ7選が楽し過ぎてヤバイ!
share0
思わずWeb開発したくなる最強のJavaScriptライブラリ7選が楽し過ぎてヤバイ!
「アプギガ!!」2016年の総まとめ!もう一度読みたくなる人気のバズ記事をまとめてみた!
share0
「アプギガ!!」2016年の総まとめ!もう一度読みたくなる人気のバズ記事をまとめてみた!
英語で「VR空間作って」と書くだけで、本当にWeb上でVR体験が実現する「GuriVR」を使ってみた!
share0
英語で「VR空間作って」と書くだけで、本当にWeb上でVR体験が実現する「GuriVR」を使ってみた!
エアフォースワンの内部もVR空間に!Web上であらゆる場所を歩き回れる「Matterport 3D Gallery」の没入感がスゴイ!
share0
エアフォースワンの内部もVR空間に!Web上であらゆる場所を歩き回れる「Matterport 3D Gallery」の没入感がスゴイ!
スマホのタッチ操作に最適化されたWebアンケートが作れるサービス「Wyzerr」を使ってみた!
share0
スマホのタッチ操作に最適化されたWebアンケートが作れるサービス「Wyzerr」を使ってみた!
匿名もOK!SkypeでWebコードエディタを共有できる「Interviews on Skype」が無償公開中!
share0
匿名もOK!SkypeでWebコードエディタを共有できる「Interviews on Skype」が無償公開中!
登録不要!匿名で記事も公開できる究極にシンプルなWebエディタ「IO」が最高の使い心地だった!
share0
登録不要!匿名で記事も公開できる究極にシンプルなWebエディタ「IO」が最高の使い心地だった!
有名WebサービスのAPIをすべて同じ書き方でプログラミング可能な「RapidAPI」は、検索・テストもブラウザ上で実行可能!
share0
有名WebサービスのAPIをすべて同じ書き方でプログラミング可能な「RapidAPI」は、検索・テストもブラウザ上で実行可能!
プログラミング
ad 今の年収で満足ですか?
typeで転職した71%が年収アップ!
2017/06/16 18:20

JavaScriptでマインクラフト風の建造物が作れる無料Webアプリ「Web Blocks」で遊んでみた!

web-blocks-01
どうも、まさとらん(@0310lan)です!

今回は、ブラウザ上でマインクラフトのような仮想世界を探索でき、自由に建造物も作れてしまう無料のWebサービスをご紹介します!

また、キーボードやマウスによる操作だけでなく、JavaScriptを使ったプログラミングで建造物が作れてしまうのが最大の特徴でもあります!

【Web Blocks】
web-blocks-02

「Web Blocks」の基本的な使い方!

それでは、実際に「Web Blocks」を使いながら、どのようなサービスなのかを見ていきましょう!

サイトにアクセスすると、いきなりマインクラフトのような仮想世界がブラウザ上に表示されます。
web-blocks-03
基本的な操作方法は以下の通り!

・キーボードの「矢印キー」で視点変更
・キーボードの「WASDキー」で移動
・キーボードの「スペースキー」でジャンプ


また、「SHIFTキー」を押すことでマウスによる視点変更もできるようになっています。


自分で好きな建造物を作るには、「ブロックメニュー」から使いたいブロックを選択します。
web-blocks-04

あとは、マウスで好きな位置をクリックすると、どんどん配置していくことができます!
web-blocks-05 「Ctrl + Z」でやり直しができたり、「AIR」と書かれたブロックで不要なブロックを削除することもできます。

また、「Multi」を選択すると、複数のブロックを一気に配置することも可能です。


「Fly」を選択すると「飛行モード」になります。
web-blocks-06

この状態で「スペースキー」を押すと、フワッと浮き上がり空を自由に飛べるようになります。
web-blocks-07 上空から世界を眺めたり、何か大きな建造物を作る時に便利かもしれません。


そして、「Web Blocks」最大の醍醐味であるプログラミング機能についても見てみましょう!

右側のメニューにある「Code」と書かれたボタンをクリックします。(キーボードの「ESCキー」でもOK)
web-blocks-08

すると、専用の「コードエディタ」が表示されます!
web-blocks-09 このエディタは、「コンソール画面」と「スクリプト画面」の2つを切り替えることが可能で、通常のプログラミングは「スクリプト画面」で行います。

使用言語はJavaScriptで、このエディタで実行されたプログラムは、今いる仮想世界にそのまま反映されるようになっているのが面白いところです。


JavaScriptで作られた建造物たち!

それでは、実際にJavaScriptで作れらたプログラムを見ていきましょう!

エディタを「①スクリプト画面」に切り替えて、「②OPEN」ボタンをクリックします。
web-blocks-10

サンプルの「プログラム一覧」が表示されるので、試しに「Pyramid」という名前のファイルをクリックしましょう。
web-blocks-11

ソースコードが読み込まれるので、「RUN」ボタンをクリック!
web-blocks-12

すると、一瞬でピラミッドが建造されました!
web-blocks-13 このように、プログラミングによって自由に建造物を作れるのが「Web Blocks」の面白いところです。


他にも、巨大な建物を作ってみたり…
web-blocks-14

歩いたところに、自動で「レインボーブロック」を配置するようなプログラムを組むこともできます。
web-blocks-15

さらにプログラミングらしく、仮想世界の中に巨大な「Pong」ゲームを構築して遊んでしまうことも可能です!
web-blocks-16 プログラム次第で、どんな建造物でも作れてしまうので夢が広がりますね。

また、JavaScriptの学習教材としても優秀で、単純にコンソール出力で数値を出すよりも、プログラムを組んで何かを建造する方が圧倒的に楽しいはず!

自分で作った建物の中に入り込んで、自由に探索してみるのも面白いですよ。


「Web Blocks」のプログラミングについて!

最後に、基本的な「Web Blocks」のプログラムについて簡単に解説をしておきます。

まず、プログラミングをするには「スクリプト画面」を開く…と、先ほど書きましたが、実は「エンターキー」を押すことで簡易的なコンソール画面を表示することができます。


そこへ、あらかじめ用意されているメソッド「resetPlayer()」と入力してEnterキーを押しましょう!
web-blocks-17 すると、自動的に「初期位置」へ戻ります。


そこで、今度はブロックを1つ生成してみたいと思います。

こちらも、あらかじめ用意されているメソッド「setBlock()」を使って実行します。
web-blocks-18
このメソッドは、以下のような引数を取ります。


setBlock(X座標、Y座標、Z座標、ブロックの種類)


初期位置にいる場合、プレイヤーの前にブロックを1つ生成するには、


setBlock(100, 3, 110, Stone)


となります。
(Stoneは石のブロックを意味します…)


すると見事にブロックが表示されたのが分かります!
web-blocks-19 このように、setBlock()メソッドを上手く活用しながら、繰り返し構文と組み合わせて好きな建造物を作っていくわけです。

もちろん、プログラムが複数行になると思うので、その場合は「スクリプト画面」にコードを書いていくようにしましょう。

また、他のサンプルプログラムを見ながら、どのようなテクニックで建造物を生成しているのかをチェックするのもオススメですよ!


まとめ

今回ご紹介した「Web Blocks」は、まだ開発段階ではあるもののJavaScriptで遊べるWebアプリとしてはなかなか楽しいと思います。

個人的にはマルチプレイヤーモードなど、複数人で遊べるような機能が追加されるとさらに面白くなりそうな気がしました。

JavaScriptなどプログラミングにご興味ある方も含めて、ぜひみなさんもオリジナルの建造物を作って遊んでみてください!


<参考>
「Web Blocks」公式サイト
「Web Blocks」GitHubページ


written by まさとらん(@0310lan

まさとらん

国内外問わず「良いモノ」だけひたすら集めて情報共有してます。
厳選ネタはアプギガ内で分かりやすく情報発信中!
その他の旬なネタは、twitterにて発信してますので、お気軽にどうぞ!

twitter:0310lan

この記事を読んでいる人は、他にこんな記事も読んでいます。
Related Posts Plugin for WordPress, Blogger...

ページトップへ戻る