Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import or require. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <script src="http://code.createjs.com/easeljs-0.6.1.min.js"></script>
<script src="http://code.createjs.com/preloadjs-0.3.1.min.js"></script>
<canvas id="myCanvas" width="450" height="450"></canvas>
            
          
!
            
              body {
  background-color: #ffffff;
  margin: 0;
}

canvas {
  background-color: #ffffff;
}
            
          
!
            
              // forked from siouxcitizen's "CreateJS 0.6.1 前回コードからNPC(僧侶、魔女、しかばね)に話しかけられるように修正" http://jsdo.it/siouxcitizen/br6Y
//
//自分のスマホから操作できるゲーム目指して。。。(自分のスマホでの動き怪しくなってきましたが。。。)
//自分のスマホからだとAボタンが連打になってしまいやすい。。。
//
//最初の画面から下に行った2画面目の「しかばね」と戦えるようにしてみました
//戦闘機能もどきなので、負けることはありませんが。。。
//
//仮想キーのAボタン、またはキーボードのZボタン押下で「しかばね」と戦闘もどきできます
//
//操作
//・仮想キーのBボタン、またはPCキーボードのBボタンで
// 操作キャラの移動速度を変更できます
//・操作キャラの上下左右への移動は仮想キーの↑↓←→、
// PCキーボードのWSADまたは↑↓←→ボタンでおこなえます
//・仮想キーのAボタン、またはPCキーボードの「Z」「.」ボタンでNPCに話しかけます
// 「しかばね」に話しかけた場合さらに戦闘もどきをおこなえます
//
//後から後から分岐の機能のつじつまあわせてたら、フラグが増えすぎて
//自分でもわけわかんなくなってきた。。。
//そういえば0.6.1はCreateJSのバージョンではなくてEaselJSのバージョン
//なんですね。。。 さっき気がついた。。。 まぁ、今回はとりあえずそのままで。。。
//
//
//参考にした昔作成の自分のコード
//CreateJS>EaselJS Prac.16 Zボタン押すだけの戦闘機能
//http://jsdo.it/siouxcitizen/wSpu
//
var stage;
var message;
var queue;
var manifest;

//var loadingMessage;
var isBattle = false;
var isBattleOver = false;
var isShikabane = true;
var battleGraphics;
var battleBackGroundRect;
var battleMessage;
var btlYuushaTurn = false;
var enemyHP = 30;

var isTalking = false;
var talkingGraphics;
var talkingBackGroundRect;
var talkingMessage;

//ボタン用画像
var leftButtonBmp;     //左ボタン画像
var rightButtonBmp;    //右ボタン画像
var upButtonBmp;       //上ボタン画像
var downButtonBmp;     //下ボタン画像
var aButtonBmp;        //Aボタン画像
var bButtonBmp;        //Bボタン画像

var prevDirection = 0;
var direction = 4; //歩いていく方向 (0~3:下上左右  4:止)
var keyFlags = [false, false, false, false];

var graphics;
var backGroundRect;
var mapGround;
var mapData;
var mapObstacleData;
//スプライトシートによる勇者アニメーション用
var yuusha;
var charaX = 0;
var charaY = 0;
var charaSpeed = 4;

var priest;
var witch;
var shikabane;

var field;
//マップチップの描画指定を行なう配列
//実際の値は 関数 setMapData() で設定
var firstMapData;
var firstMapObstacleData;
var secondMapData;
var secondMapObstacleData;
var thirdMapData;
var thirdMapObstacleData;
//マップ番号 どの配列を使ってマップチップの描画を行なうか判定用
var mapNumber = 1;

window.onload = init;

function init() {
    var myCanvas = document.getElementById('myCanvas');
    stage = new createjs.Stage(myCanvas);
    createjs.Touch.enable(stage); 

    message = new createjs.Text("Now Loading...", "32px Arial", "#ffffff");
    stage.addChild(message);
    message.x = 0;
    message.y = 0;

    stage.update();

    setManifest();
    queue = new createjs.LoadQueue(false);
    queue.loadManifest(manifest,true);
    queue.addEventListener("fileload",handleFileLoad);  
    queue.addEventListener("complete",handleComplete);

}

function handleFileLoad(event){
}

