Bounty ist vorbei, der Entwickler gewinnt mit Conways Game of Life
Die Webplattform schreitet heute rasant voran. Features wie CSS3 - Animationen , Transformationen , Schlagschatten und Verläufe , <canvas>
, <audio>
und <video>
Tags, SVG , WebGL und viele mehr bedeutet , dass Sie weit mehr im Browser tun, und in weit weniger Code, als je zuvor. Natürlich können viele Entwickler diese neuen Funktionen nicht nutzen, da die Websites und Anwendungen, an denen sie arbeiten, mit alten, von Motten gefressenen Browsern wie IE6 abwärtskompatibel sein müssen.
Was passiert also, wenn Sie den Gurt ausziehen? Erlauben Sie sich, alle neuen Funktionen zu nutzen, die Ihnen gefallen? Ein bisschen leben, verrückt werden, verrückte Funktionen nutzen, die nur 1% Ihrer Benutzer nutzen können?
Natürlich können Sie mit unbegrenzten Ressourcen und der Möglichkeit, mit einem Server zu kommunizieren, alle möglichen Aufgaben ausführen - z. B. Megabyte an Code, Bibliotheken und Videos laden -, aber Herausforderungen sind ohne Einschränkungen nicht sehr interessant. Die Hauptbeschränkung für diesen Wettbewerb ist: Was können Sie in einer einzelnen, eigenständigen 4k- URI tun data:
?? Eigenständig bedeutet, dass es sich nicht auf externe Ressourcen beziehen, über WebSockets oder XHR eine Verbindung zu Servern herstellen oder auf ähnliche Weise verfahren darf. Wenn Sie Ressourcen wie PNGs oder MP3s einbetten möchten, können Sie Daten-URIs in Ihre Daten-URI einbinden oder eine andere clevere Möglichkeit zum Einbetten von Subressourcen finden. 4k bedeutet 4096 Bytes, ordnungsgemäß URI-codierter ASCII-Text (Sie können gegebenenfalls einen Base64-codierten Daten-URI verwenden, um eine URI-Codierung zu vermeiden. Normalerweise ist URI-codierter Text jedoch kleiner als Base64 für Nur-Text).
Das Thema des Wettbewerbs sind StackOverflow-Memes . Erstellen Sie ein Einhorn-Turnier-Spiel, einen Jon Skeet-Faktgenerator, ein Freihandkreis-basiertes Zeichenprogramm oder alles, was mit einem der beliebten Memes von StackOverflow & meta.so zu tun hat.
Ich würde zu Einträgen ermutigen, die auf irgendeine Weise interaktiv sind. nicht nur eine einfache Animation oder ein statisches Bild, sondern sie sollten auf Benutzereingaben reagieren, sei es durch Ereignisse, CSS-Hover, Scrollen, Ändern der Größe des Browserfensters oder auf eine andere Art und Weise, die Sie sich vorstellen können. Dies ist jedoch keine schwierige Anforderung. Gute Demos, die nicht interaktiv sind, werden berücksichtigt, Interaktivität wird jedoch bevorzugt.
Ihr Eintrag muss in mindestens einer öffentlichen Version von mindestens einem der 5 wichtigsten Browser (IE, Firefox, Chrome, Safari, Opera) ausgeführt werden. Es sind nur Hauptversionen (keine Builds aus Zweigen oder Builds, für die Patches erforderlich sind) ohne spezielle Konfigurationseinstellungen, Plugins oder andere Elemente zulässig, die nicht im Standardbrowser enthalten sind. Nächtliche Builds, Betas und Release-Kandidaten sind in Ordnung. Bitte geben Sie in Ihrem Eintrag an, mit welchen Browsern Sie Ihren Eintrag getestet haben. Es gibt keine Einschränkungen hinsichtlich der Technologien, die Sie innerhalb dieser Einschränkungen verwenden dürfen. Sie können eine reine SVG-Animation, eine reine CSS-Animation, etwas in JavaScript unter Verwendung von WebGL oder sogar etwas, das XML und XSLT verwendet, erstellen, wenn Sie dies wünschen. Wenn Sie es in eine gültige Daten-URI ohne externe Abhängigkeiten packen und einen Browser zum Ausführen veranlassen können, ist es ein faires Spiel.
Um den Wettbewerb hier am Montag, dem 21. März, zu erweitern, werde ich ein Kopfgeld für diese Frage eröffnen. Wie kann ich mir ein Kopfgeld leisten, wenn ich nur 101 Wiederholungen habe? Nun, alle Wiederholungen, die ich durch die Aufwärtsstimmen zu dieser Frage zwischen jetzt und Montag erhalte, fließen in die Prämie ein (bis zu dem Limit von 500, das für eine einzelne Prämie zulässig ist; es wäre jedoch ziemlich schwierig für mich, dieses Limit zu erreichen, wenn ich die Wiederholungen bedenke Deckel). Beiträge werden 6 Tage später akzeptiert. Alle Einträge müssen mindestens 24 Stunden vor Ablauf der Prämie eingegangen sein, damit ich Zeit habe, sie alle zu überprüfen und auszuwerten. An diesem Punkt akzeptiere ich die Antwort mit der höchsten Bewertung und gebe die Prämie für meine Lieblingsantwort (die mit der mit der höchsten Bewertung identisch sein kann oder nicht). Meine Kriterien für die Vergabe der Prämie sind Schönheit, Spaß, clevere Technik, interessante Nutzung neuer Funktionen, Interaktivität und Größe.
Hier sind einige Inspirationsquellen, um Ihnen den Einstieg zu erleichtern:
- Chrome Experiments , eine Sammlung von Demonstrationen der modernen Webplattform
- Mozilla Hacks , ein Blog über die moderne Webplattform mit vielen Demos der neuen Funktionen in Firefox 4
- JS1k , ein Wettbewerb für 1k JavaScript-Demos
- 10k Apart , eine Webapp im 10k Contest
- gl64k , ein Demo-Wettbewerb, der derzeit für 64k-WebGL-Demos läuft
- Shader Toy , eine Reihe von Demos, die zeigen, was Sie mit WebGL-Shadern tun können
Format für Einträge:
Name des Eintrags
Daten: Text / HTML, Ihre% 20Daten% 20URIFunktioniert in Firefox 4 RC, Chrome 10 und Opera 11
Beschreibung Ihres Eintrags; was es macht, warum es ordentlich ist, welche cleveren Techniken du benutzt hast.
<script> // code in expanded form to more easily see how it works </script>
Guthaben für Inspirationen, Code, den Sie möglicherweise ausgeliehen haben usw.
(StackExchange akzeptiert offenbar keine Daten-URIs in Links. Sie müssen sie daher direkt in ein <pre>
Tag einbetten. )
quelle
Antworten:
SO meme: Alles ist ein Meme
Conways Spiel des Lebens, HTML5 + CSS3 + JS,
3,5433,5613,555 BytesDies ist Conways Spiel des Lebens, das ich selbst für HTML5 mit Canvas und CSS3 geschrieben habe. Ich habe es zum Spaß während des 10K Apart-Wettbewerbs geschrieben, aber ich habe es nicht für den Wettbewerb eingereicht.
Die Base64-codierte Version umfasst mehr als 4,61 KB Daten, während die ursprüngliche Version ~ 3543 Byte umfasst.
So komprimieren Sie die Größe : Javascript-Code, der vom YUI-Online-Kompressor und anschließend vom Packer von Dean Edwards minimiert wurde . CSS-Code von YUI Online-Kompressor minimiert .
Verwendet die jQuery-Bibliothek aus der Google API-Bibliothek.Gültiges HTML5 und CSS3 (experimentelle Version des w3-Validators).Spielen:
<Start>
, um die Simulation auszuführen,<Stop>
anzuhalten und<Next>
den nächsten Schritt anzuzeigenDie für Menschen lesbare (Roboter sollen sterben) Version:
Eine Klasse in der Geschichte:
quelle
/>
Sequenzen, die Sie ersetzen können,>
da Sie kein XHTML schreiben. Denken Sie auch daran, Ihr Ergebnis mit einer URI-Kodierung zu versehen. Browser akzeptieren möglicherweise Leerzeichen in URIs, sind jedoch technisch nicht gültig.<html>
,<head>
und<body>
Tags (oder deren schließende Tags). Sie sind in HTML impliziert und werden vom Browser an den entsprechenden Stellen hinzugefügt.Es tut mir leid, einen alten Faden ausgegraben zu haben, aber ich habe diese Herausforderung an der Seitenleiste gesehen und konnte einfach nicht widerstehen. Mir macht es nichts aus, dass die Herausforderung wirklich vorbei ist, es hat einfach Spaß gemacht, etwas zu erfinden.
Vielleicht könnten wir noch eine Runde haben?
Wie auch immer, mein Beitrag:
Bearbeiten
Es tut uns Leid , dies zu graben , bis wieder , aber es störte mich seit Ewigkeiten , dass ich das nicht unter 1 KB bekommen konnte. Jetzt habe ich es geschafft!
Interaktiver, schattierter Würfel:
960
987 1082 1156 1182 1667 1587Bytes !, HTML + CSS3 + JSBewegen Sie die Maus.
Funktioniert in Chrome (18.etwas, sollte aber auf den neuesten funktionieren).
Ich habe das ziemlich gut gespielt und ein paar Charaktere mit einem Trick gespeichert, den ich für ziemlich cool hielt: Angenommen, Sie haben Folgendes:
Zeichen können gespeichert werden, indem die Funktion in sich selbst zurückgegeben und folgende Schritte ausgeführt werden:
Die Einsparungen hängen davon ab, wie viele Funktionsaufrufe Sie haben. Dies ist jedoch wahrscheinlich besser zur Verschleierung als zum Golfen.
Ich sparte auch ein Zeichen durch das Ersetzen
1000
mit1e4
, so dass dieMath
Klasse, und einige seiner Funktionen, Aliase. Verwenden von Variablen für wiederholte Zeichenfolgen (einige dieser Speicherungen sind nur schwer zu finden). Außerdem hatte ich das Wortstyle
einige Male in meinem Code; Einige von ihnen waren Zeichenfolgen und andere Identifikatoren wieelement.style.whatever
. Das Zuweisen der Zeichenfolge zu einer Variablen (D='style
) ermöglichte es mir, die Zeichenfolgen durchD
und die Bezeichner wie folgt zu ersetzenelement[D].whatever
.Letzte Änderung: Es tut mir leid, einen alten Comp aufzurufen, aber einige Ideen, wie man diesen verkürzen kann, sind mir gerade eingefallen!
quelle
onmousemove
werden könnte geändert:onmousemove=function(e){U=K-e.pageX;J=e.pageY-K};
. Auf diese Weise rollt der Würfel in Richtung des Mauszeigers (intuitiver).function g(x){alert("hello "+x+"!");return g} g("dave")("martin")("alice")("rose")("bob")("helen")("jo");
können Sieg=x=>alert("hello "+x+"!"),g;g("dave")("martin")("alice")("rose")("bob")("helen")("jo");
JavaScript 489 Zeichen
Hiermit wird das Spiel "Rate eine Zahl" gespielt.
Ich habe es mit diesem Code ausgearbeitet:
quelle