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

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

  //マップを配列で定義する　0は草地(床)、1は岩(壁)
  var MAP = [
   [1,1,1,1,1,1,1,1,1,1],
   [1,0,0,0,0,0,0,0,0,1],
   [1,0,0,0,0,0,0,1,0,1],
   [1,0,0,0,0,0,0,0,0,1],
   [1,0,1,0,1,1,0,0,0,1],
   [1,0,1,0,1,1,0,0,0,1],
   [1,0,0,0,0,0,0,0,0,1],
   [1,0,0,0,0,0,0,1,0,1],
   [1,0,0,0,0,0,0,0,0,1],
   [1,1,1,1,1,1,1,1,1,1]
  ];

  var plCX = 64, plCY = 64;//プレイヤーキャラの座標

  //画像の読み込み
  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, "iwa.png" );
  loadImg( 2, "yuusya.png" );

  //整数を返す関数
  function toInt( val ) { return parseInt(val); }

  //メイン処理
  var tmr = 0;
  window.onload = mainProc();
  function mainProc() {
   var n, x, y;

   tmr ++;

   //プレイヤーキャラの移動
   x = plCX;//現在の位置
   y = plCY;
   if( key == 38 ) y -= 16;//カーソルキー↑
   if( key == 40 ) y += 16;//カーソルキー↓
   if( key == 37 ) x -= 16;//カーソルキー←
   if( key == 39 ) x += 16;//カーソルキー→
   //移動しようとしているところが草地(床)だったら
   if( MAP[toInt(y/64)][toInt(x/64)] == 0
    && MAP[toInt(y/64)][toInt((x+63)/64)] == 0
    && MAP[toInt((y+63)/64)][toInt(x/64)] == 0
    && MAP[toInt((y+63)/64)][toInt((x+63)/64)] == 0 ) {
    plCX = x;
    plCY = y;
   }

   //背景を描画する
   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[2] == true ) ctx.drawImage( img[2], plCX, plCY-tmr%2 );

   setTimeout( mainProc, 100 );
  }