function handleComplete(event){

    //マップチップの描画指定を行なう配列をセット
    setMapData();

    //背景塗りつぶし用矩形
    graphics = new createjs.Graphics();
    graphics.beginFill("#000000");
    graphics.drawRect(0,0,450,450);
    graphics.endFill();
    backGroundRect = new createjs.Shape(graphics);
    backGroundRect.x = 0;
    backGroundRect.y = 0;
    stage.addChild(backGroundRect);

    mapData = firstMapData;
    mapObstacleData = firstMapObstacleData; 

    mapGround =new createjs.Container;
    var mapSpriteSheet = new createjs.SpriteSheet({
        images: [queue.getResult("mapImg")],
        frames: { width: 16, height: 16 }
    });
    field = new createjs.BitmapAnimation(mapSpriteSheet);

    var x = 0, y = 0; 
    while (y < mapData.length){
        while (x < mapData[y].length){
            var map = field.clone();
            map.setTransform(x*32, y*32);
            map.gotoAndStop(mapData[y][x]);
            map.scaleX = map.scaleY = 2;
            mapGround.addChild(map);
            x += 1;
        }
        x = 0;
        y += 1;
    }
    stage.addChild(mapGround);


    //勇者アニメーション用のスプライトシートを作成
    var spriteSheet = new createjs.SpriteSheet({
        images: [queue.getResult("yuushaImg")],
        //↓manifestによるロードを使わず、以下のように直接画像のパスを指定しても動きました
        //images: ["http://jsrun.it/assets/n/x/7/h/nx7he.png"],
        frames: { width:16, height:16 },
        animations: {
            down: { frames: [0, 1], frequency: 5 },
            up: { frames: [2, 3], frequency: 5 },
            left: { frames: [6, 7], frequency: 5 },
            right: { frames: [4, 5], frequency: 5 }
        }
    });
    yuusha = new createjs.BitmapAnimation(spriteSheet);
    yuusha.scaleX = yuusha.scaleY = 2;
    stage.addChild(yuusha);
    yuusha.gotoAndPlay("down");

    //僧侶アニメーション用のスプライトシートを作成
    var sprtShtForPriest = new createjs.SpriteSheet({
        images: [queue.getResult("priestImg")],
        frames: { width:16, height:16 },
        animations: {
            down: { frames: [0, 1], frequency: 5 },
            up: { frames: [2, 3], frequency: 5 },
            left: { frames: [6, 7], frequency: 5 },
            right: { frames: [4, 5], frequency: 5 }
        }
    });
    priest = new createjs.BitmapAnimation(sprtShtForPriest);
    priest.scaleX = priest.scaleY = 2;
    priest.gotoAndPlay("down");
    priest.x = 256;
    priest.y = 32;
    mapGround.addChild(priest);

    //魔女アニメーション用のスプライトシートを作成
    var sprtShtForWitch = new createjs.SpriteSheet({
        images: [queue.getResult("witchImg")],
        frames: { width:16, height:16 },
        animations: {
            down: { frames: [0, 1], frequency: 5 },
            up: { frames: [2, 3], frequency: 5 },
            left: { frames: [6, 7], frequency: 5 },
            right: { frames: [4, 5], frequency: 5 }
        }
    });
    witch = new createjs.BitmapAnimation(sprtShtForWitch);
    witch.scaleX = witch.scaleY = 2;
    witch.gotoAndPlay("right");
    witch.x = 128;
    witch.y = 512;
    //mapGround.addChild(witch);

    //しかばねアニメーション用のスプライトシートを作成
    var sprtShtForShikabane = new createjs.SpriteSheet({
        images: [queue.getResult("shikabaneImg")],
        frames: { width:16, height:16 },
        animations: {
            down: { frames: [0, 1], frequency: 5 },
            up: { frames: [2, 3], frequency: 5 },
            left: { frames: [6, 7], frequency: 5 },
            right: { frames: [4, 5], frequency: 5 }
        }
    });
    shikabane = new createjs.BitmapAnimation(sprtShtForShikabane);
    shikabane.scaleX = shikabane.scaleY = 2;
    shikabane.gotoAndPlay("down");
    shikabane.x = 256;
    shikabane.y = 256;
    //mapGround.addChild(shikabane);

    //会話メッセージ用黒背景
    talkingGraphics = new createjs.Graphics();
    talkingGraphics.setStrokeStyle(2).beginStroke("#FFFFFF");
    talkingGraphics.beginFill("#000000");
    talkingGraphics.drawRoundRect(0,0,340,150,10);
    talkingGraphics.endFill();
    talkingBackGroundRect = new createjs.Shape(talkingGraphics);
    //会話メッセージ表示用Textオブジェクトを生成・設定 
    talkingMessage = new createjs.Text("", "20px Arial", "#FFFFFF");

    //戦闘画面&メッセージ用黒背景
    battleGraphics = new createjs.Graphics();
    battleGraphics.setStrokeStyle(2).beginStroke("#FFFFFF");
    battleGraphics.beginFill("#000000");
    battleGraphics.drawRoundRect(0,0,440,270,10);
    battleGraphics.endFill();
    battleBackGroundRect = new createjs.Shape(battleGraphics);
    //会話メッセージ表示用Textオブジェクトを生成・設定 
    battleMessage = new createjs.Text("", "20px Arial", "#FFFFFF");

    //アニメーションさせるキャラの最初の座標を設定
    charaX = 192; //  //32の倍数
    charaY = 192; //  //32の倍数
    //↑かわりに近い32の倍数値を使用
    //↑キャララクターとマップの画像は32*32単位で表示しているため
    //charaX = 209; //450/2 -16  //32の倍数でない  //いくら4を増減しても32で割り切れないので没
    //charaY = 209; //450/2 -16  //32の倍数でない  //いくら4を増減しても32で割り切れないので没
    yuusha.x = charaX;
    yuusha.y = charaY;

    //ボタン作成
    //左ボタン作成
    leftButtonBmp = new createjs.Bitmap(queue.getResult("leftButtonImg"));
    leftButtonBmp.x = 10;
    leftButtonBmp.y = 330;
    leftButtonBmp.scaleX = leftButtonBmp.scaleY = 4;
    leftButtonBmp.alpha = 0.6;
    leftButtonBmp.addEventListener('mousedown',onPressLeftButton,false);
    stage.addChild(leftButtonBmp);

    //右ボタン作成
    rightButtonBmp = new createjs.Bitmap(queue.getResult("rightButtonImg"));
    rightButtonBmp.x = 150;
    rightButtonBmp.y = 330;
    rightButtonBmp.scaleX = rightButtonBmp.scaleY = 4;
    rightButtonBmp.alpha = 0.6;
    rightButtonBmp.addEventListener('mousedown',onPressRightButton,false);
    stage.addChild(rightButtonBmp);

    //上ボタン作成
    upButtonBmp = new createjs.Bitmap(queue.getResult("upButtonImg"));
    upButtonBmp.x = 80;
    upButtonBmp.y = 280;
    upButtonBmp.scaleX = upButtonBmp.scaleY = 4;
    upButtonBmp.alpha = 0.6;
    upButtonBmp.addEventListener('mousedown',onPressUpButton,false);
    stage.addChild(upButtonBmp);

    //下ボタン作成
    downButtonBmp = new createjs.Bitmap(queue.getResult("downButtonImg"));
    downButtonBmp.x = 80;
    downButtonBmp.y = 380;
    downButtonBmp.scaleX = downButtonBmp.scaleY = 4;
    downButtonBmp.alpha = 0.6;
    downButtonBmp.addEventListener('mousedown',onPressDownButton,false);
    stage.addChild(downButtonBmp);

    //Aボタン作成
    aButtonBmp = new createjs.Bitmap(queue.getResult("aButtonImg"));
    aButtonBmp.x = 270;
    aButtonBmp.y = 330;
    aButtonBmp.scaleX = aButtonBmp.scaleY = 4;
    aButtonBmp.alpha = 0.6;
    aButtonBmp.addEventListener('mousedown',onPressAButton,false);
    stage.addChild(aButtonBmp);
    
    //Bボタン作成
    bButtonBmp = new createjs.Bitmap(queue.getResult("bButtonImg"));
    bButtonBmp.x = 370;
    bButtonBmp.y = 330;
    bButtonBmp.scaleX = bButtonBmp.scaleY = 4;
    bButtonBmp.alpha = 0.6;
    bButtonBmp.addEventListener('mousedown',onPressBButton,false);
    stage.addChild(bButtonBmp);

    //メッセージをリリースして再配置
    stage.removeChild(message);
    message.text = ""
    stage.addChild(message);
    //message.x = 0;
    //message.y = 0;

    //30FPSでスタート
    createjs.Ticker.setFPS(30);
    createjs.Ticker.addListener(this);

    //キーが押された時のイベントリスナーの登録
    document.addEventListener('keydown', handleKeyDown, false);
    //キーが離された時のイベントリスナーの登録
    document.addEventListener('keyup', handleKeyUp, false);
}

//キーボードのキーが押された時の処理
function handleKeyDown(event) {
    if (event.keyCode==40 || event.keyCode==83) {//↓ s ボタン        
        if (isBattle) return;  //戦闘中は移動できない
        keyFlags[0] = true;
    } else if (event.keyCode==38 || event.keyCode==87) {//↑ w ボタン
        if (isBattle) return;
        keyFlags[1] = true;
    } else if (event.keyCode==37 || event.keyCode==65) {//← a ボタン
        if (isBattle) return;
        keyFlags[2] = true;
    } else if (event.keyCode==39 || event.keyCode==68) {//→ d ボタン
        if (isBattle) return;
        keyFlags[3] = true;
    } else if (event.keyCode==66) {//b ボタン
        changeCharaSpeed();
    } else if (event.keyCode==90 || event.keyCode==190) {//z . ボタン
        talkToNPC();
    }
}
//talkToNPC()
//ビットマップボタンが押された時の処理
function onPressLeftButton(event) {
    //戦闘中は移動させない
    if (isBattle) return;
    keyFlags[2] = true;
    event.addEventListener("mouseup", releaseLeftButton);
}
function onPressRightButton(event) {
    if (isBattle) return;
    keyFlags[3] = true;
    event.addEventListener("mouseup", releaseRightButton);
}
function onPressUpButton(event) {
    if (isBattle) return;
    keyFlags[1] = true;
    event.addEventListener("mouseup", releaseUpButton);
}
function onPressDownButton(event) {
    if (isBattle) return;
    keyFlags[0] = true;
    event.addEventListener("mouseup", releaseDownButton);
}
function onPressAButton(event) {
    talkToNPC();
    event.addEventListener("mouseup", releaseAButton);
}

