前回の「初めてのenchant.js 005文字の表示[JavaScript]」では、
シーン上に文字を表示しました。
今回は音を鳴らしてみます。
まず音声ファイルを準備します。
enchant.jsをダウンロードしてできたディレクトリからコピーしましょう。
今回は、ダウンロードのディレクトリにある以下のの2つのファイルを

examples/action/gameover.wav examples/action/jump.wav
sounds/gameover.wav sounds/jump.wav
HTMLの方は特に変更なしです。
[index.html]
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <title>enchant.js example 006</title> <script type="text/javascript" src="js/enchant.js"></script> <script type="text/javascript" src="js/main.js"></script> </head> <body> <div id="enchant-stage"></div> <h1>enchant.js example 006</h1> </body> </html>
次にmain.jsのmain()メソッド内に音を鳴らするプログラムを追加します。
assetsを指定してplay()するだけなので簡単です。
[main.js]
enchant();
window.onload = initGame;
var game;
var scene;
var bear;
var score;
function initGame(){
game = new Game(320,320);
game.preload(
'images/chara0.gif',
'images/chara1.gif',
'sounds/jump.wav',
'sounds/gameover.wav'
);
game.onload = main;
game.start();
}
function main(){
game.scale = 1;
scene = new Scene();
scene.backgroundColor = "#000";
game.pushScene(scene);
bear = new Sprite(32,32);
bear.image = game.assets['images/chara1.gif'];
bear.x = 100;
bear.y = 100;
scene.addChild(bear);
score = new Label("0123456");
score.color = "#FC9";
score.font = "normal normal 15px/1.0 monospace";
score.text = "00990";
scene.addChild(score);
game.assets['sounds/gameover.wav'].play();
game.assets['sounds/jump.wav'].play();
}
コード解説
game.preload( 'images/chara0.gif', 'images/chara1.gif', 'sounds/jump.wav', 'sounds/gameover.wav' );
プリロードに音声ファイルを追加しました。
game.assets['sounds/gameover.wav'].play(); game.assets['sounds/jump.wav'].play();
音を鳴らしています。
ここでは2音は同時に鳴らないようです。
なにか方法があるかもしれません。
次回は「初めてのenchant.js 007ちょっとごちゃってきたのでリファクタリング[JavaScript]」です。
初めてのenchant.js 一覧
- 初めてのenchant.js 001 基本的なこと[JavaScript]
- 初めてのenchant.js 002 基本セッティング[JavaScript]
- 初めてのenchant.js 003シーンの表示[JavaScript]
- 初めてのenchant.js 004画像の表示[JavaScript]
- 初めてのenchant.js 005文字の表示[JavaScript]
- 初めてのenchant.js 006音を鳴らす[JavaScript]
- 初めてのenchant.js 007ちょっとごちゃってきたのでリファクタリング[JavaScript]
- 初めてのenchant.js 008イベント(基本編)[JavaScript]
- 初めてのenchant.js 009イベント(touchその1)[JavaScript]
- 初めてのenchant.js 010イベント(touchその2)[JavaScript]
- 初めてのenchant.js 011イベント(ENTER_FRAME)[JavaScript]
- 初めてのenchant.js 012イベント(キーボード)[JavaScript]
- 初めてのenchant.js 013当たり判定[JavaScript]
- 初めてのenchant.js 014オブジェクトの拡張[JavaScript]
- 初めてのenchant.js 015簡単なミニゲーム作成[JavaScript]
こちらもオススメ(別サイト)
enchant.js 怒涛の 100 tips
phiさんの怒涛のTips集:なんとなくenchant.js分かってきたーって人はここのTipsを修行僧の用にストイックにこなせばennchant.jsある程度できます。と言えるようになるはず。
ドットインストール:enchant.jsの基礎
こちらは、逆にうーん説明見てもよくわからんなぁーって人向け、登録は必要だけど、ビデオをみながら説明が入るのでチョー分かりやすい&enchant.js以外にも様々なレッスンビデオがやばいくらいいっぱい。しかも無料ときたもんだ。

コメントを残す