Chủ đề nền

Giới thiệu

Obi-Wan Kenobi, Qui-Gon Jinn và Darth Maul sắp chiến đấu! Tuy nhiên, tất cả họ đều quên mang theo thanh kiếm ánh sáng tương ứng. Viết chương trình hoặc hàm, được đưa ra chuỗi Jedilàm đầu vào, tạo ra một hình ảnh tương tự như thế này ^* :

và đưa ra chuỗi Sith, tạo ra một hình ảnh tương tự như thế này:

Thông số kỹ thuật hình ảnh

• Bất kỳ trong số 3 thanh kiếm ánh sáng (lưỡi kiếm trắng bao gồm cạnh tròn ở cuối (2 cạnh tròn cho màu đỏ) và bao gồm cả tay cầm ) dài 900px (Điều này không bao gồm độ dốc màu quanh lưỡi dao).

• Cạnh tròn ở cuối lưỡi dao là một nửa vòng tròn (rõ ràng là một xấp xỉ rời rạc của nó) với đường kính bằng chiều rộng của lưỡi dao.

• Lưỡi dao (tức là phần màu trắng của thanh kiếm ánh sáng) rộng 12px.

• Các thanh kiếm ánh sáng màu xanh lá cây và màu xanh được phân tách bằng 200 px (từ đường trung tâm của lưỡi dao màu xanh lá cây đến đường trung tâm của lưỡi kiếm màu xanh).

• Tay cầm cho cả 3 thanh đèn là 180px (1/5 tổng chiều dài). Do đó, bản thân lưỡi bao gồm (các) cạnh tròn dài 720px cho các thanh ánh sáng màu xanh dương và xanh lục và dài 360px cho hai lưỡi của thanh kiếm ánh sáng màu đỏ.

• Tay cầm cho thanh kiếm ánh sáng màu xanh và màu xanh lá cây nằm ở dưới cùng của thanh kiếm ánh sáng. Tay cầm cho thanh kiếm ánh sáng màu đỏ được đặt ở giữa.

• Độ dài của gradient từ mép của lưỡi trắng đến màu trắng hoàn toàn là 1,5 * chiều rộng của lưỡi dao (ví dụ 18px cho các phần tuyến tính).

• Độ dốc màu xanh lá cây chuyển từ RGB (0,255,0) sang màu trắng (255,255,255) (hoặc trong suốt nếu bạn dễ thực hiện hơn). Độ dốc màu đỏ chuyển từ (255,0,0) sang màu trắng và độ dốc màu xanh chuyển từ (0,0,255) sang màu trắng.

• Màu sắc của tay cầm là RGB (128,128,128).

• Có thể có không gian trống màu trắng xung quanh (các) thanh ánh sáng.

Đầu vào

Hoặc Sithhoặc Jedinhư là một chuỗi. Bạn có thể lấy chuỗi này từ STDIN, làm đối số hàm, tham số dòng lệnh hoặc bất cứ thứ gì tương tự. Bạn có thể cho rằng đầu vào sẽ luôn chính xác Sithhoặc Jedikhông có gì khác.

Đầu ra

Bạn phải tạo một tệp hình ảnh chứa hình ảnh tương ứng với chuỗi đầu vào. Bạn có thể tự do lựa chọn bất kỳ định dạng hình ảnh nào bạn muốn, miễn là đó là hình ảnh True Color .

Chấm điểm

Đây là môn đánh gôn , vì vậy câu trả lời ngắn nhất bằng byte sẽ thắng. Mạnh mẽ lên.

^* Hình ảnh trong bài này không được hiển thị kích thước đầy đủ.

Giải pháp HTML / CSS, 765 740 541 byte

<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>

Bộ tái cấu trúc gần đây sử dụng lớp :targetgiả thay vì a <form>và Javascript.

Để nhập một trong hai đầu vào, hãy thêm nó vào cuối URL làm mục tiêu, ví dụ test.html#Jedihoặctest.html#Sith

Đây là một lần nữa với khoảng trắng và một vài bình luận:

<style>
  /* hide all but the anchored lightsaber (only lightsabers have ids) */
  [id]:not(:target) { display:none }

  /* tables are lightsabers */
  table { width:900px; height:12px; border-spacing:0 }
  td:last-child { border-radius:0 12px 12px 0 } /* curved tip */
  #Sith td:first-child { border-radius:12px 0 0 12px } /* 2nd curved tip */
  #Sith td { box-shadow:0 0 18px red }
  #Jedi { transform:rotate(-90deg); margin:350px 0 }
  #Jedi td { box-shadow:0 0 18px #0f0 } /* green */
  * + table { margin:200px 0 0 0 } /* gap between Jedi lightsabers */
  #Jedi * + table td { box-shadow:0 0 18px #00f } /* blue */
  /* handles */
  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>

Các thanh kiếm ánh sáng là <table>các thành phần có một ô trên mỗi bộ phận (lưỡi / tay cầm) không được lưu thông qua các idthuộc tính của chúng .

Các lưỡi dao được tô màu bằng CSS box-shadowvà các thanh kiếm ánh sáng Jedi trải qua a transform: rotate().

Hình ảnh hoặc nó đã không xảy ra (nhấp để xem độ phân giải đầy đủ):

Nếu bạn thêm td{background:#fff}body{background:#000}vào CSS, bạn sẽ có một chế độ xem tối thú vị.

Đã thử nghiệm trên Firefox và Chrome (trên Linux). Lưu ý rằng điều này hoàn toàn không tuân thủ tiêu chuẩn, vì tôi đã cố gắng thu nhỏ kích thước càng nhiều càng tốt.

Cảm ơn @manatwork cho border-spacingvà :target.