//描画面（キャンバス）の準備
  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 plX = 1, plY = 1;//プレイヤーキャラの位置

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

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

   //背景を描画する
   for( y = 0; y < 10; y ++ ) {
    for( x = 0; x < 10; x ++ ) {
     if( MAP[y][x] == 0 ) ctx.fillStyle = "lime";
     if( MAP[y][x] == 1 ) ctx.fillStyle = "gray";
     ctx.fillRect( x*64, y*64, 64, 64 );
    }
   }

   //プレイヤーキャラを表示する
   ctx.fillStyle = "red";
   ctx.fillRect( plX*64, plY*64, 64, 64 );

   setTimeout( mainProc, 200 );
  }