屋内⇔屋外　切り替え演出

(C)WorldWideSoftware

<!DOCTYPE html>
<html lang="ja">
 <head>
  <meta charset="utf-8">
  <title>屋内⇔屋外　切り替え演出</title>
 </head>
 <body>
  <canvas id="bg" width="640" height="640"></canvas><br>
  <a href="http://www.wwsft.com">(C)WorldWideSoftware</a><br>
【説明】屋根の下に出入りする処理のサンプルです。
カーソルキーで勇者を４方向に移動してご確認下さい。
「マップデータ」と「屋根のある場所のデータ」を二次元配列で定義しています。
屋根のある場所のデータには出入りする場所のデータも定義しています。
今いるのは屋外か、屋内かを、plZという変数で管理し、その値によって屋根の表示（屋内にいる場合は屋外を見えなくする表示）を行っています。<br>
<a href="roof00src.html">ソースコードの確認</a>

  <script>
  //描画面（キャンバス）の準備
  var cvs = document.getElementById("bg");
  var ctx = cvs.getContext("2d");

  //キー入力
  var key = 0;
  window.onkeydown = function(ev) { key = ev.keyCode; }
  window.onkeyup = function(ev) { key = 0; }

  //マップを配列で定義する　0草、1室内床、2岩、3室内壁
  var MAP = [
   [2,2,2,3,3,3,3,3,2,2],
   [2,0,0,3,1,1,1,3,0,2],
   [2,0,3,3,1,1,1,3,0,2],
   [2,0,3,1,1,1,1,3,0,2],
   [2,0,3,3,1,3,3,3,0,2],
   [2,0,0,0,0,0,0,0,0,2],
   [2,0,0,0,0,0,0,0,0,2],
   [2,0,0,0,0,0,0,0,0,2],
   [2,0,0,0,0,0,0,0,0,2],
   [2,2,2,2,2,2,2,2,2,2]
  ];

  var MAP2 = [//値1と2が屋外⇔屋内を切り替える場所　値4は屋根のある場所
   [0,0,0,4,4,4,4,4,0,0],
   [0,0,0,4,4,4,4,4,0,0],
   [0,0,4,4,4,4,4,4,0,0],
   [0,0,4,4,4,4,4,4,0,0],
   [0,0,4,4,2,4,4,4,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,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 plX = 1, plY = 8;//プレイヤーキャラの座標
  var plZ = 1;//値1が屋外にいる、値2が屋内（屋根の下）にいる
  var idx = 0;//処理　0=移動、1=画面切り替え
  var tmr = 0;//処理のタイマー

  //画像の読み込み
  var img = [], iOK = [];
  function loadImg(n, fname) {
   iOK[n] = false;
   img[n] = new Image();
   img[n].src = fname;
   img[n].onload = function() { iOK[n] = true; }
  }

  loadImg(0, "kusa.png");
  loadImg(1, "yuka.png");
  loadImg(2, "iwa.png");
  loadImg(3, "kabe.png");
  loadImg(4, "yane.png");
  loadImg(5, "yuusya.png");

  //メイン処理
  function mainProc() {
   var n, x, y;

   tmr ++;

   switch(idx) {

   case 0://移動処理

   //プレイヤーキャラの移動
   x = plX;//現在の位置
   y = plY;
   if(key == 38) y--;//カーソル↑
   if(key == 40) y++;//カーソル↓
   if(key == 37) x--;//カーソル←
   if(key == 39) x++;//カーソル→
   if(MAP[y][x] <= 1) {//移動しようとしているところが床だったら
    plX = x;
    plY = y;
    n = MAP2[plY][plX];
    if((n == 1 || n == 2) && n != plZ) {//出入りする場所だったら
     plZ = n;
     idx = 1;//画面切り替え演出に移行する
     tmr = 0;
     break;
    }
   }

   //背景を描画
   for(y=0; y<10; y++)
   for(x=0; x<10; x++) {
    n = MAP[y][x];
    if(iOK[n] == true) ctx.drawImage(img[n], x*64, y*64);
   }

   //プレイヤーキャラを表示
   if(iOK[5] == true) ctx.drawImage(img[5], plX*64, plY*64-tmr%2);

   //屋根を描画
   for(y=0; y<10; y++)
   for(x=0; x<10; x++) {
    n = MAP2[y][x];
    if(plZ == 1) {//屋外にいる
     if(n == 4) {
      if(iOK[4] == true) ctx.drawImage(img[4], x*64, y*64);//屋根
     }
    }
    else {//屋内にいる
     if(n != 2 && n != 4) {//屋外を黒で塗り潰す
      ctx.fillStyle = "black";
      ctx.fillRect(x*64, y*64, 64, 64);
     }
    }
   }

   break;

   case 1://画面切り替え処理

   //背景を描画
   for(y=5-tmr; y<5+tmr; y++)
   for(x=5-tmr; x<5+tmr; x++) {
    n = MAP[y][x];
    if(iOK[n] == true) ctx.drawImage(img[n], x*64, y*64);
   }

   //プレイヤーキャラを表示
   if(iOK[5] == true) ctx.drawImage(img[5], plX*64, plY*64-tmr%2);

   //屋根を描画
   for(y=5-tmr; y<5+tmr; y++)
   for(x=5-tmr; x<5+tmr; x++) {
    n = MAP2[y][x];
    if(plZ == 1) {//屋外にいる
     if(n == 4) {
      if(iOK[4] == true) ctx.drawImage(img[4], x*64, y*64);//屋根
     }
    }
    else {//屋内にいる
     if(n != 2 && n != 4) {//屋外を黒で塗り潰す
      ctx.fillStyle = "black";
      ctx.fillRect(x*64, y*64, 64, 64);
     }
    }
   }
   if(tmr == 5) idx = 0;
   break;

   }
  }

  setInterval(mainProc, 200);
  </script>
 </body>
</html>
←動作確認に戻る