# チュートリアル[ゲーム作りの基礎をやってみよう(blockly)]
### 目次
> #### Step0 まずは準備
> #### Step1 ゲームの基本を作ろう
> #### Step2 ゲームのキャラに動きを付けよう
> #### Step3 ゲームの部品を追加しよう
> #### Step4 ゲームの部品を追加しよう(発展)
> #### Step5 キャラに動作を付けよう
> #### Step6 当たり判定を設定しよう
> #### Step7 ゲームを完成させよう
## Step0 まずは準備
## enchant.jsとは
カンタンにゲームやアプリを開発できる HTML5 + JavaScript フレームワーク(プログラミングの型のこと)です。2011年に公開され、すでに 1,000 本以上のゲーム/アプリが公開されています。
[enchant.js公式サイト](http://enchantjs.com/ja/)
[9leap公式サイト](http://9leap.net/)
これを使うことで簡単に2Dのゲームを作っていくことができます。
今回はこれを使って「クマさんのフルーツ狩り」を作っていきます。
## 実際に使ってみよう
今回はこちら用意した学習支援システムで学習を行います。
以下の部分をクリックしてみてください。
[学習システム](http://150.19.10.187/summer2019_blocly)
するとログイン画面が出ます。
皆さんのPCのモニターの左下にあるシールがユーザIDとパスワードになっています。
例: PC4-001
ユーザIDとパスワードは一緒になっています。これを入力して。送信ボタンを押してください。
下のような画面に行ったら成功です。
7つの問題があると思います。
1番から順番にやっていきましょう。
## Step1 クマを表示させてみよう！
まず初めに、クマを表示させるプログラムを作ることを目標に、ブロックを組み立てていきます。
完成図はSAMPLEの部分にも表示されていますが、下の図のようになります。
</br>
まずは、下のサンプル画面のようにブロック組み立ててみましょう・
</br>
組み終わったら「ブロックコード表示」を押してみてください。右側にコードが表示されます。ブロックの順番とコードの行数は一致しています。
では画面右側のサンプルコードの説明をします。
#### 1行目
初めにコードの頭(1行目)に
```
enchant();
```
という記述があります。これは「enchant.js」使うためのおまじないのようなものです。
enchant.jsで、ゲームを作るときは、必ず先頭にこの一行を書きます。
ブロックのここに当たります。
#### 2行目,12行目
次は2行目と12行目を見てください。
2行目には、
```
window.onload = function() {
```
12行目には、
```
};
```
と書かれています。enchant.jsでは、
```
window.onload = function() {
・
・
・
};
```
という記述をし、「・・・」の部分にブラウザを読み込んだ時に起こるプログラム処理(命令の集まり)を書きます。ブラウザを読み込むとはウェブページ(google chromeやedge、firefoxなどで開いたページ)を開いたタイミングのことです。今使っている学習教材、「テキスト型学習支援システム」では、「ブロックから実行」ボタンを押した瞬間に行う命令を「・・・」の部分にかきます。つまり、<font color="red">今回のサンプルコードでは「ブロックから実行」ボタンを押した瞬間に、5行目から22行目までの命令を行っている</font>ということになります。
ブロックのこの位置にあたります
<details><summary>
function()やwindow.onloadなどに関してさらに詳しく知りたい方は、ここをクリックしてください。
</summary>
</br>
"function"とは関数のことで、関数とは何かのプログラム動作をまとめたものです。また、window.onloadはすでに用意されている関数で、ブラウザを読み込んだ時に起こるプログラム処理を書くことで実行することができます。
</details>
</br>
次は3行目から12行目、つまりRUNボタンを押した瞬間に行う命令について詳しく見ていきます。
#### 3行目
3行目の
```
new Game(320,320);
```
ですが、これはゲーム画面を作成する命令です。(320,320)は画面のサイズを決めるためのもので、(横幅、縦幅)を決めています。今回は<font color="red">「横320px,縦320pxのゲーム画面でゲームを作成してください」</font>という命令を書いたことになります。
#### 4行目
次の4行目の
```
game.preload('chara1.gif');
```
ですが、
```
game.preload('使いたい画像');
```
とすることで画像の情報を取得してゲーム内で利用できるようになります。
'chara1.gif'は画像ファイルで、画像の内容は以下のようになっています。
今回の場合はくまを使いたいので、下の画像'chara1.gif'を'自分の使いたい画像'の部分に入力します。
まとめると6行目では、<font color="red">「'chara1.gif'の画像をゲーム内で使えるようにしてください」</font>と命令していることになります。
くまの情報を保存する場所として変数を使用します。
変数とは値等を保存するためのものです、箱のようなものだと考えてください。
変数を使うには先に変数に名前を付けておく必要があります。
enchant.jsでは変数を宣言する際に頭にvarを付けます。
```
var bear;
```
これで変数bearを定義することができました。
ブロックだとこの部分です
くまを表示させるコードは"game.onload"の中に書きます。
まず変数bearに画像表示機能を持たせるためにSpriteを使用します。
```
bear = new Sprite(32,32);
```
()内の数値は画像の幅と高さを意味しています。次に先ほどpreloadした画像を熊に設定しましょう。
```
bear.image = game.assets['chara1.gif'];
```
最後にくまを画面表示させますaddChildを使用して()内の変数の情報を
画面に表示させます。
```
game.rootScene.addChild(bear);
```
ブロックのこの部分に当たります
ではコードを実行してみましょう、画面にくまが表れるはずです。
デバッグで起動するとスプライトは赤枠で表示され分かりやすくなります。もし通常起動したければgame.debug();を下のように変えてください。
```
game.start();
```
<!--
"new Game(320,320);"はゲーム画面を作成するコードです。(320,320)は画面のサイズを決めるためのもので、(横幅、縦幅)を決めています。今回は横320,縦320になります。横と縦の幅でここでゲーム画面のサイズを決めていきます。
game.onloadはゲーム開始時に行われる設定を書く場所で、window.onloadの中に入っているのでブラウザが開かれると同時にゲーム開始時のプログラムが読み込まれます。
そして最後に"game.debug();"でゲームがデバッグモードで起動されます。
大変長くなりましたが、これでゲーム作成のための準備は完成です。
この状態で実行すると画面は下のようになります。
それではゲームの主人公となるくまを画面に表示させましょう。
enchant.jsで画像を表示させるためには以下のように"game.onload"の前の"window.onload"の中で書く必要があります。
```
game.preload('自分の使いたい画像');
```
これを行うことで画像の情報を取得してゲーム内で利用できるようになります。
今回の場合はくまを使いたいので、下の画像'chara1.gif'を'自分の使いたい画像'の部分に入力します。
-->
## Step2 ゲームのキャラに動きを付けよう
問題文のようにクマの画像を茶ぐまから女の子に変えて、画面クリックでクマを移動させてみようと思います。
まずはブロックを組み立ててみましょう
クマの画像の変え方を説明します。
「chara1.gif」の画像ファイルのサイズは160 x 96 pxとなっており、Sprite(32, 32)は、32 x 32 pxのサイズで画像を用意するという意味でちょうど、画像ファイルの一キャラクターのサイズとなっています。
そのため画像を次に移動させることでくまを別のくまに変えることができます。
それを変更する方法がframeプロパティです。
これは画像の左上を起点に0から始まり、右に順番に番号が増え、それが終わったり次の行の左から順番に、というように設定されます。そのためにくまを女にしたい場合は下のようになります。
```
/* クマさんをつくる */
bear = new Sprite(32, 32);
bear.image = game.assets['chara1.gif'];
bear.frame = 10; //←ここに注目
game.rootScene
```
ブロックだとここに当たります。
.addChild(bear);
これで番号10にある女の子のくまが表示されます。
今の状態ではくまは動かすことができません。マウスクリックでくまを動かしてみましょう。
クマの位置は.xと.yに保管されています。今は何も設定していないので(0,0)で設定されています。
位置を決めるときには以下のような命令が必要です
```javascript=
変数名.x = 数値;
変数名.y = 数値;
```
マウスクリックのを活用する際にenchant.jsではontouchedを使います。
その際にクリックした場所を好きな変数に入れて座標(x,y)で取得できますこの情報をくまのｘ、ｙ座標に与えてみましょう。
```javascript=
game.rootScene.ontouchend = function(event) {
/* クマの「行きたい場所」にタッチされたX座標を指定 */
bear.x = event.x;
/* クマの「行きたい場所」にタッチされたY座標を指定 */
bear.y = event.y;
};
```
今回はeventという変数にタッチした座標の情報入れておきました。
ブロックだと以下の場所です
これでくまはクリックした場所に移動するようになりました。
## Step3 ゲームの部品を追加しよう
くまの次にフルーツを下の画像icon0.gif(サイズ)を使ってリンゴの形をしたフルーツを画面に表示させてみましょう。
まずはブロックを組み立ててみましょう
フルーツもくまと同じやり方で表示できます。ただし画像のサイズがくまと違うのでSpriteのサイズも(16,16)に変更します。
基本はクマの時と一緒です
```javascript=
fruits = new Sprite(16,16);
fruits.image = game.assets['icon0.gif'];
fruits.frame = 15;
game.rootScene.addChild(fruits);
```
フルーツのフレームは15になっています。
フルーツの画像を事前に読み込むことも忘れないようにしましょう
フルーツが表示されるようになりました
フルーツとくまが重なっているのでフルーツがランダムな位置で始まるようにします。
ランダムな整数を取るためにMath.floor(Math.random())を使います。
Math.random()では0以上1未満の数値が取れるのでこれに好きな数値をかけることで0以上好きな数字未満の数値を取ることができます。
今回の場合ゲームの画面は 320 x 320 なのでフルーツの座標を以下のように設定します。これをfruitsのrootSceneへの追加のブロック前に記入して見てください。
/* 0から320未満の任意の整数を設定 */
fruits.x = Math.floor(Math.random() * 320);
/* 0から320未満の任意の整数を設定 */
fruits.y = Math.floor(Math.random() * 320);
これでフルーツはランダム位置に表示されるようになりました。
## Step4 ゲームの部品を追加しよう(発展)
フルーツがひとつではつまらないのでたくさん表示させましょう。
ただ一つ一つ書いていくのは大変なのでfor文と配列を使って繰り返し処理を行います。
まずはブロックを組み立ててみましょう
for文は以下のように書くことができます。
```javascript=
for(最初の変数の決定; ループが続く条件; 1回の処理の最後に行われる処理){
//繰り返す処理内容
}
```
10回繰り返す場合は以下のようになります。
```javascript=
for(i=0; i<10; i++){
//繰り返す処理内容
}
```
このブロックでfor文を作りましょう
配列では同じ型のデータを一つの変数に与えることができます。これを使って複数のデータを一つの変数に入れることができるになります。変数の要素は図のように入れられています
enchant.jsで変数で配列を使えるようにするには下のようにしてください。
```
var fruites = Array();
```
これを実際にやってみるとこうなります
```
for (i = 0; i < 10; i++) {
fruits[i] = new Sprite(16,16);
fruits[i].image = game.assets['icon0.png'];
fruits[i].frame = 15;
/* 0から320未満の任意の整数を設定 */
fruits[i].x = Math.floor(Math.random() * 320);
/* 0から320未満の任意の整数を設定 */
fruits[i].y = Math.floor(Math.random() * 320);
game.rootScene.addChild(fruits[i]);
}
```
ブロックだとこの部分です。前まで使っていた「インスタンス変数~」のブロックではできないので注意しましょう。
これでfruits[0]からfruits[9]の10個の変数に画像と座標が設定されて
画面に表示されるようになりました。
## Step5 キャラに動作を付けよう
くまの動作を滑らかにしましょう。
ブロックを組み立ててみましょう
そのためにべつのx,yと同様なものtx,tyをbearに設定してクリックした座標をそこに入れます。
game.rootScene.ontouchend = function(event) {
/* クマの「行きたい場所」にタッチされたX座標を指定 */
bear.tx = event.x;
/* クマの「行きたい場所」にタッチされたY座標を指定 */
bear.ty = event.y;
};
tx,tyにだんだん近づくようにenterframeを利用します。enterframeは
enterframeはフレームごとに行われる動作でゲームプレイヤーが操作を行わなくても動作を続けます。フレームは初期は1/60秒に1回処理を行います。
下のコードはbearの1フレームごとの処理の書き方です。
```
bear.addEventListener("enterframe", function(){
//ここに処理を書く
});
```
ここにくまがだんだんクリックした地点に近づくような処理を書いていきます
```
slow = 30;
this.x += (this.tx - this.x) / slow;
this.y += (this.ty - this.y) / slow;
```
これでだんだんくまがクリックした地点に近づいていくようになります。
## Step6 当たり判定を設定しよう
ここまで来たらくまがフルーツに触れたらフルーツが消えるようにしましょう。
当たり判定はif文を用いてクラスFruitsに「もしフルーツがくまに触れたら」というものを作ります。
if文はプログラムにおいて条件分けの時に使います
```
if (条件) {
//条件の時起こること
}
```
()の中に条件を書いてその条件を満たしたとき{}の中の処理を行います。enterframeの中に書いておくと、1フレームごとに条件を満たしているかどうかの判定を行うことができます。fruitsのenterframeの中にif文を追加してみましょう。enchant.jsでは触れた処理をするときにはwithin(触れるもの)をif文の()に入れます。
```
if (this.within(触れるもの)) {
//触れたら起こること
}
```
今回の場合くまの変数bearを()に入れましょう。
次にif文の中にrootSceneの中のフルーツが消えるように記述していきます。
enchan.jsで画面から画像を消すにはaddChildのようにremoceChildを
使用してください。
fruits.enterframeの中なのでthisになります
```
game.rootScene.removeChild(this);
```
これでくまが触れるとフルーツが消えるようになります。
## Step7 ゲームを完成させよう
ここまで来たらあとは仕上げですフルーツ10個をすべて取ったらゲームクリアが表示されるようにしましょう。
下が正解のブロックになります。
フルーツを10個取ったかどうかの判定の変数としてscoreを用意します。ここにフルーツが消えるたびに+1を入れていきましょう。このときにゲーム開始前にはscoreを0にしておきましょう。
```
score++;//score=score+1でもOK
```
```
/* スコアを0に設定 */
score = 0;
fruits = Array();
game.onload = function() {
```
赤枠の部分に注目してください
ではgame.onenterframeにコードを追加して、scoreが10になったときにクリア画像(clear.png)が表示されるようにしましょう。
今回はさらにクリア画面が出た後にスコアを+1して点数が表示されるようにします。
game.onenterframeの中に条件式を書けばゲーム開始時からずっと条件満たしているのかを見てくれます。
```
game.onenterframe = function(){
if(score==10){
/* クリア画面を出したいときは以下の記述 */
game.endScene = new SplashScene();
game.endScene.image = game.assets['clear.png'];
game.end();
score++;
}
else if(score ==11){
alert(score + "点獲得しました!");
/* alertを何度も表示されないようにする処理 */
game.onenterframe = null;
}
};
```
else ifとはif文からさらに条件を分岐するためのものです。if(条件)を満たしていないとき、かつelse ifの()内の条件を満たしたときのみ処理を行います。
今回はゲーム画面にメッセージを表示したいのでalertを使います。alertの書き方は以下のようになっています。
```
alert("表示したい文字");
```
変数の値を出したいときは以下のようになっています。
```
alert(変数名+"表示したい文字")//「変数名表示したい文字」が画面にでる
alert("表示したい文字"+変数名)//「表示したい文字変数名」が画面にでる
alert("表示したい文字"+変数名+"表示したい文字")//「表示したい文字変数名表示したい文字」が画面にでる
```
ブロックの赤枠の箇所でその処理を行っています。
これでゲームの完成です。
Sign in with Wallet
Connect another wallet