//描画面（キャンバス）の準備
  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; }

  var plCX = 64, plCY = 560;//プレイヤーキャラの中心座標
  var jYP = 0;//ジャンプ用の変数　Ｙ座標の変化量

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

   //プレイヤーキャラの移動
   if( key == 37 ) { plCX -= 16; if( plCX < -48 ) plCX = 688; }//カーソルキー←
   if( key == 39 ) { plCX += 16; if( plCX > 688 ) plCX = -48; }//カーソルキー→

   //ジャンプするか？
   if( key == 32 ) {
    if( plCY == 560 ) jYP = -88;
   }

   //Ｙ座標の変化
   jYP += 8;
   plCY += jYP;
   if( plCY > 560 ) { plCY = 560; jYP = 0; }

   //背景を描画する
   ctx.fillStyle = "rgba(0,0,0,0.3)";
   ctx.fillRect( 0, 0, 640, 624 );
   ctx.fillStyle = "gray";
   ctx.fillRect( 0, 624, 640, 16 );

   //プレイヤーキャラを想定した枠を表示する
   ctx.lineWidth = 6;
   ctx.strokeStyle = "gold";
   ctx.strokeRect( plCX-64, plCY-64, 128, 128 );

   //変数の値
   ctx.fillStyle = "white";
   ctx.font = "32px monospace";
   ctx.fillText( "("+plCX+","+plCY+")", 40, 60 );
   ctx.fillText( "Ｙ座標の変化量 "+jYP, 40, 120 );

   setTimeout( mainProc, 50 );
  }