//操作キャラの移動スピードを変化させます
function onPressBButton(event) {
    changeCharaSpeed();
    event.addEventListener("mouseup", releaseBButton);
}

//キーボードのキーが離された時の処理
function handleKeyUp(event) {
    if (event.keyCode==40 || event.keyCode==83) {//↓ s ボタン
        keyFlags[0] = false;
    } else if (event.keyCode==38 || event.keyCode==87) {//↑ w ボタン
        keyFlags[1] = false;
    } else if (event.keyCode==37 || event.keyCode==65) {//← a ボタン
        keyFlags[2] = false;
    } else if (event.keyCode==39 || event.keyCode==68) {//→ d ボタン
        keyFlags[3] = false;
    } else if (event.keyCode==66) {//b ボタン
        message.text = "";
    } else if (event.keyCode==90 || event.keyCode==190) {//z . ボタン
    }
}
//ビットマップボタンがリリースされた時の処理
function releaseLeftButton(event) {
    keyFlags[2] = false;
}
function releaseRightButton(event) {
    keyFlags[3] = false;
}
function releaseUpButton(event) {
    keyFlags[1] = false;
}
function releaseDownButton(event) {
    keyFlags[0] = false;
}
function releaseAButton(event) {
}
function releaseBButton(event) {
    message.text = "";
}

function changeCharaSpeed() {
    //操作キャラがマップチップにちょうどおさまっているときのみ操作可能
    //座標の計算のずれをふせぐため(たぶん)
    if ((charaX % 32) == 0 && (charaY % 32) == 0) {
        if (charaSpeed == 4) {
            charaSpeed = 8;
            message.text = "B ダッシュ !";
        } else if (charaSpeed == 8) {
            charaSpeed = 16;
            message.text = "通常の3倍の動き!!!";
        } else if (charaSpeed == 16) {
            charaSpeed = 4;
            message.text = "通常の移動速度になりました";
        } 
    }
}

function talkToNPC() {
    //操作キャラがマップチップにちょうどおさまっているときのみ操作可能
    //座標の計算のずれをふせぐため(たぶん)
    if ((charaX % 32) == 0 && (charaY % 32) == 0) {

        var x;
        var y;
        x = Math.floor(charaX/32);
        y = Math.floor(charaY/32); //

        //戦闘時の処理 スタート■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
        if(mapNumber == 2 && isBattleOver && !isTalking) {
            isBattleOver = false;
            closeBattleScene();
            //しかばねを障害物としていた設定を解除
            secondMapObstacleData[8][8] = 0;
            return;
        }

        if(mapNumber == 2 && isBattle && isTalking) {
            closeTalkingScene();
            initBattleScene("しかばねがおそいかかってきた!!!");
            return;
        }

        if(mapNumber == 2 && isBattle && !isTalking) {
            //closeBattleScene();
            var damage = Math.floor(Math.random()*10);
            if(btlYuushaTurn) {
                if (enemyHP < 0) {
                    battleMessage.text = "しかばねをたおした!!!";
                    //しかばね画像をリリース
                    stage.removeChild(shikabane);
                    isBattleOver = true;
                    isShikabane = false;
                    return; 
                }
                battleMessage.text = "勇者の攻撃" + "\n"
                                   + "しかばねは"+ damage + "のダメージをうけた" + "\n"
                                   + "\n";
                enemyHP = enemyHP - damage;  

                //しかばね画像を点滅させてダメージをあたえた表現にしています
                shikabane.visible = false; 
                setTimeout(function(){ shikabane.visible = true; }, 130);
             
                btlYuushaTurn = false;
            } else {
                battleMessage.text = "しかばねの攻撃" + "\n"
                                   + "勇者は" + damage + "のダメージをうけた" + "\n"
                                   + "\n";
                btlYuushaTurn = true;
            }

            retrun
        }


        //戦闘時の処理 エンド■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■


        //会話時の処理 スタート■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
        if (!isTalking) {
            var talkingMessageTxt;
            if (mapNumber == 1) {
	        //マップ1で僧侶に話しかけた場合
	        if ((x == 8 && y == 2 && prevDirection == 1) || (x == 7 && y == 1 && prevDirection == 3)) {
                    isTalking = true;
                    //会話メッセージを表示
                    talkingMessageTxt = "おお、よくぞまいった" + "\n"
                                      + "勇者ブレイヴ!!!" + "\n"
                                      + "\n"
                                      + "そなたにはぜひこの3画面だけの" + "\n"
                                      + "世界を冒険してもらいたい!";
                    initTalkingScene(talkingMessageTxt);
                }
            } else if (mapNumber == 2) {
	        //マップ2でしかばねに話しかけた場合
	        if ((x == 8 && y == 7 && prevDirection == 0) && isShikabane) {
                    isTalking = true;
                    //会話メッセージを表示
                    talkingMessageTxt = "返事がある!" + "\n"
                                      + "ただのしかばねではないようだ!!";
                    initTalkingScene(talkingMessageTxt);
                    isBattle = true;
                }
            } else if (mapNumber == 3) {
	        //マップ3で魔女に話しかけた場合
	        if ((x == 4 && y == 15 && prevDirection == 0) || (x == 5 && y == 16 && prevDirection == 2) || (x == 4 && y == 17 && prevDirection == 1)) {
                    isTalking = true;
                    //会話メッセージを表示
                    talkingMessageTxt = "恐ろしいしかばねを倒し" + "\n"
                                      + "3画面の世界をすべて歩くとは!" + "\n"
                                      + "勇者よ、そなたはもう十分強い!!" + "\n"
                                      + "\n"
                                      + "私が教えられることは" + "\n"
                                      + "もう何もないようだ!!!";
                    initTalkingScene(talkingMessageTxt);
                }
            } 
        } else {       
            closeTalkingScene(); 
        }
        //会話時の処理 エンド■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

    }
}

function initTalkingScene(msgTxt) {
    //会話メッセージ用の黒背景を表示
    talkingBackGroundRect.x = 70;
    talkingBackGroundRect.y = 10;
    stage.addChild(talkingBackGroundRect);

    //会話メッセージを表示
    talkingMessage.text = msgTxt;
    talkingMessage.x = 90;
    talkingMessage.y = 20;
    stage.addChild(talkingMessage);
}

function closeTalkingScene() {
    //会話メッセージ用の黒背景表示をリリース
    stage.removeChild(talkingBackGroundRect);

    //会話メッセージをリリース
    stage.removeChild(talkingMessage);

    isTalking = false;
}

function initBattleScene(msgTxt) {
    //isBattle = true;
    isBattleOver = false;

    //戦闘メッセージ用の黒背景を表示
    battleBackGroundRect.x = 5;
    battleBackGroundRect.y = 5;
    stage.addChild(battleBackGroundRect);

    //会話メッセージを表示
    battleMessage.text = msgTxt;
    battleMessage.x = 20;
    battleMessage.y = 20;
    stage.addChild(battleMessage);

    //しかばね画像を表示
    shikabane.x = 215;
    shikabane.y = 145;
    stage.addChild(shikabane);
}

function closeBattleScene() {
    //戦闘メッセージ用の黒背景表示をリリース
    stage.removeChild(battleBackGroundRect);

    //戦闘メッセージをリリース
    stage.removeChild(battleMessage);

    isBattle = false;
}

function tick(){

    if ((charaX % 32) == 0 && (charaY % 32) == 0) { //操作キャラ・マップチップは縦横32ドットより
        direction = 4; //止まる

        //とりあえずこの方法で勇者座標から配列インデックスを設定
        var x;
        var y;
        x = Math.floor(charaX/32);
        y = Math.floor(charaY/32); //
        //↑Math.floorで小数点以下切り捨て

        if(keyFlags[0]) { //↓ s ボタン
            //方向ボタンが押された場合は会話メッセージをクローズ
            if(isTalking) closeTalkingScene();
            if (prevDirection != 0) {
                yuusha.gotoAndPlay("down");
                prevDirection = 0;
            }
            if (charaY <= 640-charaSpeed-32 && mapObstacleData[y+1][x] == 0){ //32はキャラチップ1つ分の高さ
            //移動スピード8の場合
            //if (charaY <= 632-32 && mapObstacleData[y+1][x] == 0){ //32はキャラチップの高さ 
            //縦640と移動スピード8から 640-8=632より
            //移動スピード4の場合
            //if (charaY <= 636-32 && mapObstacleData[y+1][x] == 0){ //32はキャラチップの高さ
            //縦640と移動スピード4から 640-4=636より
                //↑32*20→640
                //↑マップチップ1個分のピクセル数*マップチップ指定配列の縦方向数
                direction = 0;
            }
        } else if (keyFlags[1]) { //↑ w ボタン
            //方向ボタンが押された場合は会話メッセージをクローズ
            if(isTalking) closeTalkingScene();
	    if (prevDirection != 1) { 
                yuusha.gotoAndPlay("up");
                prevDirection = 1;
            }
            if (charaY >= charaSpeed && mapObstacleData[y-1][x] == 0) { //縦の上方向に移動スピード分の高さがあれば移動
            //移動スピード8の場合
            //if (charaY >= 8 && mapObstacleData[y-1][x] == 0) { //縦の上方向に移動スピード8分の高さがあれば移動
            //移動スピード4の場合
            //if (charaY >= 4 && mapObstacleData[y-1][x] == 0) { //縦の上方向に移動スピード4分の高さがあれば移動
                direction = 1;
            }
        } else if (keyFlags[2]) { //← a ボタン
            //方向ボタンが押された場合は会話メッセージをクローズ
            if(isTalking) closeTalkingScene();
	    if (prevDirection != 2) {
                yuusha.gotoAndPlay("left");
                prevDirection = 2;
            }
	    if (charaX >= charaSpeed && mapObstacleData[y][x-1] == 0) { //左横に移動スピード分の幅があれば移動
            //移動スピード8の場合
	    //if (charaX >= 8 && mapObstacleData[y][x-1] == 0) { //左横に移動スピード8分の幅があれば移動
            //移動スピード4の場合
	    //if (charaX >= 4 && mapObstacleData[y][x-1] == 0) { //左横に移動スピード4分の幅があれば移動
                direction = 2; 
            }
        } else if (keyFlags[3]) { //→ d ボタン
            //方向ボタンが押された場合は会話メッセージをクローズ
            if(isTalking) closeTalkingScene();
	    if (prevDirection != 3) {
                yuusha.gotoAndPlay("right");
                prevDirection = 3;
            }
	    if (charaX <= 640-charaSpeed-32 && mapObstacleData[y][x+1] == 0) { //32はキャラチップ1つ分の幅
            //移動スピード8の場合
	    //if (charaX <= 632-32 && mapObstacleData[y][x+1] == 0) { //32はキャラチップの幅
            //横640と移動スピード8から 640-8=632より
            //移動スピード4の場合
	    //if (charaX <= 636-32 && mapObstacleData[y][x+1] == 0) { //32はキャラチップの幅
            //横640と移動スピード4から 640-4=636より
                //↑32*20→640
                //↑マップチップ1個分のピクセル数*マップチップ指定配列の横方向数
                direction = 3;
            }
        }

    }

    //マップ遷移
    changeMap(x,y);

    //次のマスまで操作キャラを自動的に歩かせる(と仮定して座標計算)
    if(direction == 0) {
        charaY += charaSpeed;
    } else if (direction == 1) {
        charaY -= charaSpeed;
    } else if (direction == 2) {
        charaX -= charaSpeed;
    } else if (direction == 3) {
        charaX += charaSpeed;
    }
    if (direction < 4) moveMap(); //マップをスクロール

    stage.update();
}

//マップ遷移
function changeMap(x,y) {
    if (mapNumber == 1) {
	    //マップ1からマップ2へ遷移時
	    if (x == 8 && y == 19) {
	        //表示するマップ情報をもつ配列をセット
	        mapData = secondMapData;
	        mapObstacleData = secondMapObstacleData;
	        //操作キャラの座標を設定
	        charaX = 256; //32*8
	        charaY = 32;  //32*(0+1)
	        //グラフィックチップ、キャラチップを再表示
	        mapNumber = 2;
	        drawGraphicChip();
	        moveMap(); //マップをスクロール
	    }
    } else if (mapNumber == 2) {
            //マップ2からマップ1へ遷移時
            if (x == 8 && y == 0) {
                //表示するマップ情報をもつ配列をセット
                mapData = firstMapData;
                mapObstacleData = firstMapObstacleData;
                //操作キャラの座標を設定
                charaX = 256; //32*8
                charaY = 576; //32*(19-1)
                //グラフィックチップ、キャラチップを再表示
                mapNumber = 1;
                drawGraphicChip();
                moveMap(); //マップをスクロール
            //マップ2からマップ3へ遷移時
            } else if (x == 8 && y == 19) {
                //表示するマップ情報をもつ配列をセット
                mapData = thirdMapData;
                mapObstacleData = thirdMapObstacleData;
                //操作キャラの座標を設定
                charaX = 256; //32*8
                charaY = 32;  //32*(0+1)
                //グラフィックチップ、キャラチップを再表示
                mapNumber = 3;
                drawGraphicChip();
                moveMap(); //マップをスクロール
            }
    } else if (mapNumber == 3) {
            //マップ3からマップ2へ遷移時
            if (x == 8 && y == 0) {
                //表示するマップ情報をもつ配列をセット
                mapData = secondMapData;
                mapObstacleData = secondMapObstacleData;
                //操作キャラの座標を設定
                charaX = 256; //32*8
                charaY = 576; //32*(19-1)
                //グラフィックチップ、キャラチップを再表示
                mapNumber = 2;
                drawGraphicChip();
                moveMap(); //マップをスクロール
            }
    }
}

