Porque pasa esto?

[phyronx]

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:

var 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:

<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<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.
<br>
    <button onclick='start();'> START </button>
</div>
</body>
<script src="js/game.js"></script>
</html>
 

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. -_-