Forked from: phi's enchant.js | クマタッチ - 04.クマをタッチで消せるようにしよう View Diff (14) enchant.js | クマタッチ - 05.クマを特定時間経つと消えるようにしよう phi Follow 2012-03-24 01:43:24 License: MIT License Fork6 Fav0 View5085 Play Stop Reload Fullscreen Smart Phone Fork tree Readme JavaScript 146 lines HTML 1 lines CSS 1 lines // [About] // [enchant.js] Official = http://enchantjs.com/ja/?s=ja (ja) || http://enchantjs.com/en/ (en) Blog = http://wise9.jp/ Dev Blog = http://blog.enchantjs.com/ja/ (ja) || http://blog.enchantjs.com/ (en) // [phi] ハンドルネーム, 気軽に質問やアドバイス下さいな♪ Blog = http://tmlife.net/ Twitter = https://twitter.com/#!/phi_jp // [Entry] 全 tips へのリンクは『enchant.js 怒涛の 100 tips』にまとめてあります. http://tmlife.net/?p=5396 enchant.js | クマタッチ - 05.クマを特定時間経つと消えるようにしよう enchant.js v0.4.0 // forked from phi's "enchant.js | クマタッチ - 04.クマをタッチで消せるようにしよう" http://jsdo.it/phi/lLjm // forked from phi's "enchant.js | クマタッチ - 03.クマをフレームアニメーションさせよう" http://jsdo.it/phi/u57Z // forked from phi's "enchant.js | クマタッチ - 02.クマが画面外に出ないようにしよう" http://jsdo.it/phi/ts1z // forked from phi's "enchant.js | クマタッチ - 01.クマがランダムな方向に動くようにしよう" http://jsdo.it/phi/pN3p // forked from phi's "enchant.js | クマタッチ - 00.クマクラスを生成しよう" http://jsdo.it/phi/nCAK // forked from phi's "enchant.js - enchant.js のテンプレートを用意しよう" http://jsdo.it/phi/isoa // おまじない(using namespace enchant) enchant(); // 素材(必要になりそうなやつ) var KUMA_IMAGE_PATH = "http://enchantjs.com/assets/images/chara1.gif"; // プレイヤーイメージ var MAIN_BGM = "http://enchantjs.com/assets/sounds/bgm02.wav"; // メインBGM var TOUCH_SE_PATH = "http://enchantjs.com/assets/sounds/se8.wav"; // クマタッチ時SE var TOUCH_KUMAKO_SE_PATH = "http://jsrun.it/assets/b/1/R/m/b1Rm4.wav"; // クマ子タッチ時SE var TOUCH_KUMAYA_SE_PATH = "http://enchantjs.com/assets/sounds/se9.wav"; // クマ也タッチ時SE // 定数 var SCREEN_WIDTH = 320;// 画面幅 var SCREEN_HEIGHT = 320;// 画面高さ var FRAME_RATE = 30; // フレームレート var KUMA_SPEED = 2; // クマの移動速度 // グローバル変数 var game = null; window.onload = function() { game = new Game(SCREEN_WIDTH, SCREEN_HEIGHT); game.fps = FRAME_RATE; // リソース読み込み game.preload(KUMA_IMAGE_PATH, TOUCH_SE_PATH, TOUCH_KUMAKO_SE_PATH, TOUCH_KUMAYA_SE_PATH, MAIN_BGM); game.onload = function() { var scene = game.rootScene; scene.backgroundColor = "#222"; // シーン更新イベントリスナを登録 scene.onenterframe = function() { if (game.frame % 15 == 0) { var kuma = new Kuma(); // ランダムな位置に表示する var x = Math.random()*(game.width-kuma.width); var y = Math.random()*(game.height-kuma.height); kuma.moveTo(x, y); scene.addChild(kuma); } } }; game.start(); }; // クマクラス var Kuma = Class.create(Sprite, { // 初期化 initialize: function() { Sprite.call(this, 32, 32); this.image = game.assets[KUMA_IMAGE_PATH]; // 移動値をセット this.vx = Math.floor( Math.random()*2 ) ? -1 : 1; this.vy = Math.floor( Math.random()*2 ) ? -1 : 1; this.speed = KUMA_SPEED; this.scaleX = this.vx; // アニメーション用パラメータ this.frameIndex = 0; this.frameList = [0, 1, 2]; // 時間 this.time = 0; this.limitTime = 150; }, // クマ系クラス共通処理 onenterframe: function() { // 更新処理 this.update(); // フレームアニメーション this.anim(); // リミット時間を超えたら消す if (this.time > this.limitTime) { this.parentNode.removeChild(this); } // タイム加算 ++this.time; }, // クマ系クラス共通処理 ontouchstart: function() { this.parentNode.removeChild(this); }, // 更新 update: function() { // TODO: 動きを変更したいときはここに書く(継承先も同様) // 移動 this.x += this.vx * this.speed; this.y += this.vy * this.speed; // 画面外に出ないよう制御する this.control(); }, // アニメーション anim: function() { if (game.frame % 4 == 0) { this.frameIndex += 1; this.frameIndex %= this.frameList.length; this.frame = this.frameList[this.frameIndex]; } }, // 画面からはみ出ないよう制御 control: function() { var left = 0; var right = game.width-this.width; var top = 0; var bottom = game.height-this.height; if (this.x < left) { this.x = left; this.vx *= -1; this.scaleX *= -1; } if (this.x > right) { this.x = right; this.vx *= -1; this.scaleX *= -1; } if (this.y < top) { this.y = left; this.vy *= -1; } if (this.y > bottom) { this.y = right; this.vy *= -1; } }, }); <canvas id='world'></canvas> enchant.js | クマタッチ - 05.クマを特定時間経つと消えるようにしよう body { background-color: #DDDDDD; font: 30px sans-serif; margin: 0px; } // [About] // [enchant.js] Official = http://enchantjs.com/ja/?s=ja (ja) || http://enchantjs.com/en/ (en) Blog = http://wise9.jp/ Dev Blog = http://blog.enchantjs.com/ja/ (ja) || http://blog.enchantjs.com/ (en) // [phi] ハンドルネーム, 気軽に質問やアドバイス下さいな♪ Blog = http://tmlife.net/ Twitter = https://twitter.com/#!/phi_jp // [Entry] 全 tips へのリンクは『enchant.js 怒涛の 100 tips』にまとめてあります. http://tmlife.net/?p=5396 // forked from phi's "enchant.js | クマタッチ - 04.クマをタッチで消せるようにしよう" http://jsdo.it/phi/lLjm // forked from phi's "enchant.js | クマタッチ - 03.クマをフレームアニメーションさせよう" http://jsdo.it/phi/u57Z // forked from phi's "enchant.js | クマタッチ - 02.クマが画面外に出ないようにしよう" http://jsdo.it/phi/ts1z // forked from phi's "enchant.js | クマタッチ - 01.クマがランダムな方向に動くようにしよう" http://jsdo.it/phi/pN3p // forked from phi's "enchant.js | クマタッチ - 00.クマクラスを生成しよう" http://jsdo.it/phi/nCAK // forked from phi's "enchant.js - enchant.js のテンプレートを用意しよう" http://jsdo.it/phi/isoa // おまじない(using namespace enchant) enchant(); // 素材(必要になりそうなやつ) var KUMA_IMAGE_PATH = "http://enchantjs.com/assets/images/chara1.gif"; // プレイヤーイメージ var MAIN_BGM = "http://enchantjs.com/assets/sounds/bgm02.wav"; // メインBGM var TOUCH_SE_PATH = "http://enchantjs.com/assets/sounds/se8.wav"; // クマタッチ時SE var TOUCH_KUMAKO_SE_PATH = "http://jsrun.it/assets/b/1/R/m/b1Rm4.wav"; // クマ子タッチ時SE var TOUCH_KUMAYA_SE_PATH = "http://enchantjs.com/assets/sounds/se9.wav"; // クマ也タッチ時SE // 定数 var SCREEN_WIDTH = 320;// 画面幅 var SCREEN_HEIGHT = 320;// 画面高さ var FRAME_RATE = 30; // フレームレート var KUMA_SPEED = 2; // クマの移動速度 // グローバル変数 var game = null; window.onload = function() { game = new Game(SCREEN_WIDTH, SCREEN_HEIGHT); game.fps = FRAME_RATE; // リソース読み込み game.preload(KUMA_IMAGE_PATH, TOUCH_SE_PATH, TOUCH_KUMAKO_SE_PATH, TOUCH_KUMAYA_SE_PATH, MAIN_BGM); game.onload = function() { var scene = game.rootScene; scene.backgroundColor = "#222"; // シーン更新イベントリスナを登録 scene.onenterframe = function() { if (game.frame % 15 == 0) { var kuma = new Kuma(); // ランダムな位置に表示する var x = Math.random()*(game.width-kuma.width); var y = Math.random()*(game.height-kuma.height); kuma.moveTo(x, y); scene.addChild(kuma); } } }; game.start(); }; // クマクラス var Kuma = Class.create(Sprite, { // 初期化 initialize: function() { Sprite.call(this, 32, 32); this.image = game.assets[KUMA_IMAGE_PATH]; // 移動値をセット this.vx = Math.floor( Math.random()*2 ) ? -1 : 1; this.vy = Math.floor( Math.random()*2 ) ? -1 : 1; this.speed = KUMA_SPEED; this.scaleX = this.vx; // アニメーション用パラメータ this.frameIndex = 0; this.frameList = [0, 1, 2]; // 時間 this.time = 0; this.limitTime = 150; }, // クマ系クラス共通処理 onenterframe: function() { // 更新処理 this.update(); // フレームアニメーション this.anim(); // リミット時間を超えたら消す if (this.time > this.limitTime) { this.parentNode.removeChild(this); } // タイム加算 ++this.time; }, // クマ系クラス共通処理 ontouchstart: function() { this.parentNode.removeChild(this); }, // 更新 update: function() { // TODO: 動きを変更したいときはここに書く(継承先も同様) // 移動 this.x += this.vx * this.speed; this.y += this.vy * this.speed; // 画面外に出ないよう制御する this.control(); }, // アニメーション anim: function() { if (game.frame % 4 == 0) { this.frameIndex += 1; this.frameIndex %= this.frameList.length; this.frame = this.frameList[this.frameIndex]; } }, // 画面からはみ出ないよう制御 control: function() { var left = 0; var right = game.width-this.width; var top = 0; var bottom = game.height-this.height; if (this.x < left) { this.x = left; this.vx *= -1; this.scaleX *= -1; } if (this.x > right) { this.x = right; this.vx *= -1; this.scaleX *= -1; } if (this.y < top) { this.y = left; this.vy *= -1; } if (this.y > bottom) { this.y = right; this.vy *= -1; } }, }); <canvas id='world'></canvas> body { background-color: #DDDDDD; font: 30px sans-serif; margin: 0px; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? // [About] // [enchant.js] Official = http://enchantjs.com/ja/?s=ja (ja) || http://enchantjs.com/en/ (en) Blog = http://wise9.jp/ Dev Blog = http://blog.enchantjs.com/ja/ (ja) || http://blog.enchantjs.com/ (en) // [phi] ハンドルネーム, 気軽に質問やアドバイス下さいな♪ Blog = http://tmlife.net/ Twitter = https://twitter.com/#!/phi_jp // [Entry] 全 tips へのリンクは『enchant.js 怒涛の 100 tips』にまとめてあります. http://tmlife.net/?p=5396 Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author phi ゲームプログラマやりながら執筆してる27歳. phina.js(tmlib.js) というライブラリ作ってます. 著書「enchant.js スマートフォンゲーム開発講座」 『日本国民全員プログラマ化計画』進行中 Math/JavaScript/HTML5/CSS3/Python/C/C++/C#/Java Blog http://phiary.me Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/xjiZ/js"></script> enchant.js game javascript library&test smartphones&tablets 怒濤 Discussion Questions on this code? Tags enchant.js game javascript library&test smartphones&tablets 怒濤 Forked sort by latest page views favorite forked forked: enchant.js | クマタッチ - 0 bonk321 00 763 150/1/1 enchant.js game javascript library&test smartphones&tablets 怒濤 forked: enchant.js | クマタッチ - 0 ktgwrntr 00 575 147/1/1 enchant.js game javascript library&test smartphones&tablets 怒濤 forked: enchant.js | クマタッチ - 0 isaoking 00 774 147/1/1 enchant.js game javascript library&test smartphones&tablets 怒濤 forked: enchant.js | クマタッチ - 0 meroon 00 565 147/1/1 enchant.js game javascript library&test smartphones&tablets 怒濤 1 2NEXT>>