// - 変数 -　//
var Canvas;
var info;
var ctx;
var Run = true;
var mouse = new Point();

// - クラス -　//
// Character
function Character(){
    this.position = new Point();
    this.size = 0;
}

Character.prototype.init = function(size){
    this.size = size;
};

// Point
function Point(){
    this.x = 0;
    this.y = 0;
}

// - メイン -　//
window.onload = function(){

    // スクリーンの初期化
    Canvas = document.getElementById('screen');
    Canvas.width = 256;
    Canvas.height = 256;

    // 2dコンテキスト
    ctx = Canvas.getContext('2d');

    // イベントの登録
    Canvas.addEventListener('mousemove', mouseMove);
    window.addEventListener('keydown', keyDown);

    // その他のエレメント関連
    info = document.getElementById('info');

    // 自機初期化
    var chara = new Character();
    chara.init(10);

 // 画面を繰り返し呼び出す
    (function(){
        // HTMLを更新
        info.innerHTML = mouse.x + ' : ' + mouse.y;

        // screenクリア
        ctx.clearRect(0, 0, Canvas.width, Canvas.height);

        // パスの設定を開始
        ctx.beginPath();

        // 自機の位置を設定
        chara.position.x = mouse.x;
        chara.position.y = mouse.y;

        // 自機を描くパスを設定
        ctx.rect(chara.position.x, chara.position.y,30,30);

        // 自機の色を設定する
        ctx.fillStyle = "black";

        // 自機を描く
        ctx.fill();

        // フラグにより再帰呼び出し
        if(Run){setTimeout(arguments.callee, 1000/30);}
    })();
};


// 関数
function mouseMove(event){
    // マウスカーソル座標の更新
    mouse.x = event.clientX;
    mouse.y = event.clientY;
}

function keyDown(event){
    // キーコード取得
    var ck = event.key;

    // spaceKeyで画面が止まる
    if(ck === " "){Run = false;}
}

//keyCode一覧URL： https://developer.mozilla.org/ja/docs/Web/API/UI_Events/Keyboard_event_key_values//