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

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.

HTML

            
              <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="480" height="480"></canvas>
            
          
!

CSS

            
              body {
  background-color: #000000;
  margin: 0;
}

canvas {
  background-color: #000000;
}
            
          
!

JS

            
              // forked from siouxcitizen's "CreateJS SpriteSheet マップがスクロールするように修正" http://jsdo.it/siouxcitizen/mOHt
//Wonderflのこちらのコード、
//■ キャラ / マップチップ表示 http://wonderfl.net/c/y0cw?page=1 ■
//をどこまで再現できるか試してみました
//いろいろ動き、背景等が微妙に違いますが。。。
//あと自分の開発PCではかなり処理が重いっす。。。
//
//画面をクリックした後、
//キーボードの↑↓←→押下で勇者?画像が移動します。
//
//
//マップチップ、キャラチップいろいろと扱いムズいっす。。。
//そもそもチップのもとになる画像をまとめなかったせいもあるかと思いますが。
//いろいろごまかしたり、差し替えたり、プログラムひねったりでなんとかここまでできました。。。
//特に家の繰り返しの壁描画のところでは相当ムリヤリなプログラムでグラフィック描いています。。。
//背景チップは最初から16×16のピクセルで区切ったほうがよかったんかなぁ???
//
//
//
//チップ素材は以下のサイトからのものを使わせて頂きました
//チップの利用規約等については以下サイトを確認下さい
//
//First Seed Material
//http://www.tekepon.net/fsm/
//
var stage;
var message;
var debugMessage;
var queue;
var character;

var tileA2SpriteSheetField;
var tileA3SpriteSheetField;
var tileA4SpriteSheetField;
var tileA3SpriteSheetFieldMini;
var tileBSpriteSheetField;
var tileCSpriteSheetField;
var tileESpriteSheetField;

var backgroundMap;
var foregroundMap;

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


//横34
//縦35
//0:無し 1:芝生
//マップの一番下に敷き詰められるグラフィックを設定
//TileA2マップチップ 横16×縦12 1~192  配列値は0~191を設定
//TileA3マップチップ 横16×縦8  1~128  配列値は192~319を設定 (1~128に191を加算した値)
//TileA4マップチップ 横16×縦15 1~240  配列値は320~559を設定 (1~240に319を加算した値)
//TileA3マップチップ 横16×縦8  1~128  配列値は560~687を設定 (1~128に559を加算した値)
//
//TileA3マップチップ 横32×縦16 1~512  配列値は192~319を設定 (1~128に559を加算した値)
var firstMapData = 
[[  0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,  59,  59,  59,  59,  59,  59,  59,  59,   0,   0,   0,   0,   0,   0,   0],
 [  1,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,  59,  59,  59,  59,  59,  59,  59,  59,   0,   0,   0,   0,   0,   0,   0],
 [  1,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,  59,  59,  59,  59,  59,  59,  59,  59,   0,   0,   0,   0,   0,   0,   0],
 [  1,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,  59,  59,  59,  59,  59,  59,  59,  59,   0,   0,   0,   0,   0,   0,   0],
 [  1,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,  59,  59,  59,  59,  59,  59,  59,  59,   0,   0,   0,   0,   0,   0,   0],
 [  1,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,  59,  59,  59,  59,  59,  59,  59,  59,   0,   0,   0,   0,   0,   0,   0],
 [  1,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,  59,  59,  59,  59,  59,  59,  59,  59,   0,   0,   0,   0,   0,   0,   0],
 [  1,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,  59,  59,  59,  59,  59,  59,  59,  59,   0,   0,   0,   0,   0,   0,   0],
 [  1,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,  59,  59,  59,  59,  59,  59,  59,  59,   0,   0,   0,   0,   0,   0,   0],
 [  1,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,  59,  59,  59,  59,  59,  59,  59,  59,   0,   0,   0,   0,   0,   0,   0],
 [  1,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,  59,  59,  59,  59,  59,  59,  59,  59,   0,   0,   0,   0,   0,   0,   0],
 [  1,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,  59,  59,  59,  59,  59,  59,  59,  59,   0,   0,   0,   0,   0,   0,   0],
 [  1,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,  59,  59,  59,  59,  59,  59,  59,  59,   0,   0,   0,   0,   0,   0,   0],
 [  1,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,  59,  59,  59,  59,  59,  59,  59,  59,   0,   0,   0,   0,   0,   0,   0],
 [  1,   0,   0,   0,   0, 562, 562, 562,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,  59,  59,  59,  59,  59,  59,  59,  59,   0,   0,   0,   0,   0,   0,   0],
 [  1,   0, 560, 562, 562, 562, 562, 562, 562, 562, 563,   0,   0,   0,   0,   0,   0,   0,   0,  59,  59,  59,  59,  59,  59,  59,  59,   0,   0,   0,   0,   0,   0,   0],
 [  1,   0, 560, 562, 562, 562, 562, 562, 562, 562, 563,   0,   0,   0,   0,   0,   0,   0,   0,  59,  59,  59,  59,  59,  59,  59,  59,   0,   0,   0,   0,   0,   0,   0],
 [  1,   0, 560, 562, 562, 562, 562, 562, 562, 562, 563,   0,   0,   0,   0,   0,   0,   0,   0,  59,  59,  59,  59,  59,  59,  59,  59,   0,   0,   0,   0,   0,   0,   0],
 [  1,   0, 228, 564, 564, 564, 564, 564, 564, 564, 229,   0,   0,   0,   0,   0,   0,   0,   0,  59,  59,  59,  59,  59,  59,  59,  59,   0,   0,   0,   0,   0,   0,   0],
 [  1,   0, 560, 562, 562, 562, 562, 562, 562, 562, 563,   0,   0,   0,   0,   0,   0,   0,   0,  59,  59,  59,  59,  59,  59,  59,  59,   0,   0,   0,   0,   0,   0,   0],
 [  1,   0, 560, 562, 562, 562, 562, 562, 562, 562, 563,   0,   0,   0,   0,   0,   0,   0,   0,  59,  59,  59,  59,  59,  59,  59,  59,   0,   0,   0,   0,   0,   0,   0],
 [  1,   0, 244, 561, 561, 561, 561, 561, 561, 561, 245,   0,   0,   0,   0,   0,   0,   0,   0,  59,  59,  59,  59,  59,  59,  59,  59,   0,   0,  68,  69,   0,   0,   0],
 [  1,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,  59,  59,  59,  59,  59,  59,  59,  59,   0,   0,  84,  85,   0,   0,   0],
 [  1,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,  75,  75,  75,  75,  75,  75,  75,  75,   0,   0,  68,  69,  68,  69,   0],
 [  1,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,  75,  75,  75,  75,  75,  75,  75,  75,   0,   0,  84,  85,  84,  85,   0],
 [  1,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,  59,  59,  59,  59,  59,  59,  59,  59,   0,   0,  68,  69,  68,  69,   0],
 [  1,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,  59,  59,  59,  59,  59,  59,  59,  59,   0,   0,  84,  85,  84,  85,   0],
 [  1,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,  75,  75,  75,  75,  75,  75,  75,  75,   0,   0,   0,   0,   0,   0,   0],
 [  1,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,  75,  75,  75,  75,  75,  75,  75,  75,   0,   0,   0,   0,   0,   0,   0],
 [  1,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,  59,  59,  59,  59,  59,  59,  59,  59,   0,   0,   0,   0,   0,   0,   0],
 [  1,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,  59,  59,  59,  59,  59,  59,  59,  59,   0,   0,   0,   0,   0,   0,   0],
 [  1,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,  59,  59,  59,  59,  59,  59,  59,  59,   0,   0,   0,   0,   0,   0,   0],
 [  1,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,  59,  59,  59,  59,  59,  59,  59,  59,   0,   0,   0,   0,   0,   0,   0],
 [  1,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,  59,  59,  59,  59,  59,  59,  59,  59,   0,   0,   0,   0,   0,   0,   0],
 [  1,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,  59,  59,  59,  59,  59,  59,  59,  59,   0,   0,   0,   0,   0,   0,   0],
 [  1,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,  59,  59,  59,  59,  59,  59,  59,  59,   0,   0,   0,   0,   0,   0,   0]];

