Quantcast
Channel: シェアしたくなる最新のWebサービス・ITニュース情報をチェック! APPGIGA!!(アプギガ) »プログラミング
Viewing all articles
Browse latest Browse all 22

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

$
0
0

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

Viewing all articles
Browse latest Browse all 22

Latest Images

Trending Articles





Latest Images