| Javascript sólo "para validar formularios"
Hace una semana, un amigo del instituto me dijo textualmente, que "Javascript sólo sirve para validar formularios"; y me reto a hacer algo que le sorprendiese con Javascript(sin ayuda de frameworks) en una semana, y los resultados han sido estos: 1.Dibujo de cuadrados:
Controles:n para crear cuadrado,+ para aumentar su tamaño, - para reducirlo,moverlo con las teclas de arriba,abajo, izquierda y derecha y pulsar sobre cualquier cuadrado para seleccionarlo. Cita: <html><head><script type="text/javascript">
window.onload = function (){
id = document.getElementById('pixel');
}
window.onclick = function (e){
id = e.target;
}
document.onkeydown = function (e){
car = e.keyCode;
pixel = id;
if(car == 37){
pixel.style.left = parseInt(pixel.style.left.split("px")[0]) - 10 + "px";
}
if(car == 39){
pixel.style.left = parseInt(pixel.style.left.split("px")[0]) + 10 + "px";
}
if(car == 38){
pixel.style.top = parseInt(pixel.style.top.split("px")[0]) - 10 + "px";
}
if(car == 40){
pixel.style.top = parseInt(pixel.style.top.split("px")[0]) + 10 + "px";
}
if(car == 107 || car == 187){
pixel.style.width = parseInt(pixel.style.width.split("px")[0]) + 10 + "px";
pixel.style.height = parseInt(pixel.style.height.split("px")[0]) + 10 + "px";
}
if(car == 109 || car == 189){
pixel.style.width = parseInt(pixel.style.width.split("px")[0]) - 10 + "px";
pixel.style.height = parseInt(pixel.style.height.split("px")[0]) - 10 + "px";
}
if(car == 46){
document.body.removeChild(pixel);
}
if(car == 78){
nuevodiv();
}
}
function nuevodiv(){
elemento = document.createElement("div");
elemento.style.width = "50px";
elemento.style.height = "50px";
elemento.style.position = "absolute";
elemento.style.left = "0px";
elemento.style.top = "0px";
elemento.style.backgroundColor="rgb("+Math.round(M ath.random()*255)+","+Math.round(Math.random()*255 )+","+Math.round(Math.random()*255)+")";
document.body.appendChild(elemento);
id = elemento;
}
</script></head><body></body>
</html> http://jsfiddle.net/patkoala/WdzTx/embedded/result/ 2.Pantalla llena de colores aleatorios:
Creo que no hay nada más que explicar  http://jsfiddle.net/patkoala/WdzTx/
PD:Quite el código de este en el post para evitar el máximo de caracteres. 3.Convertidor de imágenes a div's
Convierte una imágen en un monton de divs de diferentes colores que forman dicha imágen.Sólo hay que especificar la ruta de la imágen en el input text y pulsar en convertir, y en el textarea aparecerá el resultado HTML. Cita: <html><head><script type="text/javascript">
function sacaimagen(src){
i = 0;
var img = new Image();
img.src = src;
context = document.getElementById('canvas').getContext('2d') ;
ancho = img.width;
alto = img.height;
document.getElementById('canvas').width = ancho;
document.getElementById('canvas').height = alto;
context.drawImage(img, 0, 0);
elemento = "";
intervalo = setInterval(function (){
i++;
console.log(alto);
for(o = 1;o<ancho;o++){
data = context.getImageData(o, i, 1, 1).data;
elemento += "<div style='position:absolute;left:"+o+"px;top:"+i+"px; width:1px;height:1px;background-color:rgb("+data[0]+","+data[1]+","+data[2]+");'></div>";
if(i == alto-1){
document.getElementById('textarea').value = elemento;
clearInterval(intervalo);
}
}
},100);
}
</script></head><body><canvas id="canvas" style="visibility:hidden;"></canvas><textarea id="textarea"></textarea><input type="text" id="texto"><button onclick="sacaimagen(document.getElementById('texto ').value);">Convertir</button><body></html> 4.Laberinto
En realidad no es un laberinto, pero no sabía como llamarlo exactamente: Cita: <html><head><script type="text/javascript">
window.onload = function (){
lugar = new Array();
lugar[0] = [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1, 1,1,1,1,1];
lugar[1] = [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,0,1];
lugar[2] = [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,0,1];
lugar[3] = [1,1,1,1,1,1,1,1,1,1,1,0,0,0,1,1,1,1,1,1,1,1,1,1,1, 1,1,1,1,1];
lugar[4] = [0,0,0,0,0,0,0,0,0,0,1,0,0,0,1,0,0,0,0,0,0,0,0,0,0, 0,0,0,0,0];
lugar[5] = [0,0,0,0,0,0,0,0,0,0,1,0,0,0,1,1,1,1,1,1,1,1,1,1,1, 1,1,1,1,1,1,1,1,1];
lugar[6] = [0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,0,0,0,0,0,1];
lugar[7] = [0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1, 1,1,1,1,1,1,1,0,1];
lugar[8] = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,0,0,0,1,0,1];
lugar[9] = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1, 1,1,1,1,1,1,1,0,1,1,1,1,1,1,1,1];
lugar[10] = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0, 0,0,1,0,1,0,0,0,0,0,0,0,0,0,1,1];
lugar[11] = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0, 0,0,1,0,1,0,0,0,0,0,0,0,0,0,1,1];
lugar[12] = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1, 0,0,1,1,1,0,0,0,0,0,0,0,0,0,1,1];
lugar[13] = [0,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1, 0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,0];
lugar[14] = [0,0,0,0,1,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1, 0,0,1,1,1,1,1,1,0,0,0,0,0,0,0,0];
lugar[15] = [0,0,0,0,1,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1, 0,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0];
lugar[16] = [0,0,0,0,1,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1, 0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0];
lugar[17] = [0,0,0,0,1,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1, 0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0];
lugar[18] = [0,0,0,0,1,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1, 0,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0];
lugar[19] = [0,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1, 0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0];
lugar[20] = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1, 1,1,1,1,1,0,1,1,1,1,1,0,0,0,0,0];
lugar[21] = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,1,0,0,0,0,1,1,1,1,1,1,1,1];
lugar[22] = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,1,0,1,0,0,0,0,0,0,0,0,0,1];
lugar[23] = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,1,0,1,0,0,1,1,1,1,1,1,1,1];
lugar[24] = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,1,0,1,0,0,1];
lugar[25] = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,1,0,1,0,0,1];
lugar[26] = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,1,0,1,0,0,1];
lugar[27] = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,1,0,1,0,0,1];
lugar[28] = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,1,1,1,0,1,1];
lugar[29] = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,0,0,1,0,1,0];
lugar[30] = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,0,0,1,0,1,0];
lugar[31] = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,0,0,1,0,1,0];
lugar[32] = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,0,0,1,0,1,0];
lugar[33] = [0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1, 1,1,1,1,1,1,0,1,1,1,1,1,1,1,1,1,1,1,1];
lugar[34] = [0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1];
lugar[35] = [0,0,0,0,0,0,0,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,1, 1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1];
lugar[36] = [0,0,0,0,0,0,0,0,0,0,0,1,0,1,1,1,1,1,1,1,1,1,1,1,1, 1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
lugar[37] = [0,0,0,0,0,0,0,0,0,0,0,1,0,1,1,1,1,0,0,0,0,0,0,0,0, 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
lugar[38] = [0,0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0];
for(i in lugar){
for(o in lugar[i]){
elemento = document.createElement("div");
elemento.style.backgroundColor = (lugar[i][o] == 0) ? "white":"black";
elemento.style.position = "absolute";
elemento.style.left = o * 10;
elemento.style.top = i * 10;
elemento.style.width = 10;
elemento.style.height = 10;
elemento.id = i+","+o;
document.body.appendChild(elemento);
}
}
alto = 10;
largo = 10;
elemento = document.createElement("div");
elemento.style.position = "absolute";
elemento.style.backgroundColor = "red";
elemento.style.left = largo;
elemento.style.top = alto;
elemento.style.width = 10;
elemento.style.height = 10;
elemento.id = "person";
document.body.appendChild(elemento);
}
function actualizar(largo,alto){
document.getElementById('person').style.left = largo;
document.getElementById('person').style.top = alto;
if(largo/10 == 34 && alto/10 == 22){
var larg = largo / 10 - 1;
document.getElementById(alto/10 + "," + larg).style.backgroundColor = "black";
lugar[alto/10][larg] = 1;
alert("Has perdido :(");
}
if(largo/10 == 5 && alto/10 == 18){
var alt = alto / 10 - 1;
document.getElementById(alt + "," + largo/10).style.backgroundColor = "black";
lugar[alt][largo/10] = 1;
alert("Has perdido :(");
}
if(largo/10 == 10 && alto/10 == 34){
var larg = largo / 10 + 1;
document.getElementById(alto/10 + "," + larg).style.backgroundColor = "black";
lugar[alto/10][larg] = 1;
alert("Has perdido :(");
}
}
window.onkeydown = function (e){
abajo = 40;
arriba = 38;
derecha = 39;
izquierda = 37;
if(e.keyCode == abajo){
alto = alto + 10;
if(lugar[alto/10][largo/10] == 0){
} else {
alto = alto - 10;
}
if(largo/10 == 12 && alto/10 == 37){
alto = 160;
largo = 50;
}
}
if(e.keyCode == arriba){
alto = alto - 10;
if(lugar[alto/10][largo/10] == 0){
} else {
alto = alto + 10;
}
if(largo/10 == 5 && alto/10 == 14){
alto = 110;
largo = 280;
}
if(largo/10 == 28 && alto/10 == 10){
alert("Has ganado :)");
}
}
if(e.keyCode == derecha){
largo = largo + 10;
if(lugar[alto/10][largo/10] == 0){
} else {
largo = largo - 10;
}
}
if(e.keyCode == izquierda){
largo = largo - 10;
if(lugar[alto/10][largo/10] == 0){
} else {
largo = largo + 10;
}
}
actualizar(largo,alto);
}
</script>
</head><body></body></html> No quedó convencido del todo, y me gustaría llevar este reto un poco más allá y compartirlo con los miembros del foro, ya que hay verdaderos genios aquí. |