//横34
//縦35
//0:無し 59:黒穴
//一番下のマップの上に配置されるグラフィックを設定 操作キャラよりは下に配置される(障害物でない場合)
//TileBマップチップ 横16×縦16 1~256  配列値は0~255を設定
//TileCマップチップ 横16×縦16 1~256  配列値は256~511を設定 (1~256に255を加算した値)
//TileEマップチップ 横16×縦16 1~256  配列値は512~767を設定 (1~256に511を加算した値)
var firstMapLowLayerData = 
[[344, 345, 345, 345, 345, 345, 345, 345, 345, 345, 345, 345, 346,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0],
 [360, 361, 361, 361, 361, 361, 361, 361, 361, 361, 361, 361, 362,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0, 144, 145,   0, 144, 145,   0],
 [184, 185, 184,   0,   0,   0,   0,   0,   0,   0, 162, 163, 378,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0, 160, 161,  97, 160, 161,   0],
 [185, 184, 185,   0,   0,   0,   0,   0,   0,   0, 178, 179, 378,   0,   0, 570, 571, 572,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0],
 [184, 185, 184,   0,   0,   0,   0,   0,   0,   0, 194, 195, 378,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0],
 [376,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0, 378,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0],
 [376,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0, 378,   0,   0,   0, 151,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0],
 [376,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0, 378,   0,   0, 150, 403, 150,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0, 132, 133,   0],
 [376,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0, 378,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0, 210, 210,   0, 132, 133,   0],
 [376,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0, 378,   0,   0, 585,   0, 585,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0, 226, 226,   0, 132, 133,   0],
 [376,   0,   0,   0,   0, 257, 258, 259,   0,   0,   0,   0, 378,   0,  69, 601,   0, 601,  69,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0],
 [376,   0,   0,   0, 257, 273, 274, 275, 259,   0,   0,   0, 378,   0,  69, 585,   0, 585,  69,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0],
 [376,   0,   0, 257, 273, 289, 290, 291, 275, 259,   0,   0, 378,   0,  69, 601,   0, 601,  69,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0],
 [376,   0, 272, 273, 289, 305, 306, 307, 291, 275, 276,   0, 378,   0,  69, 585,   0, 585,  69,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0, 203, 204,   0,   0,   0],
 [376,   0, 288, 289, 305, 321, 322, 323, 307, 291, 292,   0, 378,   0,  69, 601,   0, 601,  69,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0],
 [376,   0, 304, 305, 321, 337,   0, 339, 323, 307, 308,   0, 378,   0,  69, 585,   0, 585,  69,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0],
 [376,   0, 320, 321, 337,   0,   0,   0, 339, 323, 324,   0, 378,   0,  69, 601,   0, 601,  69,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0],
 [376,   0, 336, 337,   0,   0, 338,   0,   0, 339, 340,   0, 378,   0,  69, 585,   0, 585,  69,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0],
 [376,   0,   0,   0, 302, 303,   0, 302, 303,   0,   0,   0, 378,   0,  69, 601,   0, 601,  69,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0],
 [376,   0,   0,   0, 350, 351,   0, 334, 335,   0,   0,   0, 378,   0,  69, 585,   0, 585,  69,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0],
 [376,   0,   0, 300,   0,   0, 300,   0,   0, 327,   0,   0, 378,   0,  69, 601,   0, 601,  69,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0],
 [376,   0,   0, 316,   0,   0, 316,   0,   0, 343,   0,   0, 378,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0, 213,   0,   0,   0],
 [392,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0, 394,   0,   0,   0,   0,   0,   0, 208, 208, 208, 208, 208, 208, 208, 208,   0,   0, 230, 230, 225,   0,   0],
 [408, 409, 409, 409, 409, 409, 409, 409, 442, 443, 444, 409, 410,   0,   0,   0,   0,   0,   0, 224, 224, 224, 224, 224, 224, 224, 224,   0,   0, 213,   0, 230, 213,   0],
 [  0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0, 224, 224, 224, 224, 224, 224, 224, 224,   0,   0,   0, 230, 230, 230,   0],
 [  0,  12,  13,  14,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0, 224, 224, 224, 224, 224, 224, 224, 224,   0,   0,   0, 213, 213,   0,   0],
 [  0,  28,  29,  30,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0, 224, 224, 224, 224, 224, 224, 224, 224,   0,   0, 213, 230, 230, 230,   0],
 [  0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,  80,   0, 224, 224, 224, 224, 224, 224, 224, 224,   0,   0,   0,   0,   0,   0,   0],
 [  0,  42,  42,  42,   0, 120, 121, 122, 123,   0,  72,  73,  74,  75,   0,   0,   0,   0,   0, 240, 240, 240, 240, 240, 240, 240, 240,   0,   0,   0,   0,   0,   0,   0],
 [  0,  56,  57,  58,   0, 136, 137, 138, 139,   0,  88,  89,  90,  91,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0],
 [  0,   0,   0,   0,   0, 152, 153, 154, 155,   0, 104, 105, 106, 107,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,  64,   0,  69],
 [  0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0, 171, 173,   0,   0,   0, 175,   0],
 [  0,  62,  63,  62,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0],
 [  0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,  86,  87,   0,   0,   0,   0],
 [  0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0],
 [  0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0]];

