javascriptcollisiondetectionbreakout

breakout collision detection


I'm coding a Breakout game with Javascript. I took the MDN tutorial and another tutorial and I'm trying to modify the original with a OOP approach. Until now, everything works fine except for the collision detection with the paddle. Which is not happening. Why is that? Here's my code. Can somebody help? Thanks!

var canvas = document.getElementById('game');
var theLoop;
var paddleSpeed = 4;

//OBJECTS
//Game
function Game() {
  this.width = canvas.width;
  this.height = canvas.height;
  this.ctx = canvas.getContext('2d');
  this.ctx.fillStyle = "white";
  this.p = new Paddle(0, 130);
  this.p.x = (this.width - this.p.width) / 2;
  this.keys = new Keylistener();
  this.ball = new Ball();
  this.ball.x = this.width / 2;
  this.ball.y = 125;
  this.ball.vy = Math.floor(Math.random() * 12 - 6);  
  this.ball.vx = 7 - Math.abs(this.ball.vy);
}

Game.prototype.draw = function() {
  this.ctx.clearRect(0, 0, this.width, this.height);
  this.p.draw(this.ctx);
  this.ball.draw(this.ctx);
};

Game.prototype.update = function() {
  if (this.paused) return;
  this.ball.update();
  //Right Paddle's Directions
  if (this.keys.isPressed(37)) { // LEFT
    this.p.x = Math.max(0, this.p.x - paddleSpeed);
  } else if (this.keys.isPressed(39)) { // RIGHT
        
    this.p.x = Math.min(this.p.x + paddleSpeed, this.width - this.p.width);
  }


  if (this.ball.x < this.ball.ballRadius || this.ball.x > this.width - this.ball.ballRadius) { //LEFT & RIGHT
    this.ball.vx = -this.ball.vx;
  }
  if (this.ball.y < this.ball.ballRadius) { //TOP
    this.ball.vy = -this.ball.vy;
  } else if (this.ball.y > this.height - this.ball.ballRadius) {
    if (this.ball.x > this.p.x && this.ball.x < this.p.x + this.p.width) {
      this.ball.vy = -this.ball.vy;
      console.log('hit');
    } else {
      //      console.log(this.ball.x);
    }
  }
};

/////Paddle
function Paddle(x, y) {
  this.x = x;
  this.y = y;
  this.width = 30;
  this.height = 5;
  this.score = 0;
}

Paddle.prototype.draw = function(p) {
  p.fillRect(this.x, this.y, this.width, this.height);
};

///KEY LISTENER
function Keylistener() {
  this.pressedKeys = [];
  this.keydown = function(e) {
    this.pressedKeys[e.keyCode] = true;
  };
  this.keyup = function(e) {
    this.pressedKeys[e.keyCode] = false;
  };
  document.addEventListener("keydown", this.keydown.bind(this));
  document.addEventListener("keyup", this.keyup.bind(this));
}

Keylistener.prototype.isPressed = function(key) {
  return this.pressedKeys[key] ? true : false;
};

Keylistener.prototype.addKeyPressListener = function(keyCode, callback) {
  document.addEventListener("keypress", function(e) {
    if (e.keyCode == keyCode) callback(e);
  });
};

///BALL
function Ball() {
  this.x = 0;
  this.y = 0;
  this.vx = 0;
  this.vy = 0;
  this.ballRadius = 5;
}

Ball.prototype.update = function() {
  this.x += this.vx;
  this.y += this.vy;
};

Ball.prototype.draw = function(p) {
  p.beginPath();
  p.arc(this.x, this.y, this.ballRadius, 0, Math.PI * 2, false);
  p.fill();
  p.closePath();
};


//Initialize the game
var game = new Game();

//the Main Engine
function mainLoop() {
  theLoop = setInterval(function() {
    game.update();
    game.draw();
  }, 33.3333);
}

//calling the Main Engine
mainLoop();
#game {
  width: 800px;
  height: 400px;
  background-color: #353535;
}
<canvas id="game"></canvas>


