Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

苫小牧高専 ソフトウェアテクノロジー部 enchant.jsでゲーム作り 5

807 vues

Publié le

苫小牧高専 ソフトウェアテクノロジー部 新入生向けの資料です。

Publié dans : Technologie
  • Identifiez-vous pour voir les commentaires

  • Soyez le premier à aimer ceci

苫小牧高専 ソフトウェアテクノロジー部 enchant.jsでゲーム作り 5

  1. 1. テーマ1 enchant.js で ゲーム作り (5) 2015/05/26 苫小牧高専 ソフトウェアテクノロジー部
  2. 2. 今日やること • 学科内サーバの個人用ページについて • 次回のテーマについて • 前回のまとめ • クマ狩りゲームを作ろう
  3. 3. 学科内サーバの 個人用ページについて
  4. 4. http://www/~mt12340/
  5. 5. 次回のテーマについて
  6. 6. 前回のまとめ
  7. 7. ゲームオーバーの処理
 
 ∼いよいよゲームっぽくなってきたかも∼ 前回のテーマ(1)
  8. 8. シーンについて復習 • coreオブジェクトを作成。
 coreオブジェクトは最初からrootSceneを持っている。 • クマさん(Sprite)やテキスト(Label)を作るたびに、
 core.rootSceneにaddChildしていく。 // 第1回目で書いたソースコード enchant(); window.onload = function() { var core = new Core(320, 320); core.preload('chara1.png'); core.onload = function() { // 中略 core.rootScene.addChild(bear); } core.start(); }
  9. 9. クマさんを 捕まえるゲームを作ろう 今日のテーマ
  10. 10. tnct-softech.herokuapp.com
  11. 11. 必要なもの配布 1. ブラウザで http://www/ mt12340 を開く 2. クマ狩りゲーム を右クリック、保存
  12. 12. クマさんを 捕まえるミニゲーム
  13. 13. 工程 1. クマさんをランダムに表示 2. スコア機能実装 3. タイマー機能実装
  14. 14. 今までの知識を使って 改造しながら作ろう!
  15. 15. 今までの知識 • rotate() や scale() を使った回転させたり、拡大縮 小させたり……。 • bear.frame を操作して白クマやピンククマにした り、走らせたり? • 複数のクマさんを出してみたり?
 (ちょっと難しめかも)
  16. 16. クマさんを ランダムに表示する
  17. 17. main.js enchant(); window.onload = function() { var core = new Core(320, 320); core.preload('chara1.png'); core.fps = 15; core.onload = function () { var bear = new Sprite(32, 32); bear.x = rand(320); bear.y = rand(320); bear.frame = 0; bear.image = core.assets['chara1.png']; } core.rootScene.addChild(bear); core.start(); } function rand(n) { return Math.floor(Math.random() * (n + 1)); }
  18. 18. よく使う処理を 関数にまとめる • function 関数名(引数) {
 // 処理;
 return 処理結果;
 } • 難しく考えなくてOK • よく使う処理をまとめるもの、とだけ。 function rand(n) { return Math.floor(Math.random() * (n + 1)); }
  19. 19. スコア表示機能を作る
  20. 20. main.js enchant(); window.onload = function() { // 省略 var score = 0; core.onload = function () { // 省略 var scoreLabel = new Label('Score: 0'); scoreLabel.x = 200; scoreLabel.y = 5; bear.on('touchstart', function() { score++; scoreLabel.text = 'Score: ' + score; this.x = rand(320); this.y = rand(320); }); core.rootScene.addChild(bear); core.rootScene.addChild(scoreLabel); } core.start(); } // 以下省略↓
  21. 21. 制限時間をつける
  22. 22. main.js enchant(); window.onload = function() { // 省略 var score = 0; var timeLeft = 5 * core.fps; core.onload = function () { // 省略 var timeLabel = new Label('Time: 0'); timeLabel.x = 5; timeLabel.y = 5; core.on('enterframe', function() { timeLeft--; timeLabel.text = 'Time: ' + timeLeft; if (timeLeft < 0) { alert('Your score: ' + score); this.stop(); } }); // 中略 core.rootScene.addChild(bear); core.rootScene.addChild(scoreLabel); core.rootScene.addChild(timeLabel); } core.start(); } // 以下省略
  23. 23. 完成!
  24. 24. 残り時間で 改造しよう!
  25. 25. テーマ1 enchant.js で ゲーム作り ∼完∼

×