//横34
//縦35
//障害物の存在判定用 0:障害物なし 1:障害物あり
var firstMapObstacleData = 
[[  1,   1,   1,   1,   1,   1,   1,   1,   1,   1,   1,   1,   1,   0,   0,   0,   0,   0,   0,   1,   1,   1,   1,   1,   1,   1,   1,   0,   0,   0,   0,   0,   0,   0],
 [  1,   1,   1,   1,   1,   1,   1,   1,   1,   1,   1,   1,   1,   0,   0,   0,   0,   0,   0,   1,   1,   1,   1,   1,   1,   1,   1,   0,   0,   0,   0,   0,   0,   0],
 [  1,   1,   1,   0,   0,   0,   0,   0,   0,   0,   0,   0,   1,   0,   0,   0,   0,   0,   0,   1,   1,   1,   1,   1,   1,   1,   1,   0,   1,   1,   1,   1,   1,   0],
 [  1,   1,   1,   0,   0,   0,   0,   0,   0,   0,   0,   0,   1,   0,   0,   1,   1,   1,   0,   1,   1,   1,   1,   1,   1,   1,   1,   0,   0,   0,   0,   0,   0,   0],
 [  1,   1,   1,   0,   0,   0,   0,   0,   0,   0,   1,   1,   1,   0,   0,   0,   0,   0,   0,   1,   1,   1,   1,   1,   1,   1,   1,   0,   0,   0,   0,   0,   0,   0],
 [  1,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   1,   0,   0,   0,   0,   0,   0,   1,   1,   1,   1,   1,   1,   1,   1,   0,   0,   0,   0,   0,   0,   0],
 [  1,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   1,   0,   0,   0,   1,   0,   0,   1,   1,   1,   1,   1,   1,   1,   1,   0,   0,   0,   0,   0,   0,   0],
 [  1,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   1,   0,   0,   1,   0,   1,   0,   1,   1,   1,   1,   1,   1,   1,   1,   0,   0,   0,   0,   1,   1,   0],
 [  1,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   1,   0,   0,   0,   0,   0,   0,   1,   1,   1,   1,   1,   1,   1,   1,   0,   1,   1,   0,   1,   1,   0],
 [  1,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   1,   0,   0,   0,   0,   0,   0,   1,   1,   1,   1,   1,   1,   1,   1,   0,   1,   1,   0,   1,   1,   0],
 [  1,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   1,   0,   0,   1,   0,   1,   0,   1,   1,   1,   1,   1,   1,   1,   1,   0,   0,   0,   0,   0,   0,   0],
 [  1,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   1,   0,   0,   0,   0,   0,   0,   1,   1,   1,   1,   1,   1,   1,   1,   0,   0,   0,   0,   0,   0,   0],
 [  1,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   1,   0,   0,   1,   0,   1,   0,   1,   1,   1,   1,   1,   1,   1,   1,   0,   0,   0,   0,   0,   0,   0],
 [  1,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   1,   0,   0,   0,   0,   0,   0,   1,   1,   1,   1,   1,   1,   1,   1,   0,   0,   1,   1,   0,   0,   0],
 [  1,   0,   0,   0,   0,   1,   1,   1,   0,   0,   0,   0,   1,   0,   0,   1,   0,   1,   0,   1,   1,   1,   1,   1,   1,   1,   1,   0,   0,   0,   0,   0,   0,   0],
 [  1,   0,   1,   1,   1,   1,   1,   1,   1,   1,   1,   0,   1,   0,   0,   0,   0,   0,   0,   1,   1,   1,   1,   1,   1,   1,   1,   0,   0,   0,   0,   0,   0,   0],
 [  1,   0,   1,   0,   0,   0,   0,   0,   0,   0,   1,   0,   1,   0,   0,   1,   0,   1,   0,   1,   1,   1,   1,   1,   1,   1,   1,   0,   0,   0,   0,   0,   0,   0],
 [  1,   0,   1,   0,   0,   0,   0,   0,   0,   0,   1,   0,   1,   0,   0,   0,   0,   0,   0,   1,   1,   1,   1,   1,   1,   1,   1,   0,   0,   0,   0,   0,   0,   0],
 [  1,   0,   1,   0,   0,   0,   0,   0,   0,   0,   1,   0,   1,   0,   0,   1,   0,   1,   0,   1,   1,   1,   1,   1,   1,   1,   1,   0,   0,   0,   0,   0,   0,   0],
 [  1,   0,   1,   0,   0,   0,   0,   0,   0,   0,   1,   0,   1,   0,   0,   0,   0,   0,   0,   1,   1,   1,   1,   1,   1,   1,   1,   0,   0,   0,   0,   0,   0,   0],
 [  1,   0,   1,   0,   0,   0,   0,   0,   0,   0,   1,   0,   1,   0,   0,   1,   0,   1,   0,   1,   1,   1,   1,   1,   1,   1,   1,   0,   0,   0,   0,   0,   0,   0],
 [  1,   0,   1,   1,   1,   1,   1,   1,   1,   1,   1,   0,   1,   0,   0,   0,   0,   0,   0,   1,   1,   1,   1,   1,   1,   1,   1,   0,   0,   0,   1,   0,   0,   0],
 [  1,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   1,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   1,   0,   0],
 [  1,   1,   1,   1,   1,   1,   1,   1,   1,   0,   1,   1,   1,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   1,   0,   0,   1,   0],
 [  0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0],
 [  0,   1,   1,   1,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   1,   1,   0,   0],
 [  0,   1,   1,   1,   0,   0,   0,   0,   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,   0],
 [  0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   1,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0],
 [  0,   1,   1,   1,   0,   1,   1,   1,   1,   0,   1,   1,   1,   1,   0,   0,   0,   0,   0,   1,   1,   1,   1,   1,   1,   1,   1,   0,   0,   0,   0,   0,   0,   0],
 [  0,   1,   1,   1,   0,   1,   1,   1,   1,   0,   1,   1,   1,   1,   0,   0,   0,   0,   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,   0,   1,   1,   1,   1,   0,   0,   0,   0,   0,   1,   1,   1,   1,   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,   0,   0,   0,   0,   0,   1,   1,   1,   1,   1,   1,   1,   1,   1,   1,   0,   0,   0,   1,   0],
 [  0,   1,   1,   1,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   1,   1,   1,   1,   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,   0,   0,   0,   0,   0,   1,   1,   1,   1,   1,   1,   1,   1,   0,   1,   1,   0,   0,   0,   0],
 [  0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   1,   1,   1,   1,   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,   0,   0,   0,   0,   0,   1,   1,   1,   1,   1,   1,   1,   1,   0,   0,   0,   0,   0,   0,   0]];

