Besoin d'aide pour le score :)

Bonjour,
je suis en train de coder le jeu “Pong” pour mon projet d’ISN pour le bac mais j’ai un problème: je n’arrive pas à faire augmenter le score.
Une âme charitable pourrait-elle m’aider svp ?

Vous trouverez ce que j’ai essayé de faire ci-dessous.

HTML

<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>

JS

var scoreJ1 = 0;

var scoreJ2 = 0;

    if (posX < 0){
        scoreJ2 = scoreJ2 + 1;
        document.getElementsById('scoreJ2').innerHTML = scoreJ2 
        
        
    }
    
    if (posX >1915){
        scoreJ1 = scoreJ1 + 1;
        document.getElementsById('score').innerHTML = scoreJ1;
    }

Merci d’avance !

erreur de typo :
“Element” doit etre au singulier dans la fonction document.getElementsById.

Vérifie ta console JS de navigateur, ca doit te peter une erreur : “document.getElementsById is not a function” et te mettre sur la voie la prochaine fois :)

Comme cela ?


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;
    }


Cela ne marche toujours pas :/

Est ce que tu rentres bien dans au moins 1 de tes 2 conditions IF ?

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        
    }
}

//----------------------------------------------------------------------------------------------------------------------------------------------//



Salut, j’ai copié-collé le code de ton dernier post sur jsbin.com, mais rien ne se dessine sur le canvas. Je pense que tu devrais commenter tout ton script, et réactiver partie par partie pour voir à quel moment ça ne fonctionne plus…

salut,

Tu réinitialises ton score a zéro dans ta boucle animate, ensuite tu fait ton reset de la balle après ton move, donc ta condition pour le score n’est jamais utilisé… deplace ton reset juste avant le move.

@valev c’est juste qu’il n’a pas mis le css, mais un canvas background noir ;)

Human Coders - Le centre de formation recommandé par les développeur·se·s pour les développeur·se·s