Déplacer une raquette avec une souris en JavaScript

Fermé
Gilles-java - 17 avril 2015 à 19:25
Bonjour,

Je réalise en ce moment une sorte de casse-briques mais sans briques!
Je voudrais déplacer ma raquette avec la souris mais je ne trouve pas le moyen de le faire.
De plus, il faudrait que la balle rebondisse sur ma raquette.
Si quelqu'un pouvait me donner les outils pour y arriver ce serait génial!
Merci d'avance :)

Voici mon code actuel :

<!DOCTYPE HTML>

<html>

<head>

<meta charset="UTF-8"/>
<title>Pong</title>

</head>

<body>

<canvas id="Canvas" width="800" height="300" style="border:1px solid black;">
</canvas>

<script>

window.onload = function() {

var canvas = document.getElementById("Canvas");
var context = canvas.getContext("2d");

var diametreBalle = 20;

var posXBalle = 1+diametreBalle/2;
var posYBalle = 1+diametreBalle/2;

var posXRectangle = 0;
var posYRectangle = 250;
var largeurRectangle = 800;
var hauteurRectangle = 50;

var posXRaquette = 0;
var posYRaquette = 230;
var largeurRaquette = 120;
var hauteurRaquette = 10;

var vitesseX = 5;
var vitesseY = 5;

var myInterval = setInterval(animate, 20);

function animate() {

context.clearRect(0, 0, canvas.width, canvas.height);

//Tracé de la balle
context.beginPath();
context.arc(posXBalle, posYBalle, diametreBalle/2, 0, Math.PI*2);
context.fill();
context.closePath();

context.beginPath();
context.rect(posXRectangle, posYRectangle, largeurRectangle, hauteurRectangle);
context.fill();
context.closePath();

context.beginPath();
context.rect(posXRaquette, posYRaquette, largeurRaquette, hauteurRaquette);
context.fill();
context.closePath();

if(posXBalle+diametreBalle/2 >= canvas.width || posXBalle <= 0+diametreBalle/2)
{
vitesseX *= -1;
}

if(posYBalle <= 0+diametreBalle/2)
{
vitesseY *= -1;
}

if(posYBalle+diametreBalle/2 >= canvas.height)
{
vitesseY *= 0;
vitesseX *= 0;
}

posXBalle += vitesseX;
posYBalle += vitesseY;


}

}

</script>

</body>

</html>
A voir également: