用ES6的类实现面向对象编程

用ES6的类实现面向对象编程

用ES6的类实现面向对象编程：制作一个简单的小游戏

在这篇文章中，我将分享如何使用ES6的类来实现面向对象的编程，并通过开发一个简单的游戏来实践这些概念。我将逐步讲解游戏中的各个模块以及我如何通过类来组织和管理这些模块。

1. 面向对象编程与ES6类的引入

面向对象编程（OOP）是一种将数据和操作这些数据的代码封装在一起的编程范式。ES6引入了类（Class）的概念，使得JavaScript的面向对象编程更加简洁和直观。在这部分，我们将回顾ES6类的基本概念，并了解它们如何在游戏开发中帮助我们更好地组织代码。

2. 游戏设计概述

这款游戏的核心是一只小鸟，在一个充满障碍的世界中飞行。玩家需要控制小鸟跳跃，并尽可能避免碰撞。游戏中包含多个模块，分别控制不同的游戏元素。我设计了以下几个主要类来分别控制这些模块：

• 天空类（Sky）：控制背景天空的移动。
• 大地类（Land）：控制背景大地的移动。
• 小鸟类（Bird）：控制小鸟的跳跃和自由落体。
• 管道类（PipePairGroup）：控制管道的生成和销毁，并使它们与大地的速度同步。
• 积分榜类（Rank）：显示玩家的游戏积分。
• 游戏类（Game）：整合所有的模块，控制游戏的逻辑流程，包括碰撞检测、游戏循环、开始和结束。

3. 如何使用类来管理游戏逻辑

接下来，我将详细讲解每个类的设计与实现，并阐明如何利用面向对象的思想来管理游戏的各个方面。

矩形类（Rectangle）

矩形类是一个抽象类，用来提取其它类中的公共代码，具体：x坐标、y坐标、元素宽度、元素高度、横向速度、纵向速度、dom元素、move方法实现等。

/**
 * 矩形抽象类
 * @class Rectangle
 * @constructor
 * @param {Number} top 矩形左上角x坐标, 单位：像素
 * @param {Number} left 矩形左上角y坐标, 单位：像素
 * @param {Number} width 矩形宽度, 单位：像素
 * @param {Number} height 矩形高度, 单位：像素
 * @param {Number} xSpeed 矩形x方向速度, 单位：像素/秒
 * @param {Number} ySpeed 矩形y方向速度, 单位：像素/秒
 * @param {Element} dom 矩形对应的DOM元素
 */
class Rectangle {
   
   
    constructor(top, left, width, height, xSpeed, ySpeed, dom) {
   
   
        this.top = top;
        this.left = left;
        this.width = width;
        this.height = height;
        this.xSpeed = xSpeed;
        this.ySpeed = ySpeed;
        this.dom = dom;
    }

    // 矩形移动
    move(duration){
   
   
        this.top += this.ySpeed * duration;
        this.left += this.xSpeed * duration;
        this.top = parseInt(this.top);
        this.left = parseInt(this.left);

        // 矩形移动完成后触发事件
        if(this.onmove) {
   
   
            this.onmove();
        }

        this.render();
    }

    // 渲染矩形
    render(){
   
   
        this.dom.style.top = this.top + 'px';
        this.dom.style.left = this.left + 'px';
        this.dom.style.width = this.width + 'px';
        this.dom.style.height = this.height + 'px';
    }
}

天空类（Sky）

天空类负责背景的移动。通过定义一个move()方法，可以让天空不断向左移动，模拟小鸟飞行的感觉。这个类非常简单，但它为游戏提供了重要的视觉效果。

class Sky extends Rectangle {
   
   
    constructor(xSpeed) {
   
   
        super(0, 0, skyWidth, skyHeight, xSpeed, 0, sky);
    }

    onmove(){
   
   
        if(this.left <= -gameWidth){
   
   
            this.left = -267 + this.left + gameWidth;
        }
    }

    reset(){
   
   
        this.left = 0;
        this.render();
    }
}

大地类（Land）

大地类与天空类类似，用于控制地面背景的滚动。地面与天空的移动速度保持一致，确保游戏的视觉效果流畅。

class Land extends Rectangle {
   
   
    constructor(xSpeed) {
   
   
        super(skyHeight, 0, landWidth, landHeight, xSpeed, landYSpeed, land);
    }

    onmove(){
   
   
        if(this.left <= -gameWidth){
   
   
            this.left = this.left + gameWidth;
        }
    }

    reset(){
   
   
        this.left = 0;
        this.render();
    }
}

小鸟类（Bird）

小鸟类是游戏的核心，它控制小鸟的跳跃和自由落体。为了让跳跃更加平滑，我根据小鸟的下落速度动态调整上升速度。

class Bird extends Rectangle {
   
   
    constructor(ySpeed) {
   
   
        super(100, 200, birdWidth, birdHeight, birdXSpeed, ySpeed, bird);
        this.acceleration = acceleration;
        this.timer = null;
        this.swingIdx = 0;
        this.dom.className = 'bird swing'