Recommandé
Recommandé
Contenu connexe
En vedette
En vedette (20)
Enchant講座
- 2. enchant.jsとは • JavaScriptで書かれたライブラリー！ – いろいろ便利な機能が作られてる • ９leapというサイトのゲームは全部これ – h.p://9leap.net
- 3. enchantを使うための準備！ • テキストエディタを準備 – SublimとかemacsとかTeraPadとか • enchant.jsをダウンロード – ダウンロードしたら解凍してね！ • Google Chromeをダウンロード
- 4. enchantでゲームを作るよ！ • enchant/examples/expert/getbanana/ index.htmlをChromeで開いてみよう！ • enchant/examples/expert/getbanana/main.js テキストエディタを開いてみよう！
- 7. enchantでゲームを作るよ！（２） • main.js – window.onload = funcDon() の中身全部 – game.rootScene.addEventListener (‘enterframe’,funcDon()の中身全部 消します！（カッコを消さないように注意！）
- 8. JavaScriptの基本のルール • 文章の最後には ; をつける • 全部半角！ • //はコメントアウト • 変数宣言はvarを使う
- 10. main.jsの説明（１） • enchant(); – おまじない • window.onload = function() ; – window全体の設定 • game = new Game(320, 320); – 画面サイズ
- 11. main.jsの説明（２） • game.fps = 24; – １秒間に何回画面更新するか • game.preload(['chara1.gif','icon0.gif','bg.png']) – 画像を使うための工程１ • game.onload = funcDon(); – ゲームの設定をする
- 12. main.jsの説明（３） • game.rootScene.addEventListener('enterfram e',funcDon() – 毎フレーム呼び出される – １秒間に２４回ここを実行する
- 13. くまを表示してみよう！
- 14. くまを表示してみよう！ • bear = new Sprite(32, 32); – 画像を32×32にきって表示 • bear.image = game.assets['chara1.gif']; – 画像を表示するための工程２ • game.rootScene.addChild(bear); – 画像を表示するための工程３
- 16. index.htmlを開いてみよう！ 表示されないって時はコンソールをみる(｀･ω･´) これがエラー！ くまがいない！！(；・∀・) メニュー > ツール > Java Scriptコンソール ここに行数
- 17. くまに動いてもらおう！
- 18. くまに動いてもらおう！ • bear.x = bear.x + 1; – bear.xはくまの画像の座標 – x座標を１ずつ増やす
- 20. 違うくまがいい！茶色いや！
- 21. 違うくまがいい！茶色いや！ • bear.frame = 5; – ３２ずつで切った画像の５番目 – １こめから０，１，２，・・・となっている
- 23. くまを自由に動かそう！（１）
- 24. くまを自由に動かそう！（１） • if(game.input.right) – 右矢印が押されたらする動作 • bear.x = bear.x + 1; – bearのx座標を１つずつ増やす • Chromeを更新して動きを確認しよう！
- 25. くまを自由に動かそう！（２） • 他の方向もおんなじようにしてみよう！ – if(game.input.le[) • 左矢印を押した時 – if(game.input.up) • 上矢印を押した時 – if(game.input.down) • 下矢印を押した時 • ちなみに、y座標はbear.yでおｋ！
- 26. くまを自由に動かそう！（２）
- 28. くまを拡大してみよう！
- 29. くまを拡大してみよう！ • bear.scaleX = 2; – くまの横幅を２倍にする • bear.scaleY = 2; – くまの縦幅を２倍にする
- 31. そういえばこのくま変ですよ • 左に歩くときは逆を向いてほしい！ – bear.scaleX = 2; bear.scaleY = 2;を消す • 左に歩くときだからどこに書けばいいかな
- 32. そういえばこのくま変ですよ
- 33. そういえばこのくま変ですよ • if(game.input.le[) – 左に動くときだからこの中に書く • bear.scaleX = -‐1.0; – 逆向きだから横幅をマイナス倍すればおｋ • if(game.input.right) – 右に動くときに • bear.scaleX = 1.0; – 向きを元に戻す
- 35. 画面外に出ないようにする！ • 画面の外に出ないようにしたい – 画面の横幅 game.width – 画面の縦幅 game.height – くまの横幅 bear.width – くまの縦幅 bear.height • 画面外に出ようとしたらそのままの位置 – if文を使う！
- 36. 画面外に出ないようにする！
- 38. 画面外に出ないようにする！ • if(bear.x > game.width -‐ bear.width){ – 画面外に出ようとしたら • bear.x = game.width -‐ bear.width – その場の位置にいるようにする } ほかも同じように考えれるよ！
- 40. 走ってるように見せる！
- 41. 走ってるように見せる！（１） • bear.pose – くまの画像を扱うための変数 • if(game.frame % 2 == 0) – 毎フレームではなく、偶数フレームの時だけ 毎フレーム だと手がちぎ れんばかりに 動くのでｗ
- 42. 走ってるように見せる！（２） • bear.pose = bear.pose + 1; – 変数を１つ増やす • bear.pose = bear.pose % 2; – ２で割ったあまりを入れる（０か１） • bear.frame = bear.pose + 1; – １つずらしたくまを表示する
- 45. もう１匹くまを表示してみよう！ • 女の子のくま • 大きさは今までのくまの１．５倍（縦横両方） • 座標は（１６０，１６０）の位置に表示
- 46. もう１匹くまを表示してみよう！ • 画像を表示するには – var bear = new Sprite(32,32); – bear.image = game.assets['chara1.gif']; – game.rootScene.addChild(bear);
- 47. もう１匹くまを表示してみよう！
- 48. もう１匹くまを表示してみよう！
- 51. 当たり判定をつけよう！ • 距離は２点の距離を求める公式 – ルートは Math.sqrt() – ２乗はないので掛け算
- 52. 当たり判定をつけよう！
- 53. 当たり判定をつけよう！ • var distans = Math.sqrt((bear.x -‐ target.x)*(bear.x -‐ target.x) + (bear.y -‐ target.y) * (bear.y -‐ target.y)); – 茶色くまと女の子くまの距離 • if(distans < 20) – 距離が２０以下になったとき • target.frame = 13; – 女の子が泣く
- 54. 当たり判定をつけよう！ • else – 距離が２０以上になったとき • target.frame = 10; – 泣き止む
- 56. 女の子が逃げる！ • 当たったら女の子がランダムな位置に移動 – Math.random()をつかう。 • x=Math.random()でxに０から１までのランダムな数を 入れてくれる
- 57. 女の子が逃げる！
- 58. 女の子が逃げる！ • target.x = Math.random( ) * 300; – 女の子のｘ座標をランダム • target.y = Math.random() * 300; – 女の子のｙ座標をランダム
- 62. スコアをつけます！（とりあえず表示） • var score = new Label(); – 文字やテキストを表示するオブジェクト • score.x = 10;score.y = 10 – 表示する位置 • score.text = "0point!"; – 表示する内容
- 63. スコアをつけます！（とりあえず表示） • var point = 0; – ポイントを増やしていくための変数 • game.rootScene.addChild(score); – 画面に表示したいものはすべてこれをかく！
- 67. スコアをつけます！（点数増やすよ） • if(distans < 20) – 当たった時だからこの中にかく • point = point + 100; – １回当たったらpointを１００増やす • score.text = point+"point!” – 表示するないようは増えたポイントの値とpoint!と いう文字列
- 70. 時間制限をつけよう！
- 71. 時間制限をつけよう！
- 72. 時間制限をつけよう！ • var Dme = new Label(); • Dme.x = 300; • Dme.y = 300; • Dme.text = "30” – ３０と表示する • var limt = 30; – この数を段々減らして秒数を表す • var count = 0; – ふやして２４になったら１秒減らす
- 73. 時間制限をつけよう！ • count = count + 1; – countを１ずつ増やしていく • if(count == 24) – ２４回カウントしたら • limt = limt -‐ 1; – ３０から１引いて１秒たったとする • Dme.text = limt; – １秒減らした数を表示する • count = 0; – また２４数えるために０にする
- 75. gameoverをつける
- 76. gameoverをつける • if(Dme.text < 0) – Dme.textが０より小さくなろうとしたら • Dme.text = 0; – ０にする • game.end(point,“点数は”+point+“点です”); – 9leapに上げた時にでるメッセージ