Solution

  • var canvas = document.getElementById('game');
    var theLoop;
    var paddleSpeed = 4;
    
    //OBJECTS
    //Game
    function Game() {
      this.width = canvas.width;
      this.height = canvas.height;
      this.ctx = canvas.getContext('2d');
      this.ctx.fillStyle = "white";
      this.p = new Paddle(0, 130);
      this.p.x = (this.width - this.p.width) / 2;
      this.keys = new Keylistener();
      this.ball = new Ball();
      this.ball.x = this.width / 2;
      this.ball.y = 125;
      this.ball.vy = Math.floor(Math.random() * 12 - 6);  
      this.ball.vx = 7 - Math.abs(this.ball.vy);
    }
    
    Game.prototype.draw = function() {
      this.ctx.clearRect(0, 0, this.width, this.height);
      this.p.draw(this.ctx);
      this.ball.draw(this.ctx);
    };
    
    Game.prototype.update = function() {
      if (this.paused) return;
      this.ball.update();
      //Right Paddle's Directions
      if (this.keys.isPressed(37)) { // LEFT
        this.p.x = Math.max(0, this.p.x - paddleSpeed);
      } else if (this.keys.isPressed(39)) { // RIGHT
            
        this.p.x = Math.min(this.p.x + paddleSpeed, this.width - this.p.width);
      }
    
    
      if (this.ball.x < this.ball.ballRadius || this.ball.x > this.width - this.ball.ballRadius) { //LEFT & RIGHT
        this.ball.vx = -this.ball.vx;
      }
      if (this.ball.y < this.ball.ballRadius) { //TOP
        this.ball.vy = -this.ball.vy;
      } else if (this.ball.y > this.p.y - this.ball.ballRadius && 
                this.ball.y < this.p.y + this.p.height + this.ball.ballRadius) {
    
       if (this.ball.x > this.p.x && this.ball.x < this.p.x + this.p.width) {
          this.ball.vy = -this.ball.vy;
          console.log('hit');
        } else {
          //      console.log(this.ball.x);
        }
      }
    };
    
    /////Paddle
    function Paddle(x, y) {
      this.x = x;
      this.y = y;
      this.width = 30;
      this.height = 5;
      this.score = 0;
    }
    
    Paddle.prototype.draw = function(p) {
      p.fillRect(this.x, this.y, this.width, this.height);
    };
    
    ///KEY LISTENER
    function Keylistener() {
      this.pressedKeys = [];
      this.keydown = function(e) {
        this.pressedKeys[e.keyCode] = true;
      };
      this.keyup = function(e) {
        this.pressedKeys[e.keyCode] = false;
      };
      document.addEventListener("keydown", this.keydown.bind(this));
      document.addEventListener("keyup", this.keyup.bind(this));
    }
    
    Keylistener.prototype.isPressed = function(key) {
      return this.pressedKeys[key] ? true : false;
    };
    
    Keylistener.prototype.addKeyPressListener = function(keyCode, callback) {
      document.addEventListener("keypress", function(e) {
        if (e.keyCode == keyCode) callback(e);
      });
    };
    
    ///BALL
    function Ball() {
      this.x = 0;
      this.y = 0;
      this.vx = 0;
      this.vy = 0;
      this.ballRadius = 5;
    }
    
    Ball.prototype.update = function() {
      this.x += this.vx;
      this.y += this.vy;
    };
    
    Ball.prototype.draw = function(p) {
      p.beginPath();
      p.arc(this.x, this.y, this.ballRadius, 0, Math.PI * 2, false);
      p.fill();
      p.closePath();
    };
    
    
    //Initialize the game
    var game = new Game();
    
    //the Main Engine
    function mainLoop() {
      theLoop = setInterval(function() {
        game.update();
        game.draw();
      }, 33.3333);
    }
    
    //calling the Main Engine
    mainLoop();
    #game {
      width: 800px;
      height: 400px;
      background-color: #353535;
    }
    <canvas id="game"></canvas>