カービィを動かす!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

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

//コンテキストを習得　(しゅうとく)
let ctx = canvas.getContext('2d');
//let img = new Image();
//img.src = "img/ka-bili.png";

let kyara = new Object();
kyara.img = new Image();
kyara.img.src = 'img/ka-bili.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,2000,2000);

        //画像を表示
        //オブジェクト化をすることで動かせるようになる
        //ctx.drawImage( img, 0, 0 );
        ctx.drawImage( kyara.img, kyara.x, kyara.y );

        addEventListener("keydown", keydownfunc, false);
        addEventListener("keyup", keyupfunc, false); 

        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 -= 1;
                if ( key.push === 'up' ) kyara.y -= 1;
                if ( key.push === 'right' ) kyara.x += 1;
                if ( key.push === 'down' ) kyara.y += 1; 
       }   
       requestAnimationFrame( main ); 
      }                                  
//ページと依存している全てのデータが読み込まれた
addEventListener('load', main(), false);

//addEventListener('load',function() {
//  ctx.drawImage( img, 0, 0 );
//}, false);
/*
//x=0, y=0 の位置(いち)に縦横(たてよこ)30pxの正方形(せいほうけい)を描く
ctx.fillRect(0, 0, 30, 30);

ctx.strokeRect(0,0,80,80);

ctx.fillRect(100,0,80,80);
*/ 
//キーボードが押されたときに呼び出される関数(かんすう)
function keydownfunc( event ) {
  let key_code = event.keyCode;
  /*
    if( key_code === 37 ) console.log("左　押した");
    if( key_code === 38 ) console.log("上　押した");
    if( key_code === 39 ) console.log("右　押した");
    if( key_code === 40 ) console.log("下　押した");
    */
    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;
    event.preventDefault();
}
requestAnimationFrame( main );    

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;
    event.preventDefault();
}