Bounty selesai, pengembang menang dengan Conway's Game of Life
Platform web saat ini bergerak maju dengan kecepatan tinggi. Fitur seperti CSS3 animasi , transformasi , drop bayangan dan gradien , <canvas>
, <audio>
dan <video>
tag, SVG , WebGL , dan banyak lagi berarti bahwa Anda dapat melakukan jauh lebih banyak dalam browser, dan dalam kode jauh lebih sedikit, daripada sebelumnya. Tentu saja, banyak pengembang tidak dapat menggunakan fitur-fitur baru itu, karena situs dan aplikasi yang mereka kerjakan harus kompatibel dengan peramban kuno yang dimakan ngengat seperti IE6.
Jadi, apa yang terjadi jika Anda melepas harness? Izinkan diri Anda menggunakan semua dan semua fitur baru yang Anda sukai? Hiduplah sedikit, gila, gunakan fitur-fitur aneh yang ujungnya hanya bisa dimanfaatkan oleh 1% pengguna Anda?
Tentu saja, dengan sumber daya yang tidak terbatas dan kemampuan untuk berbicara dengan server, Anda dapat melakukan segala hal — memuat megabyte kode dan pustaka dan video, dan sebagainya — tetapi tantangan tidak terlalu menarik tanpa kendala. Kendala utama untuk kontes ini adalah: apa yang dapat Anda lakukan dalam URI tunggal, mandiri, 4kdata:
? Mandiri artinya tidak boleh merujuk ke sumber daya eksternal, terhubung ke server menggunakan WebSockets atau XHR, atau semacamnya. Jika Anda ingin menanamkan sumber daya seperti PNG atau MP3, jangan ragu untuk memasukkan data URI ke dalam data Anda, atau temukan cara lain yang cerdas untuk menanamkan sub-sumber daya. 4k berarti 4096 byte, teks ASCII yang disandikan dengan URI dengan benar (Anda dapat menggunakan URI data yang disandikan base64 jika Anda memilih, untuk menghindari penyandian URI, tetapi biasanya teks yang disandikan URI akan lebih kecil daripada base64 untuk teks biasa).
Untuk memberikan inspirasi, tema kontes ini adalah meme StackOverflow . Buat gim unicorn-jousting, generator fakta Jon Skeet, program menggambar berbasis lingkaran bebas, atau apa pun yang berkaitan dengan salah satu meme StackOverflow & meta.so yang populer.
Saya akan mendorong entri yang interaktif dalam beberapa cara; bukan hanya animasi sederhana atau gambar statis, mereka harus menanggapi input pengguna, baik melalui acara, CSS melayang, menggulir, mengubah ukuran jendela browser, atau cara lain yang dapat Anda pikirkan. Namun ini bukan persyaratan yang sulit; Demo hebat yang tidak interaktif akan dipertimbangkan, meskipun interaktivitas lebih disukai.
Entri Anda harus berjalan di setidaknya satu rilis publik setidaknya satu dari 5 browser utama (IE, Firefox, Chrome, Safari, Opera). Hanya rilis arus utama (bukan bangunan dari cabang atau bangunan yang memerlukan tambalan), tanpa pengaturan konfigurasi khusus, plugin, atau apa pun yang tidak disertakan dengan browser stok diizinkan. Build malam, beta, dan kandidat rilis baik-baik saja. Silakan tentukan di entri Anda dengan browser mana Anda telah menguji entri Anda. Tidak ada batasan pada teknologi apa yang dapat Anda gunakan dalam batasan tersebut; Anda dapat melakukan animasi SVG murni, animasi CSS murni, sesuatu dalam JavaScript menggunakan WebGL, atau heck, bahkan sesuatu yang menggunakan XML dan XSLT jika itu sesuai dengan keinginan Anda. Jika Anda dapat menjejalkannya ke dalam data URI yang valid, tanpa ketergantungan eksternal, dan mendapatkan browser untuk menjalankannya, itu adalah permainan yang adil.
Untuk menambah kompetisi di sini, pada hari Senin, 21 Maret, saya akan membuka hadiah untuk pertanyaan ini. Bagaimana saya bisa mendapatkan hadiah ketika saya hanya memiliki 101 perwakilan? Baiklah, semua perwakilan yang saya peroleh dari upvotes ke pertanyaan ini antara sekarang dan Senin akan masuk ke hadiah (hingga batas 500 diperbolehkan untuk satu hadiah; akan sangat sulit bagi saya untuk mencapai batas itu, meskipun, mengingat rep topi). Entri akan diterima selama 6 hari setelah itu; semua entri harus dalam setidaknya 24 jam sebelum hadiah berakhir, untuk memberi saya waktu untuk memeriksa semuanya dan mengevaluasinya. Pada saat itu, saya akan menerima jawaban dengan suara tertinggi, dan memberikan hadiah kepada jawaban favorit saya (yang mungkin atau mungkin tidak sama dengan yang terpilih tertinggi). Kriteria saya untuk pemberian hadiah akan mencakup keindahan, kesenangan, teknik pintar, penggunaan fitur baru yang menarik, interaktivitas, dan ukuran.
Berikut adalah beberapa sumber inspirasi, untuk membantu Anda memulai:
- Eksperimen Chrome , kumpulan demonstrasi platform web modern
- Mozilla Hacks , sebuah blog tentang platform web modern dengan banyak demo fitur baru di Firefox 4
- JS1k , kontes untuk demo JavaScript 1k
- 10k Apart , webapp dalam kontes 10k
- gl64k , kontes demo yang sedang berjalan untuk demo WebGL 64k
- Shader Toy , serangkaian demo tentang apa yang dapat Anda lakukan dengan shader WebGL
Format untuk entri:
Nama entri
data: teks / html, data Anda 20%% 20URIBekerja di Firefox 4 RC, Chrome 10, dan Opera 11
Deskripsi entri Anda; apa fungsinya, mengapa rapi, teknik pintar apa yang Anda gunakan.
<script> // code in expanded form to more easily see how it works </script>
Kredit untuk inspirasi, kode apa pun yang mungkin Anda pinjam, dll.
(StackExchange tampaknya tidak menerima data URI dalam tautan, jadi Anda harus menyematkannya langsung dalam <pre>
tag)
sumber
Jawaban:
SO meme: Semuanya meme
Game of Life Conway, HTML5 + CSS3 + JS,
3.5433.5613.555 byteIni adalah Conway's Game of Life yang menulis sendiri untuk HTML5 dengan kanvas dan CSS3. Saya menulisnya untuk bersenang-senang selama periode kompetisi 10K Apart tetapi saya tidak mengirimkan ini untuk kompetisi.
Versi yang disandikan Base64 mencakup lebih dari 4,61KB data, sedangkan versi aslinya ~ 3543 byte.
Untuk mengompresi ukuran : Kode Javascript yang diperkecil oleh YUI online compressor , lalu oleh packer Dean Edwards . Kode CSS diperkecil oleh kompresor online YUI .
Menggunakan perpustakaan jQuery dari Google API Library.HTML5 dan CSS3 yang valid (versi eksperimental validator w3).Bermain:
<Start>
untuk menjalankan simulasi,<Stop>
untuk menjeda, dan<Next>
untuk menunjukkan langkah selanjutnyaVersi (robot akan mati) yang dapat dibaca manusia:
Kelas dalam sejarah:
sumber
/>
urutan yang dapat Anda ganti dengan>
karena Anda tidak menulis XHTML. Juga, ingatlah untuk menyandikan URI dengan benar hasil Anda; sementara browser mungkin menerima spasi di URI, mereka secara teknis tidak valid.<html>
,<head>
dan<body>
tag (atau tag penutup mereka). Mereka tersirat dalam HTML, dan akan ditambahkan di tempat yang sesuai oleh browser.Maaf untuk menggali utas lama, tetapi saya melihat tantangan ini di bilah samping dan saya tidak bisa menolaknya. Saya tidak keberatan bahwa tantangannya sudah selesai, itu hanya menyenangkan dengan sesuatu.
Mungkin kita bisa mengadakan ronde lagi?
Bagaimanapun, kiriman saya:
Sunting
Maaf untuk menggali ini lagi , tapi sudah lama saya merasa terganggu karena saya tidak bisa mendapatkan ini di bawah 1KB. Sekarang saya sudah melakukannya!
Interaktif, Kubus Berbayang:
960
987 1082 1156 1182 1667 1587byte !, HTML + CSS3 + JSGerakkan mouse Anda.
Bekerja di Chrome (18.sesuatu, tetapi harus bekerja pada yang paling baru).
Saya bermain golf ini dengan cukup baik, saya menyimpan beberapa karakter menggunakan trik yang saya pikir cukup keren: Katakanlah Anda memiliki yang berikut ini:
karakter dapat disimpan dengan mengembalikan fungsi di dalam dirinya sendiri dan melakukan hal berikut:
Penghematan tergantung pada berapa banyak panggilan fungsi yang Anda miliki. Ini mungkin lebih baik untuk kebingungan daripada bermain golf.
Saya juga menyelamatkan karakter dengan mengganti
1000
dengan1e4
, memberikanMath
kelas, dan beberapa fungsi, alias. Menggunakan variabel untuk string berulang (cukup sulit untuk menemukan beberapa simpanan ini). Juga, saya memiliki katastyle
dalam kode saya beberapa kali; beberapa dari mereka adalah string dan yang lainnya seperti pengidentifikasielement.style.whatever
. Menetapkan string ke variabel (D='style
) memungkinkan saya untuk mengganti string denganD
dan untuk mengganti pengidentifikasi seperti ituelement[D].whatever
.Sunting Terbaru: maaf untuk memunculkan comp lama ', tetapi beberapa ide bagaimana mempersingkat ini baru saja datang kepada saya!
sumber
onmousemove
bisa dimodifikasi:onmousemove=function(e){U=K-e.pageX;J=e.pageY-K};
. Dengan cara ini cube akan bergulir ke arah pointer mouse (lebih intuitif).function g(x){alert("hello "+x+"!");return g} g("dave")("martin")("alice")("rose")("bob")("helen")("jo");
dapat menjadig=x=>alert("hello "+x+"!"),g;g("dave")("martin")("alice")("rose")("bob")("helen")("jo");
JavaScript 489 karakter
Ini memainkan permainan Tebak Angka.
Saya mengatasinya dengan kode ini:
sumber