Bug en javascript [Résolu]

Signaler
Messages postés
42
Date d'inscription
vendredi 28 décembre 2018
Statut
Membre
Dernière intervention
7 février 2021
 -
Messages postés
31481
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
24 février 2021
 -
Bonjour,
J'ai un code que je n'arrive pas à faire marcher . Le code html est : 

<!DOCTYPE html>
<html>
  <head>
      <title>Jeu du serpent</title>
      <h1>hello</h1>
      <script src="script4.js"></script>
  </head>

  <body>

  </body>

</html>


et le code javascript est : 

window.onload = function()
{
    var cancasWidth = 900;
    var canvasHeigth = 600;
    var blockSize = 30;
    var ctx;
    var delay = 100;
    var snakee;

    init();

    function init()
    {
      var canvas = document.createElement('canvas');
      canvas.width = canvasWidth;
      canvas.height = canvasHeight;
      canvas.style.border = "1px solid";
      document.body.appendChild(canvas);
      ctx = canvas.getContext('2d');
      snakee = new Snake([[6,4],[5,4],[4,4]]);
      refreshCanvas();
    }

    function refreshCanvas()
    {
        ctx.clearRect(0,0,canvasWidth, canvasHeight);
        snakee.draw();
        setTimeout(refreshCanvas,delay);
    }

    function drawBlock(ctx, position)
    {
        var x = position[0] * blockSize;
        var y = position[1] * blockSize;
        ctx.fillRect(x ,y , blockSize, blockSize);
    }

      function Snake(body)
    {
        this.body = body;
        this.draw = function()
        {
          ctx.save();
          ctx.fillStyle = "#ff0000";
          for (var i = 0; i < this.body.length; i++)
          {
              drawBlock(ctx, this.body[i]);
          }
          ctx.restore();
        };

    }

}


Est-ce que ça marche pour vous? Je viens de vérifier toutes les ligne 3 fois et je n'arrive pas à débuger la situtation. Je n'ai qu'une page avec hello qui s'affiche et nommé jeu du serpent. Normalement selon la démo, je devrais avoir un cadre noir et un serpent sous la fornme de trois carrés rouge les uns à côtés des autres.
Merci d'avance de vos réponses.
Diego




Configuration: Macintosh / Chrome 80.0.3987.149

3 réponses

Réponse 1 / 3
Messages postés
31481
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
24 février 2021
 3 281
Bon

Sans parler du fait que tu as toujours autant de mal à position ton code html au bon endroit
Voici ton code corrigé au niveau du html 
<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <title>Jeu du serpent</title>
    </head>
    <body> 
        <h1>hello</h1>
        <script src="script4.js"></script>
 </body>    
</html>


... tu as également un souci avec le nom de tes variables.


Il faut corriger la déclaration de ta variable comme ceci
Au lieu de 
var cancasWidth = 900;

remplacer par : 
var canvasWidth  = 900;




Cordialement,
Jordane
Réponse 2 / 3
Messages postés
42
Date d'inscription
vendredi 28 décembre 2018
Statut
Membre
Dernière intervention
7 février 2021
Salut il doit y avoir autre chose car ça ne marche toujours pas??
Signaler
Messages postés
31481
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
24 février 2021
 3 281
Que t'affiches la console ?
Tu testes bien directement dans un navigateur internet hein ? (pas depuis bracket..) ?
Signaler
Messages postés
31481
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
24 février 2021
 3 281 >
Messages postés
31481
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
24 février 2021
Car oui, il y a bien autre chose... un souci de dyslexie:-) 
var canvasHeight = 600;
Réponse 3 / 3
Messages postés
42
Date d'inscription
vendredi 28 décembre 2018
Statut
Membre
Dernière intervention
7 février 2021
yes!!!!!!!!!!!!
Merci c'était la dysyexie...
par contre j'utilise le bracket.
Pourrais-tu me dire comment tester directement? Merci
Signaler
Messages postés
31481
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
24 février 2021
 3 281
Pense à mettre le sujet en Résolu.
Répondre Posez votre question