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

  //マウスとタップの判定
  var tapX = 0, tapY = 0, tapC = 0;
  cvs.addEventListener( "touchstart", touchStart );
  cvs.addEventListener( "touchmove", touchMove );
  cvs.addEventListener( "touchend", touchEnd );
  function touchStart(ev) {
   ev.preventDefault();
   var rect = ev.target.getBoundingClientRect();
   tapX = ev.touches[0].clientX-rect.left;
   tapY = ev.touches[0].clientY-rect.top;
   tapC = 1;
  }
  function touchMove(ev) {
   ev.preventDefault();
   var rect = ev.target.getBoundingClientRect();
   tapX = ev.touches[0].clientX-rect.left;
   tapY = ev.touches[0].clientY-rect.top;
  }
  function touchEnd(ev) { tapC = 0; }

  cvs.addEventListener( "mousedown", mouseDown );
  cvs.addEventListener( "mousemove", mouseMove );
  cvs.addEventListener( "mouseup", mouseUp );
  function mouseDown(ev) {
   var rect = ev.target.getBoundingClientRect();
   tapX = ev.clientX-rect.left;
   tapY = ev.clientY-rect.top;
   tapC = 1;
  }
  function mouseMove(ev) {
   var rect = ev.target.getBoundingClientRect();
   tapX = ev.clientX-rect.left;
   tapY = ev.clientY-rect.top;
  }
  function mouseUp(event) { tapC = 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, "yuusya.png" );
  loadImg( 1, "ghost.png" );

  //乱数を返す関数
  function rnd( max ) { return parseInt(Math.random()*max); }

  //２点間の距離を返す関数（距離の２乗の値としている）
  function getDis( x1, y1, x2, y2 ) { return ( (x1-x2)*(x1-x2)+(y1-y2)*(y1-y2) ); }

  var cX = [], cY = []; //キャラクターの座標
  var xp = [], yp = []; //移動量
  for( var i = 0; i < 9; i ++ ) {
    cX[i] = rnd(800);
    cY[i] = rnd(600);
    xp[i] = 0;
    yp[i] = 0;
  }

  //メイン処理
  window.onload = mainProc();
  function mainProc() {
   ctx.fillStyle = "rgba(0,0,0,0.2)";//背景塗りつぶし、残像を残す
   ctx.fillRect( 0, 0, 800, 600 );

   ctx.fillStyle = "white";//確認用にタップ位置を表示
   ctx.fillText( tapC, tapX, tapY );

   for( var i = 0; i < 9; i ++ ) {

    if( i == 0 ) {//主人公の処理
     if( tapC == 1 && getDis( tapX, tapY, cX[0], cY[0] ) < 80*80 ) {//タップでつかむ
      cX[0] = tapX;
      cY[0] = tapY;
     }
     if( iOK[0] == true ) ctx.drawImage( img[0], cX[i]-40, cY[i]-40 );
    }

    if( i >= 1 ) {//敵の処理
     if( tapC == 1 && getDis( tapX, tapY, cX[i], cY[i] ) < 60*60 ) {//タップで追い払う
      xp[i] = (cX[i]-tapX)/3;
      yp[i] = (cY[i]-tapY)/3;
     }
     //主人公に向かってくる動き（移動量の計算）
     if( cX[0] < cX[i] && xp[i] > -6 ) xp[i] -= 0.4;
     if( cX[0] > cX[i] && xp[i] <  6 ) xp[i] += 0.4;
     if( cY[0] < cY[i] && yp[i] > -6 ) yp[i] -= 0.4;
     if( cY[0] > cY[i] && yp[i] <  6 ) yp[i] += 0.4;
     cX[i] += xp[i];
     cY[i] += yp[i];
     if( iOK[1] == true ) ctx.drawImage( img[1], cX[i]-40, cY[i]-40 );
    }
   }
   setTimeout( mainProc, 20 );
  }