//横34
//縦35
//操作キャラクタより上に描画されるマップチップのグラフィックを設定
//TileBマップチップ 横16×縦16 1~256  配列値は0~255を設定
//TileCマップチップ 横16×縦16 1~256  配列値は256~511を設定 (1~256に255を加算した値)
//TileEマップチップ 横16×縦16 1~256  配列値は512~767を設定 (1~256に511を加算した値)
var firstMapUpperLayerData = 
[[  0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0],
 [  0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0, 144, 145,   0, 144, 145,   0],
 [376,   0,   0,   0,   0,   0,   0,   0,   0,   0, 162, 163,   0,   0,   0, 554, 555, 556,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0],
 [376,   0,   0,   0,   0,   0,   0,   0,   0,   0, 178, 179,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0],
 [376,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0],
 [  0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0],
 [  0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0],
 [  0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0],
 [  0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0],
 [  0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0, 585,   0, 585,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0],
 [  0,   0,   0,   0,   0, 257, 258, 259,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0],
 [  0,   0,   0,   0, 257, 273, 274, 275, 259,   0,   0,   0,   0,   0,   0, 585,   0, 585,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0],
 [  0,   0,   0, 257, 273, 289, 290, 291, 275, 259,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0, 186, 188,   0,   0,   0],
 [  0,   0, 272, 273, 289, 305, 306, 307, 291, 275, 276,   0,   0,   0,   0, 585,   0, 585,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0],
 [  0,   0, 288, 289, 305, 321, 322, 323, 307, 291, 292,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0],
 [  0,   0, 304, 305, 321, 337,   0, 339, 323, 307, 308,   0,   0,   0,   0, 585,   0, 585,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0],
 [  0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0],
 [  0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0, 585,   0, 585,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0],
 [  0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0],
 [  0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0, 585,   0, 585,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0],
 [  0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0],
 [  0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0, 209,   0,   0],
 [  0, 393, 393, 393, 393, 393, 393, 393, 426,   0, 428, 393,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0],
 [  0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0],
 [  0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0],
 [  0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0],
 [  0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0],
 [  0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0],
 [  0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0],
 [  0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0],
 [  0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0],
 [  0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0, 189, 190, 191,   0,   0],
 [  0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,  70,  71,   0,   0,   0,   0],
 [  0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0],
 [  0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0],
 [  0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0]];

