Bounty ha terminado, thephpdeveloper gana con Conway's Game of Life
La plataforma web actual avanza a un ritmo rápido. Características tales como animaciones CSS3 , transformaciones , sombras y gradientes , <canvas>
, <audio>
y <video>
etiquetas, SVG , WebGL , y muchos más media que se puede hacer mucho más en el navegador, y en mucho menos código, que nunca antes. Por supuesto, muchos desarrolladores no pueden usar esas nuevas funciones, porque los sitios y aplicaciones en los que trabajan deben ser compatibles con los navegadores antiguos, como IE6.
Entonces, ¿qué pasa si te quitas el arnés? Permítete usar todas y cada una de las nuevas funciones que te gustan. ¿Vivir un poco, volverse loco, usar características extrañas de última generación que solo el 1% de sus usuarios podrán aprovechar?
Por supuesto, con recursos ilimitados y la capacidad de hablar con un servidor, puede hacer todo tipo de cosas: cargar megabytes de código y bibliotecas y videos, etc., pero los desafíos no son muy interesantes sin restricciones. La principal limitación para este concurso es: ¿qué puedes hacer en un único URI 4k autónomo?data:
? Independiente significa que no debe hacer referencia a ningún recurso externo, conectarse a ningún servidor que use WebSockets o XHR, ni nada por el estilo. Si desea incrustar recursos como PNG o MP3, siéntase libre de incluir URI de datos dentro de su URI de datos, o idee alguna otra forma inteligente de incrustar recursos secundarios. 4k significa 4096 bytes, texto ASCII codificado correctamente por URI (puede usar un URI de datos codificado en base64 si lo desea, para evitar la codificación URI, pero generalmente el texto codificado en URI será más pequeño que base64 para texto plano).
Para proporcionar inspiración, el tema del concurso son los memes de StackOverflow . Cree un juego de justas de unicornio, un generador de hechos Jon Skeet, un programa de dibujo basado en un círculo a mano alzada o cualquier cosa que tenga que ver con uno de los populares memes de StackOverflow y meta.so.
Animaría a las entradas que son interactivas de alguna manera; no solo una simple animación o imagen estática, deben responder a la entrada del usuario, ya sea a través de eventos, desplazamiento del CSS, desplazamiento, cambio de tamaño de la ventana del navegador o cualquier otra forma en que se pueda imaginar. Sin embargo, este no es un requisito difícil; Se considerarán grandes demos que no sean interactivas, aunque se preferiría la interactividad.
Su entrada debe ejecutarse en al menos una versión pública de al menos uno de los 5 principales navegadores (IE, Firefox, Chrome, Safari, Opera). Solo se permiten lanzamientos de línea principal (no compilaciones de ramas o compilaciones que requieren parches), sin configuraciones de configuración especiales, complementos o cualquier otra cosa que no venga con el navegador de stock. Las compilaciones nocturnas, las versiones beta y los candidatos de lanzamiento están bien. Especifique en su entrada con qué navegadores ha probado su entrada. No hay limitaciones sobre qué tecnologías puede utilizar dentro de esas limitaciones; puedes hacer una animación SVG pura, una animación CSS pura, algo en JavaScript usando WebGL, o diablos, incluso algo que use XML y XSLT si eso te gusta. Si puede incluirlo en un URI de datos válido, sin dependencias externas, y obtener un navegador para ejecutarlo, es un juego justo.
Para agregar a la competencia aquí, el lunes 21 de marzo, abriré una recompensa por esta pregunta. ¿Cómo puedo pagar una recompensa cuando solo tengo 101 repeticiones? Bueno, todas las repeticiones que obtenga de los votos a favor de esta pregunta entre ahora y el lunes irán a la recompensa (hasta el límite de 500 permitido para una sola recompensa; sin embargo, sería bastante difícil para mí alcanzar ese límite, dado el representante gorra). Las entradas serán aceptadas por 6 días después de eso; todas las entradas deben realizarse al menos 24 horas antes de que caduque la recompensa, para darme tiempo de revisarlas y evaluarlas. En ese momento, aceptaré la respuesta más votada y daré la recompensa por mi respuesta favorita (que puede ser o no la misma que la más votada). Mis criterios para otorgar la recompensa incluirán belleza, diversión, técnica inteligente, uso interesante de nuevas características, interactividad y tamaño.
Aquí hay algunas fuentes de inspiración para comenzar:
- Chrome Experiments , una colección de demostraciones de la plataforma web moderna
- Mozilla Hacks , un blog sobre la plataforma web moderna con muchas demostraciones de nuevas características en Firefox 4
- JS1k , un concurso para demostraciones de JavaScript de 1k
- 10k Aparte , una aplicación web en un concurso de 10k
- gl64k , un concurso de demostración actualmente en ejecución para demostraciones de WebGL de 64k
- Shader Toy , un conjunto de demostraciones de lo que puedes hacer con los sombreadores WebGL
Formato para entradas:
Nombre de entrada
data: text / html, Your% 20data% 20URIFunciona en Firefox 4 RC, Chrome 10 y Opera 11
Descripción de su entrada; qué hace, por qué es ordenado, qué técnicas inteligentes usaste.
<script> // code in expanded form to more easily see how it works </script>
Cualquier crédito para inspiraciones, cualquier código que haya tomado prestado, etc.
(StackExchange parece no aceptar URI de datos en los enlaces, por lo que deberá incrustarlo directamente en una <pre>
etiqueta)
fuente
Respuestas:
SO meme: Todo es un meme
Juego de la vida de Conway, HTML5 + CSS3 + JS,
3,5433,5613,555 bytesEste es el juego de la vida de Conway escrito para HTML5 con Canvas y CSS3. Lo escribí por diversión durante el período de la competencia 10K Apart, pero no lo envié para la competencia.
La versión codificada en Base64 abarca más de 4.61 KB de datos, mientras que la versión original es de ~ 3543 bytes.
Para comprimir el tamaño : código Javascript minimizado por el compresor en línea YUI , luego por el empaquetador de Dean Edwards . Código CSS minimizado por el compresor en línea YUI .
Utiliza la biblioteca jQuery de la Biblioteca API de Google.HTML5 y CSS3 válidos (versión experimental del validador w3).Jugar:
<Start>
para ejecutar la simulación,<Stop>
pausar y<Next>
mostrar el siguiente pasoLa versión legible por humanos (los robots morirán):
Una clase de historia:
fuente
/>
secuencias con las que puede reemplazar,>
ya que no está escribiendo XHTML. Además, recuerde codificar correctamente URI su resultado; Si bien los navegadores pueden aceptar espacios en los URI, no son técnicamente válidos.<html>
,<head>
y<body>
etiquetas (ni sus etiquetas de cierre). Están implícitos en HTML y el navegador los agregará en los lugares apropiados.Lamento desenterrar un hilo viejo, pero vi este desafío en la barra lateral y no pude resistirme. No me importa que el desafío haya terminado realmente, fue divertido pensar en algo.
Tal vez podríamos tener otra ronda?
De todos modos, mi presentación:
Editar
Lamento desenterrar esto nuevamente , pero me molestó por años que no pude obtener esto por debajo de 1 KB. Ahora lo he hecho!
Cubo sombreado interactivo:
960
987 1082 1156 1182 1667 1587bytes !, HTML + CSS3 + JSMueve tu mouse.
Funciona en Chrome (18.algo, pero debería funcionar en los más recientes).
Jugué golf bastante bien, salvé algunos personajes usando un truco que pensé que era genial: Digamos que tienes lo siguiente:
los caracteres se pueden guardar devolviendo la función dentro de sí mismo y haciendo lo siguiente:
El ahorro depende de cuántas llamadas de función tenga. Sin embargo, esto es probablemente mejor para la ofuscación que para el golf.
También guardé un personaje reemplazándolo
1000
con1e4
, dando a laMath
clase, y algunas de sus funciones, alias. Usar variables para cadenas repetidas (bastante difícil de encontrar algunos de estos guardados). Además, tuve la palabrastyle
en mi código varias veces; algunos de ellos eran cadenas y otros identificadores similareselement.style.whatever
. Asignar la cadena a una variable (D='style
) me permitió reemplazar las cadenas conD
y reemplazar los identificadores asíelement[D].whatever
.Última edición: lamento traer una vieja compilación ', ¡pero algunas ideas sobre cómo acortar esto acaban de llegar a mí!
fuente
onmousemove
podría ser modificado:onmousemove=function(e){U=K-e.pageX;J=e.pageY-K};
. De esta manera, el cubo rodará hacia el puntero del mouse (más intuitivo).function g(x){alert("hello "+x+"!");return g} g("dave")("martin")("alice")("rose")("bob")("helen")("jo");
puede llegar a serg=x=>alert("hello "+x+"!"),g;g("dave")("martin")("alice")("rose")("bob")("helen")("jo");
JavaScript 489 caracteres
Esto juega al juego Adivina un número.
Lo resolví con este código:
fuente