Muchas gracias maycolalvarez! Ese era el error.
Ahora estuve toqueteandolo un poco mas, para añadir eventos y niveles.
Peor otra vez llego a un punto que no se porque pasa lo que pasa...
Tengo una funcion Start que dibuja los cuadrados en el cambas, guarda los elementos en un array y crea los eventos de click.
Si pulsas el rojo se para el tiempo, sube un nivel 'level +=1',detiene el listener, borra todo y redibuja otra vez con la funcion start, esta vez con un cuadrado mas. Si por el contrario pulsas en uno erronio, aparte del mensaje, cambia el level a 1 otra vez, y lo otro igual.
Eso es la teoria, pero en la practica, aunque no te equivoques, los niveles no se suman 1 a 1, sino k van 1,2,4,8,12,16,20.. etc...
Aparte, en el nivel 4 o 6 normalmente todo se descontrola, pulsas sobre el rojo y dice que te has equivocado, y adems de sumar mas niveles de los k son, añade el doble o mas de cuadrados. cuando es una simple funcion k le dice k sume 1.
El codigo:
Código Javascript
:
Ver originalvar level = 1;
var anchurapantalla = screen.availWidth;
var alturapantalla = screen.availHeight;
var popup = document.getElementById('alert');
popup.style.left= (anchurapantalla / 2) -100;
popup.style.top= (alturapantalla / 2) -100
var elem = document.getElementById('canvas'),
elemLeft = elem.offsetLeft,
elemTop = elem.offsetTop,
context = elem.getContext('2d'),
elements = [];
elem.width = anchurapantalla;
elem.height = alturapantalla;
context.fillRect(0, 0, anchurapantalla, alturapantalla);
var size = 40;
var numxfila = 3;
var posx = 10;
var posy = 10;
var sumax = 50;
var a = document.getElementById("time");
var time = 222;
var colors=new Array("yellow","green","blue","white","orange");
var timer ;
//AGREGO LOS LISTENERS A LOS ELEMENTOS
function listener(event){
var x = event.pageX - elemLeft,
y = event.pageY - elemTop;
console.log(x, y);
elements.forEach(function(element) {
if (y > element.top && y < element.top + element.height && x > element.left && x < element.left + element.width) {
if (element.colour == 'red') {
elem.removeEventListener('click', listener, false);
clearInterval(timer);
time = 222;
posx = 10;
level +=1;
context.fillStyle="#000000";
context.fillRect(0, 0, anchurapantalla, alturapantalla);
start();
}else{
elem.removeEventListener('click', listener, false);
clearInterval(timer);
context.fillStyle="#000000";
context.fillRect(0, 0, anchurapantalla, alturapantalla);
alert('Fallaste! llegaste al nivel '+level );
time = 222;
posx = 10;
level = 1;
start();
}
}
});
}
function start(){
var rojo = Math.floor((Math.random()*level));
rojo = Math.round(rojo);
if (rojo == 0) { rojo = 1;};
//CREO EL TEXTO
context.fillStyle = '#ffffff';
context.font = 'italic bold 11px sans-serif';
context.textBaseline = 'bottom';
context.fillText('LeVeL: '+level, alturapantalla/2, 30);
document.getElementById('alert').style.display = "none";
var cont = 0;
for (var i = 1 ; i <= level; i++) {
var color = Math.random() * 4;
color = Math.round(color);
if (cont == numxfila) {
cont = 0;
posy += 50;
posx = 10;
};
if (i == rojo) {
elements.push({
colour: 'red',
width: size,
height: size,
top: posy,
left: posx
});
}else {
elements.push({
colour: colors[color],
width: size,
height: size,
top: posy,
left: posx
});
}
posx += sumax;
cont += 1;
};
// Creo los elementos.
elements.forEach(function(element) {
context.fillStyle = element.colour;
context.fillRect(element.left, element.top, element.width, element.height);
});
//ejecuto el listener
elem.addEventListener('click', listener, false);
//EMPIEZA L CUENTA ATRAS
timer = setInterval(ciclo,1000,false);
}
function ciclo(){
time -=1;
document.getElementById('time').innerHTML = time;
if(time == 0){
clearInterval(timer);
alert('Fuiste demasiado lento');
}
}
Hos pongo la parte de html por si quereis provarlo:
Código HTML:
Ver original <link rel="stylesheet" type="text/css" href="css/style.css" /> <div width='100%' height='10' align = 'center'>Time:
<font id='time' size='5'> 3
</font></div> <canvas id="canvas" width="100" height="100" align='center'/></canvas> <div id='alert' width='100' height='100' align='center'> 3 SEGUNDOS PARA PULSAR EL ROJO.
PD: En niveles superiores, crea tambien mas de uno rojo, y e comprovado que si clickeas en uno igual te suma 4 niveles, en otro solo te suma 1 y en otro te dice k no es rojo y pierdes. -_-