var mapData;
var mapLowLayerData;
var mapUpperLayerData;

window.onload = init;

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

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

    stage.update();

    var manifest = [
        //{ src: "http://jsrun.it/assets/k/X/7/w/kX7w7.png", type:"image", id: "TileA1" }, //今回は使用せず
        //{ src: "http://jsrun.it/assets/i/P/2/3/iP23u.png", type:"image", id: "TileA2" }, //横16×縦12 1~192
        //{ src: "http://jsrun.it/assets/3/E/w/L/3EwLA.png", type:"image", id: "TileA3" }, //横16×縦8 1~128
        //{ src: "http://jsrun.it/assets/l/d/Q/L/ldQLW.png", type:"image", id: "TileA4" }, //横16×縦15 1~240
        //{ src: "http://jsrun.it/assets/A/k/A/X/AkAX7.png", type:"image", id: "TileB" }, //横16×縦16 1~256
        //{ src: "http://jsrun.it/assets/g/Y/p/y/gYpyy.png", type:"image", id: "TileC" }, //横16×縦16 1~256
        //{ src: "http://jsrun.it/assets/u/v/F/l/uvFlq.png", type:"image", id: "TileD" }, //今回は使用せず
        //{ src: "http://jsrun.it/assets/i/6/L/9/i6L9n.png", type:"image", id: "TileE" }, //横16×縦16 1~256
        //{ src: "http://jsrun.it/assets/n/D/O/8/nDO81.png", type:"image", id: "character" }
        { src: "https://rawcdn.githack.com/siouxcitizen/3DModel/30b8bedcb275e6114c056c763d32acf3e8cd183c/img/charaMapChip/kX7w7.png", type:"image", id: "TileA1" }, //今回は使用せず
        { src: "https://rawcdn.githack.com/siouxcitizen/3DModel/30b8bedcb275e6114c056c763d32acf3e8cd183c/img/charaMapChip/iP23u.png", type:"image", id: "TileA2" }, //横16×縦12 1~192
        { src: "https://rawcdn.githack.com/siouxcitizen/3DModel/30b8bedcb275e6114c056c763d32acf3e8cd183c/img/charaMapChip/3EwLA.png", type:"image", id: "TileA3" }, //横16×縦8 1~128
        { src: "https://rawcdn.githack.com/siouxcitizen/3DModel/30b8bedcb275e6114c056c763d32acf3e8cd183c/img/charaMapChip/ldQLW.png", type:"image", id: "TileA4" }, //横16×縦15 1~240
        { src: "https://rawcdn.githack.com/siouxcitizen/3DModel/30b8bedcb275e6114c056c763d32acf3e8cd183c/img/charaMapChip/AkAX7.png", type:"image", id: "TileB" }, //横16×縦16 1~256
        { src: "https://rawcdn.githack.com/siouxcitizen/3DModel/30b8bedcb275e6114c056c763d32acf3e8cd183c/img/charaMapChip/gYpyy.png", type:"image", id: "TileC" }, //横16×縦16 1~256
        { src: "https://rawcdn.githack.com/siouxcitizen/3DModel/30b8bedcb275e6114c056c763d32acf3e8cd183c/img/charaMapChip/uvFlq.png", type:"image", id: "TileD" }, //今回は使用せず
        { src: "https://rawcdn.githack.com/siouxcitizen/3DModel/30b8bedcb275e6114c056c763d32acf3e8cd183c/img/charaMapChip/i6L9n.png", type:"image", id: "TileE" }, //横16×縦16 1~256
        { src: "https://rawcdn.githack.com/siouxcitizen/3DModel/30b8bedcb275e6114c056c763d32acf3e8cd183c/img/charaMapChip/nDO81.png", type:"image", id: "character" }
    ];
    //↑ファイル読み込みにどれくらいかかるかテストのため関連ファイルを全て読み込み

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

}

