説明
B-WINGSのように自機を常に中央にし、地形を左右にスクロールさせるには、表示するマップ画像に一工夫しておきます。ここでは同じマップをエンドレスでスクロールさせ、なおかつ左右にもエンドレスでスクロールさせるため、画面と同じマップを上下左右に配置します。つまり画面が240x320サイズでマップも同一サイズであれば480x640の地形画像を用意し、そこに4つ同じものを描いておくわけです。
次に左右のキーが押されたら自機の座標ではなくマップのX座標を加算または減算します。マップが移動した場合には表示範囲を超えないように座標を調整します。
■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/fighter.png", "images/map.png");
// データの読み込みが完了したら処理
game.onload = function(){
// 地上のマップ（画像）を設定
var map = new Sprite(480, 640);
map.image = game.assets["images/map.png"];
game.rootScene.addChild(map);
// 自機の設定
var fighter = new Sprite(32, 32);
fighter.image = game.assets["images/fighter.png"];
fighter.x = (game.width / 2) - (fighter.width/2);
fighter.y = game.height - fighter.height;
game.rootScene.addChild(fighter);
// フレームイベントが発生したら処理
fighter.addEventListener(Event.ENTER_FRAME, function(){
if (game.input.left){
map.x = map.x + 2; // マップを右に移動
if (map.x > -1){ map.x = -map.width / 2; }
}
if (game.input.right){
map.x = map.x - 2; // マップを左に移動
if (map.x < (-map.width/2)){ map.x = 0; }
}
if (game.input.up && (fighter.y > 80)){ fighter.y = fighter.y - 4; }
if (game.input.down && (fighter.y < game.height-fighter.height)){ fighter.y = fighter.y + 4; }
});
// フレームイベントが発生したらマップをスクロール
map.addEventListener(Event.ENTER_FRAME, function(){
map.y = map.y + 4; // 下に移動
if (map.y > -1){ map.y = -map.height / 2; }
});
}
game.start(); // ゲーム処理開始
}
目次に戻る