説明
ブロック崩しのブロックを描くには、あらかじめブロックの情報を入れる配列を用意しておきます。サンプルでは「var block = new Array();」として配列を用意しておきます。なお、昔のBASICを使っていた人向けに補足するとJavaScriptでは、使用する配列の要素数を指定しなくても問題ありません（DIM A(10)のように使用する要素数は指定しなくてもよい）。
配列を用意したら、new Sprite()を使って配列にスプライト（この場合はブロック）を入れます。後は、通常のスプライトの設定と土曜に表示するXY座標を設定していきます。ブロック崩しのブロックは縦横に配置されるので「x * 32+12」「y * 18 + 30」のようにして座標値を計算で求めます。
■HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sample game</title>
<style>
body { margin: 0; }
</style>
<script src="js/enchant.min.js"></script>
<script src="js/main.js"></script>
</head>
<body></body>
</html>
■JavaScript (main.js)
enchant(); // ライブラリの初期化
window.onload = function(){
// 240×320ピクセルサイズの画面(Canvas)を作成
var game = new Game(240, 320);
// フレームレートの設定。30fpsに設定
game.fps = 30;
// 画像データをあらかじめ読み込ませる
game.preload("images/block.png");
// ゲームの背景色を青色に設定
game.rootScene.backgroundColor = "blue";
// ブロックを格納する配列
var block = new Array();
// データの読み込みが完了したら処理
game.onload = function(){
// カウンタを用意
var counter = 0;
// ボールの設定を縦横の数だけ繰り返し生成
for(var y=0; y<5; y++){
for(var x=0; x<7; x++){
block[counter] = new Sprite(24, 12);
block[counter].image = game.assets["images/block.png"];
block[counter].x = x * 32+12; // X座標
block[counter].y = y * 18 + 30; // Y座標
game.rootScene.addChild(block[counter]);
counter = counter + 1; // カウンタを増やす
}
}
}
game.start(); // ゲーム処理開始
}
目次に戻る