Day01 - 复习 canvas 做个同化别人的小方块

今天去打疫苗，想说做个感染人的坏东西，可惜没时间好好美化他，主要做出以下功能
设定两个角色(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()

揪竟会不会把对驾驭色彩的慾望延续到明天，明天做些颜色渐变相关的东西呢

以上是我的学习笔记，如果内容有不正确的部分再麻烦大家跟我说了，感谢感谢 ε= ᕕ( ᐛ )ᕗ