pengantar
Obi-Wan Kenobi, Qui-Gon Jinn dan Darth Maul akan bertarung! Namun, mereka semua lupa membawa lightsaber masing-masing. Tulis sebuah program atau fungsi yang, diberi string Jedi
sebagai input, menghasilkan gambar yang mirip dengan ini * :
dan diberi string Sith
, menghasilkan gambar yang mirip dengan ini:
Spesifikasi gambar
Salah satu dari 3 lightsabers (pisau putih termasuk tepi bundar di ujungnya (2 tepi bundar untuk yang merah) dan termasuk pegangan ) panjangnya 900px (Ini tidak termasuk gradien warna di sekitar pisau).
Tepi bundar di ujung mata pisau adalah setengah lingkaran (perkiraan tersendiri, dengan diameter sama dengan lebar mata pisau).
Blade (yaitu bagian putih lightsaber) selebar 12px.
Lightsabers hijau dan biru dipisahkan oleh 200 px (dari garis tengah bilah hijau ke garis tengah bilah biru).
Pegangan untuk semua 3 lightsabers adalah 180px (1/5 dari total panjang). Oleh karena itu bilah itu sendiri termasuk ujung bundar adalah 720px panjang untuk lightsabers biru dan hijau dan 360px panjang untuk dua bilah lightsaber merah.
Pegangan untuk lightsaber biru dan hijau ada di bagian bawah lightsaber. Pegangan untuk lightsaber merah horizontaly berpusat.
Panjang gradien dari tepi blade putih ke warna sepenuhnya putih adalah 1,5 * lebar blade (misalnya 18px untuk bagian linier).
Gradien hijau berubah dari RGB (0,255,0) menjadi putih (255.255.255) (atau transparan jika lebih mudah bagi Anda untuk menerapkan). Gradien merah berubah dari (255,0,0) menjadi putih, dan gradien biru berubah dari (0,0255) menjadi putih.
Warna pegangannya adalah RGB (128.128.128).
Mungkin ada ruang kosong putih di sekitar lightsaber.
Input
Entah Sith
atau Jedi
sebagai string. Anda dapat mengambil string ini dari STDIN, sebagai argumen fungsi, parameter baris perintah, atau yang serupa lainnya. Anda dapat berasumsi bahwa input akan selalu tepat Sith
atau Jedi
tidak ada yang lain.
Keluaran
Anda harus membuat file gambar yang berisi gambar yang sesuai dengan string input. Anda relatif bebas memilih format gambar apa pun yang Anda inginkan, asalkan itu adalah gambar True Color .
Mencetak gol
Ini adalah kode-golf , jadi jawaban tersingkat dalam byte menang. Semoga kekuatan bersamamu.
* Gambar dalam posting ini tidak ditampilkan ukuran penuh.
sumber
Jawaban:
Solusi HTML / CSS,
765 740541 byteRefactor baru-baru ini menggunakan
:target
pseudo-class daripada a<form>
dan Javascript.Untuk memasukkan salah satu input, tambahkan ke akhir URL sebagai target, misalnya
test.html#Jedi
atautest.html#Sith
Ini dia lagi dengan whitespace dan beberapa komentar:
Lightsabers adalah
<table>
elemen dengan satu sel per bagian (blade / handle) yang tidak dihindarkan melaluiid
atributnya.Pisau diwarnai dengan CSS
box-shadow
dan lightsabers Jedi menjalanitransform: rotate()
.Gambar atau tidak terjadi (klik untuk res penuh):
Jika Anda menambahkan
td{background:#fff}body{background:#000}
ke CSS, Anda akan mendapatkan tampilan gelap yang keren.Diuji dalam Firefox dan Chrome (di Linux). Perhatikan bahwa ini sama sekali tidak memenuhi standar, karena saya mencoba mengecilkan ukurannya sebanyak mungkin.
Terima kasih kepada @manatwork untuk
border-spacing
dan:target
.sumber
:target
pseudo-class , seperti yang pernah saya lakukan . pastebin.com/WtxbSsr3 lalu mengaksesnya seperti file: ///tmp/test.html#Jedi dan file: ///tmp/test.html#Dengan (BTW, perubahan HTMLcellspacing=0
→ CSSborder-spacing:0
terlihat benar di Firefox saya, tetapi tidak diperiksa di browser lain.)border-spacing
waktu yang lama (ini menghemat 25 karakter). The:target
saran diperbolehkan menghapus<form>
dan semua JS. Dalam edit terakhir saya, saya juga memperketatnya lebih jauh. Itu bisa menjadi lebih kecil lagi jika kita gunakan<hr>
denganfloat:left
danclear:left
, tetapi ini harus dilakukan.style>[id]:not(:target){display:none}table{width:900px;height:12px;border-spacing:0}td:last-child{border-radius:0 12px 12px 0}#Sith td:first-child{border-radius:12px 0 0 12px}#Sith td{box-shadow:0 0 18px red}#Jedi{transform:rotate(-90deg);margin:350px 0}#Jedi td{box-shadow:0 0 18px #0f0}*+table{margin:200px 0 0 0}#Jedi *+table td{box-shadow:0 0 18px #00f}td:nth-last-child(2){background:#888;width:180px;box-shadow:none!important}</style><div id=Jedi><table><td><td></table><table><td><td></table></div><table id=Sith><td><td><td></table
<hr>
s sebagai pengganti<table>
s.