//画像ファイルロードの進捗をパーセンテージで表わす
function handleProgress(event){
    message.text = "Now Loading... " + Math.floor(event.progress * 100)+ "%";
    stage.update();
}

function handleFileLoad(event){
}

function handleComplete(event){
    
    mapData = firstMapData;
    mapLowLayerData = firstMapLowLayerData;
    mapUpperLayerData = firstMapUpperLayerData;

    //一番下にくるマップ用スプライトシート作成
    var tileA2SpriteSheet = new createjs.SpriteSheet({
        images: [queue.getResult("TileA2")],
        frames: { width: 32, height: 32 }
    });
    tileA2SpriteSheetField = new createjs.BitmapAnimation(tileA2SpriteSheet);

    var tileA3SpriteSheet = new createjs.SpriteSheet({
        images: [queue.getResult("TileA3")],
        frames: { width: 32, height: 32 }
    });
    tileA3SpriteSheetField = new createjs.BitmapAnimation(tileA3SpriteSheet);

    var tileA4SpriteSheet = new createjs.SpriteSheet({
        images: [queue.getResult("TileA4")],
        frames: { width: 32, height: 32 }
    });
    tileA4SpriteSheetField = new createjs.BitmapAnimation(tileA4SpriteSheet);

    //上のTile3と同じものを16×16ピクセルで切り分けてより細分化したもの
    //家の壁の繰り返しグラフィック描画のために上とは別に切り出し
    var tileA3SpriteSheetMini = new createjs.SpriteSheet({
        images: [queue.getResult("TileA3")],
        frames: { width: 16, height: 16 }
    });
    tileA3SpriteSheetFieldMini = new createjs.BitmapAnimation(tileA3SpriteSheetMini);


    //マップ上に配置するチップ用スプライトシート作成
    var tileBSpriteSheet = new createjs.SpriteSheet({
        images: [queue.getResult("TileB")],
        frames: { width: 32, height: 32 }
    });
    tileBSpriteSheetField = new createjs.BitmapAnimation(tileBSpriteSheet);

    var tileCSpriteSheet = new createjs.SpriteSheet({
        images: [queue.getResult("TileC")],
        frames: { width: 32, height: 32 }
    });
    tileCSpriteSheetField = new createjs.BitmapAnimation(tileCSpriteSheet);

    var tileESpriteSheet = new createjs.SpriteSheet({
        images: [queue.getResult("TileE")],
        frames: { width: 32, height: 32 }
    });
    tileESpriteSheetField = new createjs.BitmapAnimation(tileESpriteSheet);

    //背景マップ保持用
    backgroundMap =new createjs.Container;
    //一番下にくる背景マップ作成
    var x = 0, y = 0; 
    while (y < 35){
        while (x < 34){
    //while (y < firstMapData.length){
    //    while (x < firstMapData[0].length){

    //TileA2マップチップ 横16×縦12 1~192  配列値は0~191を設定
    //TileA3マップチップ 横16×縦8  1~128  配列値は192~319を設定 (1~128に191を加算した値)
    //TileA4マップチップ 横16×縦15 1~240  配列値は320~559を設定 (1~240に319を加算した値)
    //TileA3マップチップ 横32×縦16 1~512  配列値は560~565を設定 家の繰り返し壁チップ描画のためにのみ使用
    // 最初のTileA3とは別にTileA3マップチップを↑16×16ピクセルによる切り出しで細分化したもの

        if (mapData[y][x] < 192) {
            var map = tileA2SpriteSheetField.clone();
            map.setTransform(x*32, y*32);
            map.gotoAndStop(mapData[y][x]);
            backgroundMap.addChild(map);
            x += 1;
        } else if (192 <= mapData[y][x] && mapData[y][x]  < 320) {
            var map = tileA3SpriteSheetField.clone();
            map.setTransform(x*32, y*32);
            map.gotoAndStop(mapData[y][x] - 192);
            backgroundMap.addChild(map);
            x += 1;
        } else if (320 <= mapData[y][x] && mapData[y][x]  < 560) {
            var map = tileA4SpriteSheetField.clone();
            map.setTransform(x*32, y*32);
            map.gotoAndStop(mapData[y][x] - 320);
            backgroundMap.addChild(map);
            x += 1;
        //あと付けでムリヤリ繰り返し家壁のマップチップを設定
        } else if (560 <= mapData[y][x] && mapData[y][x]  < 565) {
            if (560 == mapData[y][x]) { //家壁の左側くりかえし描画部分
                var map = tileA3SpriteSheetFieldMini.clone();
                map.setTransform(x*32, y*32);
                map.gotoAndStop(168);
                backgroundMap.addChild(map);
                map = tileA3SpriteSheetFieldMini.clone();
                map.setTransform(x*32+16, y*32);
                map.gotoAndStop(169);
                backgroundMap.addChild(map);
                map = tileA3SpriteSheetFieldMini.clone();
                map.setTransform(x*32, y*32+16);
                map.gotoAndStop(200);
                backgroundMap.addChild(map);
                map = tileA3SpriteSheetFieldMini.clone();
                map.setTransform(x*32+16, y*32+16);
                map.gotoAndStop(201);
                backgroundMap.addChild(map);
                x += 1;
            } else if (561 == mapData[y][x]) { //家壁の下側くりかえし描画部分
                var map = tileA3SpriteSheetFieldMini.clone();
                map.setTransform(x*32, y*32);
                map.gotoAndStop(201);
                backgroundMap.addChild(map);
                map = tileA3SpriteSheetFieldMini.clone();
                map.setTransform(x*32+16, y*32);
                map.gotoAndStop(202);
                backgroundMap.addChild(map);
                map = tileA3SpriteSheetFieldMini.clone();
                map.setTransform(x*32, y*32+16);
                map.gotoAndStop(233);
                backgroundMap.addChild(map);
                map = tileA3SpriteSheetFieldMini.clone();
                map.setTransform(x*32+16, y*32+16);
                map.gotoAndStop(234);
                backgroundMap.addChild(map);
                x += 1;
            } else if (562 == mapData[y][x]) { //家壁の真ん中、レンガだけくりかえし描画部分
                var map = tileA3SpriteSheetFieldMini.clone();
                map.setTransform(x*32, y*32);
                map.gotoAndStop(169);
                backgroundMap.addChild(map);
                map = tileA3SpriteSheetFieldMini.clone();
                map.setTransform(x*32+16, y*32);
                map.gotoAndStop(170);
                backgroundMap.addChild(map);
                map = tileA3SpriteSheetFieldMini.clone();
                map.setTransform(x*32, y*32+16);
                map.gotoAndStop(201);
                backgroundMap.addChild(map);
                map = tileA3SpriteSheetFieldMini.clone();
                map.setTransform(x*32+16, y*32+16);
                map.gotoAndStop(202);
                backgroundMap.addChild(map);
                x += 1;
            } else if (563 == mapData[y][x]) { //家壁の右側くりかえし描画部分
                var map = tileA3SpriteSheetFieldMini.clone();
                map.setTransform(x*32, y*32);
                map.gotoAndStop(170);
                backgroundMap.addChild(map);
                map = tileA3SpriteSheetFieldMini.clone();
                map.setTransform(x*32+16, y*32);
                map.gotoAndStop(171);
                backgroundMap.addChild(map);
                map = tileA3SpriteSheetFieldMini.clone();
                map.setTransform(x*32, y*32+16);
                map.gotoAndStop(202);
                backgroundMap.addChild(map);
                map = tileA3SpriteSheetFieldMini.clone();
                map.setTransform(x*32+16, y*32+16);
                map.gotoAndStop(203);
                backgroundMap.addChild(map);
                x += 1;
            } else if (564 == mapData[y][x]) { //家壁の上側くりかえし描画部分
                var map = tileA3SpriteSheetFieldMini.clone();
                map.setTransform(x*32, y*32);
                map.gotoAndStop(137);
                backgroundMap.addChild(map);
                map = tileA3SpriteSheetFieldMini.clone();
                map.setTransform(x*32+16, y*32);
                map.gotoAndStop(138);
                backgroundMap.addChild(map);
                map = tileA3SpriteSheetFieldMini.clone();
                map.setTransform(x*32, y*32+16);
                map.gotoAndStop(169);
                backgroundMap.addChild(map);
                map = tileA3SpriteSheetFieldMini.clone();
                map.setTransform(x*32+16, y*32+16);
                map.gotoAndStop(170);
                backgroundMap.addChild(map);
                x += 1;
            }
        }
        }
        x = 0;
        y += 1;
    }

    //背景マップの上にマップチップ配置
    x = 0, y = 0; 
    while (y < 35){
        while (x < 34){

        //TileBマップチップ 横16×縦16 1~256  配列値は0~255を設定
        //TileCマップチップ 横16×縦16 1~256  配列値は256~511を設定 (1~256に255を加算した値)
        //TileEマップチップ 横16×縦16 1~256  配列値は512~767を設定 (1~256に511を加算した値)

        if (mapLowLayerData[y][x] < 256) {
            var map = tileBSpriteSheetField.clone();
            map.setTransform(x*32, y*32);
            map.gotoAndStop(mapLowLayerData[y][x]);
            backgroundMap.addChild(map);
            x += 1;
        } else if (256 <= mapLowLayerData[y][x] && mapLowLayerData[y][x]  < 512) {
            var map = tileCSpriteSheetField.clone();
            map.setTransform(x*32, y*32);
            map.gotoAndStop(mapLowLayerData[y][x] - 256);
            backgroundMap.addChild(map);
            x += 1;
        } else if (512 <= mapLowLayerData[y][x] && mapLowLayerData[y][x]  < 768) {
            var map = tileESpriteSheetField.clone();
            map.setTransform(x*32, y*32);
            map.gotoAndStop(mapLowLayerData[y][x] - 512);
            backgroundMap.addChild(map);
            x += 1;
        }
        }
        x = 0;
        y += 1;
    }
    stage.addChild(backgroundMap);

    //操作キャラアニメーション用のスプライトシートを作成
    var charaSpriteSheet = new createjs.SpriteSheet({
        images: [queue.getResult("character")],
        frames: { width:32, height:48 },
        animations: {
            down: { frames: [0, 1, 2, 1], frequency: 3 },
            up: { frames: [36, 37, 38, 37], frequency: 3 },
            left: { frames: [12, 13, 14, 13], frequency: 3 },
            right: { frames: [24, 25, 26, 25], frequency: 3 }
        }
    });
    character = new createjs.BitmapAnimation(charaSpriteSheet);
    stage.addChild(character);
    character.gotoAndPlay("down");

    //アニメーションさせるキャラの最初の座標を設定
    //character.x = stage.canvas.width/2;
    //character.y = stage.canvas.height/2;
    charaX = 224;
    charaY = 208;
    character.x = charaX;
    character.y = charaY;

    //一番上にくる前景マップ作成
    //前景マップ保持用
    foregroundMap = new createjs.Container;
    //バックグラウンドマップとキャラクターの上に前景マップ作成
    x = 0, y = 0; 
    while (y < 35){
        while (x < 34){

        //TileBマップチップ 横16×縦16 1~256  配列値は0~255を設定
        //TileCマップチップ 横16×縦16 1~256  配列値は256~511を設定 (1~256に255を加算した値)
        //TileEマップチップ 横16×縦16 1~256  配列値は512~767を設定 (1~256に511を加算した値)

        if (mapUpperLayerData[y][x] < 256) {
            var map = tileBSpriteSheetField.clone();
            map.setTransform(x*32, y*32);
            map.gotoAndStop(mapUpperLayerData[y][x]);
            foregroundMap.addChild(map);
            x += 1;
        } else if (256 <= mapUpperLayerData[y][x] && mapUpperLayerData[y][x]  < 512) {
            var map = tileCSpriteSheetField.clone();
            map.setTransform(x*32, y*32);
            map.gotoAndStop(mapUpperLayerData[y][x] - 256);
            foregroundMap.addChild(map);
            x += 1;
        } else if (512 <= mapUpperLayerData[y][x] && mapUpperLayerData[y][x]  < 768) {
            var map = tileESpriteSheetField.clone();
            map.setTransform(x*32, y*32);
            map.gotoAndStop(mapUpperLayerData[y][x] - 512);
            foregroundMap.addChild(map);
            x += 1;
        }
        }
        x = 0;
        y += 1;
    }
    stage.addChild(foregroundMap);

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

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

    stage.removeChild(message);

    //デバッグメッセージ表示用
    //debugMessage = new createjs.Text("", "24px Arial", "#000000");
    //stage.addChild(debugMessage);
    //debugMessage.x = 50;
    //debugMessage.y = 100;
}

