Bah je pense oui.
Vous trouverez mon code HTML et JS ci dessous:
HTML:
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Animation dans le Canvas</title>
<script src="test2.js"></script>
<link rel="stylesheet" href="test.css">
</head>
<body>
<p id="score">0</p> </br>
<p id="scoreJ2">0</p>
<canvas id="myCanvas" width="1915" height="900" style="border:1px black solid"></canvas>
</body>
</html>
JS:
//VARIABLES
var canvas;
var context;
var document;
// VARIABLES POUR BALLE
var rayon = 12;
var posX = 957;
var posY = 450;
//POSITION DE DEPART DE LA BALLE
var vx = 19;
var vy = 19;
// VITESSE DE LA BALLE
// JOUEUR 1 (A GAUCHE)
var xr = 5;
var yr = 245;
// POSITION DE DEPART DE J1
var largeur = 20;
var hauteur = 125;
// JOUEUR 2
var xr2 = 1880;
var yr2 = 244;
// POSITION DE DEPART DE J1
var largeur2 = 20;
var hauteur2 = 125;
//----------------------------------------------------------------------------------------------------------------------------------------------//
window.onload = function()
{
canvas = document.getElementById("myCanvas");
context = canvas.getContext("2d");
// AFFICHER LE CANVAS ET LE CONTEXTE GRAPHIQUE
setInterval(animate,20); //LANCER L'ANIMATION
}
//----------------------------------------------------------------------------------------------------------------------------------------------//
// FONCTION POUR ANIMER/AFFICHER TOUS LES ELEMENTS //
function animate()
{
if (posY > canvas.height - rayon || posY<0) {
vy = -vy
} // REBONDIR SUR LES BORDS HAUT ET BAS DU CANVAS
// COLLISION
if( !(posX >= xr + largeur || posX <= xr || posY >= hauteur + yr || posY <= yr) ){
vx = -vx;
}
else if( !(posX >= xr2 + largeur2 || posX <= xr2 || posY >= hauteur2 + yr2 || posY <= yr2) ){
vx = -vx;
}
var scoreJ1 = 0;
var scoreJ2 = 0;
if (posX < 0){
scoreJ2 = scoreJ2 + 1;
document.getElementById('scoreJ2').innerHTML = scoreJ2
}
if (posX >1915){
scoreJ1 = scoreJ1 + 1;
document.getElementById('score').innerHTML = scoreJ1;
}
balle(); // AFFICHER LA BALLE
ligneMilieu(); // LIGNE DU MILIEU
rect(); // AFFICHER JOUEUR 1
rect2(); // AFFICHER JOUEUR 2
movePlayer(); // FAIRE BOUGER J1
movePlayer2(); // FAIRE BOUGER J2
remise(); //FONCTION POUR REMISE
reset(); //FOCNTION POUR LE RESET DE LA BALLE
}
//----------------------------------------------------------------------------------------------------------------------------------------------//
// DESSIN DE LA BALLE ET DES 2 JOUEURS //
function balle() // DESSIN DE LA BALLE
{
// Clear
context.clearRect(0, 0, canvas.width, canvas.height);
// Draw Mob
context.beginPath();
context.arc(posX, posY, rayon,0, 2*Math.PI); // POSITION ET MISE EN FORME DE LA BALLE
context.fillStyle = "white"; // COULEUR
context.closePath();
context.fill();
}
function rect() { // JOUEUR 1
context.beginPath();
context.rect(xr,yr,largeur,hauteur);
context.fillStyle = "white";
context.fill();
context.closePath();
}
function rect2() { // JOUEUR 2
context.beginPath();
context.rect(xr2,yr2,largeur2,hauteur2);
context.fillStyle = "white";
context.fill();
context.closePath();
}
//----------------------------------------------------------------------------------------------------------------------------------------------//
function ligneMilieu() {
context.beginPath();
context.setLineDash([20, 15]); // POINTILLES
context.moveTo((canvas.width / 2), canvas.height); // COORDONNES DU POINT DU DEBUT DE LA LIGNE
context.lineTo((canvas.width / 2), 0); // COORDONNES DU POINT DE LA FIN DE LA LIGNE
context.lineWidth = 10;
context.strokeStyle = "white";
context.stroke(); // TRACEE DE LA LIGNE
}
//----------------------------------------------------------------------------------------------------------------------------------------------//
// MOUVEMENT DES JOUEURS //
// J1
function hautz() { // TOUCHE Z
yr=yr-15
}
function bass() { // TOUCHE S
yr=yr+15
}
// J2
function hautf() { // FLECHE DU HAUT
yr2=yr2-15
}
function basf() { // FLECHE DU BAS
yr2=yr2+15
}
// LES JOUEURS MONTENT OU DESCENDENT
// DEPLACEMENTS FLUIDES DES JOUEURS
var goDown = false;
var goUp = false;
var goDown2 = false;
var goUp2 = false;
// AU DEBUT LES JOUEURS NE BOUGENT PAS (D'OU LE "FALSE")
document.onkeydown = function (event) // QUAND LA TOUCHE EST ENFONCE
{
if (event.keyCode == 90 ) goUp = true; // = Z
if (event.keyCode == 83 ) goDown = true; // = S
if (event.keyCode == 38 ) goUp2 = true; // = FLECHE HAUT
if (event.keyCode == 40) goDown2 = true; //=FLECHE BAS
// SI LA TOUCHE EST ENFONCE, ALORS LES JOUEURS SE DEPLACENT (D'OU LE "TRUE")
if (event.keyCode == 32) enJeu = true;
}
document.onkeyup = function(event){ // QUAND LA TOUCHE EST RELACHE ALORS LES JOUEURS S'ARRETENT ("FALSE")
if (event.keyCode == 90) goUp = false;
if (event.keyCode == 83 ) goDown = false;
if (event.keyCode == 38) goUp2 = false;
if (event.keyCode == 40 ) goDown2 = false;
}
// FONCTIONS POUR QUE LES JOUEUERS NE SORTENT PAS DU CANVAS
function movePlayer() {
if (goUp && yr > 0) hautz();
if (goDown && yr < canvas.height - hauteur) bass();
}
function movePlayer2(){
if (goUp2 && yr2 > 0) hautf();
if (goDown2 && yr2 < canvas.height - hauteur) basf();
}
//----------------------------------------------------------------------------------------------------------------------------------------------//
// ENGAGEMENT ET RESET DE LA BALLE //
function reset() {
if ( posX < 0 || posX > 1915){
posX = 1000;
posY = 450;
} // RESET DE LA BALLE
}
function remise() {
if (this.enJeu) {
posX = posX - vx;
posY = posY + vy;
// ENGAGEMENT
}
}
//----------------------------------------------------------------------------------------------------------------------------------------------//
