先日、画面上の物体をランダムに自由に動かすプログラムの書き方をまとめました。
今回はそのプログラムを活用して、大量の蚊が嫌〜な音をたてるという無駄な作品を作ってみたメモです。
作ったもの
一定時間ごとに、画面上中央から蚊に見立てた粒が出現します。
ひとつひとつの蚊達が、それぞれ自由に動き回り、嫌な音をたてます。
先日の記事はUnityでの活用でしたが、今回はHTMLとJavaScriptで書きました。
動作している様子はこちらです。
音量に十分に注意してください。
大事なのでもう一度、書きます。
音量を下げてください。
実装
見た目のHTMLはシンプルです。
head内でmain.jsの呼び出し、canvasをscreenというidで表示しています。
次にJavaScriptによる、プログラム部分です。
[highlight_javascript]
//変数宣言
var screenCanvas, info;
var run = true;
var fps = 1000 / 30;
var mouseX = 0;
var mouseY = 0;
var BLOCK_NUM = 10;
var block_x = new Array(BLOCK_NUM);
var block_y = new Array(BLOCK_NUM);
var block_alive_flag = new Array(BLOCK_NUM);
var block_frame_count = new Array(BLOCK_NUM);
var block_move_direction = new Array(BLOCK_NUM);
var block_audio = new Array(BLOCK_NUM);
var block_w = 5;
var block_h = 5;
var frameCounter = 0;
//main
window.onload = function () {
//初期化
screenCanvas = document.getElementById(‘screen’);
info = document.getElementById(‘info’);
screenCanvas.width = 500;
screenCanvas.height = 500;
//イベント登録
screenCanvas.addEventListener(‘mousemove’, mouseMove, true);
window.addEventListener(‘keydown’, keyDown, true);
// 2dコンテキスト
ctx = screenCanvas.getContext(‘2d’);
//ループ
(function () {
info.innerHTML = mouseX + ‘ : ‘ + mouseY;
//ブロックの初期化
for (var i = 0; i < BLOCK_NUM; i++) {
if (block_x[i] == null) {
block_x[i] = 250;
block_y[i] = 10;
block_alive_flag[i] = true;
block_frame_count[i] = 0;
block_audio[i] = new Audio(“mosquito.mp3”);
}
}
if(BLOCK_NUM < 1000){
frameCounter++;
if(frameCounter % 50 == 0){
BLOCK_NUM += BLOCK_NUM-9;
}
}
//ブロックの状態を調査
for (var i = 0; i < BLOCK_NUM; i++) {
//生きていたら
if (block_alive_flag[i]) {
block_audio[i].play();
if (block_frame_count[i] == 0) {
block_move_direction[i] = Math.floor((Math.random() * 4) + 1);
block_frame_count[i] = Math.floor((Math.random() * 5) + 5);
}
else {
switch (block_move_direction[i]) {
case 1:
if (block_x[i] < 500 – block_w) { block_x[i] += 3; } break; case 2: if (block_x[i] > 0 + block_w) {
block_x[i] -= 3;
}
break;
case 3:
if (block_y[i] < 500 – block_h) { block_y[i] += 3; } break; case 4: if (block_y[i] > 0 + block_h) {
block_y[i] -= 3;
}
break;
}
block_frame_count[i]–;
}
// block_audio[i].pause();
// block_audio.currentTime = 0;
}
}
// screenクリア
ctx.clearRect(0, 0, screenCanvas.width, screenCanvas.height);
//ブロック描画
for (var i = 0; i < BLOCK_NUM; i++) {
if (block_alive_flag[i]) {
// パスの設定を開始
ctx.beginPath();
// 円の色を設定する
ctx.fillStyle = ‘rgba(0, 0, 255, 0.75)’;
// 円を描くパスを設定
ctx.arc(block_x[i], block_y[i], 5, 0, Math.PI * 2, false);
// 円を描く
ctx.fill();
}
}
//ロープ処理をもう一度
if (run) { setTimeout(arguments.callee, fps); }
})();
};
function makeNewBlock() {
}
//event
function mouseMove(event) {
// マウスカーソル座標の更新
mouseX = event.clientX – screenCanvas.offsetLeft;
mouseY = event.clientY – screenCanvas.offsetTop;
}
function keyDown(event) {
// キーコードを取得
var ck = event.keyCode;
// console.log(ck);
// Spaceキーが押されていたらフラグを降ろす
if (ck === 32) { run = false; }
}
[/highlight_javascript]
効果音の再生に手間取りました。
効果音の再生には以下のステップが必要です。
- var audio = new Audio(“ファイルを指定”);
- audio.play();
今回は蚊、ひとつひとつから音が出ることにしたかったので、配列を使いました。
配列はvar audio = new Array(配列の数);で作成できます。
あとは先ほどのステップを配列の要素ごとに行えば完了です。
おわりに
これを作っている途中にひとつ作りたいゲームを思いついたので、これから挑戦してみます。今度はUnityでやってみます。いろんなプラットフォームで同じ原理のプログラムを書くことで、理解が深まりそうです。
ちなみに先日の記事はこちらです