//キーボードのキーが押された時の処理
function handleKeyDown(event) {
    if (event.keyCode==40 || event.keyCode==83) {//↓ s ボタン
        keyFlags[0] = true;
    } else if (event.keyCode==38 || event.keyCode==87) {//↑ w ボタン
        keyFlags[1] = true;
    } else if (event.keyCode==37 || event.keyCode==65) {//← a ボタン
        keyFlags[2] = true;
    } else if (event.keyCode==39 || event.keyCode==68) {//→ d ボタン
        keyFlags[3] = true;
    }
}

//キーボードのキーが離された時の処理
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;
    }
}

function tick(){

    if (charaX % 32 == 0 && ((charaY +16) % 32) == 0) { //+16は操作キャラの32ドット超の部分
        direction = 4; //止まる

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

        //debugMessage.text = "charaY:" + charaY + "\n" 
        //                  + "y:" + y + "\n" 
        //                  + "x:" + x + "\n" 
        //                  + "firstMapObstacleData:" + firstMapObstacleData[y+1][x] + "\n" 
        //                  ;

        if(keyFlags[0]) { //↓ s ボタン
            if (prevDirection != 0) {
                character.gotoAndPlay("down");
                prevDirection = 0;
            }
            if (charaY <= (1112-48) && firstMapObstacleData[y+1][x] == 0){ 
                //↑縦35マス×32ドットの1120から移動スピード8を差し引いた1112
                //そこからさらにキャラクタの高さ分の48を差し引いた 1112-48
                direction = 0;
            }
        } else if (keyFlags[1]) { //↑ w ボタン
	    if (prevDirection != 1) { 
                character.gotoAndPlay("up");
                prevDirection = 1;
            }
            if (charaY >= (8-16) && firstMapObstacleData[y-1][x] == 0) { //-16は操作キャラの32ドット超の部分差し引き
                direction = 1;
            }
        } else if (keyFlags[2]) { //← a ボタン
	    if (prevDirection != 2) {
                character.gotoAndPlay("left");
                prevDirection = 2;
            }
	    if (charaX >= 4 && firstMapObstacleData[y][x-1] == 0) {
                direction = 2; 
            }
        } else if (keyFlags[3]) { //→ d ボタン
	    if (prevDirection != 3) {
                character.gotoAndPlay("right");
                prevDirection = 3;
            }
	    if (charaX <= 1080-32 && firstMapObstacleData[y][x+1] == 0) { //32はキャラクタ幅
                //↑横34マス×32ドットの1088から移動スピード8を差し引いた1080
                //そこからさらにキャラクタの幅の32を差し引いた 1080-32
                direction = 3;
            }
        }

    }

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

    stage.update();
}

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

    backgroundMap.x = (480-32)/2-charaX;
    backgroundMap.y = (480-48)/2-charaY-8;
    foregroundMap.x = (480-32)/2-charaX;
    foregroundMap.y = (480-48)/2-charaY-8;

}



            
          
!
999px

Console