js 学习四 对象应用 吃货游戏

游戏来源于 Mdn学习网站；

该例子用于对象的理解非常有效（建议看完上面网站的内容在开始练习）

弹球
body {
        margin: 0;
        overflow: hidden;
        font-family: "PingFangSC-Regular", "微软雅黑", sans-serif;
        height: 100%;
}
h1 {
        font-size: 2rem;
        letter-spacing: \-1px;
        position: absolute;
        margin: 0;
        top: \-4px;
        right: 5px;
        color: transparent;
        text-shadow: 0  0  4px  white;
}
p {
        position: absolute;
        margin: 0;
        top: 35px;
        right: 5px;
        color: #aaa;
}
弹球
//弹球的个数
const  BALLS\_COUNT  \=  25;
//弹球的半径范围
const  BALL\_SIZE\_MIN  \=  10;
const  BALL\_SIZE\_MAX  \=  20;
// 弹球的速度
const  BALL\_SPEED\_MAX  \=  7;
// 设定画布
var  canvas  \=  document.querySelector("canvas");
var  pcount  \=  document.querySelector("p");
var  ctx  \=  canvas.getContext("2d");
//获取屏幕的宽高 并设置为画布的宽高
var  width  \=  (canvas.width  \=  window.innerWidth);
var  height  \=  (canvas.height  \=  window.innerHeight);
// 生成随机数的函数
function  random(min,  max)  {
        return  Math.floor(Math.random()  \*  (max  \-  min))  +  min;
}
// 生成随机颜色的函数
function  randomColor()  {
    return  (
    "rgb("  + random(0,  255)  + ", "  + random(0,  255)  + ", "  +random(0,  255)  + ")");
}
//定义形状
function  Shape(x,  y,  velX,  velY,  exists)  {
        this.x  \=  x;
        this.y  \=  y;
        this.velX  \=  velX;
        this.velY  \=  velY;
        this.exists  \=  exists;
}
// 创建弹球对象
function  Ball(x,  y,  velX,  velY,  color,  size,  exists)  {
        Shape.call(this,  x,  y,  velX,  velY,  exists);
        this.color  \=  color;
        this.size  \=  size;
}
Ball.prototype  \=  Object.create(Shape.prototype);
Ball.prototype.constructor  \=  Ball;
// 定义绘制球的函数
Ball.prototype.draw  \=  function()  {
        ctx.beginPath();
        ctx.fillStyle  \=  this.color;
        ctx.arc(this.x,  this.y,  this.size,  0,  2  \*  Math.PI);
        ctx.fill();
};
//更新跳球的位置
Ball.prototype.update  \=  function()  {
            //到达右边，反弹
            if  (this.x  +  this.size  \>=  width)  {
            this.velX  \=  \-this.velX;
            }
            //到达左边，反弹
            if  (this.x  \-  this.size  <=  0)  {
            this.velX  \=  \-this.velX;
            }
            //到达底部，反弹
            if  (this.y  +  this.size  \>=  height)  {
            this.velY  \=  \-this.velY;
            }
            //到达顶部 反弹
            if  (this.y  \-  this.size  <=  0)  {
            this.velY  \=  \-this.velY;
            }
            this.x  +=  this.velX;
            this.y  +=  this.velY;
            };
            //弹球的碰撞处理
            Ball.prototype.collisionDetect  \=  function()  {
            for  (var  j  \=  0;  j  <  balls.length;  j++)  {
            //是不是弹球本身
            if  (balls\[j\]  \===  this)  continue;
            var  dx  \=  this.x  \-  balls\[j\].x;
            var  dy  \=  this.y  \-  balls\[j\].y;
            var  distance  \=  Math.sqrt(dx  \*  dx  +  dy  \*  dy);
            //碰撞改变两个球的颜色
            if  (distance  <  this.size  +  balls\[j\].size)  {
            this.color  \=  balls\[j\].color  \=  randomColor();
            }
            }
};
//定义一个小吃货
function  EvilCircle(x,  y,  exists)  {
Shape.call(this,  x,  y,  20,  20,  exists);
this.color  \=  "white";
this.size  \=  10;
}
EvilCircle.prototype  \=  Object.create(Shape.prototype);
EvilCircle.prototype.constructor  \=  EvilCircle;
// 定义绘制小吃货的函数
EvilCircle.prototype.draw  \=  function()  {
        ctx.beginPath();
        ctx.strokeStyle  \=  this.color;
        ctx.arc(this.x,  this.y,  this.size,  0,  2  \*  Math.PI);
        ctx.stroke();
};
// 检查小吃货是否碰壁
EvilCircle.prototype.checkBounds  \=  function()  {
            if  (this.x  +  this.size  \>=  width)  {
            this.velX  \=  \-this.velX;
            }
            if  (this.x  \-  this.size  <=  0)  {
            this.x  \=  this.size;
            }
            if  (this.y  +  this.size  \>=  height)  {
            this.y  \=  height  \-  this.size;
            }
            if  (this.y  \-  this.size  <=  0)  {
            this.y  \=  this.size;
            }
};
// 定义小吃货移动函数
EvilCircle.prototype.setControls  \=  function()  {
            window.onkeydown  \=  e  \=>  {
            if  (e.key  \===  "a")  {
            this.x  \-=  this.velX;
            }  else  if  (e.key  \===  "d")  {
            this.x  +=  this.velX;
            }  else  if  (e.key  \===  "w")  {
            this.y  \-=  this.velY;
            }  else  if  (e.key  \===  "s")  {
            this.y  +=  this.velY;
            }
            //上下左右移动
            if  (e.key  \===  "ArrowLeft")  {
            this.x  \-=  this.velX;
            }  else  if  (e.key  \===  "ArrowRight")  {
            this.x  +=  this.velX;
            }  else  if  (e.key  \===  "ArrowUp")  {
            this.y  \-=  this.velY;
            }  else  if  (e.key  \===  "ArrowDown")  {
            this.y  +=  this.velY;
            }
};
};
//小吃货碰撞到了弹球
EvilCircle.prototype.collisionDetect  \=  function()  {
            for  (var  j  \=  0;  j  <  balls.length;  j++)  {
            //弹球没被吃
            if  (balls\[j\].exists)  {
            var  dx  \=  this.x  \-  balls\[j\].x;
            var  dy  \=  this.y  \-  balls\[j\].y;
            var  distance  \=  Math.sqrt(dx  \*  dx  +  dy  \*  dy);
            if  (distance  <  this.size  +  balls\[j\].size)  {
            //标记弹球被吃
            balls\[j\].exists  \=  false;
            }
            }
            }
};
//激活小吃货
EvilCircle.prototype.run  \=  function()  {
            this.draw();
            this.checkBounds();
            this.collisionDetect();
};
//创建吃货
var  evilCircle  \=  new  EvilCircle(20,  20,  true);
evilCircle.setControls();
// 定义一个数组来保存所有的球
var  balls  \=  \[\];
pcount.textContent  \=  "还剩"  +  BALLS\_COUNT  +  "个球";
for  (let  i  \=  0;  i  <  BALLS\_COUNT;  i++)  {
            var  size  \=  random(BALL\_SIZE\_MIN,  BALL\_SIZE\_MAX);
            var  ball  \=  new  Ball(
            // 为避免绘制错误，球至少离画布边缘球本身一倍宽度的距离
            random(0  +  size,  width  \-  size),
            random(0  +  size,  height  \-  size),
            random(\-BALL\_SPEED\_MAX,  BALL\_SPEED\_MAX),
            random(\-BALL\_SPEED\_MAX,  BALL\_SPEED\_MAX),
            randomColor(),
            size,
            true
            );
            balls.push(ball);
}
// 定义一个循环来不停地播放
function  loop()  {
                background("rgb(0, 0, 0)");
                for  (var  i  \=  0;  i  <  balls.length;  i++)  {
                if  (!balls\[i\].exists)  {
                continue;
                }
                balls\[i\].draw();
                balls\[i\].update();
                balls\[i\].collisionDetect();
                }
                evilCircle.run();
                var  newballs  \=  balls.filter(balls  \=>  balls.exists);
                pcount.textContent  \=  "还剩"  +  newballs.length  +  "个球";
                requestAnimationFrame(loop);
}
function  background(color)  {
            ctx.fillStyle  \=  color;
            ctx.fillRect(0,  0,  width,  height);
            ctx.beginPath();
}
loop();