Mi problema es que tengo un juego, el "Snake", en Canvas, y he hecho unas paredes que se supone que al chocar deberías perder tu partida. Tengo 4 paredes, pero hago un for por si añado más en un futuro no complicarme y no validar una a una, el código que tengo es este:
Código:
Las paredes las guardo en un array llamado wall por cierto.for (i=0;i<wall.length;i++){
if(cuerpo.intersects(wall[i])){
alert("Perdiste por chocar con una pared!");
}
}
El problema es que con ese código el canvas no me carga! Como si estuviera mal el código, y yo pues... lo veo bien jejeje
Alguien que me ayude?
Un saludo!
PD: Dejo todo el código completo por si necesitáis algo más, creo que el error es por la variable "cuerpo" pero ni idea de cómo arreglarlo :S
Código:
// Declaramos que el juego se inicie cuando cargue el resto de la página
window.addEventListener('load',init,false);
// Declaramos el canvas y el contexto como vacíos
var canvas=null,ctx=null;
// Variable en la que se guardará la última tecla pulsada
var ultimatecla=null;
// Declaraciones para decir que el juego empiece en pause y como una nueva partida
var pause=true,gameover=true;
// Declaración de la velocidad del juego en milisegundos
var velocidad=60;
var cuerpo=new Array();
var comida=new Rectangle(80,80,10,10);
var wall=new Array();
wall.push(new Rectangle(100,50,15,15));
wall.push(new Rectangle(100,100,15,15));
wall.push(new Rectangle(200,50,15,15));
wall.push(new Rectangle(200,100,15,15));
// Declaraciones para la dirección, la puntuación inicial y el récord inicial
var direccion=0,puntos=0,record=0;
var aEat=new Audio(),aDie=new Audio();
aEat.src='http://octabot.net/juegoscanvas/media/chomp.aac';
aDie.src='http://octabot.net/juegoscanvas/media/dies.aac';
// Función para determinar una coordenada al azar
function random(max){
return parseInt(Math.random()*max);
}
function init(){
// Identificamos el ID para poner el juego sobre el canvas
canvas=document.getElementById('canvas');
// Color de fondo del juego
canvas.style.background='black';
// Contexto en 2D
ctx=canvas.getContext('2d');
// Hacemos que se repita ejecutar() cada 50 milisegundos. Cuanto más alto sea el número, menos rápido irá.
setInterval(ejecutar,velocidad);
}
function ejecutar(){
config();
jugar(ctx);
}
var max = localStorage.getItem("record");
function reset(){
// Restablecemos la puntuación a 0, pasamos la partida a nuevo juego, ponemos la comida en otro punto del juego y reseteamos el récord
puntos=0;
direccion=1;
cuerpo.length=0;
cuerpo.push(new Rectangle(40,40,10,10));
cuerpo.push(new Rectangle(0,0,10,10));
cuerpo.push(new Rectangle(0,0,10,10));
comida.x=random(canvas.width/10-1)*10;
comida.y=random(canvas.height/10-1)*10;
gameover=false;
}
// Si los puntos actuales son superiores al récord anterior, este se sustituye por el nuevo
if(puntos>max){
localStorage.setItem("record",puntos);
}
// Reseteamos el récord y actualizamos la página para que se muestre correctamente
function resetrecord(){
localStorage.removeItem("record");
location.reload();
}
// Función para desactivar los sonidos de la página
function desactivarsonido(){
localStorage.setItem("sonidos","off");
}
// Función para activar los sonidos de la página
function activarsonido(){
localStorage.removeItem("sonidos");
}
function config(){
var volumen = localStorage.getItem("sonidos");
if(!pause){
// Si perdió la partida se resetea la puntuación y coordenadas
if(gameover)
reset();
// Movimiento del cuerpo de la serpiente
for(i=cuerpo.length-1;i>0;i--){
cuerpo[i].x=cuerpo[i-1].x;
cuerpo[i].y=cuerpo[i-1].y;
}
// Cambio de dirección de la serpiente
if(ultimatecla==38&&direccion!=2)
direccion=0;
if(ultimatecla==39&&direccion!=3)
direccion=1;
if(ultimatecla==40&&direccion!=0)
direccion=2;
if(ultimatecla==37&&direccion!=1)
direccion=3;
if(direccion==0)
cuerpo[0].y-=10;
if(direccion==1)
cuerpo[0].x+=10;
if(direccion==2)
cuerpo[0].y+=10;
if(direccion==3)
cuerpo[0].x-=10;
// Si la serpiente sale fuera de la pantalla aparece por el lado contrario por los siguientes if's
if(cuerpo[0].x>canvas.width-cuerpo[0].width)
cuerpo[0].x=0;
if(cuerpo[0].y>canvas.height-cuerpo[0].height)
cuerpo[0].y=0;
if(cuerpo[0].x<0)
cuerpo[0].x=canvas.width-cuerpo[0].width;
if(cuerpo[0].y<0)
cuerpo[0].y=canvas.height-cuerpo[0].height;
// Cuando la serpiente choca con la "comida" pasa la siguiente acción
if(cuerpo[0].intersects(comida)){
// Aumentamos en una unidad su longitud
cuerpo.push(new Rectangle(0,0,10,10));
// Aumentamos en una unidad la puntuación
puntos++;
// Hacemos que la comida aparezca en otro punto del juego al azar
comida.x=random(canvas.width/10-1)*10;
comida.y=random(canvas.height/10-1)*10;
// Reproducimos el sonido
if(volumen=="off"){
} else {
aEat.play();
}
}
// Cuando el cuerpo choca entre sí pasa lo siguiente
for (i=2;i<cuerpo.length;i++){
if(cuerpo[0].intersects(cuerpo[i])){
// Pierde la partida y se resetea su puntuación y se guarda su récord
gameover=true;
pause=true;
if(puntos>max){
localStorage.setItem("record",puntos);
location.reload();
}
// Reproducimos el sonido
if(volumen=="off"){
} else {
aDie.play();
}
}
}
}
for (i=0;i<wall.length;i++){
if(cuerpo.intersects(wall[i])){
alert("Perdiste por chocar con una pared!");
}
}
// Hacemos que si la comida aparece encima de una pared aparezca en otra coordenada y que si el usuario choca con la pared pierda
for (i=0;i<wall.length;i++){
if(comida.intersects(wall[i])){
comida.x=random(canvas.width/10-1)*10;
comida.y=random(canvas.height/10-1)*10;
}
}
// Pausar el juego/despausarlo
if(ultimatecla==13){
pause=!pause;
ultimatecla=null;
}
}
function jugar(ctx){
ctx.clearRect(0,0,canvas.width,canvas.height);
// Dibujamos el cuerpo de la serpiente
for(i=0;i<cuerpo.length;i++){
ctx.fillStyle="#40FF00";
ctx.beginPath();
ctx.arc(cuerpo[i].x,cuerpo[i].y,8,0,Math.PI*2,true);
ctx.fill();
}
// Dibujamos la comida
ctx.fillStyle="white";
ctx.beginPath();
ctx.arc(comida.x,comida.y,8,0,Math.PI*2,true);
ctx.fill();
// Dibujamos las paredes a partir de la puntuación que definamos
var nivel2= 10;
if(puntos>=nivel2){
ctx.fillStyle='#999';
for(i=0;i<wall.length;i++){
ctx.fillRect(wall[i].x,wall[i].y,wall[i].width,wall[i].height);
}
}
// Declaramos el color de texto como amarillo
ctx.fillStyle='yellow';
// Declaramos la alineación del texto al medio
ctx.textAlign='center';
ctx.font = '12px Gill Sans Ultra Bold';
// Escribimos la puntuación del usuario
ctx.fillText('Puntuación: '+puntos,60,12);
if(puntos>max){
ctx.fillText(' Récord: '+puntos,420,12);
} else {
if(!max){
ctx.fillText(' Récord: 0',420,12);
} else {
ctx.fillText(' Récord: '+max,420,12);
}
}
if(pause){
canvas.style.background='gray';
} else {
canvas.style.background='black';
}
if(pause){
if(gameover){
// Si es una partida nueva ponemos el siguiente texto
ctx.fillText('Pulsa ENTER para iniciar una nueva partida',250,200);
} else {
// Si el juego está pausado mostramos el siguiente texto
ctx.fillText('El juego está pausado, pulsa ENTER para reanudar tu partida',250,200);
}
}
}
// Capturamos la última tecla pulsada y la almacenamos en la variable ultimatecla
document.addEventListener('keydown',function(evt){
ultimatecla=evt.keyCode;
},false);
function guardar(){
localStorage.setItem("record",puntos);
alert("Tu récord actual ha sido guardado correctamente!");
}
function suicidio(){
puntos=0;
direccion=1;
cuerpo.length=0;
cuerpo.push(new Rectangle(40,40,10,10));
cuerpo.push(new Rectangle(0,0,10,10));
cuerpo.push(new Rectangle(0,0,10,10));
comida.x=random(canvas.width/10-1)*10;
comida.y=random(canvas.height/10-1)*10;
gameover=true;
localStorage.removeItem("record");
max=0;
}
function Rectangle(x,y,width,height){
this.x=(x==null)?0:x;
this.y=(y==null)?0:y;
this.width=(width==null)?0:width;
this.height=(height==null)?this.width:height;
this.intersects=function(rect){
if(rect!=null){
return(this.x<rect.x+rect.width&&
this.x+this.width>rect.x&&
this.y<rect.y+rect.height&&
this.y+this.height>rect.y);
}
}
}
