HTML5 Javascript游戏

Question

在下面的代码中，我试图在Canvas和HTML 5上为Blackberry复制某种类型的破坏者游戏。我创建了一些类，以便以有条理的方式分离我的代码，以便每个人都清楚。

初始矢量类：

class Vector {
constructor(x, y){
    this.x = x;
    this.y = y;
}
getLength(){
    return Math.sqrt(this.x*this.x + this.y*this.y);
}

球类：

class Ball extends Rect{
constructor(x, y, w, h){
    super(x, y);
    this.vel = new Vector(0, 0);
    this.w = w;
    this.h = h;
}

update(){
    this.x += this.vel.x;
    this.y += this.vel.y;
}

矩形类：

class Rect extends Vector{
contructor(x, y, w, h){
    this.pos = new Vector(x,y);
    this.w = w;
    this.h = h;
}

getLeft(){
    return this.x;
}

getRight(){
    return this.x + this.w;
}

getTop(){
    return this.y;
}

getBottom(){
    return this.y + this.h;
}

static collition(player, ball){
    return (player.getLeft()  < ball.getRight() && player.getRight() > ball.getLeft() 
            && player.getTop() < ball.getBottom() && player.getBottom() > ball.getTop());
}

static collitionX(player, ball){
    return player.getLeft() < ball.getRight() && player.getRight() > ball.getLeft() 
}
static collitionY(player, ball){
    return player.getTop() < ball.getBottom() && player.getBottom() > ball.getTop(); 
}

正如您所看到的，首先在主JS文件中创建类的实例并使用fillRect（）方法在画布上绘制它们并添加弹跳，以便使用以下代码将其包裹在画布中：

if(ball.getRight() > canvas.width || ball.getLeft() < 0){
    ball.vel.x = -ball.vel.x;
}

if(ball.getTop() < 0 || ball.getBottom() > canvas.height){
    ball.vel.y = -ball.vel.y;
}

然后我用这种方法解决了碰撞：

    static collition(player, ball){
    return (player.getLeft()  < ball.getRight() && player.getRight() > ball.getLeft() 
            && player.getTop() < ball.getBottom() && player.getBottom() > ball.getTop());
}

这是一个非常正常的矩形碰撞测试，jus检查两侧是否发生碰撞。

我将添加一个代码段，以便您可以正确查看代码。这里的主要问题是游戏完美地检测到了碰撞，但是考虑到我想重新创建一个弹跳效果，每当球在X轴上改变其速度时击中一侧，并且完美地工作但是防止球进入矩形我需要在Y轴上反转速度，但如果我这样做，则运动受到影响并产生正常的弹跳效果。因此，主要问题是：如何在不影响弹跳效果的情况下防止这种情况发生，并且防止我的意思是防止球进入矩形。

我已经发现要创建X轴弹跳效果，我只需要反转X速度，并创建Y轴，我只需要反转Y速度。但同时改变两者会影响弹跳效果。

完整代码段：

https://jsfiddle.net/95exq760/2/