Buenas estoy creando un juego simple para practicar. Se trata que en un canvas creo 12 cuadrados, de varios colores, aleatorios cogidos de un array, pero siempre debe haber uno rojo, el cual es elque debes clickar.
Ahora pondre el codigo, pero basicamente lo k hago es un for, k de 12 vueltas, y creando un numero aleatorio con Math.random(), si la 'i' del for coincide con el aleatorio, pues el cuadrado es rojo, sino pasa a ser uno del array.
El problema es, que si haces F5 repetidas veces, para ver como o va creando aleatoriamente, alguna vez me salen 2 cuadrados rojos, y segun el codigo eso es imposible..
Hos dejo el codigo, espero lo proveis vosotros y comproveis k crea hasta 3 cuadrados rojos (siempre seguidos).
Ademas, lo avance mas y puse que si pulsavas en el rojo saliera un alert, y cuando salen 2 o 3 rojos solo sale el alert en el primero, los otros me dice que no es rojo -_-.
El codigo:
Código Javascript
:
Ver original<html>
<head>
<title></title>
</head>
<body>
<div align='center'>
<canvas id="myCanvas" width="600" height="600" align='center'/></canvas>
</div>
<script type="text/javascript">
var level = parseInt(localStorage.level);
var size = 40;
var numxfila = 3;
var cont = 0;
var colors=new Array("yellow","green","blue","black");
var elem = document.getElementById('myCanvas'),
elemLeft = elem.offsetLeft,
elemTop = elem.offsetTop,
context = elem.getContext('2d'),
elements = [];
// Add element.
var posx = 10;
var posy = 10;
var aleat2 = Math.random() * 11;
aleat2 = Math.round(aleat2);
if (aleat2 == 0){aleat2 = 1;}
for (var i = 0 ; i <= 11; i++) {
var aleat = Math.random() * 4;
aleat = Math.round(aleat);
if (cont == numxfila) {
cont = 0;
posy += 50;
posx = 10;
};
if (i == aleat2) {
elements.push({
colour: 'red',
width: size,
height: size,
top: posy,
left: posx
});
}else {
elements.push({
colour: colors[aleat],
width: size,
height: size,
top: posy,
left: posx
});
}
posx +=50;
cont +=1;
};
// Render elements.
elements.forEach(function(element) {
context.fillStyle = element.colour;
context.fillRect(element.left, element.top, element.width, element.height);
});
</script>
</body>
</html>