code qui ne marche pas

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
diegodemassy
Messages : 4
Enregistré le : 15 juil. 2019, 05:54

code qui ne marche pas

Message par diegodemassy » 05 avr. 2020, 20:37

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 :
window.onload = function()
{
var canvasWidth = 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);
}
ctx.restore();
};

}

}
[/quote
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

Avatar du membre
webmaster
Administrateur du site
Messages : 577
Enregistré le : 28 févr. 2017, 15:19

Re: code qui ne marche pas

Message par webmaster » 06 avr. 2020, 10:10

bonjour

La console indique "Uncaught ReferenceError: canvasHeight is not defined"
Et effectivement, la variable est mal créée avec heigTH au lieu de HT
var canvasHeigth = 600;

Même en corrigeant, le snake n'apparait pas dans le cadre.
J'imagine qu'il y a une autre erreur de frappe quelque part...
TJS : 25 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

Répondre