キーボードでのプログラミングに挑戦してみよう。

2014.11.03

たなか＠Little Coder Mie

プログラミングとは？

• コンピューターに指示をすること。

• やりたいことの手順を正確に書くこと。

参考・出典：清水 亮（2014）『教養としてのプログラミング講座』 中央公論新社．

enchant.jsとは？

• 「エンチャント ジェイエス」

• 簡単にゲームを作れるプログラム

• 世界中のだれでも利用できる

http://enchantjs.com/ja/

プログラミングの道具

• テキストエディタ：Sublime Text

• ブラウザ：Chrome

• ゲームエンジン：enchant.js

とにかくプログラムを 動かしてみよう！

examples ＞ expert ＞ getbanana ＞

index.html ファイルをブラウザに

ドラッグアンドドロップ

プログラムの中身を 見てみよう！

examples ＞ expert ＞ getbanana フォルダをテキストエディタに ドラッグアンドドロップ

左にあるmain.jsをクリック

ゲームを改造しよう！

レベル１ クマを変えよう

bear.image = game.assets[‘chara1.gif’];

bear.frame = 0;

chara1.gif

改造したら確認しよう

• プログラムを改造したら保存する。

• 保存したらブラウザを更新する。

自分の思ったとおりに

プログラムが動いたらOK!!

注意：変な画面が出てきたら？

キャンセルをクリック

試用版を利用中

レベル２ バナナもいいけど

icon0.gif

レベル3 クマを太らせる

SpriteオブジェクトのscaleXプロパティ

レベル3.1 クマを回転

Spriteオブジェクトの

rotationプロパティを使ってみよう。

値は角度 0～360

指定すると・・・

X座標 Y座標 ０ 320

０

320

レベル４ ゲームタイトルを表示

Labelオブジェクトを使ってみよう

title = new Label();

オブジェクトを画面に追加するには？

game.rootScene.addChild(オブジェクト名);

文字の色を変えるには？

title.color = “red”;

• 赤 ： ”red”

• 黄 ： ”yellow”

• 青 ： ”blue”

• 水色： ”aqua”

• 緑 ： ”green”

• 紫 ： ”purple”

• 灰色： “gray”

• 白 ： ”white”

文字の大きさを変えるには？

title.font = “30px serif”;

文字の種類 文字の大きさ

レベル５ 得点を表示する

簡単に得点を表示できるScoreLabel

オブジェクトを使ってみよう。

まずは、必要なものを準備する。

examples ＞ expert ＞ shooting ＞ の

・apad.png ・font0.png ・icon0.png ・pad.png をgetbananaの中にコピーする

レベル５ 得点を表示する index.htmlにui.enchant.jsを利用します

と書いてあげる。

上に書いてあるのをコピーし

たあと、必要な部分だけ書き変えると楽。

レベル５ 得点を表示する ScoreLabelオブジェクトを作成する。

scoreプロパティに得点を設定する。

得点は、game.score

得点は増えていくので、

値をその都度設定する必要がある。

X座標 Y座標

レベル５ 得点を表示する

バナナを取るとgame.scoreの値が１ずつ

増えていくので、ここで毎回値を設定してあげるとOK！

フレーム更新毎に読み出す処理

得点を設定

レベル６ 制限時間を表示する

TimeLabelオブジェクト

X座標 Y座標 時間が減っていく

timeプロパティに

秒数を設定する(20秒)。

レベル７ 敵をつくろう

バナナを落とす部分を参考にして、

同じように敵(バクダン)も落ちてくる

ようにしてみよう。

敵にあたったら、

すぐゲームオーバーになるのがいいね。

より道 背景を変えよう

ペイントを起動して、bg.pngファイルをドラッグ&ドロップする。

絵を書いたら上書き保存する。

まとめ

• 簡単なプログラムから挑戦して理解する

• 少しずつレベルアップして自分の思った

とおりのプログラムが作れるようになる

• まずはじめは、すでにあるプログラムを

参考にして改造してみるとよい。