//マップをスクロール
function moveMap() {

    //(x, y) = (192,192)は勇者キャラクターをcanvas上に配置した座標
    //そこから勇者キャラクターが計算上移動した分をさしひいて、
    //スクロールさせるマップ画像の左上座標を導出する
    mapGround.x = 192-charaX;
    mapGround.y = 192-charaY;

}

function drawGraphicChip() {

    //一度すべてのstageのChildを開放してからもう一度表示オブジェクトをaddChildしなおす
    stage.removeAllChildren(); 
    //一つ前のマップの画像を保持し続けないようにremoveする(たぶん)
    mapGround.removeAllChildren();

    //背景再配置
    stage.addChild(backGroundRect);

    //マップ再配置
    var x = 0, y = 0; 
    while (y < mapData.length){
        while (x < mapData[y].length){
            var map = field.clone();
            map.setTransform(x*32, y*32);
            map.gotoAndStop(mapData[y][x]);
            map.scaleX = map.scaleY = 2;
            mapGround.addChild(map);
            x += 1;
        }
        x = 0;
        y += 1;
    }
    stage.addChild(mapGround);

    //勇者キャラクタ再配置
    stage.addChild(yuusha);

    //マップ1のときのみ僧侶キャラクタ再配置
    if (mapNumber == 1) {
        mapGround.addChild(priest);
    //マップ2のときのみしかばねキャラクタ再配置
    } else if (mapNumber == 2) {
        //しかばねがまだ倒されていない場合のみ再表示
        if (isShikabane) mapGround.addChild(shikabane);
    //マップ3のときのみ魔女キャラクタ再配置
    } else if (mapNumber == 3) {
        mapGround.addChild(witch);
    }

    //ボタン再配置
    stage.addChild(leftButtonBmp);
    stage.addChild(rightButtonBmp);
    stage.addChild(upButtonBmp);
    stage.addChild(downButtonBmp);
    stage.addChild(aButtonBmp);
    stage.addChild(bButtonBmp);

    //メッセージ再配置
    stage.addChild(message);
}

