bonsoir
je n'arrive pas a trouver mon erreur , la console me dit :
Uncaught TypeError: Cannot read property '0' of undefined
at Apple.isOnSnake (script.js:198)
at refreshCanvas (script.js:46)
window.onload = function()
{
var canvasWidth = 900; // largeur de mon cadre
var canvasHeight = 600; // hauteur de mon cadre
var blockSize = 30;// taiille d'un carré de mon serpent
var ctx;
var delay = 100;// temps de regeneratrion 10eme de seconde = 1sec
var snakee;
var applee;
var widthInblocks = canvasWidth/blockSize;
var heightInbloks = canvasHeight/blockSize;
init();
function init()
{
var canvas = document.createElement('canvas');
canvas.width = canvasWidth;// taille cadre
canvas.height = canvasHeight;
canvas.style.border = "1px solid"; // bordure canvas
document.body.appendChild(canvas);
ctx = canvas.getContext('2d');// dessin canvas
snakee = new snake([[6,4],[5,4],[4,4],[2,4],[3,4]], "right");
applee = new Apple([10,10]);
refreshCanvas();// appel de la fonction
}
function refreshCanvas()// la fonction
{
snakee.advance();// on appel la fonction advance pour qu'il avance
if(snakee.checkCollision())// si ya eu collision
{
//si oui GAME OVER
}
else // alors tu continue a draw et a remettre a jr le
{
if(snakee.isEatingApple(applee))
{
snakee.eatApple = true;
do// si le serpent a manger la pomme
{
applee.setNewPosition();//donne lui une nvl position
}
while(applee.isOnSnake(snakee))// verfier si la nvl position est sur le serpent snakee
applee.setNewPosition();
}
ctx.clearRect(0,0,canvasWidth,canvasHeight);
snakee.draw();// on appel la methode de snakee qui est draw
applee.draw();
setTimeout(refreshCanvas,delay);// execute telle fonction a partir de telle delais
}
}
function drawBlock(ctx, position)
{
var x = position[0] * blockSize;
var y = position[1] * blockSize;
ctx.fillRect(x ,y , blockSize, blockSize);// repli un rectange qui aura la h et la largeur de blockSize donc 30px
}
function snake(body,direction)// protocole du serpent
{
this.body = body;
this.direction = direction;
this.eatApple = false;// pour pas qu'il grandit des le prmier coups
this.draw = function()// permet de dessiner le corps du serpent
{
ctx.save();// sauvegarde le contenue comme il était avant
ctx.fillStyle = "#ff0000";
for(var i = 0; i < this.body.length; i++)
{
drawBlock(ctx, this.body);
}
ctx.restore();
};
this.advance = function()
{
var nextPosition = this.body[0].slice();// permet de crée un nex elem en format copie
switch(this.direction)// de base le serpent pars de la gauche vers la droite et du haut vers le bas
{
case "left":
nextPosition[0] -= 1; // la ou il es moins 1 retour en arriere
break;
case "right":
nextPosition[0] += 1; // avance vers l'avant de 1
break;
case "down":
nextPosition[1] += 1; // decsend de 1
break;
case "up":
nextPosition[1] -= 1; // rebrousse chemin de 1 il remonte de 1
break;
default:
throw("invalid direction");
}
this.body.unshift(nextPosition);//permet de rajouter le ce qui est entre parenthese a la premiere place
if(!this.eatApple)// si le serpent na PAS manger de pomme j'efface le dernier element
this.body.pop();// efface le dernier element
else
this.eatApple = false;// grandit des que tu mange une pomme
};
this.setDirection = function(newDirection)// function setDirection a pour arg newDirection
{
var allowedDirections//direction permise
switch(this.direction)
{
case "left": //si diection actuel son gauche ou droite
case "right":
allowedDirections = ["up","down"];// il n'y a que haut et bas qui met permis
break;
case "down": //si diection actuel son bas et haut
case "up":
allowedDirections = ["left","right"];// il n'y a que gauche et droite qui met permis
break;
default:
throw("invalid direction");
}
if(allowedDirections.indexOf(newDirection) > -1)//si mon index de ma nvl direction mes allowDirection est sup a -1 sa veut dire quel es permise verifier si la nouvelle redection est permime on peut up down ou left right
{
this.direction = newDirection;// donc je veut la mettre en nouvelle direction
}
};
this.checkCollision = function()
{
var wallCollision = false;
var snakeCollision = false;
var head = this.body[0];// la tete c'est le 1er elem du corps
var rest = this.body.slice(1);// tout le corps sauf la tete il passe la valeur 0 et met l'array dans la var rest
var snakeX = head[0];// doit etre compris entre 0 et 19 (taille total de la grille 0-19)
var snakeY = head[1];//doit etre compris entre 0 et 39
var minX = 0;
var minY = 0;
var maxX = widthInblocks -1; // tt la largeure de la grille -1
var maxY = heightInbloks -1;// idem en vertical
var isNotBetweenHorizontalwalls = snakeX < minX || snakeX > maxX ;// a se moment la tete a depasser la val min ou max elle c prise a gauche ou a droit dans le mur
var isNotBetweenVerticalwalls = snakeY < minY || snakeY > maxY;
if(isNotBetweenHorizontalwalls || isNotBetweenVerticalwalls) // si l'un des des deux est vrai c'est qu'il y a une wallCollision
{
wallCollision = true;
}
for(var i = 0; i < rest.length ; i++)
{
if(snakeX === rest[i][0] && snakeY === rest[i][1])
{
snakeCollision = true;
}
}
return wallCollision || snakeCollision;
};
this.isEatingApple = function(appleToEat)// comme c'est une methode on doit ecrire = function (...)
{
var head = this.body[0];
if(head[0] === appleToEat.position[0] && head[1] === appleToEat.position[1])
{
return true;
}
else
return false;
};
}
function Apple(position)
{
this.position = position;
this.draw = function()
{
ctx.save();// sert a enregister mes ancienne config
ctx.fillStyle = "#33cc33";
ctx.beginPath();
var radius = blockSize/2;
var x = this.position[0]*blockSize + radius;// x pour rayon de la pomme
var y = this.position[1]*blockSize + radius;// y pour rayon de la pomme
ctx.arc(x,y, radius, 0, Math.PI*2, true);
ctx.fill();
ctx.restore();//une fois la pomme dessiner il va restorer
};
this.setNewPosition = function()// nvl position a la pomme
{
var newX = Math.round(Math.random() * (widthInblocks -1));// largeur - 1 donc un chiffre entre 0 et 29
var newY = Math.round(Math.random() * (heightInbloks -1));// place en postion y aléatoirement
this.position = [newX , newY];// = les deux du dessus pour donner 1seul es mm position a la pomme haut + larg
};
this.isOnSnake = function(snakeToCheck)
{
var isOnSnake = false;
for(var i = 0; i < snakeToCheck.body.length; i++)// on verif si la pomme es sur un des bloc du serpent block par block avec une boucle
{
if(this.postion[0] === snakeToCheck.body[i][0] && this.postion[1] === snakeToCheck.body[i][1])// pour postion Y
{
isOnSnake = true;
}
}
return isOnSnake;
};
}
document.onkeydown = function handleKeyDown(e) //quand l'use touche une touche de son clavier transmet l'evenemnt a la fonction
{
var key = e.keyCode; // donne le code de la touche qui a été appuié
var newDirection; // crea de la var d'une potentielle nouvelle direction
switch(key) // direction au toucher fleche
{
case 37: //
newDirection = "left";
break;
case 38:
newDirection = "up";
break;
case 39:
newDirection = "right";
break;
case 40:
newDirection = "down";
break;
default:
return;
}
snakee.setDirection(newDirection);
}
}[/i][/i][/i][/i]
je n'arrive pas a trouver mon erreur , la console me dit :
Uncaught TypeError: Cannot read property '0' of undefined
at Apple.isOnSnake (script.js:198)
at refreshCanvas (script.js:46)
window.onload = function()
{
var canvasWidth = 900; // largeur de mon cadre
var canvasHeight = 600; // hauteur de mon cadre
var blockSize = 30;// taiille d'un carré de mon serpent
var ctx;
var delay = 100;// temps de regeneratrion 10eme de seconde = 1sec
var snakee;
var applee;
var widthInblocks = canvasWidth/blockSize;
var heightInbloks = canvasHeight/blockSize;
init();
function init()
{
var canvas = document.createElement('canvas');
canvas.width = canvasWidth;// taille cadre
canvas.height = canvasHeight;
canvas.style.border = "1px solid"; // bordure canvas
document.body.appendChild(canvas);
ctx = canvas.getContext('2d');// dessin canvas
snakee = new snake([[6,4],[5,4],[4,4],[2,4],[3,4]], "right");
applee = new Apple([10,10]);
refreshCanvas();// appel de la fonction
}
function refreshCanvas()// la fonction
{
snakee.advance();// on appel la fonction advance pour qu'il avance
if(snakee.checkCollision())// si ya eu collision
{
//si oui GAME OVER
}
else // alors tu continue a draw et a remettre a jr le
{
if(snakee.isEatingApple(applee))
{
snakee.eatApple = true;
do// si le serpent a manger la pomme
{
applee.setNewPosition();//donne lui une nvl position
}
while(applee.isOnSnake(snakee))// verfier si la nvl position est sur le serpent snakee
applee.setNewPosition();
}
ctx.clearRect(0,0,canvasWidth,canvasHeight);
snakee.draw();// on appel la methode de snakee qui est draw
applee.draw();
setTimeout(refreshCanvas,delay);// execute telle fonction a partir de telle delais
}
}
function drawBlock(ctx, position)
{
var x = position[0] * blockSize;
var y = position[1] * blockSize;
ctx.fillRect(x ,y , blockSize, blockSize);// repli un rectange qui aura la h et la largeur de blockSize donc 30px
}
function snake(body,direction)// protocole du serpent
{
this.body = body;
this.direction = direction;
this.eatApple = false;// pour pas qu'il grandit des le prmier coups
this.draw = function()// permet de dessiner le corps du serpent
{
ctx.save();// sauvegarde le contenue comme il était avant
ctx.fillStyle = "#ff0000";
for(var i = 0; i < this.body.length; i++)
{
drawBlock(ctx, this.body);
}
ctx.restore();
};
this.advance = function()
{
var nextPosition = this.body[0].slice();// permet de crée un nex elem en format copie
switch(this.direction)// de base le serpent pars de la gauche vers la droite et du haut vers le bas
{
case "left":
nextPosition[0] -= 1; // la ou il es moins 1 retour en arriere
break;
case "right":
nextPosition[0] += 1; // avance vers l'avant de 1
break;
case "down":
nextPosition[1] += 1; // decsend de 1
break;
case "up":
nextPosition[1] -= 1; // rebrousse chemin de 1 il remonte de 1
break;
default:
throw("invalid direction");
}
this.body.unshift(nextPosition);//permet de rajouter le ce qui est entre parenthese a la premiere place
if(!this.eatApple)// si le serpent na PAS manger de pomme j'efface le dernier element
this.body.pop();// efface le dernier element
else
this.eatApple = false;// grandit des que tu mange une pomme
};
this.setDirection = function(newDirection)// function setDirection a pour arg newDirection
{
var allowedDirections//direction permise
switch(this.direction)
{
case "left": //si diection actuel son gauche ou droite
case "right":
allowedDirections = ["up","down"];// il n'y a que haut et bas qui met permis
break;
case "down": //si diection actuel son bas et haut
case "up":
allowedDirections = ["left","right"];// il n'y a que gauche et droite qui met permis
break;
default:
throw("invalid direction");
}
if(allowedDirections.indexOf(newDirection) > -1)//si mon index de ma nvl direction mes allowDirection est sup a -1 sa veut dire quel es permise verifier si la nouvelle redection est permime on peut up down ou left right
{
this.direction = newDirection;// donc je veut la mettre en nouvelle direction
}
};
this.checkCollision = function()
{
var wallCollision = false;
var snakeCollision = false;
var head = this.body[0];// la tete c'est le 1er elem du corps
var rest = this.body.slice(1);// tout le corps sauf la tete il passe la valeur 0 et met l'array dans la var rest
var snakeX = head[0];// doit etre compris entre 0 et 19 (taille total de la grille 0-19)
var snakeY = head[1];//doit etre compris entre 0 et 39
var minX = 0;
var minY = 0;
var maxX = widthInblocks -1; // tt la largeure de la grille -1
var maxY = heightInbloks -1;// idem en vertical
var isNotBetweenHorizontalwalls = snakeX < minX || snakeX > maxX ;// a se moment la tete a depasser la val min ou max elle c prise a gauche ou a droit dans le mur
var isNotBetweenVerticalwalls = snakeY < minY || snakeY > maxY;
if(isNotBetweenHorizontalwalls || isNotBetweenVerticalwalls) // si l'un des des deux est vrai c'est qu'il y a une wallCollision
{
wallCollision = true;
}
for(var i = 0; i < rest.length ; i++)
{
if(snakeX === rest[i][0] && snakeY === rest[i][1])
{
snakeCollision = true;
}
}
return wallCollision || snakeCollision;
};
this.isEatingApple = function(appleToEat)// comme c'est une methode on doit ecrire = function (...)
{
var head = this.body[0];
if(head[0] === appleToEat.position[0] && head[1] === appleToEat.position[1])
{
return true;
}
else
return false;
};
}
function Apple(position)
{
this.position = position;
this.draw = function()
{
ctx.save();// sert a enregister mes ancienne config
ctx.fillStyle = "#33cc33";
ctx.beginPath();
var radius = blockSize/2;
var x = this.position[0]*blockSize + radius;// x pour rayon de la pomme
var y = this.position[1]*blockSize + radius;// y pour rayon de la pomme
ctx.arc(x,y, radius, 0, Math.PI*2, true);
ctx.fill();
ctx.restore();//une fois la pomme dessiner il va restorer
};
this.setNewPosition = function()// nvl position a la pomme
{
var newX = Math.round(Math.random() * (widthInblocks -1));// largeur - 1 donc un chiffre entre 0 et 29
var newY = Math.round(Math.random() * (heightInbloks -1));// place en postion y aléatoirement
this.position = [newX , newY];// = les deux du dessus pour donner 1seul es mm position a la pomme haut + larg
};
this.isOnSnake = function(snakeToCheck)
{
var isOnSnake = false;
for(var i = 0; i < snakeToCheck.body.length; i++)// on verif si la pomme es sur un des bloc du serpent block par block avec une boucle
{
if(this.postion[0] === snakeToCheck.body[i][0] && this.postion[1] === snakeToCheck.body[i][1])// pour postion Y
{
isOnSnake = true;
}
}
return isOnSnake;
};
}
document.onkeydown = function handleKeyDown(e) //quand l'use touche une touche de son clavier transmet l'evenemnt a la fonction
{
var key = e.keyCode; // donne le code de la touche qui a été appuié
var newDirection; // crea de la var d'une potentielle nouvelle direction
switch(key) // direction au toucher fleche
{
case 37: //
newDirection = "left";
break;
case 38:
newDirection = "up";
break;
case 39:
newDirection = "right";
break;
case 40:
newDirection = "down";
break;
default:
return;
}
snakee.setDirection(newDirection);
}
}[/i][/i][/i][/i]
