今天去打疫苗，想說做個感染人的壞東西，可惜沒時間好好美化他，主要做出以下功能
設定兩個角色(Friend 與 Leader)與一個舞台（Game），做角色跟舞台前我先建了 Vector 用來放座標軸 x ,y
Vector(雖然今天的內容其實不用建 Vector，因為今天的他會被用到的部分是如此的單薄)

var Vector = function (x, y) {
    this.x = x;
    this.y = y;
};

角色

1. Friend：被 Leader 物件碰到的時候會變跟 Leader 同顏色

var Friend = function (ctx, color){
    // 舞台決定要長在哪個 canvas 上，想讓角色上台就知道自己是在哪個 canvas 上，方便角色 render
    this.ctx = ctx;
    this.pos = new Vector(200,200);
    this.width = 100;
    this.color = color;
};

Friend.prototype.render = function(){
    this.ctx.beginPath();
    this.ctx.fillStyle = this.color;
    this.ctx.fillRect(this.pos.x, this.pos.y, this.width, this.width);
};

// 確認 Leader 的位子是不是碰到 Friend 了
Friend.prototype.checkInfect = function(v,color){
    // 判斷 Leader 與  Friend 的距離是不是小於 Leader 的長寬
    if (Math.abs(this.pos.x - v.x) <= this.width && Math.abs(this.pos.y - v.y) <= this.width){
        this.color = color;
    };
};

2. Leader：跟著使用者滑鼠移動而移動

var Leader = function (ctx, color){
    this.ctx = ctx;
    this.pos = new Vector(500,200);
    this.width = 100;
    this.color = color;
};

Leader.prototype.render = function(){
    this.ctx.beginPath();
    this.ctx.fillStyle = this.color;
    this.ctx.fillRect(this.pos.x, this.pos.y, this.width, this.width);
};

舞台
3. Game：在舞台設定畫面 render 的頻率，與資料 update 的頻率

var Game = function () {
    this.infectCanvas = document.getElementById('infectCanvas')
    this.ctx = infectCanvas.getContext('2d');
    // 舞台決定要長在哪個 canvas 上，想讓角色上台就知道自己是在哪個 canvas 上，方便角色 render
    this.friend = new Friend(this.ctx,'#13aebf');
    this.leader = new Leader(this.ctx,'#86999c');
    this.t = 0;
    // 記得要初始化啊小子
    this.init();
    
};
Game.prototype.init = function(){
    this.infectCanvas.width = window.innerWidth;
    this.infectCanvas.height = window.innerHeight;
    this.render();
    this.update();
};

// 將最新的資訊呈現在畫面上
Game.prototype.render = function () {
    // 鋪好舞台背景色
    this.ctx.beginPath();
    this.ctx.fillStyle = '#ebc5c5';
    this.ctx.fillRect(0, 0, this.infectCanvas.width, this.infectCanvas.height);
    // 角色上台
    this.friend.render();
    this.leader.render();
    // 疊上(新的)畫面
    requestAnimationFrame(()=>this.render())
};
// 單純資料更新
Game.prototype.update = function() {
    // 更新角色狀態
    // Leader 隨時間變色
    this.t++;
    this.leader.color = `rgb(${this.t%255}, ${this.t*3%255}, ${this.t*7%255})`;
    // Friend 在判斷是否被碰到後變色
    this.friend.checkInfect(this.leader.pos, this.leader.color);
    // 更新資料
    setTimeout(()=>this.update(),100);
};

今天學起

1. 使用 requestAnimationFrame、setTimeout 等等的函數時，裡頭的 callback function 要使用箭頭函式才能吃到原物件的 this 啊啊啊啊

requestAnimationFrame(()=>this.render())

2. 設計完物件還要記得設定變數實現該物件啊啊啊啊啊

var game = new Game()

揪竟會不會把對駕馭色彩的慾望延續到明天，明天做些顏色漸變相關的東西呢

以上是我的學習筆記，如果內容有不正確的部分再麻煩大家跟我說了，感謝感謝 ε= ᕕ( ᐛ )ᕗ