Créer notre casse brique : Collision avec la raquette !

Collision avec la raquette !

Pour savoir si notre balle collisionne avec la raquette nous avons besoin de deux conditions.

Connaître sa position en X, comparé à notre raquette
Connaître sa position en Y, comparé à notre raquette

Si ces deux conditions sont vraies alors notre balle collisionne avec la raquette !

Collision en X

Pour connaître si la condition en X, est vraie.

Nous n’avons pas besoin de calculs, juste de deux conditions.

Voici un schéma :

On veut savoir si la position droite de la balle est supérieure à la position gauche de la raquette.

On veut savoir si la position gauche de la balle est inférieur à la position droite de la raquette.

Si ces deux conditions sont vraies, il a un début de collision entre notre balle et la raquette.

if balle.x + balle.w > raquette.x and balle.x < raquette.x + raquette.w then
	-- la collision en X est vrai !
end

Collision en Y

Pour connaître si la condition en Y, est vrai.

Nous testerons la position Y uniquement si la condition en X est vraie, ainsi on simplifie le code.

Nous n’avons pas besoin de calculs non plus, juste d’une seule condition.

On veut savoir si la position basse de la balle est supérieure à la position haute de la raquette.

Si cette condition est aussi vraie. Alors il y a bien une collision avec notre raquette.

function love.update(dt)
  if balle.x + balle.w > raquette.x and balle.x < raquette.x + raquette.w then
      -- la collision en X est vrai !
      if balle.y + balle.h > raquette.y then
          -- collsion !
      end
  end
end

Maintenant que nous savons s’il y a une collision. Nous devons faire repartir la balle dans l’autre sens.

Renvois de la balle

Pour faire ceci, il nous suffit de replacer la balle au-dessus de la raquette puis de changer sa direction VY.

function love.update(dt)  
	if balle.x + balle.w > raquette.x and balle.x < raquette.x + raquette.w then
      	-- la collision en X est vrai !
     	if balle.y + balle.h > raquette.y then
          -- collsion !
          -- 1 | on replace la balle juste au dessus de la raquette
          balle.y = raquette.y - balle.h
          -- 2 | on inverse la direction VY de la balle
          balle.vy = 0 - balle.vy
      	end
  	end
end

Plus qu’à ajouter ceci à notre code :

love.window.setTitle("Casse Brique")

local raquette = {x=300, y=555, w=200, h=40, speed=250}

local balle = {x=0, y=0, w=40, h=40, isGlue=true, vx=-1, vy=-1, speed=300}

local briques = {} -- nos briques

-- creation des briques
for ligne=1, 5 do
  briques[ligne] = {}
  for colonne=1, 6 do
    briques[ligne][colonne] = 1
  end
end
--

function love.update(dt)
  if balle.isGlue == true then
    balle.x = raquette.x + ((raquette.w / 2) - (balle.w / 2))
    balle.y = raquette.y - (balle.h +  2)
  elseif balle.isGlue == false then
    balle.x = balle.x + (balle.vx * balle.speed * dt)
    balle.y = balle.y + (balle.vy * balle.speed * dt)
  end

  -- la balle rebondi sur le bord droit ou gauche
  if balle.x < 0 then
    balle.x = 0
    balle.vx = 0 - balle.vx
  elseif balle.x + balle.w > 800 then
    balle.x = 800 - balle.w
    balle.vx = 0 - balle.vx
  end

  -- la balle rebondi sur le bord en haut
  if balle.y < 0 then
    balle.y = 0
    balle.vy = 0 - balle.vy
  end

  -- la balle est perdue si elle a touchee le bord en bas
  if balle.y + balle.h > 600 then
    balle.isGlue = true
    balle.vy = -1
    balle.vx = -1
  end

  -- deplacement de la raquette Droite ou Gauche
  if love.keyboard.isDown("left") then
    raquette.x = raquette.x - (raquette.speed * dt)
  elseif love.keyboard.isDown("right") then
    raquette.x = raquette.x + (raquette.speed * dt)
  end

  -- limiter le deplacement de la raquette a la fenetre du jeu
  if raquette.x < 0 then
    raquette.x = 0
  elseif raquette.x + raquette.w > 800 then
    raquette.x = 800 - raquette.w
  end

  -- collision balle avec raquette :
  -- test collision en X ?
  if balle.x + balle.w > raquette.x and balle.x < raquette.x + raquette.w then
    
    -- test collsion en Y ?
    if balle.y + balle.h > raquette.y then
    
    -- 1 | on replace la balle juste au dessus de la raquette
      balle.y = raquette.y - balle.h
      
      -- 2 | on inverse la direction VY de la balle
      balle.vy = 0 - balle.vy
      
    end
    
  end
  
end
--

function love.draw()

  -- notre raquette
  love.graphics.rectangle("fill", raquette.x, raquette.y, raquette.w, raquette.h)

  -- notre balle
  love.graphics.rectangle("fill", balle.x, balle.y, balle.w, balle.h)

  local x, y, w, h -- nos variables briques

  x = 0
  y = 0
  w = 800 / 6
  h = 30

  for ligne=1, 5 do

    for colonne=1, 6 do
      love.graphics.rectangle("fill", x+1, y+1, w-2, h-2)  
      x = x + w -- a chaque colonne on decale notre variable x de la largeur d une brique
    end

    x = 0 -- on remets la position x pour la ligne suivante
    y = y + h -- on decalle la position y pour la ligne suivante
  end

end

function love.keypressed(key)
  if key == "space" and balle.isGlue == true then
    balle.isGlue = false
  end
end

Apercu en image :

Parfait !

La balle rebondit bien sur la raquette !

Plus qu’à tester avec nos briques !