function setMapData() {

//0:芝生 1:砂 2:石畳 3:フローリング 4:橋(縦) 5:橋(横) 6:木(小) 7:木(大) 8:サボテン 9:水
//10:壁(石) 11:壁(木) 12:壁(武器屋) 13:壁(防具屋) 14:壁(宿屋) 15:壺 16:タンス 17:石像 18:真っ暗

firstMapData =     [ [ 0, 6, 9,18,10,10,10,10,10,18, 2,18,11,11,11,11,18, 9, 6, 0],
                     [ 0, 0, 9,18,16,16, 2, 2, 2,18, 2,18, 3, 3,15,16,18, 9, 0, 0],
                     [ 0, 0, 9,18, 2, 2, 2, 2, 2,18, 2,18, 3, 3, 3, 3,18, 9, 9, 0],
                     [ 7, 0, 9,18, 2, 2, 2, 2, 2,18, 2,18, 3, 3, 3, 3,18, 9, 9, 0],
                     [ 0, 0, 9,18,10,10,10,10, 2,13, 2,14, 3,11,11,11,18, 9, 9, 0],
                     [ 0, 0, 9,18, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2,18, 9, 9, 0],
                     [ 0, 0, 9,18, 2, 2, 2, 2, 2, 2, 2,12,10,10,10,10,18, 9, 9, 0],
                     [ 0, 0, 9,18, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2,16,18, 9, 9, 0],
                     [ 0, 0, 9,18, 2, 2, 2, 2, 2, 2, 2,18, 2, 2, 2, 2,18, 9, 9, 0],
                     [ 1, 0, 9,18,17,15, 2,17, 2, 2,17,18, 2, 2, 2, 2,18, 9, 9, 0],
                     [ 1, 1, 9,10,10,10,10,10, 2, 2,10,10,10,10,10,10,10, 9, 9, 0],
                     [ 1, 1, 9, 9, 9, 9, 9, 9, 4, 4, 9, 9, 9, 9, 9, 9, 9, 9, 9, 0],
                     [ 1, 1, 0, 0, 0, 9, 9, 0, 0, 0, 0, 6, 0, 0, 0, 7, 9, 9, 9, 4],
                     [ 1, 1, 1, 0, 0, 5, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 5, 0, 0],
                     [ 8, 1, 1, 1, 9, 9, 9, 9, 0, 0, 1, 1, 0, 0, 6, 0, 9, 9, 0, 0],
                     [ 1, 1, 1, 9, 9, 9, 9, 9, 4, 9, 4, 9, 1, 1, 1, 0, 9, 9, 0, 0],
                     [ 1, 1, 1, 9, 9, 9, 9, 9, 4, 9, 4, 9, 1, 1, 1, 0, 9, 0, 0, 0],
                     [ 1, 1, 1, 9, 9, 9, 9, 9, 4, 9, 9, 9, 1, 1, 1, 0, 9, 0, 0, 0],
                     [ 1, 1, 1, 9, 9, 9, 9, 9, 4, 9, 9, 9, 1, 1, 1, 0, 9, 9, 9, 6],
                     [ 9, 9, 9, 9, 9, 9, 9, 9, 4, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9] ];

firstMapObstacleData = 
                   [ [ 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0],
                     [ 0, 0, 1, 1, 1, 1, 0, 0, 1, 1, 0, 1, 0, 0, 1, 1, 1, 1, 0, 0],
                     [ 0, 0, 1, 1, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 1, 1, 1, 0],
                     [ 1, 0, 1, 1, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 1, 1, 1, 0],
                     [ 0, 0, 1, 1, 1, 1, 1, 1, 0, 1, 0, 1, 0, 1, 1, 1, 1, 1, 1, 0],
                     [ 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0],
                     [ 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0],
                     [ 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0],
                     [ 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 1, 1, 0],
                     [ 0, 0, 1, 1, 1, 1, 0, 1, 0, 0, 1, 1, 0, 0, 0, 0, 1, 1, 1, 0],
                     [ 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
                     [ 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
                     [ 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 1, 0, 0, 0, 1, 1, 1, 1, 0],
                     [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                     [ 1, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 1, 0, 1, 1, 0, 0],
                     [ 0, 0, 0, 1, 1, 1, 1, 1, 0, 1, 0, 1, 0, 0, 0, 0, 1, 1, 0, 0],
                     [ 0, 0, 0, 1, 1, 1, 1, 1, 0, 1, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0],
                     [ 0, 0, 0, 1, 1, 1, 1, 1, 0, 1, 1, 1, 0, 0, 0, 0, 1, 0, 0, 0],
                     [ 0, 0, 0, 1, 1, 1, 1, 1, 0, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1],
                     [ 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1] ];

secondMapData = 
                   [ [ 9, 9, 9, 9, 9, 9, 9, 9, 4, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9],
                     [ 0, 0, 0, 9, 9, 9, 9, 9, 4, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9],
                     [ 1, 0, 0, 0, 0, 0, 0, 0, 0, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9],
                     [ 1, 0, 0, 9, 9, 9, 9, 9, 4, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 1],
                     [ 1, 0, 0, 9, 9, 9, 9, 9, 0, 0, 0, 0, 0, 0, 1, 1, 0, 1, 0, 0],
                     [ 1, 0, 0, 9, 9, 9, 9, 9, 4, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 0],
                     [ 1, 0, 0, 9, 9, 9, 9, 9, 4, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 0],
                     [ 1, 0, 0, 9, 9, 9, 9, 9, 4, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 1],
                     [ 1, 0, 0, 9, 9, 9, 9, 9, 4, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 0],
                     [ 1, 0, 0, 9, 9, 9, 9, 9, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 9, 0],
                     [ 1, 1, 0, 9, 9, 9, 9, 9, 4, 9, 9, 9, 9, 9, 9, 9, 9, 1, 9, 0],
                     [ 1, 1, 0, 9, 9, 9, 9, 9, 4, 9, 9, 9, 9, 9, 9, 9, 9, 1, 9, 0],
                     [ 1, 1, 0, 9, 9, 9, 9, 9, 4, 9, 9, 9, 9, 9, 9, 9, 9, 1, 9, 0],
                     [ 1, 1, 0, 9, 9, 9, 9, 9, 4, 9, 9, 9, 1, 1, 1, 0, 9, 1, 9, 9],
                     [ 1, 1, 0, 9, 9, 9, 9, 9, 4, 9, 9, 9, 1, 1, 1, 0, 9, 1, 9, 9],
                     [ 1, 1, 0, 9, 9, 9, 9, 9, 4, 9, 9, 9, 1, 1, 1, 0, 5, 1, 9, 9],
                     [ 1, 1, 0, 9, 9, 9, 9, 9, 4, 9, 9, 9, 1, 1, 1, 0, 9, 9, 9, 9],
                     [ 1, 1, 0, 9, 9, 9, 9, 9, 4, 9, 9, 9, 1, 1, 1, 0, 9, 9, 9, 9],
                     [ 1, 0, 0, 9, 9, 9, 9, 9, 4, 9, 9, 9, 1, 1, 1, 0, 9, 9, 9, 9],
                     [ 9, 9, 9, 9, 9, 9, 9, 9, 4, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9] ];
secondMapObstacleData = 
                   [ [ 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
                     [ 0, 0, 0, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
                     [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
                     [ 0, 0, 0, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
                     [ 0, 0, 0, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                     [ 0, 0, 0, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
                     [ 0, 0, 0, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
                     [ 0, 0, 0, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
                     [ 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
                     [ 0, 0, 0, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0],
                     [ 0, 0, 0, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 0],
                     [ 0, 0, 0, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 0],
                     [ 0, 0, 0, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 0],
                     [ 0, 0, 0, 1, 1, 1, 1, 1, 0, 1, 1, 1, 0, 0, 0, 0, 1, 0, 1, 1],
                     [ 0, 0, 0, 1, 1, 1, 1, 1, 0, 1, 1, 1, 0, 0, 0, 0, 1, 0, 1, 1],
                     [ 0, 0, 0, 1, 1, 1, 1, 1, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1],
                     [ 0, 0, 0, 1, 1, 1, 1, 1, 0, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1],
                     [ 0, 0, 0, 1, 1, 1, 1, 1, 0, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1],
                     [ 0, 0, 0, 1, 1, 1, 1, 1, 0, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1],
                     [ 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1] ];

thirdMapData =     [ [ 9, 9, 9, 9, 9, 9, 9, 9, 4, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9],
                     [ 9, 9, 9, 9, 9, 9, 9, 9, 4, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9],
                     [ 9, 9, 9, 9, 9, 9, 9, 9, 4, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9],
                     [ 9, 9, 9, 9, 9, 9, 9, 9, 4, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9],
                     [ 9, 9, 9, 9, 9, 9, 9, 9, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                     [ 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 4, 9, 9, 9, 9, 9, 9, 9, 9, 0],
                     [ 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 4, 9, 9, 9, 9, 9, 9, 9, 9, 4],
                     [ 0, 9, 9, 9, 9, 9, 9, 9, 9, 9, 4, 9, 9, 9, 9, 9, 9, 9, 9, 4],
                     [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 9, 9, 9, 9, 9, 9, 9, 9, 4],
                     [ 0, 6, 9,18,10,10,10,10,10,18, 2,18,11,11,11,11,18, 9, 6, 0],
                     [ 0, 0, 9,18,16,16, 2, 2, 2,18, 2,18, 3, 3,15,16,18, 9, 0, 0],
                     [ 0, 0, 9,18, 2, 2, 2, 2, 2,18, 2,18, 3, 3, 3, 3,18, 9, 9, 0],
                     [ 7, 0, 9,18, 2, 2, 2, 2, 2,18, 2,18, 3, 3, 3, 3,18, 9, 9, 0],
                     [ 0, 0, 9,18,10,10,10,10, 2,13, 2,14, 3,11,11,11,18, 9, 9, 0],
                     [ 0, 0, 9,18, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2,18, 9, 9, 0],
                     [ 0, 0, 9,18, 2, 2, 2, 2, 2, 2, 2,12,10,10,10,10,18, 9, 9, 0],
                     [ 0, 0, 9,18, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2,16,18, 9, 9, 0],
                     [ 0, 0, 9,18, 2, 2, 2, 2, 2, 2, 2,18, 2, 2, 2, 2,18, 9, 9, 0],
                     [ 1, 0, 9,18,17,15, 2,17, 2, 2,17,18, 2, 2, 2, 2,18, 9, 9, 0],
                     [ 1, 1, 1,10,10,10,10,10,10,10,10,10,10,10,10,10,10, 0, 0, 0] ];

thirdMapObstacleData = 
                   [ [ 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
                     [ 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
                     [ 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
                     [ 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
                     [ 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                     [ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0],
                     [ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0],
                     [ 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0],
                     [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0],
                     [ 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0],
                     [ 0, 0, 1, 1, 1, 1, 0, 0, 0, 1, 0, 1, 0, 0, 1, 1, 1, 1, 0, 0],
                     [ 0, 0, 1, 1, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 1, 1, 1, 0],
                     [ 1, 0, 1, 1, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 1, 1, 1, 0],
                     [ 0, 0, 1, 1, 1, 1, 1, 1, 0, 1, 0, 1, 0, 1, 1, 1, 1, 1, 1, 0],
                     [ 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0],
                     [ 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0],
                     [ 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0],
                     [ 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 1, 1, 0],
                     [ 0, 0, 1, 1, 1, 1, 0, 1, 0, 0, 1, 1, 0, 0, 0, 0, 1, 1, 1, 0],
                     [ 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0] ];
}

function setManifest(){

    manifest = [
        {id: "yuushaImg", 
         type:"image", 
         src: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAAAQCAYAAADeWHeIAAACRElEQVR4nM2YC07EMAxEcz2Oyym4BHcxSFWK48z418BSqdql9NnjsbPN7hCRIdcx9DnePgWd9j52dvkCB2M186bqz9be4OVVuUMB8+g2scKz5hEu1bRTDVC1PBl+xuvrHf2jy1MD7uPj/TpVIzMGFvlXDICwWKRxupbSAKV54FVpgBs8M9MzMTSgwXc4qKPJi9e47DA94R3NmUa2+c2M5cbvaZqv8320mpp8uHoBJwf5mFP6K4OX5XUN1qvqAFZ42kDUPKeIp/y/G4BFq64l+clV5e/3yCvQ0FM8NdNroFtAj0810cv5kBfLdxr4VwNwknfNvDcVuolrUmnwAljRXKJ5qIHXhT5P85vNm9Vf5WP/wCOTeIf7x/lNf2bVbMbqv3XQiPfiZPKy+6r8YgA3eNFtatbXh3lN846nG4u8EzNMEY9iLBODhFED91UBn4WUm19XCnmd3DUefGy26t9j9WpI5IbekQGoxFgNAELo5KAEAQ//VzAfFDBYbI8317b6oxqoV1VeD4CKl/F83oK8jzQsMWcQke2ZshWrD2hggmdFOfGXy0AzvNfljV5b/8b5i4PFo7zRZ/OHnptPsuWZz3g2ROFunCTXKw8awHgtxpj15CdovNoZjzdlfBMHTEQNqPJo8Jh2mlt+dv4JftgY4QCwcwZTTaywugBqHMmZHgIvBoqX4VED9EouxAi/PWRyN3q25mVmmgP9zJkaHhbvFHdKt2ckiF3WkdTiamf6g0a7uisGtM9uzAr3G7qTJh/R8irPvwAcrrGhQ8E+mQAAAABJRU5ErkJggg==" },

        {id: "witchImg", 
         type:"image", 
         src: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAAAQCAYAAADeWHeIAAAB80lEQVR4nNWW3W3DMAyEvUxn6nuH6h6domOpSBEZDMWfO9JOnAchCJCPlO5OVLYxxqbX1/Y9smVx78pX+xzFn1k742nx5O8q4l+Nl58Vsbt8NcSRBgxfFrDT+Kp8xmZ1OvyrertFPj7Hw0Jvw1F89TaewctzVAKE8rflaYaGmOWXTWvj/jf9+5MWPYq/2lrOQoYu4z0Dp2ZsmFl+OYg2bhbSBT0hunz1Fh/JeyFGb3+Ff1hKM2aKsryZQFlAF0MS3OWj2/QM3ppeqIFdPjIQ2T/Luzd4midNnOJaxRgenSDW8sxkecZAaV5mRMYj4ZkmlgNA8KEJ1ndZNDPR+h4dBDExqoGw0STw3u89MMHZER4Njz5L9nxZNVDeTM4ukkjRND9Nc8JnIkQh2PcQ9I/YLICyvzwHfPaEh27xvY9mobffCEDGuwZ6ac424PHwKBQ8M7qtAC4s0N8UTf6XafDp3vUkEGFA/8PoEOkw5gG4F0DHPhIA9v3SLDr+rAAx7PJ78g3WmrHhsepYWrIhinhXfC+FiHleeFA+Ws/mu+GV4xitEZ2jGyL9O7epNh7ZhBWeCl818WieDX8UAMa8ToDZS2CCkfmIgF3+FQHIzGenR4WvGFjVIQyAleLsPdUHj96xroFRf5bt9ETDg/6HuC1P77N0/ANEL23WfKn76wAAAABJRU5ErkJggg==" },

        {id: "priestImg", 
         type:"image", 
         src: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAAAQCAYAAADeWHeIAAACaUlEQVR4nL2X0XHDMAxDvf8A3aNTdCz3J3ZEEgBBOa3ufM05ejQJUHR6nOd5LFe3juZ6yoc4X8cRrmkeQ95du7WPcv+vPAKIxAL36IMf8jAOuv6IZ3u36t/gSxwV81N8AdlyH+zwjYmOgYVfYm7xSixz+th8V//KTBogHzyH3z7BoAiLRycxxaLJJzFD4WiPy6P81QkmBlq8mkTd/u4AqGePG0CBpAiLzyyIVZroWkyAxrCWR7lnhtTzKR4aqOIoDSZ8EeH8+b7/rp/dBnB5Yt6oEbMAD3gqWKjHaP6Oz/VDHZJuMK7SYMDXANpAJPiIRwK6pwGdHBRzyqumMQ20+a4OZuBkAkz4/PBgXjDx+k6baPFr8sg8KWiME0z4AA8NzOYTAy0+10/jLtoB41D+Ma7JV/NQEek7ZOKQh4KAPWUJE9EzbB7lutaC8s3XU369T0xjzbvNl38dkHj5/mriDg8EgKI14ysXs80PapYnuOPR4ck6ZE2eNgCq6ywN8B5Tlmi5ARzz7kVGIhUwjTJazCv/Hf6+v+jAaslCn8B8xov6yyRk+coGSPmrnC6mgLaBVxGGaG0DgMRDY6bfEjSGy6+5DBqgy58ZZjdAY+Bd02YDhEMRGgCMHWJgftCRCvL4+DnHiOMPn2B/fDIeGLFt4KQB1CvANbB5BXQTpE4A8B4liwk+5btYbiO1DTDg6SgHNZQYA5Y3wOv+9iugPgPyrAHoZusUayaLUFiVOFms+Cc8XU0TwX1EA9kAjXYq/5sfrHcDwMTxOxQ2ANsPxJCdy06uGWeLt/bH3z4yX6UDy/vWodGvjWVw6/ULfkwvn8y1jv4AAAAASUVORK5CYII=" },

        {id: "shikabaneImg", 
         type:"image", 
         src: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAAAQCAYAAADeWHeIAAAB70lEQVR4nO1WW04DMQzM9TgP1+UuQUVkSZyxPZNNCkJdKR+0mYc9xttSay3BsU90dxf+NzT/Ev6pfoY/PspbfRwHqBpYwbsY422nposlNTNtFo9yuMuZ4tXwoTho1Ir5FJMEQmkGHPARhoDSzniEHCbciqcwwH4KzURG4Ut40uyFUQNUPfdP87y6fVDNEQ8KP9gEVPgZ/jUArwG4t8LZZnp4FXNwAFyOXa+BjOfO+hczuO5NBOW99AaKAbHiNJ40ffla/B3Aeoac4n2vD9IAfNdLaRIZuOcieAh24dPHGZ7S+OwxQUlajcPZVpkmO0SMJgw60mc0T+VwNQhwl+7DIZSsmVYY8SThT1yEJiqE1uzDRGE42m7zzLH3Bj/ZACg5IDzIod8Afs9tAWQzJ/NIhDFu9JmhCXmy4fn6AHsZ9BVNpE9quoPUQ5kM2j3Ps5cBIsia6RHDQoWVNhWLuBZCmJrjeKoIq67jbPuwHElN0fdTDtE/4VIz689DN6Nfi6aIiUt8Dw6c4taZ9EXswNFqXORQhmopg95jw642kxJ37lSDH7jIoYn4Mn13AILfABkf8sBoywMNXi8y51AzUcidgqKG3RmaHTo79W0gK7qnMrDYgftUM5mG7RyaXT6ie8+qf6eP1MvJZp4O6796eKq3T6zjX5KQkLQPAAAAAElFTkSuQmCC" },

        {id: "mapImg", 
         type:"image", 
         src: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAATAAAAAQCAYAAACRICNxAAAE70lEQVR4nO2bwXHbQAxF1UwKSBdJLenAZfiQowvwLRdP3ECK8OiURhgvY2g+oQ8sFrvykk4080ckP5aSuOQTAFGn+/NpsfT5u+2Jlp9fTD3f+X7R09PT8vDwsOrl5WVVWS7bRZ5//vr6Go+fLmpd//ZrWU6nU0plrCg7Fo9l2e4d85qPcUyt8yfjvJj1s9+fV/34vawqy5tj4/jZY/9ffyXXhmh0fOv+2L4jMWnVLoYegEWEcBIoCaRQlo9QysBMLqKyvF6s4DNhLF6EZVuLZLyGU1FZtuBl+SxOSyY9Mn/69cw4gJMcD4EUyvR3AIEjS8MAvziY2JjIec+uAw9Oxbt8YVXipgBMMoEsuCQ701kVfjiBlednMy9Z7wUYrrdIxljQQdDUfMy6LHhZY62sC+Nl/2wedVaF0BJYef5sABxdDF5WLINY5Jz3roUIwARiLL77GERLRS8Di5SKXgnJsi7ZVvNbYMUyNQ2hSOakASYnAe63toyTwLIkXPf8GuTYenn2MjD2GutnNEpIlnXJtpo/GwBH1x4B9gaWS+YtmfauMrBRJWSkz+X5o3pgPRlYFFp62YKYBywtBi8cY40XiLFel47HDE98DbBsH2w2AI4uDYJICcnG9b6+zrx0+8Aa030MZgMs0ufy/GimdaseGI7JAswCTcRvLR91JibLmGVZ74M190N9Ls/fAQSOrCsY3D37ImNa+7dYjVjwwvJxU0qqbOzwAIv0uTx/dA8sU0KOAFgNNhE/EqvjRQhCvR8GN9kW6XN5/mwAHF20JAvCCwHW+roaYG8wufgMWuw9dx+D2QCL9Lk8vwdee8nABAq1LMnyW0rOlljxGMDwRO3pg80GwNF1BYJXUK3H1Xom46xzX2K9a0DDyGrgT/0V0mvyt/ziaAEs2u9i/kfogbWWjdpncVHQaSjVYCcxArXW+760z05obxteJLqFwOa35p/LfILkobczCTBQ3oNlRNGy35oT3cCPCsdGqw9WhXhN/AjE3gVg71FCRvpdzI9mWpa/hxIyAg7L90q/2uTj/EVgyN5b831fyveyCnaSj+rfXEQAFoFXBGBsnQEMH7Iux9jbtieAEbBQiOl5PDzAWvpdzB/dA5tVQnoZlOfjXFiTvDxyeFnzx0DIMjrdxM/0wyLfyF5m1ppxXfmnLUCiDw9grP9Uy8A0oDS42LbRAGsRAqw8X4FKfWGxmA8FsOh9X+xXyEimZa2PAljrgZcxHnhqYGLzweAlABPfmz8GS7pfiW+870v7tfIRT3IWOyIDy8BrZAbmZV0eyDYQeOtxheAFDX3v3Mdz1boGNJhYthWNOSTAMv9/RH90DyxTQkbGsf0wSCFsGJgsX8cKuDTAIvOHFxaCj8Vm/v+IfgRgzJP1W/TAekpIhJZevmUJKfsMwcsAWKaEtOAU0XCAec36CMAyd+Rn/v+IfgZe+DwiA+tJwTWcsNxj8GK+BTqJ9SBmAQwhttmvim2+70v5WYDdsgcWhZgFsGrmNbCJv1HtHjB4XXYuZs7f6WoFloZcK7A05DL/f0R/Dz0wXI/2H/QJoIGjJ8ryvSxNA49BLNIDw54XA1hPHwzBJO+zFWC9PbCsatBw4XULgCWVhT9AJKcZALtVDyzbB4tmWrUeWEZ6bAvAEEDW/kf0wGpjrHm5AqgVl/j/48YfdBH+q+pphA9pok/WH8VFIUq3SYW3AAAAAElFTkSuQmCC" },

        {id:"leftButtonImg", 
         type:"image", 
         src:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAVklEQVQ4ja2TMQ4AIAjE+v9Pn4MLIkZQTFiENkEEQLcDKKoDhC+y4WGfkzQFVXi5j5IZ+CjIwqGgAm+CKrwIXuBewXcLLY/YMsaWj1SRhFPISgz3t84DFIz6FDNASPsAAAAASUVORK5CYII="},

        {id:"rightButtonImg", 
         type:"image", 
         src:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAV0lEQVQ4jb3TwQ4AEAwD0P7/T9cBl6Wj0oSTsL0MAwCsAwDVuoyrSTtRzWsMyQl0AQ7SAg5yBW6IBZwQG+iQJ0Ahf4HoCNElRs8YNdJTK8vSjOS1l33nARoy+hQuSDBSAAAAAElFTkSuQmCC"},

        {id:"upButtonImg", 
         type:"image", 
         src:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAWklEQVQ4jb2SwQoAIAhD3///tJ0KUjPbISFQ55ZaAKYaYGyBOy2sKsj8UJOBTzkP+JurToKA5M/EbeYMXwKdhR3H65KLTvrkQ+0bOYgo5OtH+i+g7mC9gmqADalv+hRh7HQBAAAAAElFTkSuQmCC"},

        {id:"downButtonImg", 
         type:"image", 
         src:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAYElEQVQ4jc2TQQoAIAgE9/+ftkMQalq6XQoCzXUSLQAQdgEQGKexVx6TrCEfAJTBJE9AF2K02qlANr0f4wnidaaJN0gU36ZA2f62sMyksvQdtM6yplUaG07BCwqxt+88AIVA+hSZ+rCyAAAAAElFTkSuQmCC"},

        {id:"aButtonImg", 
         type:"image", 
         src:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAU0lEQVQ4jbWSWwoAIAgE5/6Xtr8wI1+Y4IfiDrIKIN0AhKMo5NZ1xBriAqLtXIDuuzNfAKXeOCA0LQMIn+cFyPzENT8GyIgtZA5QEVuzyTjvXWQBOLwGF55pZ7YAAAAASUVORK5CYII="},

        {id:"bButtonImg", 
         type:"image", 
         src:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAASUlEQVQ4jWNgYGD4Ty5gYGD4z4DCIQHD9SFrxmsTDkMwDMCpkBIDcMkNUgMIRhu5LkCJOnINQFczXA0gJSbgBhBjM54YoSw7AwBBsi/tTbP8zwAAAABJRU5ErkJggg=="}
    ];

}

            
          
!
999px

Console