在此次测验中, 你需要将上一节中的“弹球”演示程序作为模板，添加一些新的有趣的功能。

开始

项目简介

预备知识:	请确保完整学习本章所有内容后再开始测验。
目标:	测试你对 JavaScript 对象和面向对象结构的理解。

我们的弹球 demo 很有趣, 但是现在我们想让它更具有互动性，我们为它添加一个由玩家控制的“恶魔圈”，如果恶魔圈抓到弹球会把它会吃掉。我们还想测验你面向对象的水平，首先创建一个通用 Shape() 对象，然后由它派生出弹球和恶魔圈。最后，我们为 demo 添加一个计分器来记录剩下的球数。

Evil circle

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <title>弹球</title>
    <style>
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;
}    </style>
  </head>

  <body>
    <h1>弹球</h1>
    <p></p>
    <canvas></canvas>

    <script>
const BALLS_COUNT = 25;
const BALL_SIZE_MIN = 10;
const BALL_SIZE_MAX = 20;
const BALL_SPEED_MAX = 7;

class Shape {
    constructor(x, y, velX, velY, exists) {
        this.x = x;
        this.y = y;
        this.velX = velX;
        this.velY = velY;
        this.exists = exists;
    }
}

class Ball extends Shape {
    constructor(x, y, velX, velY, color, size, exists) {
        super(x, y, velX, velY, exists);

        this.color = color;
        this.size = size;
    }

    draw() {
        ctx.beginPath();
        ctx.fillStyle = this.color;
        ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
        ctx.fill();
    }

    update() {
        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;
    }

    collisionDetect() {
        for (let j = 0; j < balls.length; j++) {
            if ( ! (this === balls[j]) ) {
                const dx = this.x - balls[j].x;
                const dy = this.y - balls[j].y;
                const distance = Math.sqrt(dx * dx + dy * dy);

                if (distance < this.size + balls[j].size && balls[j].exists) {
                    balls[j].color = this.color = randomColor();
                }
            }
        }
    }
}

class EvilCircle extends Shape {
    constructor(x, y, exists) {
        super(x, y, exists);

        this.velX = BALL_SPEED_MAX;
        this.velY = BALL_SPEED_MAX;
        this.color = "white";
        this.size = 10;
        this.setControls();
    }

    draw() {
        ctx.beginPath();
        ctx.strokeStyle = this.color;
        ctx.lineWidth = 3;
        ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
        ctx.stroke();
    }

    checkBounds() {
        if ((this.x + this.size) >= width) {
            this.x -= this.size;
        }

        if ((this.x - this.size) <= 0) {
            this.x += this.size;
        }

        if ((this.y + this.size) >= height) {
            this.y -= this.size;
        }

        if ((this.y - this.size) <= 0) {
            this.y += this.size;
        }
    }

    setControls() {
        window.onkeydown = (e) => {
            switch(e.key) {
                case 'a':
                case 'A':
                case 'ArrowLeft':
                    this.x -= this.velX;
                    break;
                case 'd':
                case 'D':
                case 'ArrowRight':
                    this.x += this.velX;
                    break;
                case 'w':
                case 'W':
                case 'ArrowUp':
                    this.y -= this.velY;
                    break;
                case 's':
                case 'S':
                case 'ArrowDown':
                    this.y += this.velY;
                    break;
            }
        };
    }

    collisionDetect() {
        for (let j = 0; j < balls.length; j++) {
            if (balls[j].exists) {
                const dx = this.x - balls[j].x;
                const dy = this.y - balls[j].y;
                const distance = Math.sqrt(dx * dx + dy * dy);

                if (distance < this.size + balls[j].size) {
                    balls[j].exists = false;
                    count--;
                    para.textContent = '还剩 ' + count + ' 个球';
                }
            }
        }
    }
}

const para = document.querySelector('p');
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

const width = canvas.width = window.innerWidth;
const height = canvas.height = window.innerHeight;

const balls = [];
let count = 0;

const evilBall = new EvilCircle(
    random(0, width),
    random(0, height),
    true
);

loop();

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 loop() {
    ctx.fillStyle = 'rgba(0, 0, 0, 0.25)';
    ctx.fillRect(0, 0, width, height);

    while (balls.length < BALLS_COUNT) {
        const size = random(BALL_SIZE_MIN, BALL_SIZE_MAX);
        const 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);
        count++;
        para.textContent = '还剩 ' + count + ' 个球';
    }

    for (let i = 0; i < balls.length; i++) {
        if (balls[i].exists) {
            balls[i].draw();
            balls[i].update();
            balls[i].collisionDetect();
        }
    }

    evilBall.draw();
    evilBall.checkBounds();
    evilBall.collisionDetect();

    requestAnimationFrame(loop);
}
    </script>
  </body>
</html>

{{ EmbedLiveSample('Evil_circle', '100%', 480, "", "", "hide-codepen-jsfiddle") }}

可以查看完成版本来获得更全面的体验。（别偷看源代码哦。）

步骤

创建我们的新对象

首先，改变你现有的构造器 Ball() 使其成为构造器 Shape() 并添加一个新的构造器 Ball() ：

你还需要为 new Ball() { ... } 构造器添加第五个参数—— exists，且值为 true。

到这里，尝试重新加载代码（运行程序），程序以及重新设计的对象都应该像之前那样工作。

定义恶魔圈 EvilCircle()

现在是时候来看看那个坏蛋了——恶魔圈 EvilCircle()! 我们的游戏中只会有一个恶魔圈，但我们仍然要使用继承自 Shape() 的构造器来定义它，这是为让你得到锻炼。之后你可能会想再添加一个由另一个玩家控制的恶魔圈到程序中，或者有几个电脑控制的恶魔圈。你可没法通过一个恶魔圈来掌管程序中的这个世界，但这个评估中就先只这么做吧。

EvilCircle() 构造器应该从Shape() 继承 x, y, 和 exists ，velX 和 velY 要恒为 20。

再次记得给你的 EvilCircle() 构造器的传递的参数中定义你继承的属性，并且给prototype 和 constructor 属性设置适当的值。

定义 EvilCircle() 的方法

draw()

这个方法和 Ball()'s draw() 方法有着相同的目的：它们把都是对象的实例画在画布上（canvas）。它们实现的方式差不多，所以你可以先复制 Ball.prototype.draw 的定义。然后你需要做下面的修改：

checkBounds()

这个方法和 Ball() 的 update() 函数做相同的事情—— 查看恶魔圈是否将要超出屏幕的边界，并且禁止它超出。同样，你可以直接复制 Ball.prototype.update 的定义, 但是你需要做一些修改：

setControls()

这个方法将会一个 onkeydown 的事件监听器给 window 对象，这样当特定的键盘按键按下的时候，我们就可以移动恶魔圈。下面的代码块应该放在方法的定义里：

所以当一个按键按下时，事件对象的 key 属性就可以请求到按下的按键值。如果是代码中那四个指定的键值之一，那么恶魔圈将会左右上下的移动。

collisionDetect()

这个方法和 Ball()'s collisionDetect() 方法很相似，所以你可以从它那里复制过来作为新方法的基础。但有一些不同之处：

把恶魔圈带到程序中

现在我们已经定义了恶魔圈，我们需要让它显示到我们的屏幕中。为了做这件事，你需要修改一下 loop() 函数：

计算得分

提示

评定

如果你将此评估作为有组织的课程的一部分，你可以将你的成果交给您的老师/导师进行评分。如果你是自学的，通过在 Learning Area Discourse thread，或者在 Mozilla IRC 的 #mdn IRC 频道上申请，你可以十分容易地得到评分指南。首先先尝试这个练习，作弊不会有任何收获。

{{PreviousMenuNext("Learn/JavaScript/Objects/Object_building_practice", "", "Learn/JavaScript/Objects")}}

开始

项目简介

Evil circle

步骤

创建我们的新对象

定义恶魔圈 EvilCircle()

定义 EvilCircle() 的方法

`draw()`

`checkBounds()`

`setControls()`

`collisionDetect()`

把恶魔圈带到程序中

计算得分

提示

评定

本章目录