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.

            
              <canvas id="cvs"></canvas>
            
          
!
            
              body { background-color: #FFFFFF; }
            
          
!
            
              // forked from siouxcitizen's "前回コードからマップスクロール機能を追加しました" http://jsdo.it/siouxcitizen/ddtx
//
//前回コードからFirefoxでも動くマップスクロール機能を追加しました
//
//なんとかFirefoxでも動くようになりました。 正式なコーディング作法なのかわかりませんが。。。
//実行時の最初のあたりで動きがカクカクした感じで遅くなります。。。 いろいろ読み込み作業のため???
//Firefoxでの実行に合わせてsetInterval設定による描画の間隔を少し短くしました(Chromeでの間隔が早すぎるかも)。
//
//■引き続きWonderflの以下のコードのような実装を目指してみました
//ワンダフルクエスト
//http://wonderfl.net/c/wu8f
//↑画像データは上記コードからのものを使用させてもらっています
//
//■以下コードをbase64画像への変換に使用させていただきました
//2009-3-14 選んだファイルを Base64 エンコードする
//http://wonderfl.net/c/h1NU
//
//■Firefoxでもマップをスクロールさせる修正のために以下のサイトを参考にさせていただきました
//canvas のアニメーション高速化ノウハウいろいろ
//http://d.hatena.ne.jp/kasei_san/20110515
//Firefox throwing a exception with HTML Canvas putImageData(英語)
//http://stackoverflow.com/questions/982000/firefox-throwing-a-exception-with-html-canvas-putimagedata
//
var canvas;
var ctx;
var spriteCanvas;
var spriteCtx;

var shibafuImg;     //芝生
var sunaImg;        //砂
var ishidatamiImg;  //石畳
var flooringImg;    //フローリング
var hashiTateImg;   //橋(縦)
var hashiYokoImg;   //橋(横)
var kiShoImg;       //木(小)
var kiDaiImg;       //木(大)
var sabotenImg;     //サボテン
var mizuImg;        //水
var kabeIshiImg;    //壁(石)
var kabeKiImg;      //壁(木)
var kabeBukiyaImg;  //壁(武器屋)
var kabeBouguyaImg; //壁(防具屋)
var kabeYadoyaImg;  //壁(宿屋)
var tsuboImg;       //壺
var tansuImg;       //タンス
var sekizouImg;     //石像
var makkuraImg;     //真っ暗

//勇者用
var yuusha;
var yuushaFrontImgOne; //勇者前向き1
var yuushaFrontImgTwo; //勇者前向き2
var yuushaBackImgOne;  //勇者後ろ向き1
var yuushaBackImgTwo;  //勇者後ろ向き2
var yuushaLeftImgOne;  //勇者左向き1
var yuushaLeftImgTwo;  //勇者左向き2
var yuushaRightImgOne; //勇者右向き1
var yuushaRightImgTwo; //勇者右向き2
//var SCALE = 1; //勇者やフィールドの拡大率
var SPEED = 2; //勇者が歩くスピード FLDSIZEの約数にしてください
var MAPSIZE = 16; //マップの横・縦のマスの個数
var FLDSIZE = 16; //フィールド(マップ上の1マス)の横・縦のドット数
var yuushaMapXPos = MAPSIZE/2; //マップのマス数であわらした勇者X位置
var yuushaMapYPos = MAPSIZE/2; //マップのマス数であわらした勇者Y位置
var walkDirection = 4; //歩いていく方向 (0~3:下上左右  4:止)
var keyFlags = [false, false, false, false];

//0:芝生 1:砂 2:石畳 3:フローリング 4:橋(縦) 5:橋(横) 6:木(小) 7:木(大) 8:サボテン 9:水
//10:壁(石) 11:壁(木) 12:壁(武器屋) 13:壁(防具屋) 14:壁(宿屋) 15:壺 16:タンス 17:石像 18:真っ暗
var mapData = [[ 0, 6, 9,18,10,10,10,10,10,18, 2,18,11,11,11,11],
               [ 0, 0, 9,18,16,16, 2, 2, 2,18, 2,18, 3, 3,15,16],
               [ 0, 0, 9,18, 2, 2, 2, 2, 2,18, 2,18, 3, 3, 3, 3],
               [ 7, 0, 9,18, 2, 2, 2, 2, 2,18, 2,18, 3, 3, 3, 3],
               [ 0, 0, 9,18,10,10,10,10, 2,13, 2,14, 3,11,11,11],
               [ 0, 0, 9,18, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
               [ 0, 0, 9,18, 2, 2, 2, 2, 2, 2, 2,12,10,10,10,10],
               [ 0, 0, 9,18, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2,16],
               [ 0, 0, 9,18, 2, 2, 2, 2, 2, 2, 2,18, 2, 2, 2, 2],
               [ 1, 0, 9,18,17,15, 2,17, 2, 2,17,18, 2, 2, 2, 2],
               [ 1, 1, 9,10,10,10,10,10, 2, 2,10,10,10,10,10,10],
               [ 1, 1, 9, 9, 9, 9, 9, 9, 4, 4, 9, 9, 9, 9, 9, 9],
               [ 1, 1, 0, 0, 0, 9, 9, 0, 0, 0, 0, 6, 0, 0, 0, 7],
               [ 1, 1, 1, 0, 0, 5, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0],
               [ 8, 1, 1, 1, 9, 9, 9, 9, 0, 0, 1, 1, 0, 0, 6, 0],
               [ 1, 1, 1, 9, 9, 9, 9, 9, 9, 9, 9, 9, 1, 1, 1, 0]];
var bMapData = []; //フィールドが障害物か否かを記憶

//ローディング画面表示管理用
var loadingScreenManager;
var loaded = 0;        //読み込み完了した画像の個数
var IMG_NUM = 27; //読み込まれる画像の個数
var isInit = false;    //初期化されているか loopで使用

window.onload = function () {
  setImageData();
  init();
}

function init() {
  canvas = document.getElementById("cvs");
  if (!canvas) return false;
  canvas.width = FLDSIZE*MAPSIZE;
  canvas.height = FLDSIZE*MAPSIZE;
  ctx = canvas.getContext("2d");
  if(!ctx) return false;

  //Firefoxのバグ?に対応したマップ表示領域の指定作業用に、表示されないcanvasを作成する
  spriteCanvas = document.createElement("canvas");
  if (!spriteCanvas) return false;
  spriteCanvas.width = FLDSIZE*MAPSIZE;
  spriteCanvas.height = FLDSIZE*MAPSIZE;
  spriteCtx = spriteCanvas.getContext("2d")
  if(!spriteCtx) return false;

  loadingScreenManager = new LoadingScreenManager(canvas);

  createMap();

  yuusha = new Yuusha(canvas, SPEED, FLDSIZE*yuushaMapXPos, FLDSIZE*yuushaMapYPos);

  setInterval(loop, 5);
}

//キーボードのキーが押された時の処理
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 loop() {
  if (loaded < IMG_NUM) { //画像読み込み未完了なら
    loadingScreenManager.disp();
    return; //これ以下を処理しない
  }
  //画像読み込み完了後 1回だけ処理
  if (!isInit) {
    //キーが押された時のイベントリスナーの登録
    document.addEventListener('keydown', handleKeyDown, false);
    //キーが離された時のイベントリスナーの登録
    document.addEventListener('keyup', handleKeyUp, false);
    isInit = true;
  }

  //勇者画像表示のための前処理
  if (yuusha.x % FLDSIZE == 0 && yuusha.y % FLDSIZE == 0) {
    //var mapPosX = yuusha.x / FLDSIZE, mapPosY = yuusha.y / FLDSIZE;
    walkDirection = 4;         //止まる
    if (keyFlags[0]) {//↓ボタン押下
      if (yuushaMapYPos < 15 && !bMapData[yuushaMapYPos+1][yuushaMapXPos]) {
        walkDirection = 0; 
        yuushaMapYPos++;
      }
      yuusha.walkDirection = 0;
    } else if (keyFlags[1]) {//↑ボタン押下
      if (yuushaMapYPos > 0 && !bMapData[yuushaMapYPos-1][yuushaMapXPos]) {
        walkDirection = 1; 
        yuushaMapYPos--;
      }
      yuusha.walkDirection = 1;
    } else if (keyFlags[2]) {//←ボタン押下
      if (yuushaMapXPos > 0 && !bMapData[yuushaMapYPos][yuushaMapXPos-1]) {
        walkDirection = 2; 
        yuushaMapXPos--;
      }
      yuusha.walkDirection = 2;
    } else if (keyFlags[3]) {//→ボタン押下
      if (yuushaMapXPos < 15 && !bMapData[yuushaMapYPos][yuushaMapXPos+1]) {
        walkDirection = 3; 
        yuushaMapXPos++;
      }
      yuusha.walkDirection = 3;
    }
  }

  //次のマスまで自動的に勇者を歩かせる
  if(walkDirection == 0) {
    yuusha.y += SPEED;
  } else if (walkDirection == 1) {
    yuusha.y -= SPEED;
  } else if (walkDirection == 2) {
    yuusha.x -= SPEED;
  } else if (walkDirection == 3) {
    yuusha.x += SPEED;
  }

  //背景を黒でぬりつぶします
  ctx.fillStyle = "#000000";
  ctx.fillRect(0,0, canvas.width, canvas.height);

  //マップ動かすことで勇者が移動しているように見せかけます
  spriteCtx.putImageData(mapImg, 0, 0);
  ctx.drawImage(spriteCanvas, FLDSIZE*MAPSIZE/2-yuusha.x, FLDSIZE*MAPSIZE/2-yuusha.y);

  //勇者足踏み
  yuusha.walk();
}

function createMap() {
  for (k = 0; k < MAPSIZE; k++) bMapData[k] = []; //bMapDataを2次元配列にする

  for (j = 0; j < MAPSIZE; j++){
    for (i = 0; i < MAPSIZE; i++){
      var imgPosX = FLDSIZE * i;
      var imgPosY = FLDSIZE * j;
      var isObstacle;
      if ([mapData[j][i]] == 0) {
        ctx.drawImage(shibafuImg, imgPosX, imgPosY);
        bMapData[j][i] = false;
      } else if ([mapData[j][i]] == 1) {
        ctx.drawImage(sunaImg, imgPosX, imgPosY);
        bMapData[j][i] = false;
      } else if ([mapData[j][i]] == 2) {
        ctx.drawImage(ishidatamiImg, imgPosX, imgPosY);
        bMapData[j][i] = false;
      } else if ([mapData[j][i]] == 3) {
        ctx.drawImage(flooringImg, imgPosX, imgPosY);
        bMapData[j][i] = false;
      } else if ([mapData[j][i]] == 4) {
        ctx.drawImage(hashiTateImg, imgPosX, imgPosY);
        bMapData[j][i] = false;
      } else if ([mapData[j][i]] == 5) {
        ctx.drawImage(hashiYokoImg, imgPosX, imgPosY);
        bMapData[j][i] = false;
      } else if ([mapData[j][i]] == 6) {
        ctx.drawImage(kiShoImg, imgPosX, imgPosY);
        bMapData[j][i] = true;
      } else if ([mapData[j][i]] == 7) {
        ctx.drawImage(kiDaiImg, imgPosX, imgPosY);
        bMapData[j][i] = true;
      } else if ([mapData[j][i]] == 8) {
        ctx.drawImage(sabotenImg, imgPosX, imgPosY);
        bMapData[j][i] = true;
      } else if ([mapData[j][i]] == 9) {
        ctx.drawImage(mizuImg, imgPosX, imgPosY);
        bMapData[j][i] = true;
      } else if ([mapData[j][i]] == 10) {
        ctx.drawImage(kabeIshiImg, imgPosX, imgPosY);
        bMapData[j][i] = true;
      } else if ([mapData[j][i]] == 11) {
        ctx.drawImage(kabeKiImg, imgPosX, imgPosY);
        bMapData[j][i] = true;
      } else if ([mapData[j][i]] == 12) {
        ctx.drawImage(kabeBukiyaImg, imgPosX, imgPosY);
        bMapData[j][i] = true;
      } else if ([mapData[j][i]] == 13) {
        ctx.drawImage(kabeBouguyaImg, imgPosX, imgPosY);
        bMapData[j][i] = true;
      } else if ([mapData[j][i]] == 14) {
        ctx.drawImage(kabeYadoyaImg, imgPosX, imgPosY);
        bMapData[j][i] = true;
      } else if ([mapData[j][i]] == 15) {
        ctx.drawImage(tsuboImg, imgPosX, imgPosY);
        bMapData[j][i] = true;
      } else if ([mapData[j][i]] == 16) {
        ctx.drawImage(tansuImg, imgPosX, imgPosY);
        bMapData[j][i] = true;
      } else if ([mapData[j][i]] == 17) {
        ctx.drawImage(sekizouImg, imgPosX, imgPosY);
        bMapData[j][i] = true;
      } else if ([mapData[j][i]] == 18) {
        ctx.drawImage(makkuraImg, imgPosX, imgPosY);
        bMapData[j][i] = true;
      }
      //マップをまとめて保持
      mapImg = ctx.getImageData(0, 0, MAPSIZE*FLDSIZE, MAPSIZE*FLDSIZE);
    }
  }
}

//勇者クラス
var Yuusha = function(canvas,speed,x,y) {
  this.speed = speed;
  this.defaultX = x;
  this.defaultY = y;
  this.x = x;
  this.y = y;
  this.frameCount = 0;
  this.walkFlag = true; //足踏み用
  this.walkDirection = 0; //歩いていく方向 (0~3:下上左右)
  this.canvas = canvas;
  this.ctx = canvas.getContext('2d');
}
Yuusha.prototype.walk = function() {
  if (this.frameCount++ > 15) { //
    this.frameCount = 0;
    this.walkFlag = !this.walkFlag;
  } 

  if(this.walkFlag) { //足踏み表現
    if(this.walkDirection == 0) { //勇者画像1による足踏み
      this.ctx.drawImage(yuushaFrontImgOne,this.defaultX,this.defaultY);
    } else if (this.walkDirection == 1) {
      this.ctx.drawImage(yuushaBackImgOne,this.defaultX,this.defaultY);
    } else if (this.walkDirection == 2) {
      this.ctx.drawImage(yuushaLeftImgOne,this.defaultX,this.defaultY);
    } else if (this.walkDirection == 3) {
      this.ctx.drawImage(yuushaRightImgOne,this.defaultX,this.defaultY);
    } 
  } else {
    if(this.walkDirection == 0) { //勇者画像2による足踏み
      this.ctx.drawImage(yuushaFrontImgTwo,this.defaultX,this.defaultY);
    } else if (this.walkDirection == 1) {
      this.ctx.drawImage(yuushaBackImgTwo,this.defaultX,this.defaultY);
    } else if (this.walkDirection == 2) {
      this.ctx.drawImage(yuushaLeftImgTwo,this.defaultX,this.defaultY);
    } else if (this.walkDirection == 3) {
      this.ctx.drawImage(yuushaRightImgTwo,this.defaultX,this.defaultY);
    } 
  }
}

//ローディング画面表示クラス
var LoadingScreenManager = function(canvas) {
  this.x = 0;
  this.y = 0;
  this.canvas = canvas;
  this.ctx = canvas.getContext('2d');
}
LoadingScreenManager.prototype.disp = function() {
  this.ctx.fillRect(0, 0, FLDSIZE*MAPSIZE, FLDSIZE*MAPSIZE); //画像読み込み中の背景を黒で塗りつぶします
  var str = "Now Loading...";
  this.ctx.font = "20px 'Monotype Corsiva'";
  this.ctx.fillStyle = "#FFFFFF";
  this.ctx.fillText(str, 30, 30);
}

function setImageData() {
  //芝生
  shibafuImg = new Image();
  shibafuImg.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAABnRSTlMAAAAAAABupgeRAAAANElEQVQokWOYdIcBExlOwyIIQTglqKABYi0BB9DXSYNBA9bAGGJ+IKCByPgmShGyWSQ7CQCHEmomoGsXjwAAAABJRU5ErkJggg==";
  shibafuImg.onload=function() {
    loaded++;
  } 
  //砂
  sunaImg = new Image();
  sunaImg.src =  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAABnRSTlMAAAAAAABupgeRAAAANklEQVQokWP4v8MDE+2sYsAqDkQ4JaigAWItA34H0NdJg0ED1sAYYn4goIHI+CZKEbJZJDsJAExt+khTZWqXAAAAAElFTkSuQmCC";
  sunaImg.onload=function() {
    loaded++;
  } 
  //石畳
  ishidatamiImg = new Image();
  ishidatamiImg.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAABnRSTlMAAAAAAABupgeRAAAAa0lEQVQokY2S0RGAMAhD3/5DOAbDOI1eObHaiOGrfeW4JIWI2Ebto85DXCU5RfOeb1UrZx5QfdkhOevgvH5xGrmS08iVnEau5DRyJcfJfuY42c/8Nm2awcn+kZK5QsXFT/c2MFeo+Nv0r40DZmMdn2tt0hAAAAAASUVORK5CYII=";
  ishidatamiImg.onload=function() {
    loaded++;
  } 
  //フローリング
  flooringImg = new Image();
  flooringImg.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAABnRSTlMAAAAAAABupgeRAAAAQklEQVQokWO448nwf5UqBBHDZoDzidTJQLzZEDZhs9HsZyDHD3jMo4sf0Oyn2A8E/UOBH4iMb6r6Aat/qBQPePwDADP0nogzgs3pAAAAAElFTkSuQmCC";
  flooringImg.onload=function() {
    loaded++;
  } 
  //橋(縦)
  hashiTateImg = new Image();
  hashiTateImg.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAADAFBMVEUAAACAAAAAgACAgAAAAICAAIAAgIDAwMDA3MCmyvD/8NT/4rH/1I7/xmv/uEj/qiX/qgDckgC5egCWYgBzSgBQMgD/49T/x7H/q47/j2v/c0j/VyX/VQDcSQC5PQCWMQBzJQBQGQD/1NT/sbH/jo7/a2v/SEj/JSX+AADcAAC5AACWAABzAABQAAD/1OP/scf/jqv/a4//SHP/JVf/AFXcAEm5AD2WADFzACVQABn/1PD/seL/jtT/a8b/SLj/Jar/AKrcAJK5AHqWAGJzAEpQADL/1P//sf//jv//a///SP//Jf/+AP7cANy5ALmWAJZzAHNQAFDw1P/isf/Ujv/Ga/+4SP+qJf+qAP+SANx6ALliAJZKAHMyAFDj1P/Hsf+rjv+Pa/9zSP9XJf9VAP9JANw9ALkxAJYlAHMZAFDU1P+xsf+Ojv9ra/9ISP8lJf8AAP4AANwAALkAAJYAAHMAAFDU4/+xx/+Oq/9rj/9Ic/8lV/8AVf8ASdwAPbkAMZYAJXMAGVDU8P+x4v+O1P9rxv9IuP8lqv8Aqv8AktwAerkAYpYASnMAMlDU//+x//+O//9r//9I//8l//8A/v4A3NwAubkAlpYAc3MAUFDU//Cx/+KO/9Rr/8ZI/7gl/6oA/6oA3JIAuXoAlmIAc0oAUDLU/+Ox/8eO/6tr/49I/3Ml/1cA/1UA3EkAuT0AljEAcyUAUBnU/9Sx/7GO/45r/2tI/0gl/yUA/gAA3AAAuQAAlgAAcwAAUADj/9TH/7Gr/46P/2tz/0hX/yVV/wBJ3AA9uQAxlgAlcwAZUADw/9Ti/7HU/47G/2u4/0iq/yWq/wCS3AB6uQBilgBKcwAyUAD//9T//7H//47//2v//0j//yX+/gDc3AC5uQCWlgBzcwBQUADy8vLm5uba2trOzs7CwsK2traqqqqenp6SkpKGhoZ6enpubm5iYmJWVlZKSko+Pj4yMjImJiYaGhoODg7/+/CgoKSAgID/AAAA/wD//wAAAP//AP8A///////g951TAAABAHRSTlP/AP//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////rTvmKwAAACFJREFUGJVjaGVAAa1AKMvADwVAJg4BWSjArWKoaEH1PgDwwhwdyPpM6wAAAABJRU5ErkJggg==";
  hashiTateImg.onload=function() {
    loaded++;
  } 
  //橋(横)
  hashiYokoImg = new Image();
  hashiYokoImg.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAADAFBMVEUAAACAAAAAgACAgAAAAICAAIAAgIDAwMDA3MCmyvD/8NT/4rH/1I7/xmv/uEj/qiX/qgDckgC5egCWYgBzSgBQMgD/49T/x7H/q47/j2v/c0j/VyX/VQDcSQC5PQCWMQBzJQBQGQD/1NT/sbH/jo7/a2v/SEj/JSX+AADcAAC5AACWAABzAABQAAD/1OP/scf/jqv/a4//SHP/JVf/AFXcAEm5AD2WADFzACVQABn/1PD/seL/jtT/a8b/SLj/Jar/AKrcAJK5AHqWAGJzAEpQADL/1P//sf//jv//a///SP//Jf/+AP7cANy5ALmWAJZzAHNQAFDw1P/isf/Ujv/Ga/+4SP+qJf+qAP+SANx6ALliAJZKAHMyAFDj1P/Hsf+rjv+Pa/9zSP9XJf9VAP9JANw9ALkxAJYlAHMZAFDU1P+xsf+Ojv9ra/9ISP8lJf8AAP4AANwAALkAAJYAAHMAAFDU4/+xx/+Oq/9rj/9Ic/8lV/8AVf8ASdwAPbkAMZYAJXMAGVDU8P+x4v+O1P9rxv9IuP8lqv8Aqv8AktwAerkAYpYASnMAMlDU//+x//+O//9r//9I//8l//8A/v4A3NwAubkAlpYAc3MAUFDU//Cx/+KO/9Rr/8ZI/7gl/6oA/6oA3JIAuXoAlmIAc0oAUDLU/+Ox/8eO/6tr/49I/3Ml/1cA/1UA3EkAuT0AljEAcyUAUBnU/9Sx/7GO/45r/2tI/0gl/yUA/gAA3AAAuQAAlgAAcwAAUADj/9TH/7Gr/46P/2tz/0hX/yVV/wBJ3AA9uQAxlgAlcwAZUADw/9Ti/7HU/47G/2u4/0iq/yWq/wCS3AB6uQBilgBKcwAyUAD//9T//7H//47//2v//0j//yX+/gDc3AC5uQCWlgBzcwBQUADy8vLm5uba2trOzs7CwsK2traqqqqenp6SkpKGhoZ6enpubm5iYmJWVlZKSko+Pj4yMjImJiYaGhoODg7/+/CgoKSAgID/AAAA/wD//wAAAP//AP8A///////g951TAAABAHRSTlP/AP//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////rTvmKwAAADtJREFUGJVjaG1lQAJAXiuDLBIAchlkkVWAOfyy/HAE5iML8NNPANlhYA6K0xmwOB3oITiAyiIJMDAAAKFAGTlRsUwJAAAAAElFTkSuQmCC";
  hashiYokoImg.onload=function() {
    loaded++;
  } 
  //木(小)
  kiShoImg = new Image();
  kiShoImg.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAADAFBMVEUAAACAAAAAgACAgAAAAICAAIAAgIDAwMDA3MCmyvD/8NT/4rH/1I7/xmv/uEj/qiX/qgDckgC5egCWYgBzSgBQMgD/49T/x7H/q47/j2v/c0j/VyX/VQDcSQC5PQCWMQBzJQBQGQD/1NT/sbH/jo7/a2v/SEj/JSX+AADcAAC5AACWAABzAABQAAD/1OP/scf/jqv/a4//SHP/JVf/AFXcAEm5AD2WADFzACVQABn/1PD/seL/jtT/a8b/SLj/Jar/AKrcAJK5AHqWAGJzAEpQADL/1P//sf//jv//a///SP//Jf/+AP7cANy5ALmWAJZzAHNQAFDw1P/isf/Ujv/Ga/+4SP+qJf+qAP+SANx6ALliAJZKAHMyAFDj1P/Hsf+rjv+Pa/9zSP9XJf9VAP9JANw9ALkxAJYlAHMZAFDU1P+xsf+Ojv9ra/9ISP8lJf8AAP4AANwAALkAAJYAAHMAAFDU4/+xx/+Oq/9rj/9Ic/8lV/8AVf8ASdwAPbkAMZYAJXMAGVDU8P+x4v+O1P9rxv9IuP8lqv8Aqv8AktwAerkAYpYASnMAMlDU//+x//+O//9r//9I//8l//8A/v4A3NwAubkAlpYAc3MAUFDU//Cx/+KO/9Rr/8ZI/7gl/6oA/6oA3JIAuXoAlmIAc0oAUDLU/+Ox/8eO/6tr/49I/3Ml/1cA/1UA3EkAuT0AljEAcyUAUBnU/9Sx/7GO/45r/2tI/0gl/yUA/gAA3AAAuQAAlgAAcwAAUADj/9TH/7Gr/46P/2tz/0hX/yVV/wBJ3AA9uQAxlgAlcwAZUADw/9Ti/7HU/47G/2u4/0iq/yWq/wCS3AB6uQBilgBKcwAyUAD//9T//7H//47//2v//0j//yX+/gDc3AC5uQCWlgBzcwBQUADy8vLm5uba2trOzs7CwsK2traqqqqenp6SkpKGhoZ6enpubm5iYmJWVlZKSko+Pj4yMjImJiYaGhoODg7/+/CgoKSAgID/AAAA/wD//wAAAP//AP8A///////g951TAAABAHRSTlP/AP//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////rTvmKwAAAFBJREFUGJVlzssNACEIBNApgf4b4kxHZj6yyerBhzAhYmbQoyNBG35TUFcWlNeqTh7xhmIGvbqTeT95Bp6lqdaBzlxVlb8umahyQkIWPv87DrKVcNvMh8RCAAAAAElFTkSuQmCC";
  kiShoImg.onload=function() {
    loaded++;
  } 
  //木(大)
  kiDaiImg = new Image();
  kiDaiImg.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAfUlEQVQ4jY2TwQ2AMAwDvRKr8mAIZmKX8ooU3EvII48W+2IhV+ej5SPxoJbMx8VDIPnWyuwgBJCQzhuAhFlcwT+AaXxPomz8g/iiDdBFboC9KcelRfLioKgpliYNXHfdSmyimwMQ39sqhyiMDhi9Bd/cQfAfkDHfjxJMn/QLhA2/DCaK0IgAAAAASUVORK5CYII=";
  kiDaiImg.onload=function() {
    loaded++;
  } 
  //サボテン
  sabotenImg = new Image();
  sabotenImg.src =  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAADAFBMVEUAAACAAAAAgACAgAAAAICAAIAAgIDAwMDA3MCmyvD/8NT/4rH/1I7/xmv/uEj/qiX/qgDckgC5egCWYgBzSgBQMgD/49T/x7H/q47/j2v/c0j/VyX/VQDcSQC5PQCWMQBzJQBQGQD/1NT/sbH/jo7/a2v/SEj/JSX+AADcAAC5AACWAABzAABQAAD/1OP/scf/jqv/a4//SHP/JVf/AFXcAEm5AD2WADFzACVQABn/1PD/seL/jtT/a8b/SLj/Jar/AKrcAJK5AHqWAGJzAEpQADL/1P//sf//jv//a///SP//Jf/+AP7cANy5ALmWAJZzAHNQAFDw1P/isf/Ujv/Ga/+4SP+qJf+qAP+SANx6ALliAJZKAHMyAFDj1P/Hsf+rjv+Pa/9zSP9XJf9VAP9JANw9ALkxAJYlAHMZAFDU1P+xsf+Ojv9ra/9ISP8lJf8AAP4AANwAALkAAJYAAHMAAFDU4/+xx/+Oq/9rj/9Ic/8lV/8AVf8ASdwAPbkAMZYAJXMAGVDU8P+x4v+O1P9rxv9IuP8lqv8Aqv8AktwAerkAYpYASnMAMlDU//+x//+O//9r//9I//8l//8A/v4A3NwAubkAlpYAc3MAUFDU//Cx/+KO/9Rr/8ZI/7gl/6oA/6oA3JIAuXoAlmIAc0oAUDLU/+Ox/8eO/6tr/49I/3Ml/1cA/1UA3EkAuT0AljEAcyUAUBnU/9Sx/7GO/45r/2tI/0gl/yUA/gAA3AAAuQAAlgAAcwAAUADj/9TH/7Gr/46P/2tz/0hX/yVV/wBJ3AA9uQAxlgAlcwAZUADw/9Ti/7HU/47G/2u4/0iq/yWq/wCS3AB6uQBilgBKcwAyUAD//9T//7H//47//2v//0j//yX+/gDc3AC5uQCWlgBzcwBQUADy8vLm5uba2trOzs7CwsK2traqqqqenp6SkpKGhoZ6enpubm5iYmJWVlZKSko+Pj4yMjImJiYaGhoODg7/+/CgoKSAgID/AAAA/wD//wAAAP//AP8A///////g951TAAABAHRSTlP/AP//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////rTvmKwAAAFxJREFUGJVtj8ENwDAIA2+C7r8R725UbCAiUvNIiM8gw1MHpugngiWQ/3hZDilHUHc5EE6WSIKBOIl6hqBr8RLAd2tud+PYelLlki/NVzDsP8l/krIEz7u2Zfb/AKt1Pp87jJKZAAAAAElFTkSuQmCC";
  sabotenImg.onload=function() {
    loaded++;
  } 
  //水
  mizuImg = new Image();
  mizuImg.src =  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAABnRSTlMAAAAAAABupgeRAAAAcUlEQVQokZWSwQ2AMAwDvS/bsAlLMAUvFimRLIXQummQ/GivUWpHwXY27JfpuJvJDkYoyeGUd765BI8NvI4VkmNszOuMI7ErOTK7kid2JUdiV3JUZh85SrMPHEvTPa/M/sOLK/T+WV2hGPpXjD70MsYDrQTzsOkaBq4AAAAASUVORK5CYII=";
  mizuImg.onload=function() {
    loaded++;
  }  
  //壁(石)
  kabeIshiImg = new Image();
  kabeIshiImg.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAADAFBMVEUAAACAAAAAgACAgAAAAICAAIAAgIDAwMDA3MCmyvD/8NT/4rH/1I7/xmv/uEj/qiX/qgDckgC5egCWYgBzSgBQMgD/49T/x7H/q47/j2v/c0j/VyX/VQDcSQC5PQCWMQBzJQBQGQD/1NT/sbH/jo7/a2v/SEj/JSX+AADcAAC5AACWAABzAABQAAD/1OP/scf/jqv/a4//SHP/JVf/AFXcAEm5AD2WADFzACVQABn/1PD/seL/jtT/a8b/SLj/Jar/AKrcAJK5AHqWAGJzAEpQADL/1P//sf//jv//a///SP//Jf/+AP7cANy5ALmWAJZzAHNQAFDw1P/isf/Ujv/Ga/+4SP+qJf+qAP+SANx6ALliAJZKAHMyAFDj1P/Hsf+rjv+Pa/9zSP9XJf9VAP9JANw9ALkxAJYlAHMZAFDU1P+xsf+Ojv9ra/9ISP8lJf8AAP4AANwAALkAAJYAAHMAAFDU4/+xx/+Oq/9rj/9Ic/8lV/8AVf8ASdwAPbkAMZYAJXMAGVDU8P+x4v+O1P9rxv9IuP8lqv8Aqv8AktwAerkAYpYASnMAMlDU//+x//+O//9r//9I//8l//8A/v4A3NwAubkAlpYAc3MAUFDU//Cx/+KO/9Rr/8ZI/7gl/6oA/6oA3JIAuXoAlmIAc0oAUDLU/+Ox/8eO/6tr/49I/3Ml/1cA/1UA3EkAuT0AljEAcyUAUBnU/9Sx/7GO/45r/2tI/0gl/yUA/gAA3AAAuQAAlgAAcwAAUADj/9TH/7Gr/46P/2tz/0hX/yVV/wBJ3AA9uQAxlgAlcwAZUADw/9Ti/7HU/47G/2u4/0iq/yWq/wCS3AB6uQBilgBKcwAyUAD//9T//7H//47//2v//0j//yX+/gDc3AC5uQCWlgBzcwBQUADy8vLm5uba2trOzs7CwsK2traqqqqenp6SkpKGhoZ6enpubm5iYmJWVlZKSko+Pj4yMjImJiYaGhoODg7/+/CgoKSAgID/AAAA/wD//wAAAP//AP8A///////g951TAAABAHRSTlP/AP//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////rTvmKwAAAC5JREFUGJVjYBgk4CUQwAgGEESIgik4m4EBqo4BpgPGRAi8xCoAMYmBAUUADQAAMwNGFmBUIw4AAAAASUVORK5CYII=";
  kabeIshiImg.onload=function() {
    loaded++;
  } 
  //壁(木)
  kabeKiImg = new Image();
  kabeKiImg.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAADAFBMVEUAAACAAAAAgACAgAAAAICAAIAAgIDAwMDA3MCmyvD/8NT/4rH/1I7/xmv/uEj/qiX/qgDckgC5egCWYgBzSgBQMgD/49T/x7H/q47/j2v/c0j/VyX/VQDcSQC5PQCWMQBzJQBQGQD/1NT/sbH/jo7/a2v/SEj/JSX+AADcAAC5AACWAABzAABQAAD/1OP/scf/jqv/a4//SHP/JVf/AFXcAEm5AD2WADFzACVQABn/1PD/seL/jtT/a8b/SLj/Jar/AKrcAJK5AHqWAGJzAEpQADL/1P//sf//jv//a///SP//Jf/+AP7cANy5ALmWAJZzAHNQAFDw1P/isf/Ujv/Ga/+4SP+qJf+qAP+SANx6ALliAJZKAHMyAFDj1P/Hsf+rjv+Pa/9zSP9XJf9VAP9JANw9ALkxAJYlAHMZAFDU1P+xsf+Ojv9ra/9ISP8lJf8AAP4AANwAALkAAJYAAHMAAFDU4/+xx/+Oq/9rj/9Ic/8lV/8AVf8ASdwAPbkAMZYAJXMAGVDU8P+x4v+O1P9rxv9IuP8lqv8Aqv8AktwAerkAYpYASnMAMlDU//+x//+O//9r//9I//8l//8A/v4A3NwAubkAlpYAc3MAUFDU//Cx/+KO/9Rr/8ZI/7gl/6oA/6oA3JIAuXoAlmIAc0oAUDLU/+Ox/8eO/6tr/49I/3Ml/1cA/1UA3EkAuT0AljEAcyUAUBnU/9Sx/7GO/45r/2tI/0gl/yUA/gAA3AAAuQAAlgAAcwAAUADj/9TH/7Gr/46P/2tz/0hX/yVV/wBJ3AA9uQAxlgAlcwAZUADw/9Ti/7HU/47G/2u4/0iq/yWq/wCS3AB6uQBilgBKcwAyUAD//9T//7H//47//2v//0j//yX+/gDc3AC5uQCWlgBzcwBQUADy8vLm5uba2trOzs7CwsK2traqqqqenp6SkpKGhoZ6enpubm5iYmJWVlZKSko+Pj4yMjImJiYaGhoODg7/+/CgoKSAgID/AAAA/wD//wAAAP//AP8A///////g951TAAABAHRSTlP/AP//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////rTvmKwAAACJJREFUGJVjYBgkgB8IZPkhAEQzyKIBBmRZfqwqyDADHQAA4iYJocseqI8AAAAASUVORK5CYII=";
  kabeKiImg.onload=function() {
    loaded++;
  } 
  //壁(武器屋)
  kabeBukiyaImg = new Image();
  kabeBukiyaImg.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAADAFBMVEUAAACAAAAAgACAgAAAAICAAIAAgIDAwMDA3MCmyvD/8NT/4rH/1I7/xmv/uEj/qiX/qgDckgC5egCWYgBzSgBQMgD/49T/x7H/q47/j2v/c0j/VyX/VQDcSQC5PQCWMQBzJQBQGQD/1NT/sbH/jo7/a2v/SEj/JSX+AADcAAC5AACWAABzAABQAAD/1OP/scf/jqv/a4//SHP/JVf/AFXcAEm5AD2WADFzACVQABn/1PD/seL/jtT/a8b/SLj/Jar/AKrcAJK5AHqWAGJzAEpQADL/1P//sf//jv//a///SP//Jf/+AP7cANy5ALmWAJZzAHNQAFDw1P/isf/Ujv/Ga/+4SP+qJf+qAP+SANx6ALliAJZKAHMyAFDj1P/Hsf+rjv+Pa/9zSP9XJf9VAP9JANw9ALkxAJYlAHMZAFDU1P+xsf+Ojv9ra/9ISP8lJf8AAP4AANwAALkAAJYAAHMAAFDU4/+xx/+Oq/9rj/9Ic/8lV/8AVf8ASdwAPbkAMZYAJXMAGVDU8P+x4v+O1P9rxv9IuP8lqv8Aqv8AktwAerkAYpYASnMAMlDU//+x//+O//9r//9I//8l//8A/v4A3NwAubkAlpYAc3MAUFDU//Cx/+KO/9Rr/8ZI/7gl/6oA/6oA3JIAuXoAlmIAc0oAUDLU/+Ox/8eO/6tr/49I/3Ml/1cA/1UA3EkAuT0AljEAcyUAUBnU/9Sx/7GO/45r/2tI/0gl/yUA/gAA3AAAuQAAlgAAcwAAUADj/9TH/7Gr/46P/2tz/0hX/yVV/wBJ3AA9uQAxlgAlcwAZUADw/9Ti/7HU/47G/2u4/0iq/yWq/wCS3AB6uQBilgBKcwAyUAD//9T//7H//47//2v//0j//yX+/gDc3AC5uQCWlgBzcwBQUADy8vLm5uba2trOzs7CwsK2traqqqqenp6SkpKGhoZ6enpubm5iYmJWVlZKSko+Pj4yMjImJiYaGhoODg7/+/CgoKSAgID/AAAA/wD//wAAAP//AP8A///////g951TAAABAHRSTlP/AP//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////rTvmKwAAACZJREFUGJVjYBgkQBMI/v/XhAGogCaywH9kgC6AXQs2QzWRVaADANHWKryZTQyiAAAAAElFTkSuQmCC";
  kabeBukiyaImg.onload=function() {
    loaded++;
  } 
  //壁(防具屋)
  kabeBouguyaImg = new Image();
  kabeBouguyaImg.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAADAFBMVEUAAACAAAAAgACAgAAAAICAAIAAgIDAwMDA3MCmyvD/8NT/4rH/1I7/xmv/uEj/qiX/qgDckgC5egCWYgBzSgBQMgD/49T/x7H/q47/j2v/c0j/VyX/VQDcSQC5PQCWMQBzJQBQGQD/1NT/sbH/jo7/a2v/SEj/JSX+AADcAAC5AACWAABzAABQAAD/1OP/scf/jqv/a4//SHP/JVf/AFXcAEm5AD2WADFzACVQABn/1PD/seL/jtT/a8b/SLj/Jar/AKrcAJK5AHqWAGJzAEpQADL/1P//sf//jv//a///SP//Jf/+AP7cANy5ALmWAJZzAHNQAFDw1P/isf/Ujv/Ga/+4SP+qJf+qAP+SANx6ALliAJZKAHMyAFDj1P/Hsf+rjv+Pa/9zSP9XJf9VAP9JANw9ALkxAJYlAHMZAFDU1P+xsf+Ojv9ra/9ISP8lJf8AAP4AANwAALkAAJYAAHMAAFDU4/+xx/+Oq/9rj/9Ic/8lV/8AVf8ASdwAPbkAMZYAJXMAGVDU8P+x4v+O1P9rxv9IuP8lqv8Aqv8AktwAerkAYpYASnMAMlDU//+x//+O//9r//9I//8l//8A/v4A3NwAubkAlpYAc3MAUFDU//Cx/+KO/9Rr/8ZI/7gl/6oA/6oA3JIAuXoAlmIAc0oAUDLU/+Ox/8eO/6tr/49I/3Ml/1cA/1UA3EkAuT0AljEAcyUAUBnU/9Sx/7GO/45r/2tI/0gl/yUA/gAA3AAAuQAAlgAAcwAAUADj/9TH/7Gr/46P/2tz/0hX/yVV/wBJ3AA9uQAxlgAlcwAZUADw/9Ti/7HU/47G/2u4/0iq/yWq/wCS3AB6uQBilgBKcwAyUAD//9T//7H//47//2v//0j//yX+/gDc3AC5uQCWlgBzcwBQUADy8vLm5uba2trOzs7CwsK2traqqqqenp6SkpKGhoZ6enpubm5iYmJWVlZKSko+Pj4yMjImJiYaGhoODg7/+/CgoKSAgID/AAAA/wD//wAAAP//AP8A///////g951TAAABAHRSTlP/AP//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////rTvmKwAAACxJREFUGJVjYBgkoAsI/kMAiAkX6EIV6IKTOFR0gQW6kARg8ggBqDEgAXQAALAYRdw7LmpbAAAAAElFTkSuQmCC";
  kabeBouguyaImg.onload=function() {
    loaded++;
  } 
  //壁(宿屋)
  kabeYadoyaImg = new Image();
  kabeYadoyaImg.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAADAFBMVEUAAACAAAAAgACAgAAAAICAAIAAgIDAwMDA3MCmyvD/8NT/4rH/1I7/xmv/uEj/qiX/qgDckgC5egCWYgBzSgBQMgD/49T/x7H/q47/j2v/c0j/VyX/VQDcSQC5PQCWMQBzJQBQGQD/1NT/sbH/jo7/a2v/SEj/JSX+AADcAAC5AACWAABzAABQAAD/1OP/scf/jqv/a4//SHP/JVf/AFXcAEm5AD2WADFzACVQABn/1PD/seL/jtT/a8b/SLj/Jar/AKrcAJK5AHqWAGJzAEpQADL/1P//sf//jv//a///SP//Jf/+AP7cANy5ALmWAJZzAHNQAFDw1P/isf/Ujv/Ga/+4SP+qJf+qAP+SANx6ALliAJZKAHMyAFDj1P/Hsf+rjv+Pa/9zSP9XJf9VAP9JANw9ALkxAJYlAHMZAFDU1P+xsf+Ojv9ra/9ISP8lJf8AAP4AANwAALkAAJYAAHMAAFDU4/+xx/+Oq/9rj/9Ic/8lV/8AVf8ASdwAPbkAMZYAJXMAGVDU8P+x4v+O1P9rxv9IuP8lqv8Aqv8AktwAerkAYpYASnMAMlDU//+x//+O//9r//9I//8l//8A/v4A3NwAubkAlpYAc3MAUFDU//Cx/+KO/9Rr/8ZI/7gl/6oA/6oA3JIAuXoAlmIAc0oAUDLU/+Ox/8eO/6tr/49I/3Ml/1cA/1UA3EkAuT0AljEAcyUAUBnU/9Sx/7GO/45r/2tI/0gl/yUA/gAA3AAAuQAAlgAAcwAAUADj/9TH/7Gr/46P/2tz/0hX/yVV/wBJ3AA9uQAxlgAlcwAZUADw/9Ti/7HU/47G/2u4/0iq/yWq/wCS3AB6uQBilgBKcwAyUAD//9T//7H//47//2v//0j//yX+/gDc3AC5uQCWlgBzcwBQUADy8vLm5uba2trOzs7CwsK2traqqqqenp6SkpKGhoZ6enpubm5iYmJWVlZKSko+Pj4yMjImJiYaGhoODg7/+/CgoKSAgID/AAAA/wD//wAAAP//AP8A///////g951TAAABAHRSTlP/AP//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////rTvmKwAAAC1JREFUGJVjYBgk4DgqAAr8////+P/jx6EESAWIAeKCCZgAXAirFnRD0QXQAQCbGVfAB+PFIgAAAABJRU5ErkJggg==";
  kabeYadoyaImg.onload=function() {
    loaded++;
  } 
  //壺
  tsuboImg = new Image();
  tsuboImg.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAADAFBMVEUAAACAAAAAgACAgAAAAICAAIAAgIDAwMDA3MCmyvD/8NT/4rH/1I7/xmv/uEj/qiX/qgDckgC5egCWYgBzSgBQMgD/49T/x7H/q47/j2v/c0j/VyX/VQDcSQC5PQCWMQBzJQBQGQD/1NT/sbH/jo7/a2v/SEj/JSX+AADcAAC5AACWAABzAABQAAD/1OP/scf/jqv/a4//SHP/JVf/AFXcAEm5AD2WADFzACVQABn/1PD/seL/jtT/a8b/SLj/Jar/AKrcAJK5AHqWAGJzAEpQADL/1P//sf//jv//a///SP//Jf/+AP7cANy5ALmWAJZzAHNQAFDw1P/isf/Ujv/Ga/+4SP+qJf+qAP+SANx6ALliAJZKAHMyAFDj1P/Hsf+rjv+Pa/9zSP9XJf9VAP9JANw9ALkxAJYlAHMZAFDU1P+xsf+Ojv9ra/9ISP8lJf8AAP4AANwAALkAAJYAAHMAAFDU4/+xx/+Oq/9rj/9Ic/8lV/8AVf8ASdwAPbkAMZYAJXMAGVDU8P+x4v+O1P9rxv9IuP8lqv8Aqv8AktwAerkAYpYASnMAMlDU//+x//+O//9r//9I//8l//8A/v4A3NwAubkAlpYAc3MAUFDU//Cx/+KO/9Rr/8ZI/7gl/6oA/6oA3JIAuXoAlmIAc0oAUDLU/+Ox/8eO/6tr/49I/3Ml/1cA/1UA3EkAuT0AljEAcyUAUBnU/9Sx/7GO/45r/2tI/0gl/yUA/gAA3AAAuQAAlgAAcwAAUADj/9TH/7Gr/46P/2tz/0hX/yVV/wBJ3AA9uQAxlgAlcwAZUADw/9Ti/7HU/47G/2u4/0iq/yWq/wCS3AB6uQBilgBKcwAyUAD//9T//7H//47//2v//0j//yX+/gDc3AC5uQCWlgBzcwBQUADy8vLm5uba2trOzs7CwsK2traqqqqenp6SkpKGhoZ6enpubm5iYmJWVlZKSko+Pj4yMjImJiYaGhoODg7/+/CgoKSAgID/AAAA/wD//wAAAP//AP8A///////g951TAAABAHRSTlP/AP//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////rTvmKwAAAEpJREFUGJWNjlEKACAMQr18P960W9SmbRB9ZATz0TTMLVg5xx0WBLbXgyRP0CtwBi1nFDktAIeOVipBxV+A7SlQJIrihyzhpXnZBTC9b+cvwmujAAAAAElFTkSuQmCC";
  tsuboImg.onload=function() {
    loaded++;
  } 
  //タンス
  tansuImg = new Image();
  tansuImg.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAADAFBMVEUAAACAAAAAgACAgAAAAICAAIAAgIDAwMDA3MCmyvD/8NT/4rH/1I7/xmv/uEj/qiX/qgDckgC5egCWYgBzSgBQMgD/49T/x7H/q47/j2v/c0j/VyX/VQDcSQC5PQCWMQBzJQBQGQD/1NT/sbH/jo7/a2v/SEj/JSX+AADcAAC5AACWAABzAABQAAD/1OP/scf/jqv/a4//SHP/JVf/AFXcAEm5AD2WADFzACVQABn/1PD/seL/jtT/a8b/SLj/Jar/AKrcAJK5AHqWAGJzAEpQADL/1P//sf//jv//a///SP//Jf/+AP7cANy5ALmWAJZzAHNQAFDw1P/isf/Ujv/Ga/+4SP+qJf+qAP+SANx6ALliAJZKAHMyAFDj1P/Hsf+rjv+Pa/9zSP9XJf9VAP9JANw9ALkxAJYlAHMZAFDU1P+xsf+Ojv9ra/9ISP8lJf8AAP4AANwAALkAAJYAAHMAAFDU4/+xx/+Oq/9rj/9Ic/8lV/8AVf8ASdwAPbkAMZYAJXMAGVDU8P+x4v+O1P9rxv9IuP8lqv8Aqv8AktwAerkAYpYASnMAMlDU//+x//+O//9r//9I//8l//8A/v4A3NwAubkAlpYAc3MAUFDU//Cx/+KO/9Rr/8ZI/7gl/6oA/6oA3JIAuXoAlmIAc0oAUDLU/+Ox/8eO/6tr/49I/3Ml/1cA/1UA3EkAuT0AljEAcyUAUBnU/9Sx/7GO/45r/2tI/0gl/yUA/gAA3AAAuQAAlgAAcwAAUADj/9TH/7Gr/46P/2tz/0hX/yVV/wBJ3AA9uQAxlgAlcwAZUADw/9Ti/7HU/47G/2u4/0iq/yWq/wCS3AB6uQBilgBKcwAyUAD//9T//7H//47//2v//0j//yX+/gDc3AC5uQCWlgBzcwBQUADy8vLm5uba2trOzs7CwsK2traqqqqenp6SkpKGhoZ6enpubm5iYmJWVlZKSko+Pj4yMjImJiYaGhoODg7/+/CgoKSAgID/AAAA/wD//wAAAP//AP8A///////g951TAAABAHRSTlP/AP//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////rTvmKwAAADBJREFUGJVjYMAE/EgAnQ8WwRDAALIoACSAIgvGEL1gEiKApAGHABlmoGtBdxgaAADORAurryuVZQAAAABJRU5ErkJggg==";
  tansuImg.onload=function() {
    loaded++;
  } 
  //石像
  sekizouImg = new Image();
  sekizouImg.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAADAFBMVEUAAACAAAAAgACAgAAAAICAAIAAgIDAwMDA3MCmyvD/8NT/4rH/1I7/xmv/uEj/qiX/qgDckgC5egCWYgBzSgBQMgD/49T/x7H/q47/j2v/c0j/VyX/VQDcSQC5PQCWMQBzJQBQGQD/1NT/sbH/jo7/a2v/SEj/JSX+AADcAAC5AACWAABzAABQAAD/1OP/scf/jqv/a4//SHP/JVf/AFXcAEm5AD2WADFzACVQABn/1PD/seL/jtT/a8b/SLj/Jar/AKrcAJK5AHqWAGJzAEpQADL/1P//sf//jv//a///SP//Jf/+AP7cANy5ALmWAJZzAHNQAFDw1P/isf/Ujv/Ga/+4SP+qJf+qAP+SANx6ALliAJZKAHMyAFDj1P/Hsf+rjv+Pa/9zSP9XJf9VAP9JANw9ALkxAJYlAHMZAFDU1P+xsf+Ojv9ra/9ISP8lJf8AAP4AANwAALkAAJYAAHMAAFDU4/+xx/+Oq/9rj/9Ic/8lV/8AVf8ASdwAPbkAMZYAJXMAGVDU8P+x4v+O1P9rxv9IuP8lqv8Aqv8AktwAerkAYpYASnMAMlDU//+x//+O//9r//9I//8l//8A/v4A3NwAubkAlpYAc3MAUFDU//Cx/+KO/9Rr/8ZI/7gl/6oA/6oA3JIAuXoAlmIAc0oAUDLU/+Ox/8eO/6tr/49I/3Ml/1cA/1UA3EkAuT0AljEAcyUAUBnU/9Sx/7GO/45r/2tI/0gl/yUA/gAA3AAAuQAAlgAAcwAAUADj/9TH/7Gr/46P/2tz/0hX/yVV/wBJ3AA9uQAxlgAlcwAZUADw/9Ti/7HU/47G/2u4/0iq/yWq/wCS3AB6uQBilgBKcwAyUAD//9T//7H//47//2v//0j//yX+/gDc3AC5uQCWlgBzcwBQUADy8vLm5uba2trOzs7CwsK2traqqqqenp6SkpKGhoZ6enpubm5iYmJWVlZKSko+Pj4yMjImJiYaGhoODg7/+/CgoKSAgID/AAAA/wD//wAAAP//AP8A///////g951TAAABAHRSTlP/AP//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////rTvmKwAAAFJJREFUGJVtjdsRgEAIA7f3fKVUu5CHcp66wwwQAnA0cBdXkngLalML2DLLgRwKZaF7FWnKMFS3HH3z+QWPkiuBS4Gxxxf3Xt2r4RTa4AdvfOcnFDV+xJJchtQAAAAASUVORK5CYII=";
  sekizouImg.onload=function() {
    loaded++;
  } 
  //真っ暗
  makkuraImg = new Image();
  makkuraImg.src =  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGElEQVQ4jWNgYGD4TyEeNWDUgFEDhocBAJvM/wEeNfmLAAAAAElFTkSuQmCC";
  makkuraImg.onload=function() {
    loaded++;
  }
  //勇者前向き1
  yuushaFrontImgOne = new Image();
  yuushaFrontImgOne.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAADAFBMVEUAAACAAAAAgACAgAAAAICAAIAAgIDAwMDA3MCmyvD/8NT/4rH/1I7/xmv/uEj/qiX/qgDckgC5egCWYgBzSgBQMgD/49T/x7H/q47/j2v/c0j/VyX/VQDcSQC5PQCWMQBzJQBQGQD/1NT/sbH/jo7/a2v/SEj/JSX+AADcAAC5AACWAABzAABQAAD/1OP/scf/jqv/a4//SHP/JVf/AFXcAEm5AD2WADFzACVQABn/1PD/seL/jtT/a8b/SLj/Jar/AKrcAJK5AHqWAGJzAEpQADL/1P//sf//jv//a///SP//Jf/+AP7cANy5ALmWAJZzAHNQAFDw1P/isf/Ujv/Ga/+4SP+qJf+qAP+SANx6ALliAJZKAHMyAFDj1P/Hsf+rjv+Pa/9zSP9XJf9VAP9JANw9ALkxAJYlAHMZAFDU1P+xsf+Ojv9ra/9ISP8lJf8AAP4AANwAALkAAJYAAHMAAFDU4/+xx/+Oq/9rj/9Ic/8lV/8AVf8ASdwAPbkAMZYAJXMAGVDU8P+x4v+O1P9rxv9IuP8lqv8Aqv8AktwAerkAYpYASnMAMlDU//+x//+O//9r//9I//8l//8A/v4A3NwAubkAlpYAc3MAUFDU//Cx/+KO/9Rr/8ZI/7gl/6oA/6oA3JIAuXoAlmIAc0oAUDLU/+Ox/8eO/6tr/49I/3Ml/1cA/1UA3EkAuT0AljEAcyUAUBnU/9Sx/7GO/45r/2tI/0gl/yUA/gAA3AAAuQAAlgAAcwAAUADj/9TH/7Gr/46P/2tz/0hX/yVV/wBJ3AA9uQAxlgAlcwAZUADw/9Ti/7HU/47G/2u4/0iq/yWq/wCS3AB6uQBilgBKcwAyUAD//9T//7H//47//2v//0j//yX+/gDc3AC5uQCWlgBzcwBQUADy8vLm5uba2trOzs7CwsK2traqqqqenp6SkpKGhoZ6enpubm5iYmJWVlZKSko+Pj4yMjImJiYaGhoODg7/+/CgoKSAgID/AAAA/wD//wAAAP//AP8A///////g951TAAABAHRSTlP/AP//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////rTvmKwAAAF5JREFUGJVNz4sNACEIA1CYotMye698vSYm8oKK5nQlKrmzAhVkywAJiA7YR7igPQKoMwNV48AX7g6Jopq0mNSzWuZ6L06BhJLXkTexB2OB/0fng/keG7LbYybdBu98alNb5ZfPFBgAAAAASUVORK5CYII=";
  yuushaFrontImgOne.onload=function() {
    loaded++;
  }  
  //勇者前向き2
  yuushaFrontImgTwo = new Image();
  yuushaFrontImgTwo.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAADAFBMVEUAAACAAAAAgACAgAAAAICAAIAAgIDAwMDA3MCmyvD/8NT/4rH/1I7/xmv/uEj/qiX/qgDckgC5egCWYgBzSgBQMgD/49T/x7H/q47/j2v/c0j/VyX/VQDcSQC5PQCWMQBzJQBQGQD/1NT/sbH/jo7/a2v/SEj/JSX+AADcAAC5AACWAABzAABQAAD/1OP/scf/jqv/a4//SHP/JVf/AFXcAEm5AD2WADFzACVQABn/1PD/seL/jtT/a8b/SLj/Jar/AKrcAJK5AHqWAGJzAEpQADL/1P//sf//jv//a///SP//Jf/+AP7cANy5ALmWAJZzAHNQAFDw1P/isf/Ujv/Ga/+4SP+qJf+qAP+SANx6ALliAJZKAHMyAFDj1P/Hsf+rjv+Pa/9zSP9XJf9VAP9JANw9ALkxAJYlAHMZAFDU1P+xsf+Ojv9ra/9ISP8lJf8AAP4AANwAALkAAJYAAHMAAFDU4/+xx/+Oq/9rj/9Ic/8lV/8AVf8ASdwAPbkAMZYAJXMAGVDU8P+x4v+O1P9rxv9IuP8lqv8Aqv8AktwAerkAYpYASnMAMlDU//+x//+O//9r//9I//8l//8A/v4A3NwAubkAlpYAc3MAUFDU//Cx/+KO/9Rr/8ZI/7gl/6oA/6oA3JIAuXoAlmIAc0oAUDLU/+Ox/8eO/6tr/49I/3Ml/1cA/1UA3EkAuT0AljEAcyUAUBnU/9Sx/7GO/45r/2tI/0gl/yUA/gAA3AAAuQAAlgAAcwAAUADj/9TH/7Gr/46P/2tz/0hX/yVV/wBJ3AA9uQAxlgAlcwAZUADw/9Ti/7HU/47G/2u4/0iq/yWq/wCS3AB6uQBilgBKcwAyUAD//9T//7H//47//2v//0j//yX+/gDc3AC5uQCWlgBzcwBQUADy8vLm5uba2trOzs7CwsK2traqqqqenp6SkpKGhoZ6enpubm5iYmJWVlZKSko+Pj4yMjImJiYaGhoODg7/+/CgoKSAgID/AAAA/wD//wAAAP//AP8A///////g951TAAABAHRSTlP/AP//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////rTvmKwAAAGNJREFUGJVVkNERAEEEQ6ki1ao9l7DMnJ/lDREb2VEdzmJrckgkDUhA6ABnhAuUo4CeeaBrHMgFpyGikDQNRlGPE7rj7SitBsMb+OsA5OMZO/Csq0mitaeN1dhbPca79n4g8wOB+V8BcL2yOAAAAABJRU5ErkJggg==";
  yuushaFrontImgTwo.onload=function() {
    loaded++;
  }  

  //勇者後ろ向き1
  yuushaBackImgOne = new Image();
  yuushaBackImgOne.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAADAFBMVEUAAACAAAAAgACAgAAAAICAAIAAgIDAwMDA3MCmyvD/8NT/4rH/1I7/xmv/uEj/qiX/qgDckgC5egCWYgBzSgBQMgD/49T/x7H/q47/j2v/c0j/VyX/VQDcSQC5PQCWMQBzJQBQGQD/1NT/sbH/jo7/a2v/SEj/JSX+AADcAAC5AACWAABzAABQAAD/1OP/scf/jqv/a4//SHP/JVf/AFXcAEm5AD2WADFzACVQABn/1PD/seL/jtT/a8b/SLj/Jar/AKrcAJK5AHqWAGJzAEpQADL/1P//sf//jv//a///SP//Jf/+AP7cANy5ALmWAJZzAHNQAFDw1P/isf/Ujv/Ga/+4SP+qJf+qAP+SANx6ALliAJZKAHMyAFDj1P/Hsf+rjv+Pa/9zSP9XJf9VAP9JANw9ALkxAJYlAHMZAFDU1P+xsf+Ojv9ra/9ISP8lJf8AAP4AANwAALkAAJYAAHMAAFDU4/+xx/+Oq/9rj/9Ic/8lV/8AVf8ASdwAPbkAMZYAJXMAGVDU8P+x4v+O1P9rxv9IuP8lqv8Aqv8AktwAerkAYpYASnMAMlDU//+x//+O//9r//9I//8l//8A/v4A3NwAubkAlpYAc3MAUFDU//Cx/+KO/9Rr/8ZI/7gl/6oA/6oA3JIAuXoAlmIAc0oAUDLU/+Ox/8eO/6tr/49I/3Ml/1cA/1UA3EkAuT0AljEAcyUAUBnU/9Sx/7GO/45r/2tI/0gl/yUA/gAA3AAAuQAAlgAAcwAAUADj/9TH/7Gr/46P/2tz/0hX/yVV/wBJ3AA9uQAxlgAlcwAZUADw/9Ti/7HU/47G/2u4/0iq/yWq/wCS3AB6uQBilgBKcwAyUAD//9T//7H//47//2v//0j//yX+/gDc3AC5uQCWlgBzcwBQUADy8vLm5uba2trOzs7CwsK2traqqqqenp6SkpKGhoZ6enpubm5iYmJWVlZKSko+Pj4yMjImJiYaGhoODg7/+/CgoKSAgID/AAAA/wD//wAAAP//AP8A///////g951TAAABAHRSTlP/AP//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////rTvmKwAAAFdJREFUGJV1kMENwDAIA/EUTMvsVwhNkKKWFz5hO4opJ9bUhuzoRX4ArdkgYk6+wZUBV+0byD4zZzJwl/mQ1F4WKAMVpkiAdkalZsu8o0GXirYsoPMDtTwsDV5/HlZIZgAAAABJRU5ErkJggg==";
  yuushaBackImgOne.onload=function() {
    loaded++;
  }  
  //勇者後ろ向き2
  yuushaBackImgTwo = new Image();
  yuushaBackImgTwo.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAADAFBMVEUAAACAAAAAgACAgAAAAICAAIAAgIDAwMDA3MCmyvD/8NT/4rH/1I7/xmv/uEj/qiX/qgDckgC5egCWYgBzSgBQMgD/49T/x7H/q47/j2v/c0j/VyX/VQDcSQC5PQCWMQBzJQBQGQD/1NT/sbH/jo7/a2v/SEj/JSX+AADcAAC5AACWAABzAABQAAD/1OP/scf/jqv/a4//SHP/JVf/AFXcAEm5AD2WADFzACVQABn/1PD/seL/jtT/a8b/SLj/Jar/AKrcAJK5AHqWAGJzAEpQADL/1P//sf//jv//a///SP//Jf/+AP7cANy5ALmWAJZzAHNQAFDw1P/isf/Ujv/Ga/+4SP+qJf+qAP+SANx6ALliAJZKAHMyAFDj1P/Hsf+rjv+Pa/9zSP9XJf9VAP9JANw9ALkxAJYlAHMZAFDU1P+xsf+Ojv9ra/9ISP8lJf8AAP4AANwAALkAAJYAAHMAAFDU4/+xx/+Oq/9rj/9Ic/8lV/8AVf8ASdwAPbkAMZYAJXMAGVDU8P+x4v+O1P9rxv9IuP8lqv8Aqv8AktwAerkAYpYASnMAMlDU//+x//+O//9r//9I//8l//8A/v4A3NwAubkAlpYAc3MAUFDU//Cx/+KO/9Rr/8ZI/7gl/6oA/6oA3JIAuXoAlmIAc0oAUDLU/+Ox/8eO/6tr/49I/3Ml/1cA/1UA3EkAuT0AljEAcyUAUBnU/9Sx/7GO/45r/2tI/0gl/yUA/gAA3AAAuQAAlgAAcwAAUADj/9TH/7Gr/46P/2tz/0hX/yVV/wBJ3AA9uQAxlgAlcwAZUADw/9Ti/7HU/47G/2u4/0iq/yWq/wCS3AB6uQBilgBKcwAyUAD//9T//7H//47//2v//0j//yX+/gDc3AC5uQCWlgBzcwBQUADy8vLm5uba2trOzs7CwsK2traqqqqenp6SkpKGhoZ6enpubm5iYmJWVlZKSko+Pj4yMjImJiYaGhoODg7/+/CgoKSAgID/AAAA/wD//wAAAP//AP8A///////g951TAAABAHRSTlP/AP//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////rTvmKwAAAFRJREFUGJVtjtENADEIQssUTuvsHGrVpDk+bHixyIHkKaTO+EsewAQszwbuu/IP3gySe0SgHPsR4GawNobQNOJLpmgAZhE6GRdgQ9Sgqsd6H+6maH0YgGMzDPekyQAAAABJRU5ErkJggg==";
  yuushaBackImgTwo.onload=function() {
    loaded++;
  }  
  
  //勇者左向き1
  yuushaLeftImgOne = new Image();
  yuushaLeftImgOne.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAADAFBMVEUAAACAAAAAgACAgAAAAICAAIAAgIDAwMDA3MCmyvD/8NT/4rH/1I7/xmv/uEj/qiX/qgDckgC5egCWYgBzSgBQMgD/49T/x7H/q47/j2v/c0j/VyX/VQDcSQC5PQCWMQBzJQBQGQD/1NT/sbH/jo7/a2v/SEj/JSX+AADcAAC5AACWAABzAABQAAD/1OP/scf/jqv/a4//SHP/JVf/AFXcAEm5AD2WADFzACVQABn/1PD/seL/jtT/a8b/SLj/Jar/AKrcAJK5AHqWAGJzAEpQADL/1P//sf//jv//a///SP//Jf/+AP7cANy5ALmWAJZzAHNQAFDw1P/isf/Ujv/Ga/+4SP+qJf+qAP+SANx6ALliAJZKAHMyAFDj1P/Hsf+rjv+Pa/9zSP9XJf9VAP9JANw9ALkxAJYlAHMZAFDU1P+xsf+Ojv9ra/9ISP8lJf8AAP4AANwAALkAAJYAAHMAAFDU4/+xx/+Oq/9rj/9Ic/8lV/8AVf8ASdwAPbkAMZYAJXMAGVDU8P+x4v+O1P9rxv9IuP8lqv8Aqv8AktwAerkAYpYASnMAMlDU//+x//+O//9r//9I//8l//8A/v4A3NwAubkAlpYAc3MAUFDU//Cx/+KO/9Rr/8ZI/7gl/6oA/6oA3JIAuXoAlmIAc0oAUDLU/+Ox/8eO/6tr/49I/3Ml/1cA/1UA3EkAuT0AljEAcyUAUBnU/9Sx/7GO/45r/2tI/0gl/yUA/gAA3AAAuQAAlgAAcwAAUADj/9TH/7Gr/46P/2tz/0hX/yVV/wBJ3AA9uQAxlgAlcwAZUADw/9Ti/7HU/47G/2u4/0iq/yWq/wCS3AB6uQBilgBKcwAyUAD//9T//7H//47//2v//0j//yX+/gDc3AC5uQCWlgBzcwBQUADy8vLm5uba2trOzs7CwsK2traqqqqenp6SkpKGhoZ6enpubm5iYmJWVlZKSko+Pj4yMjImJiYaGhoODg7/+/CgoKSAgID/AAAA/wD//wAAAP//AP8A///////g951TAAABAHRSTlP/AP//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////rTvmKwAAAGNJREFUGJVtj8EVwCAMQs0UTMvsFKKmPZSLvi+BuEpVxahaK0B8SQAgfUG/DoqDBHmnOgMh+AO3xbE7x/flsyPVsbIDZwsK7g+Adul1OElZbUbyk72WnWkpjtS1npDe/x5HjR5xhmEtRRWNJgAAAABJRU5ErkJggg==";
  yuushaLeftImgOne.onload=function() {
    loaded++;
  }  
  //勇者左向き2
  yuushaLeftImgTwo = new Image();
  yuushaLeftImgTwo.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAADAFBMVEUAAACAAAAAgACAgAAAAICAAIAAgIDAwMDA3MCmyvD/8NT/4rH/1I7/xmv/uEj/qiX/qgDckgC5egCWYgBzSgBQMgD/49T/x7H/q47/j2v/c0j/VyX/VQDcSQC5PQCWMQBzJQBQGQD/1NT/sbH/jo7/a2v/SEj/JSX+AADcAAC5AACWAABzAABQAAD/1OP/scf/jqv/a4//SHP/JVf/AFXcAEm5AD2WADFzACVQABn/1PD/seL/jtT/a8b/SLj/Jar/AKrcAJK5AHqWAGJzAEpQADL/1P//sf//jv//a///SP//Jf/+AP7cANy5ALmWAJZzAHNQAFDw1P/isf/Ujv/Ga/+4SP+qJf+qAP+SANx6ALliAJZKAHMyAFDj1P/Hsf+rjv+Pa/9zSP9XJf9VAP9JANw9ALkxAJYlAHMZAFDU1P+xsf+Ojv9ra/9ISP8lJf8AAP4AANwAALkAAJYAAHMAAFDU4/+xx/+Oq/9rj/9Ic/8lV/8AVf8ASdwAPbkAMZYAJXMAGVDU8P+x4v+O1P9rxv9IuP8lqv8Aqv8AktwAerkAYpYASnMAMlDU//+x//+O//9r//9I//8l//8A/v4A3NwAubkAlpYAc3MAUFDU//Cx/+KO/9Rr/8ZI/7gl/6oA/6oA3JIAuXoAlmIAc0oAUDLU/+Ox/8eO/6tr/49I/3Ml/1cA/1UA3EkAuT0AljEAcyUAUBnU/9Sx/7GO/45r/2tI/0gl/yUA/gAA3AAAuQAAlgAAcwAAUADj/9TH/7Gr/46P/2tz/0hX/yVV/wBJ3AA9uQAxlgAlcwAZUADw/9Ti/7HU/47G/2u4/0iq/yWq/wCS3AB6uQBilgBKcwAyUAD//9T//7H//47//2v//0j//yX+/gDc3AC5uQCWlgBzcwBQUADy8vLm5uba2trOzs7CwsK2traqqqqenp6SkpKGhoZ6enpubm5iYmJWVlZKSko+Pj4yMjImJiYaGhoODg7/+/CgoKSAgID/AAAA/wD//wAAAP//AP8A///////g951TAAABAHRSTlP/AP//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////rTvmKwAAAGFJREFUGJVtj8sVADEIArUKq6V2FjS/w3rIM6MoRjrg6CzDD3FJJLOKfEFXD3IHUMBWGWSZ1B9YEpEpkzRgj9THczlggiUDITFn6e6QnrYmvMC1JeZbcF3Ra1fqlefa9/4Pcg5lNUHFeXgAAAAASUVORK5CYII=";
  yuushaLeftImgTwo.onload=function() {
    loaded++;
  }  
  
  //勇者右向き1
  yuushaRightImgOne = new Image();
  yuushaRightImgOne.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAADAFBMVEUAAACAAAAAgACAgAAAAICAAIAAgIDAwMDA3MCmyvD/8NT/4rH/1I7/xmv/uEj/qiX/qgDckgC5egCWYgBzSgBQMgD/49T/x7H/q47/j2v/c0j/VyX/VQDcSQC5PQCWMQBzJQBQGQD/1NT/sbH/jo7/a2v/SEj/JSX+AADcAAC5AACWAABzAABQAAD/1OP/scf/jqv/a4//SHP/JVf/AFXcAEm5AD2WADFzACVQABn/1PD/seL/jtT/a8b/SLj/Jar/AKrcAJK5AHqWAGJzAEpQADL/1P//sf//jv//a///SP//Jf/+AP7cANy5ALmWAJZzAHNQAFDw1P/isf/Ujv/Ga/+4SP+qJf+qAP+SANx6ALliAJZKAHMyAFDj1P/Hsf+rjv+Pa/9zSP9XJf9VAP9JANw9ALkxAJYlAHMZAFDU1P+xsf+Ojv9ra/9ISP8lJf8AAP4AANwAALkAAJYAAHMAAFDU4/+xx/+Oq/9rj/9Ic/8lV/8AVf8ASdwAPbkAMZYAJXMAGVDU8P+x4v+O1P9rxv9IuP8lqv8Aqv8AktwAerkAYpYASnMAMlDU//+x//+O//9r//9I//8l//8A/v4A3NwAubkAlpYAc3MAUFDU//Cx/+KO/9Rr/8ZI/7gl/6oA/6oA3JIAuXoAlmIAc0oAUDLU/+Ox/8eO/6tr/49I/3Ml/1cA/1UA3EkAuT0AljEAcyUAUBnU/9Sx/7GO/45r/2tI/0gl/yUA/gAA3AAAuQAAlgAAcwAAUADj/9TH/7Gr/46P/2tz/0hX/yVV/wBJ3AA9uQAxlgAlcwAZUADw/9Ti/7HU/47G/2u4/0iq/yWq/wCS3AB6uQBilgBKcwAyUAD//9T//7H//47//2v//0j//yX+/gDc3AC5uQCWlgBzcwBQUADy8vLm5uba2trOzs7CwsK2traqqqqenp6SkpKGhoZ6enpubm5iYmJWVlZKSko+Pj4yMjImJiYaGhoODg7/+/CgoKSAgID/AAAA/wD//wAAAP//AP8A///////g951TAAABAHRSTlP/AP//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////rTvmKwAAAGJJREFUGJVVjwEOQCEIQvUUnNaz8wX9tVhr9aagkcxWSXpkGPhffAEJLJjvdjWoFeyyADrI2/KCCWlLkhk2bNm270jg2BZhAGeqCALKUtdUNvgnV0VPH2eT3eZWOHTBaHb5AGDBY1V+N7IcAAAAAElFTkSuQmCC";
  yuushaRightImgOne.onload=function() {
    loaded++;
  }  
  //勇者右向き2
  yuushaRightImgTwo = new Image();
  yuushaRightImgTwo.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAADAFBMVEUAAACAAAAAgACAgAAAAICAAIAAgIDAwMDA3MCmyvD/8NT/4rH/1I7/xmv/uEj/qiX/qgDckgC5egCWYgBzSgBQMgD/49T/x7H/q47/j2v/c0j/VyX/VQDcSQC5PQCWMQBzJQBQGQD/1NT/sbH/jo7/a2v/SEj/JSX+AADcAAC5AACWAABzAABQAAD/1OP/scf/jqv/a4//SHP/JVf/AFXcAEm5AD2WADFzACVQABn/1PD/seL/jtT/a8b/SLj/Jar/AKrcAJK5AHqWAGJzAEpQADL/1P//sf//jv//a///SP//Jf/+AP7cANy5ALmWAJZzAHNQAFDw1P/isf/Ujv/Ga/+4SP+qJf+qAP+SANx6ALliAJZKAHMyAFDj1P/Hsf+rjv+Pa/9zSP9XJf9VAP9JANw9ALkxAJYlAHMZAFDU1P+xsf+Ojv9ra/9ISP8lJf8AAP4AANwAALkAAJYAAHMAAFDU4/+xx/+Oq/9rj/9Ic/8lV/8AVf8ASdwAPbkAMZYAJXMAGVDU8P+x4v+O1P9rxv9IuP8lqv8Aqv8AktwAerkAYpYASnMAMlDU//+x//+O//9r//9I//8l//8A/v4A3NwAubkAlpYAc3MAUFDU//Cx/+KO/9Rr/8ZI/7gl/6oA/6oA3JIAuXoAlmIAc0oAUDLU/+Ox/8eO/6tr/49I/3Ml/1cA/1UA3EkAuT0AljEAcyUAUBnU/9Sx/7GO/45r/2tI/0gl/yUA/gAA3AAAuQAAlgAAcwAAUADj/9TH/7Gr/46P/2tz/0hX/yVV/wBJ3AA9uQAxlgAlcwAZUADw/9Ti/7HU/47G/2u4/0iq/yWq/wCS3AB6uQBilgBKcwAyUAD//9T//7H//47//2v//0j//yX+/gDc3AC5uQCWlgBzcwBQUADy8vLm5uba2trOzs7CwsK2traqqqqenp6SkpKGhoZ6enpubm5iYmJWVlZKSko+Pj4yMjImJiYaGhoODg7/+/CgoKSAgID/AAAA/wD//wAAAP//AP8A///////g951TAAABAHRSTlP/AP//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////rTvmKwAAAGJJREFUGJVVkNERwDAIQnUKp3V2CmjPlvgR36nERFot+RaXNwZgAVC1YNLtIuhVecqCUlReyx+MiUcCApA8lmHwjm06h4rtqaIiSPUyY4JpIeh9mk5kZ58Ss5xsxv277XzEA9VEYfvKjCMoAAAAAElFTkSuQmCC";
  yuushaRightImgTwo.onload=function() {
    loaded++;
  }  
}


            
          
!
999px

Console