←動作の確認に戻る
【補足】ソースコードは JavaScript だけ抜き出したものです。
キャンバス要素は<canvas id="bg" width="640" height="640"></canvas>と記述します。
  //描画面(キャンバス)の準備
  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;//ジャンプ用の変数 Y座標の変化量
  var jFL = 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, "usa0.png" );
  loadImg( 1, "usa1.png" );

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

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

   //ジャンプするか?
   if( key == 32 ) {
    if( jFL == 0 ) {
     jYP = -56;
     jFL = 1;
    }
   }

   //Y座標の変化
   if( jFL == 1 ) {
     plCY += jYP;
     if( key == 32 )
      jYP += 4;
     else
      jYP += 24;
     if( plCY > 560 ) { plCY = 560; jYP = 0; jFL = 0; }
   }

   //背景を描画する
   ctx.fillStyle = "navy";
   ctx.fillRect( 0, 0, 640, 640 );
   ctx.fillStyle = "black";
   ctx.fillRect( 0, 600, 640, 40 );

   //プレイヤーキャラを表示する
   var n = parseInt(tmr/2)%2;
   if( iOK[n] == true ) ctx.drawImage( img[n], plCX-64, plCY-64 );

   //変数の値
   ctx.fillStyle = "white";
   ctx.font = "32px monospace";
   ctx.fillText( "("+plCX+","+plCY+")", 40, 60 );
   ctx.fillText( "Y座標の変化量 "+jYP, 40, 120 );
   ctx.fillText( "ジャンプ用のフラグ "+jFL, 40, 180 );

   setTimeout( mainProc, 50 );
  }
(C)WorldWideSoftware