今日のイッヌ２

//canvasの設定（せってい）
let canvas = document.getElementById('canvas');
canvas.width = 640;	//canvasの横幅（よこはば）
canvas.height = 640;	//canvasの縦幅（たてはば）

//コンテキストを取得（しゅとく）
let ctx = canvas.getContext('2d');

//画像（がぞう）のオブジェクトを作成
/*
let img = new Image();
img.src = 'img/figure.png';
*/

/**********************************/
//オブジェクト化して管理しやすくする
let kyara = new Object();
kyara.img = new Image();
kyara.img.src = 'img/innu.png';
kyara.x = 0;
kyara.y = 0;
kyara.move = 0;	
/**********************************/

let key =new Object();
key.up = false;
key.down = false;
key.right = false;
key.left = false;
key.push =  "";

//メインループ
function main() {
	//画像を表示
  ctx.clearRect(0,0,640,640);
  ctx.drawImage( kyara.img, kyara.x, kyara.y );

  addEventListener("keydown", keydownfunc, false);
  addEventListener("keyup", keyupfunc, false);
	//オブジェクト化することで動かせるようになる。
	//ctx.drawImage( img, 0, 0 );
	/**********************************/
  
  if( kyara.move === 0 ) {
    if ( key.left === true){
        kyara.move = 32;
        key.push = 'left';
       }           
       if ( key.up === true){
        kyara.move = 32;
        key.push = 'up';
      }           
      if ( key.right === true){
       kyara.move = 32;
       key.push = 'right';
      }           
      if ( key.down === true){
       kyara.move = 32;
       key.push = 'down';
      } 
    } 

    if(kyara.move > 0) {
        kyara.move -= 4;
        if ( key.push === 'left' ) kyara.x -= 4;
        if ( key.push === 'up' ) kyara.y -= 4;
        if ( key.push === 'right' ) kyara.x += 4;
        if ( key.push === 'down' ) kyara.y += 4;
      }

 	/**********************************/

	requestAnimationFrame( main );
}
//ページと依存（いぞん）している全てのデータが読み込まれたら、メインループ開始
addEventListener('load', main(), false);

/**********************************/
//キーボードが押されたときに呼び出される関数（かんすう）
function keydownfunc( event ) {
	let key_code = event.keyCode;
  if( key_code === 37 ) key.left = true;
	if( key_code === 38 ) key.up = true;
	if( key_code === 39 ) key.right = true;
	if( key_code === 40 ) key.down = true;
	//if( key_code === 37 ) console.log("左　押した");
	//if( key_code === 38 ) console.log("上　押した");
	//if( key_code === 39 ) console.log("右　押した");
	//if( key_code === 40 ) console.log("下　押した");
	event.preventDefault();
}


//キーボードが放（はな）されたときに呼び出される関数
function keyupfunc( event ) {
	let key_code = event.keyCode;
  if( key_code === 37 ) key.left = false;
	if( key_code === 38 ) key.up = false;
	if( key_code === 39 ) key.right = false;
	if( key_code === 40 ) key.down = false;
}
/**********************************/