初心者の方でも楽しくゲームの作り方やプログラミングを学べる情報を発信中!

enchant.js

ゲームを作成しながらプログラミング勉強!enchant.js講座 #1

こんにちは!

今回はenchant.jsというゲームエンジンを使ってゲームを作成しながらプログラミングにチャレンジしたいと思います!

 

 

enchant.jsとは

enchant.jsとは、HTML5+JavaScriptというプログラミング言語で簡単にゲームが作れるフレームワークです。

ゲームを作成するのに、特別なソフトを用意する必要がなく、ゲームをプレイする時もブラウザで出来るという手軽さが魅力的です。

 

code.9leap.netのアカウント取得

enchant.jsを学習する上でお勧めのサイトをご紹介します。

「code.9leap.net(コード・ナインリープ・ネット)」と呼ばれるサイトで、ゲームプログラミングに特化したオンライン学習サービスです。

早速、以下のリンクからcode.9leap.netにアクセスしてみましょう。

 

サイトにアクセスし、「新規登録」リンクを押しましょう。

次にユーザー名やパスワードなどを入力しましょう。

username ユーザー名。任意の英数字を入力
password パスワードを入力
password confirm 上と同じパスワードを再度入力
利用規約に同意します チェックをつける

全て入力が出来ましたら、「新規登録」ボタンを押して登録を完成させましょう。

code.9leap.netの良いところはメールアドレスの入力などが不要な為、簡単にアカウントを作れる点ですね!

 

アカウントの登録が完了し、ログインできると以下のような画面に移動出来たと思います。

 

code.9leap.netでは様々なサンプルプログラムが用意されています。

左にある一覧から「Fork」というボタンを押すと、サンプルプログラムと同じものを自身の作業スペース(プロジェクト)にコピーすることが出来ます。

 

キャラクターを表示させるプログラム

では、まずはキャラクターを表示させるシンプルなプログラムを見てみましょう。

左の一覧より「はじめてのenchant.js」→「STEP 2:スプライトを表示しよう」と書かれたサンプルをForkしましょう。

すると以下のような画面に移動します。

 

画面の見方ですが、右側に書かれた英語で書かれた命令文がプログラミングです。

左側の真っ白な四角は、作成したゲームをプレビューする画面です。

まずは「Run」ボタンを押してサンプルプログラムを動かしてみましょう!

 

STARTと表示された画面をクリックすると、くまが出現します。

画面をクリックすると、くまが移動・・・するようなプログラムではないので、くまが真ん中でぽつんと表示されているだけです(笑)

 

余談ですが、以前当ブログで紹介しましたMOONBlockは、enchant.jsがベースとなっている為、その時と同じくまです!

 

では、実際にプログラムを改造して、くまの位置を変えてみましょう。

左下の「課題1」に書かれている通り、左側のソースコード(命令文のことです)の8行目を「bear.x = 150;」から「bear.x = 50;」に変えましょう。

書き換えたら、再度Runボタンを押して、左側のゲーム画面を更新しましょう。

 

くまの位置が変わりました!

そして、課題1をクリアーし、新たに課題2が現れました。

課題2にもチャレンジしてみましょう、ソースコードの9行目を「bear.y = 150;」から「bear.y = 50;」に変えましょう。

書き換えたら、先ほどと同様にRunボタンを押して、左側のゲーム画面を更新しましょう。

 

くまが上に移動しました!

どうでしょう、少し書き換えるだけでキャラクターを移動させることが出来ました。

ソースコードの内容について解説しますと、bear.xというのはくまのX座標(一番左がX座標0)を意味し、bear.yというのはくまのY座標(一番上がY座標0)を意味します。

つまり、X座標が150から50に変えたことで画面の左側に移動し、Y座標が150から50に変えたことで画面の上側に移動するということになります。

 

他にも色んな命令文が書かれていますが、最初のうちは全ての命令文を理解することを目標とせずに、どこを書き換えたらどのように変化するのかという点に着目して少しずつ改良できるように練習するのが良いと思います。

 

次回はクリックした場所へくまを移動させるプログラムにチャレンジしたいと思います!

スポンサーリンク
シェアする

関連記事

ゲームを作成しながらプログラミング勉強!enchant.js講座 #4

前回は敵キャラを画面上に表示させるプログラムを作りました。 今回は敵キャラを自動的に下に移動してくるプログラムを作ろうと思います。   前回の記事   敵キャラ”しろく …

ゲームを作成しながらプログラミング勉強!enchant.js講座 #6

前回は”配列”と”繰り返し”を使って、敵キャラを複数表示させるプログラムを作りました。 しかし、敵キャラの位置が規則正しく並んでしまっていたので、ゲーム …

ゲームを作成しながらプログラミング勉強!enchant.js講座 #5

前回は敵キャラを自動的に下に移動してくるプログラムを作りました。 複数敵キャラを表示させたのですが、今回は複数敵キャラの表示を”配列”と”繰り返し”とい …

ゲームを作成しながらプログラミング勉強!enchant.js講座 #3

前回はクリックした場所へくまを移動させるプログラムを作りました。 今回は敵キャラを画面上に表示させるプログラムを作ろうと思います。   前回の記事   敵キャラ”しろく …

ゲームを作成しながらプログラミング勉強!enchant.js講座 #7

前回は”乱数”を使って、敵キャラをランダムに出現させるプログラムを作りました。 今回は、いよいよ敵キャラと自分のクマがぶつかった時の処理を作っていきたいと思います。 &nbsp …

プロフィール

坂井 秀教(@norio198603)です!

2018年2月に一般社団法人ドットテックを設立し、フリーランスのエンジニア・デザイナーが活動を継続できるよう、学び合い助け合えるコミュニティを構築・運営中しております。

ゲーム作りやプログラミングの楽しさを知ってもらいたいと思い、本サイトを立ち上げました。 本サイトが、気軽に楽しく、ゲーム作り・プログラミングに取り組む支えになれば幸いです!

カテゴリー

お勧め動画教材
アクションゲームをまるごと作って体験できる!Unityゲーム制作ハンズオン 作って覚えるアンリアルエンジン【Unreal Engine 4】~ダンジョンゲーム編~ 【超初心者向け】Blenderでキャラクターをモデリングしてアンリアルエンジンで動かす講座【ハンズオン】

最新の記事

Unityで使えるゲーム素材