ピクセルアート、エピソード1:スーパーマリオを表示


47

それはa-meです!

今日のタスクは簡単です。プログラム、またはNES上のスーパーマリオブラザーズからのアイドルな小さなマリオスプライトを青い背景の上に表示する関数を作成します。

画面/ウィンドウ/ブラウザのどこにでも12 * 16ピクセルを表示する限り、どんな種類のエントリでも有効です。

(編集:言語がピクセルアートを実行できない場合、表示される画像を拡大できます。ASCIIアートまたはHTMLアートを出力することもできますが、適切な色を使用します。)

画像(400%に拡大):

次の色を使用する必要があります。

  • 青:#6B8CFF
  • 赤:#B13425
  • 緑/茶色:#6A6B04
  • オレンジ:#E39D25

最短プログラム(文字数)が勝ちます!

標準的な抜け穴が適用されます(特に、ネットワーク接続は許可されません)が、プログラムでの画像ファイルのハードコーディングと表示は許可されます。(このトリックを使用したエントリは個別にランク付けされます)

さあ!


現在のリーダーボード

コードのみを使用した最短回答:

何らかのハードコードされた画像を使用した最短回答:


2
また、ファイルの作成は許可されていませんか?表示する必要がありますか?
マーティンエンダー

1
その画像にはパターンがありません。したがって、すべては、言語で使用できる最高の圧縮に帰着します。
オプティマイザー

20
Nitpicking:それはスーパーマリオではなくマリオです。
デニス14年

5
なんて楽しいアイデア...続編の挑戦のアイデアは次のとおりです。マリオの画像(任意の形式)を撮り、ルイージの画像に変えてください!
ジボブズ14年

3
彼に似たパイエットプログラムを作成できますか?
コナーオブライエン

回答:


36

HTML / JS、206 158 153 102


102

使用したトリック:圧縮GIFファイルをHTMLファイルとして保存し、最後に<img src =#>を追加します

このエントリのおかげで:https : //codegolf.stackexchange.com/a/39926/10732 by @NiettheDarkAbsol

GIF87a  ¡ kŒÿã%jk±4%,       6„‡héj„Af-ÕdÎy\%    …R˜0”ŒÈJ­³I©±²û“ú=ª$±p%i¸•¤ <img src=#>

デモ:http : //meuziere.free.fr/mario/gif.html


古いバージョン:

153

使用したトリック:圧縮PNGファイルをHTMLファイルとして保存し、最後に<img src =#>を追加します

‰PNG


IHDR         _v”   PLTEjkkŒÿ±4%ã%ó’V   IIDAT×c[ʵj%C€ÍUŸ?|ìíœÿ02„ÿÿÊÐÊàÐÄÈÀ°ŠáÓë~†«ö3üZµž!jÚR‡P x( s6ïåÇ<img src=#>


158

使用されたトリック:圧縮されたPNGのトリミングされたdataURIをIMGタグのSRCとして設定し、すべてをUnicode文字でパックします。


JSコンソールでそれを実行します:

document.write(unescape(escape('🁩𫑧𘁳𬡣👤𨑴𨐺𪑭𨑧𩐻𨡡𬱥𝠴𛁩𥡂𣱒𭰰𢱇𩱯𠑁𠑁𣡓𥑨𡑕𩱁𠑁𠑷𠑁𠑁𤑁𩱍𠑁𠑂𩡄𜱡𥑁𠑁𠑄𡡂𣑖𡑖𬑡𭱒𬡪𤀫𮁎𠱘𪡮𤱘𮡫𩱨𥱁𠑁𠑓𥑬𡑑𥡑𢐱𜡍𢑗𮁘𢱅𣁖𬑊𥑏𠑺𥡕𡱮𮠹𛱇𦁺𬰷𤡭𨰯𮡁𮑨𤀯𛱹𪁄𤑅𣑲𩰰𣑔𢑷𣁃𢱧𩑈𥀶𜰶𡱦𝡶𜡍𛱸𨑴𦠴𪁡𭁰𤱂𫱤𤑯𢁧𫱁𭰾').replace(/uD./g,'')))


206

開梱(206b):

<img src=data:image;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAQAgMAAABfD3aUAAAADFBMVEVqawRrjP+xNCXjnSXzkghWAAAASUlEQVQI12MIWxXKELVqJUOAzVUGnz9/GXzs7Rmc/zAyhP//yhDQEMrg0MTIwLCKgeHT636Gf6v2M/xatZ4hatpSBodQoHgoAw>

デモ


使用したツール:


タグは必要ありません。クロムのデータURIを使用して、URLバーに入力します。200文字
オプティマイザー14年

うーん... dataURIは有効な「プログラム」ではないと考えました。しかし、あなたは正しい。すべてのブラウザーは、アドレスバーでdataURIを許可します。
xem 14年

今、あなたはOPとして自分で抜け穴を使用しています;)。すべての作業をGIF形式の外部/組み込み圧縮にオフロードしています。それがいいのなら、今では最高の圧縮率のあいまいな画像形式を探しに行く必要があります。そして、自分で圧縮を書くことで多くの労力を節約できたでしょう。;)
マーティン・エンダー14年

2
@xemさて、あなたの挑戦、あなたの呼び出し。しかし、現在最も圧縮された既存のファイル形式を探しているのであれば、それは少し無意味に思えます。;)
マーティン・エンダー14年

1
rawgitリンクが死んでいるようです。
アディソンクランプ

27

Mathematica、412 292 252 212 163 148 143 141文字

f=FromDigits[ToCharacterCode@#,2^16]~IntegerDigits~#2&;Image@Partition[f["넴╫賿橫ӣ鴥",256][[3#+1;;3#+3]]/256&/@"吀啐^A媾핮﻽溿뽫ﺩ埿⩕樨ꦪª⿼?ཐᐅ橕ꦪ喪"~f~4,12]

これは^A、コードポイントで制御文字にキャレット表記を使用します1。Mathematicaでは、文字を実際に埋め込むことができますが、コピーするとあらゆる種類のさを招きます。とにかく、上記は以前のバージョンよりも2文字短いので、カラーパレットインデックスをエンコードするためにbase-5の代わりにbase-4を使用することで文字にそれらを取得しました。現時点では、以下の説明とスクリーンショットを修正することはできませんので、元のベース5バージョンの回答をここに残します。


f=FromDigits[ToCharacterCode@#,2^16]~IntegerDigits~#2&;Image@Partition[f["넴╫賿橫ӣ鴥",256][[3#-2;;3#]]/256&/@"ᯱ曎㌟뱮䚻륏Σ襺ﺦ您汜豈塘ᙉ雬儥衰ꐰꃾ纔ㆯ쭴뫋澖ᕿ蓉"~f~5,12]

私はUnicode文字でピクセルをエンコードしています(文字でカウントするのはいや!)。

Mathematicaでは次のようになります:

ここに画像の説明を入力してください

仕組みは次のとおりです。

最初に、fUnicode文字列(最初の引数として渡される#)を整数のリストに変換する関数を定義します。まず、文字コードを取得します。これらは、ベース65536の数字として解釈できます。そして、その数値を別の基数に変換し、2番目の引数として渡します#2

それでは、長いUnicode文字列に対してそれを行ってみましょう。ToCharacterCodeこのリストを生成します:

{7153, 26318, 13087, 48238, 18107, 47439, 931, 35194, 62191, 65190, \
 24744, 57782, 27740, 35912, 22616, 5705, 38636, 20773, 34928, 42032, \
 41214, 32404, 12719, 52084, 47819, 28566, 5503, 33993}

これをベース65536として扱う:

7933607912575313477287527915733176998797205587959732019781370103381...
4831246938139171755469819519515972565671101475553962564506286523593

ベース5への変換:

{2, 2, 2, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, \
 2, 2, 2, 3, 3, 3, 4, 4, 3, 4, 2, 2, 2, 2, 3, 4, 3, 4, 4, 4, 3, 4, 4, \
 4, 2, 2, 3, 4, 3, 3, 4, 4, 4, 3, 4, 4, 4, 2, 3, 3, 4, 4, 4, 4, 3, 3, \
 3, 3, 2, 2, 2, 2, 4, 4, 4, 4, 4, 4, 4, 2, 2, 2, 2, 3, 3, 1, 3, 3, 3, \
 2, 2, 2, 2, 2, 3, 3, 3, 1, 3, 3, 1, 3, 3, 3, 2, 3, 3, 3, 3, 1, 1, 1, \
 1, 3, 3, 3, 3, 4, 4, 3, 1, 4, 1, 1, 4, 1, 3, 4, 4, 4, 4, 4, 1, 1, 1, \
 1, 1, 1, 4, 4, 4, 4, 4, 1, 1, 1, 1, 1, 1, 1, 1, 4, 4, 2, 2, 1, 1, 1, \
 2, 2, 1, 1, 1, 2, 2, 2, 3, 3, 3, 2, 2, 2, 2, 3, 3, 3, 2, 3, 3, 3, 3, \
 2, 2, 2, 2, 3, 3, 3, 3}

これらは、青、赤、緑、オレンジの順のピクセルのカラーインデックスです。これらを使用して、カラーパレットである数字のリストにインデックスを付けます。

次に、カラーパレットについて説明します。それがあります"넴╫賿橫ӣ鴥"。上記のインデックスを使用して、正しい文字列を選択します。次に、関数を再度適用しますが、ベース256を使用します。これにより、12個の整数のリストが生成されます。

{177, 52, 37, 107, 140, 255, 106, 107, 4, 227, 157, 37}

;;範囲インデックスを使用して、現在の色に関連するスライスを引き出します。

最後に、Partitionこれをの行に分割してに送るために使用12Imageます。ほら!

編集: Unicodeパッキングでは、RLEには価値がなくなりました。削除すると50文字節約されました。

編集:もちろん、RLEがなければ、ベース16に移動する必要もありません。

編集:そして、私たちがそれに取り組んでいる間に、なぜカラーパレットもUnicodeパックしないのですか?(カラーパレット全体を単一の文字列にし、Partitionそこでも使用することで、もう少し節約できるという思いがあります。後で試します。)

編集:はい、それはさらに5バイトを削った。


1
結果のスクリーンショットを追加してもよろしいですか?(私はあなたのコードを信用していませんが、それがどのように表示されるのか興味があります:ウィンドウで?ブラウザ?それとも??)
xem 14年

@xemします。グラフィカルな入出力が可能なREPL環境です。
マーティンエンダー14年

わかりませんが、画像の下部をミラーリングしていますか?
オプティマイザー14年

1
@Optimizerいいえ、保存するよりも少ない文字数でそれを行えるとは思いません。
マーティンエンダー14年

Mathematicaのドキュメントを見ると、チルダの使用法はわかりませんが、ある関数の結果を別の関数にフィードしてから、その2番目の関数(IntegerDigits)に追加の引数を適用するために使用しています。また、カラーパレット:画像を見ると、4色しかないように見えますが、カラーパレットにはそれ以上のものが含まれているようです:{177、52、37、107、140、255、106、107、4、227 、157、37}。Imageのドキュメントを見ると、ColorScale-> RGBなどの追加オプションが提供されていない限り、グレースケールで印刷されるようです。
CryptoCommander 14年

20

Java:398 377

void s(){new java.awt.Frame(){public void paint(java.awt.Graphics g){int i=0,x,m[]={12226,44085194,467839834,0x5abea55a,0x5bbd5d50,0x5ffe9540,0x5ffe9540,0x5aee5d50,531408218,334277466,333492170,0xc02fc2},c[]={7048447,0xB13425,6974212,0xE39D25};for(setSize(99,99);i<192;g.setColor(new java.awt.Color(c[m[x]&3])),m[x]/=4,g.drawLine(x+40,60-i%16,x+40,60-i++%16))x=i/16;}}.show();}

各列のintをアンパックして、スプライトを単純に描画します。完全なプログラムで表示されます:

class P{
    public static void main(String[]a){
        new P().s();
    }

    void s(){
        new java.awt.Frame(){           
            public void paint(java.awt.Graphics g){
                int i=0,x,m[]={12226,44085194,467839834,0x5abea55a,0x5bbd5d50,0x5ffe9540,
                               0x5ffe9540,0x5aee5d50,531408218,334277466,333492170,0xc02fc2},
                          c[]={7048447,0xB13425,6974212,0xE39D25};
                for(setSize(99,99);i<192;
                    g.setColor(new java.awt.Color(c[m[x]&3])),m[x]/=4,
                    g.drawLine(x+40,60-i%16,x+40,60-i++%16)
                )x=i/16;
            }
        }.show();
    }
}

必須のスクリーンショット:

それは私、マリオです


1
を使用して9バイトを保存できますimport java.awt.*
ケビンクルーイッセン

15

x86マシンコード、102バイト

仕組み:画像は、パレットを使用して2ビット画像として保存されます。画像の各行は3バイトとして保存され、その後に1バイトのカラーパレットが続きます。これにより、データを単一のDWORDとしてロードできます。12個のピクセルは、値の最下位2ビットをマスクし、ビデオメモリに書き込んでから、値全体を2ビット右シフトすることにより出力されます。行のピクセルが出力されると、パレットバイトがVGAパレットに書き込まれます。画像の描画が完了すると、プログラムは無限ループに入ります。

バイナリを生成するアセンブリコード:

org 100h
mov al,13h
int 10h
les ax,[bx]

mov si,image_data
draw:
add di,320-12
lodsd
xchg eax,ebx
mov cl,12
row:
mov ax,bx
and al,3
stosb
shr ebx,2
loop row
xchg ax,bx
mov dx,0x3c9
out dx,al
test al,al
jnz draw

image_data: db 21,0,85,0xb1/4, \
5,0,64,0x34/4,            \
165,190,87,0x25/4,        \
185,191,127,0x6b/4,       \
185,254,254,0x8c/4,       \
233,191,106,0xff/4,       \
213,255,95,0x6a/4,        \
165,168,85,0x6b/4,        \
169,40,106,0x4/4,         \
170,0,170,0xe3/4,         \
47,195,248,0x9d/4,        \
63,0,252,0x25/4,          \
15,0,240,111,             \
5,20,80,111,              \
169,85,106,111,           \  
170,85,170 

Base-64でエンコードされたバイナリは、それを実行するためにMario.comとして保存します。sBPNEMQHvigBgcc0AWatZpOxDInYJAOqZsHrAuL1k7rJA + 6EwHXiwxUAVSwFAEANpb5XCbm / fxq5 / v4j6b9qP9X / XxqlqFUaqShqAaoAqjgvw / gnPwD8CQ8A8G8FFFBvqVVqb6pVqg ==

サンプル出力: ここに画像の説明を入力してください


10

GIF-93バイト

画像のハードコーディングは今では大丈夫のようです。:D

GIF87a  ¡ kŒÿã%jk±4%,       6„‡héj„Af-ÕdÎy\%    …R˜0”ŒÈJ­³I©±²û“ú=ª$±p%i¸•¤  ;

Notepad ++で見られるように

NP ++のスクリーンショット

PHPとして-131バイト

<? header("Content-Type:image/gif");?>GIF87a  ¡ kŒÿã%jk±4%,       6„‡héj„Af-ÕdÎy\%  …R˜0”ŒÈJ­³I©±²û“ú=ª$±p%i¸•¤  ;

1
gifをどこかにアップロードしてください(たとえば、ctrlv.in)?PNGの代わりに私のエントリでそれを使用したい:)
xem 14年


@NiettheDarkAbsolサイズをどのように数えたのかわかりませんが、150バイトを数えます。とにかく、スコアリングは文字ごとであり、114文字のようです。
マーティンエンダー14年

2
うん、PHPスニペットは(最後の2バイトを削除できたとしても)私にとっては問題ありません。しかし、生のgifスニペットはプログラムではありません。
xem 14年

1
@xem:ブラウザーがHTML / javascript / etcの「インタープリター」と見なされ、同じメカニズムを介して生のgifスニペットを供給すると、目的の出力が得られる場合...差が小さくなります
Mooing Duck 14年

10

Bash + ImageMagick:350 331 321文字

(PaletteはMartinBüttner答えから恥知らずに盗まれました。)

p=(B13425 6B8CFF 6A6B04 E39D25)
for c in 21 0 85 5 0 64 165 190 87 1{85,91,27,85} 254{,} 233 191 106 213 255 95 165 168 85 169 40 106 170 0 170 47 195 248 63 0 252 15 0 240 5 20 80 169 85 106 170 85 170;{
for j in 0 2 4 6;{
d+=(-fill \#${p[c>>j&3]} -draw point\ $[i%12],$[i++/12])
}
}
convert -size 12x16 xc: "${d[@]}" x:

サンプル出力:

マリオ

検査するには-scale 120convertパラメータを簡単に追加して、10倍のスケーリングバージョンを取得します。

マリオスケール10


2
s/185 191 127 185 254 254/1{85,91,27,85} 254{,}/; s/do/{/; s/done/}/
悲しみ14年

DigitalTraumaの関連するヒントも支持しましたが、それを忘れ続けてい{ます}。ありがとう、@ grawity。
マナトワーク

8

Octo / XO-Chip、70バイト

Octoは、CHIP-8仮想マシン用にバイトコード化された命令にコンパイルされる高レベルのアセンブリ言語です。Octoは、オーバーレイされたビットプレーンを介して4色のビットマップを描画する機能など、基本的なCHIP-8バイトコードに「XO-Chip」と呼ばれるカスタム拡張機能を提供します。

コンパイルされたバイトは次のとおりです。

0xA2 0x08 0xF3 0x01 0xD0 0x00 0x1F 0x00 0x3F 0xC0 0x39 0x00 0x51 0x00 0x58 0x80
0x21 0xE0 0x00 0x00 0x3F 0x00 0x7F 0xE0 0xFF 0xF0 0x36 0xC0 0x1F 0x80 0x3F 0xC0
0x39 0xC0 0x70 0xE0 0xF0 0xF0 0x00 0x00 0x00 0x00 0x3F 0x80 0x7F 0xE0 0x7F 0xF0
0x3F 0xE0 0x1F 0xC0 0x37 0x00 0x76 0xE0 0xF0 0xF0 0xE9 0x70 0xE0 0x70 0xC0 0x30
0x00 0x00 0x70 0xE0 0xF0 0xF0

マリオ

ブラウザでここで実行します:http : //johnearnest.github.io/Octo/index.html?gist=33aa37d4717a425ccd4f

そのバイトコードを生成するOctoアセンブリ言語を見ると、おそらくもっと輝いているでしょう。

: main
    i := mario
    plane 3
    sprite v0 v0 0

: mario
    0x1F 0x00 0x3F 0xC0 0x39 0x00 0x51 0x00 
    0x58 0x80 0x21 0xE0 0x00 0x00 0x3F 0x00 
    0x7F 0xE0 0xFF 0xF0 0x36 0xC0 0x1F 0x80 
    0x3F 0xC0 0x39 0xC0 0x70 0xE0 0xF0 0xF0 
    0x00 0x00 0x00 0x00 0x3F 0x80 0x7F 0xE0 
    0x7F 0xF0 0x3F 0xE0 0x1F 0xC0 0x37 0x00 
    0x76 0xE0 0xF0 0xF0 0xE9 0x70 0xE0 0x70 
    0xC0 0x30 0x00 0x00 0x70 0xE0 0xF0 0xF0 

メインプログラムは3つの2バイト命令です。メモリインデックスレジスタiをデータセグメントの先頭に設定し、描画プレーン3を選択します(3はビットマスクです。これは、両方のビットプレーンで4色モードで描画することを示します)。次に、xおよびyの位置にスプライトを描画しますレジスタv0(ゼロに初期化)。最後の0はスプライトのサイズを提供し、SuperChipおよびXO-Chip命令セットでは16x16スプライトを描画します。4色モードでは、最初の平面のビットマップの直後に2番目の平面のビットマップが続きます。

飛行機がどのように機能するかを見るために、マリオを描いた後に1つの飛行機を右にスクロールするこの修正されたプログラムを考えてください:

mario2

: main
    i := mario
    plane 3
    sprite v0 v0 0
    plane 2
    scroll-right
    scroll-right
    scroll-right
    scroll-right

: mario
    0x1F 0x00 0x3F 0xC0 0x39 0x00 0x51 0x00 
    0x58 0x80 0x21 0xE0 0x00 0x00 0x3F 0x00 
    0x7F 0xE0 0xFF 0xF0 0x36 0xC0 0x1F 0x80 
    0x3F 0xC0 0x39 0xC0 0x70 0xE0 0xF0 0xF0 
    0x00 0x00 0x00 0x00 0x3F 0x80 0x7F 0xE0 
    0x7F 0xF0 0x3F 0xE0 0x1F 0xC0 0x37 0x00 
    0x76 0xE0 0xF0 0xF0 0xE9 0x70 0xE0 0x70 
    0xC0 0x30 0x00 0x00 0x70 0xE0 0xF0 0xF0 

これを楽しんでいるなら、Octoで書かれた他のソリューションの 1つが好きかもしれません。実際、このツールに基づいて10月にゲームジャムが発生しています。


6

Groovy 417 386

地獄のように楽しいが、文字数がひどい。GroovyFXが必要

m=[b:'6B8CFF',r:'B13425',g:'6A6B04',o:'E39D25'];groovyx.javafx.GroovyFX.start{stage(visible:!0){scene(width:60,height:80){flowPane{"3b5r4b2b9r1b2b3g2o1g1o3b1b1g1o1g3o1g3o1b1b1g1o2g3o1g3o1b2g4o4g1b3b7o2b2b2g1r3g4b1b3g1r2g1r3g1b4g4r4g2o1g1r1o2r1o1r1g2o3o6r3o2o8r2o2b3r2b3r2b1b3g4b3g1b4g4b4g".toList().collate 2 each{l->(l[0]as int).times{rectangle(width:5,height:5,fill:"#"+m[l[1]])}}}}}}

なし:

m=[b:'6B8CFF',
   r:'B13425',
   g:'6A6B04',
   o:'E39D25']           

s=5

groovyx.javafx.GroovyFX.start {bd->
  stage(visible: !0) {
    scene(width:s*12, height:s*16) {
      flowPane {
        "3b5r4b 2b9r1b 2b3g2o1g1o3b 1b1g1o1g3o1g3o1b 1b1g1o2g3o1g3o 1b2g4o4g1b 3b7o2b 2b2g1r3g4b 1b3g1r2g1r3g1b 4g4r4g 2o1g1r1o2r1o1r1g2o 3o6r3o 2o8r2o 2b3r2b3r2b 1b3g4b3g1b 4g4b4g"
          .replaceAll(" ", "")
          .toList()
          .collate(2) 
          .each { l->
            t=l[0] as int
            cr=m[l[1]]
            t.times {
              rectangle(width:s, height:s, fill:"#"+cr) 
            }
          }
      }
    }
  }
}

ここに画像の説明を入力してください


grep()代わりにtoList()
cfrick

5

HTML / JS、427の 408 264 256 239 226文字

Obfuscatweet、271 270 264 256 239 226文字

obfuscatweetを使用して、これを<250:Dに短縮することができました

document.write(unescape(escape('🁳𨱲𪑰𭀾𨰽𦰢𝡂𞁃𡡆𘠬𘡂𜐳𝀲𝐢𛀢𝡁𝡂𜀴𘠬𘡅𜰹𡀲𝐢𧐻𨐽𙰰𜐵𝐰𜀰𝐵𝐵𝀰𠑂𡑃𜀲𡑆𡑆𠰲𡑂𡡂𡠲𠡆𡑁𞀰𜱆𡡆𜀰𠐶𠐰𜀲𠐶𞑁𞁁𠐵𝑁𠑆𞑄𝰶𡡆𡀵𝐷𡡆𝐵𝐵𡠰𝐴𜐵𜀲𠐰𜁁𞁁𠐰𜁁𠐧𞱷𪑴𪀨𩁯𨱵𫑥𫡴𚑦𫱲𚁩🐰𞱩🀹𝠻𭱲𪑴𩐨𙰼𨡲🠧𚐩𮱨🐨𙰰𜀰𙰫𬁡𬡳𩑉𫡴𚁡𛡳𫁩𨱥𚁩𛁩𚰽𝠩𛀱𝠩𛡴𫱓𭁲𪑮𩰨𝀩𚐮𬱬𪑣𩐨𛐱𜠩𞱦𫱲𚁪🐰𞱪🀱𜠻𭱲𪑴𩐨𙰼𬡰𘁳𭁹𫁥🐢𬁡𩁤𪑮𩰺𜐠𞀻𨡡𨱫𩱲𫱵𫡤𞠣𙰫𨱛𪁛𪠫𚱝𧐫𙰢🠼𛱲𬀾𙰩𚐻𯐼𛱳𨱲𪑰𭀾').replace(/uD./g,'')))

以下のコードがこれの構成要素です。

使用されるトリック:カラータイルのbase4文字列に画像を変換し、これを16進数文字列に変換します。基数4のインデックスは色を示します(0 =青、1 =赤など)。インラインpのCSSは、divが展開するコンテンツを必要とするために使用されます(pも短くなります)。CSSは文字で始まる必要があるため、CSSタグの前に「A」が付​​加されます。

CSSからのパディングはピクセルを提供します。これはいずれもUnicode文字を使用していません。Unicode文字はとにかくあまり馴染みがありませんが、その場合はおそらくサブ300になるでしょう。パディングを使用する相対的な利点は、この場合のように、各ピクセルに必要なサイズに画像を拡大できることです。私は9ピクセルを使用しましたが、余分な文字を使うと、表示されるピクセルごとに最大99ピクセルを取得できます。


CSS、127 119 118 114 100 13 0文字

からpに切り替えるとrp、の必要性がなくなりdisplay:inline、コスト+1文字、-15!チャー!

すべての色を削除し、JS -87文字の配列に入れました。その後、私はすべてのCSSを削除しました

JS、300 289 280 275 329 325文字

c=["6B8CFF","B13425","6A6B04","E39D25"];a='0155000555540ABEC02EFEFC2EBFBF2BFEA803FFF00A6A002A69A8AA55AAF9D76FFD557FF5555F0541502A00A8AA00AA';with(document)for(i=0;i<96;write('<br>')){h=('000'+parseInt(a.slice(i,i+=6),16).toString(4)).slice(-12);for(j=0;j<12;write('<rp style="padding:1 8;background:#'+c[h[j++]]+'"></rp>'));}

16進数の文字列を処理するこの単純なJSを最大限に削減しようとしましたが、それが最初の試みであるため、これは私が知っていることだけを使用して得たものです。HTMLの記述はタグを追加する関数によって短縮され、クラスはベース4の値を使用して表示する色を決定します。

追加の短縮を使用して、charAtを[]ブラケットに置き換え、A0クラスを削除し、pのデフォルト色として青を設定して、さらに10文字を節約しました。rpタグを使用するための追加コストは、CSSの大きな損失によって相殺されます。

whileループパッドを削除してから、ユースケースに「000」を追加し、そこから-12をスライスするまでの追加オフセット。

色に追加のJSを追加し、そこにパディングを配置します。修正するために2つの余分な文字を必要とするパディングのバグに気付きました。多数のループを圧縮

HTMLファイル、430 429 419 399 366 342文字

デモ

<script>c=["6B8CFF","B13425","6A6B04","E39D25"];a='0155000555540ABEC02EFEFC2EBFBF2BFEA803FFF00A6A002A69A8AA55AAF9D76FFD557FF5555F0541502A00A8AA00AA';with(document)for(i=0;i<96;write('<br>')){h=('000'+parseInt(a.slice(i,i+=6),16).toString(4)).slice(-12);for(j=0;j<12;write('<rp style="padding:1 8;background:#'+c[h[j++]]+'"></rp>'));}</script>

いいね!コード内のすべての改行を削除し、デモ(c99.nl)へのリンクを提供することをお勧めします。ボーナスとして、xem.github.io/obfuscatweetを使用して、Unicode文字でエントリをパックできます。それはあなたのスコアを改善します。
xem 14年

また、&lt; html>タグを削除し、&lt; style>タグを最後に配置して、最後のCSSルールの/ styleと末尾の「}」を削除できます。
xem 14年

@xem OKすべての行を切り取り、すべてを押しつぶしました。obfuscatweetのJSを分割する最適な方法を試してみます。
コンパス14年

1
obfuscatweetは、任意のjsコード(289個のjs文字をそこに置くことができる)または任意のhtmlコード(ここでhtmlファイルをコピーできる)を受け入れます。obfuscatweetの出力は、適切な文字セットメタタグを使用して、ブラウザーのコンソールまたはHTMLファイルで実行できます。
xem 14年

psst、CSSパーツの最後の「}」を削除するのを忘れました。それなしで動作します。
xem 14年

5

MATLAB、194 193バイト

コード:

imagesc(dec2base(base2dec(reshape('5FVQL5VVVT50A4L4HA594GAHA45A015DAL551G2L41GO101VO0A7FMAANVVAAVVVQ5VLVL40L8100L80',5,[])',32),4)-48);colormap([106 107 4;107 140 255;227 157 37;177 52 37]/255)

そして出力:

マリオ

基本的に、各ピクセルが2ビット数になるようにマリオ画像を変換しました。次に、コードに示されている文字列であるベース32でエンコードしました。この文字列は、最初に5 x 16に再形成され(2ビット数の各行(12px)はベース32にエンコードされます)、次にベース10に変換されます。結果はもう一度ベース4に変換され、 2ビットの数字。これらの数値はを使用してプロットされimagesc()ます。次に、colormap()必要な16進値のカスタムカラーマップを使用して、色が割り当てられます。

面白いことに、使用されるバイト数の3分の1は、MATLAB がプロットされたに正しい色を設定するためだけのものです。カラーコードは、base32文字列全体とほぼ同じバイト数です!。

色を修正(colormap()呼び出しを削除)しない場合、135バイトであり、これはMATLAB R2013aの既定のカラーマップの出力です。

マリオ、マッピングなし


4

JavaScriptの/ CSS / HTML 446 430 407 353 328 316

私はできる限りゴルフをし、いくつかの汚いHTML / JSになりましたが、何でも...うまくいきます。

編集:これで終わりです...完了です。

編集は 真剣にこの時間に行わ。

JavaScript

for(i=0;i<192;)document.body.innerHTML+=(i%12?"":"<br>")+"<font color=#"+["6B8CFF","B13425","6A6B04","E39D25"]["000111110000001111111110002223323000023233323330023223332333022333322220000333333300002212220000022212212220222211112222332131131233333111111333331111111133001110011100022200002220222200002222"[i++]]+">█"

JSFiddle


リンクされたJSFiddleには、ここに掲載されているものと同じバージョンが含まれておらず、動作しません(少なくともFirefoxの場合は)。ちなみに、より良い出力を得るに*{line-height:1}は役立ちます。
マナトワーク14年

@manatworkもう一度やり直してください。
SomeShinyObject 14年

いいね しかし、なぜdivなのでしょうか?好奇心のために、ECMAScriptバージョンを試しました。372文字を取得しました
manatwork

なぜなら、<div></div>はより短いからですdocument.createElement('div')。そしてJSFiddleは好きではないdocument.write
SomeShinyObject

1
三項演算子の条件を逆にして、比較の右側を取り除きますi%12?"":"<br>"
マナトワーク14年

4

Matlab- 449/332305バイト

部分圧縮+下の画像対称性の使用:

a=[0,0];b=[2,2];c=[3,3];d=[a,0];f=[b,2];g=[c,3];h=[b,b];i=[a,a];k=[1,1];l=[0,f,1,2;h,k;c,2,1,3,1;g,k,1;c,k,k;a,k,1,0;0,f,a;h,a];imshow(uint8([d,k,1,k,i;a,k,k,k,k,1,0;a,f,c,2,3,d;0,2,3,2,g,2,g,0;0,2,3,b,g,2,g;0,b,c,c,h,0;d,g,g,3,a;a,b,1,f,i;[l fliplr(l)]]),[107 140 255;177 52 37;106 107 4;227 157 37]/255)

-部分的に圧縮されたバージョン(332バイト):

a=[0,0]
b=[2,2]
c=[3,3]
d=[a,0]
e=[1,1,1]
f=[b,2]
g=[c,3]
h=[b,b]
i=[a,a]
imshow(uint8([d,e,1,1,i;a,e,e,e,0;a,f,c,2,3,d;0,2,3,2,g,2,g,0;0,2,3,b,g,2,g;0,b,c,c,h,0;d,g,g,3,a;a,b,1,f,i;0,f,1,b,1,f,0;h,e,1,h;c,2,1,3,1,1,3,1,2,c;g,e,e,g;c,e,e,1,1,c;a,e,a,e,a;0,b,2,i,f,0;h,i,h]),[107 140 255;177 52 37;106 107 4;227 157 37]/255)

完全に非圧縮のバージョン(449バイト):

imshow(uint8([0,0,0,1,1,1,1,1,0,0,0,0;0,0,1,1,1,1,1,1,1,1,1,0;0,0,2,2,2,3,3,2,3,0,0,0;0,2,3,2,3,3,3,2,3,3,3,0;0,2,3,2,2,3,3,3,2,3,3,3;0,2,2,3,3,3,3,2,2,2,2,0;0,0,0,3,3,3,3,3,3,3,0,0;0,0,2,2,1,2,2,2,0,0,0,0;0,2,2,2,1,2,2,1,2,2,2,0;2,2,2,2,1,1,1,1,2,2,2,2;3,3,2,1,3,1,1,3,1,2,3,3;3,3,3,1,1,1,1,1,1,3,3,3;3,3,1,1,1,1,1,1,1,1,3,3;0,0,1,1,1,0,0,1,1,1,0,0;0,2,2,2,0,0,0,0,2,2,2,0;2,2,2,2,0,0,0,0,2,2,2,2]),[107 140 255;177 52 37;106 107 4;227 157 37]/255)

両方の場合の出力(画面上で明らかに拡大され、実際のものは12x16pixです):
マリオ拡大


誰もが何らかの形で対称性を活用するだろうかと思った。私は最終的に行った方法で方法を見つけることができませんでした。
バンピー

4

C、4999バイト

これは、ここでの回答のいくつかと絶対に競合することはできませんが、Cの回答を試してみると思いました。コードは1つの長い行なので、ここに pastebinリンクがあります。ご希望であれば、gzip圧縮されたコードのbase64エンコードを以下に示します。

H4sICAzFGFYCA21hcmlvLmMA3Zc9DsIwDIXv0qndUqchkXwUurAgdYiFEEyIu4NYaZBI7PzNT3Lsz4mf408bjdPjct3odh6HVeujdgg4K4vzohCM8esdjHOpkrVoALUtIrBX8y1R04DKNCGZmTp85CVdAHifYuxO3mElIlju6xaRICOgCo4pD64PoiTzHnkZcHYnRhAYcEEpFznxB1mXP4TdS/KeVGYPZbmVaQHlnRVZFi65OkhoGodq+RHrby4xsTj8i6RmapXrPvfa0Q8ZWZY1/UPbSiC7Z2bYA7r0zla57Xmo8sOEzxdNYIXFhxMAAA==

実行に外部ライブラリを必要としないという点で注目に値します。

xterm、Konsole、またはGNOME端末が必要です。これは、ANSIカラーエスケープコードへのRGB拡張を使用して正しい色を出力するためです(ANSIはオレンジを定義しません)。明らかな理由により、イデオンは動作しません。xtermを使用するCygwinの下でWindowsで実行できます(実際、私はそれをテストしました)。MSYSが機能する可能性があります。よく分かりません。

私のマシンでの出力(xterm):

マリオです!


2
-1は10の倍数ではない
コナーオブライエン

申し訳ありませんが、スコアに関連していた
コナーオブライエン

4

Excel VBA、310 307 295バイト

セルのActivesheetオブジェクトにマリオを出力する匿名VBEイミディエイトウィンドウ関数 A1:L16

o=2465251:Cells.RowHeight=48:a[A1:L16],-29589:a[C4:K5,D3:I7,J7,L5,A11:L13],o:a[C3:E3,H3:H4,B4:B6,C6,D4:D5,E5,I5,H6:K6,C8:H8,B9:K10,A10:L10,C11,J11,B15:D16,A16,I15:K16,L16],289642:a[D1:H1,C2:K2,E8:E10,F10:H10,H9,D11:I13,C13:E14,H13:J14],2438321:a[E11,H11],o

ヘルパーSubルーチンa

Sub a(r,c):r.Interior.Color=c:End Sub

非ゴルフバージョン

Public Sub b()
    o = 2465251
    Cells.RowHeight = 48
    a [A1:L16], -29589
    a [C4:K5,D3:I7,J7,L5,A11:L13], o
    a [C3:E3,H3:H4,B4:B6,C6,D4:D5,E5,I5,H6:K6,C8:H8,B9:K10,A10:L10,C11,J11,B15:D16,A16,I15:K16,L16], 289642
    a [D1:H1,C2:K2,E8:E10,F10:H10,H9,D11:I13,C13:E14,H13:J14], 2438321
    a [E11,H11], o
End Sub


Private Sub a(ByRef r As Range, ByVal c As Integer)
    r.Interior.Color = c
End Sub

空白を削除する場合は-3バイト、[...]表記法よりもRange(...)表記を使用する場合は-12バイト。16進数の色からint色に切り替える

出力

私だ


3

バッシュ346

VT100のようなエスケープシーケンスを使用した純粋なbash(そのパレットにはオレンジ色はありません)

C="  "
B="\033[44m$C"
R="\033[41m$C"
G="\033[42m$C"
O="\033[43m$C"
N="\033[00m\n"
A="BBBRRRRRBBBBNBBRRRRRRRRRBNBBGGGOOGOBBBNBGOGOOOGOOOBNBGOGGOOOGOOONBGGOOOOGGGGBNBBBOOOOOOOBBNBBGGRGGGBBBBNBGGGRGGRGGGBNGGGGRRRRGGGGNOOGRORRORGOONOOORRRRRROOONOORRRRRRRROONBBRRRBBRRRBBNBGGGBBBBGGGBNGGGGBBBBGGGGN"
while read -n1 v
do
  printf "${!v}"
done <<< "$A"

1
個別の文字の代わりにパレットに配列を使用することで、それを減らすことができます。連想配列の宣言は長いため、整数に再コーディングする方が適切です。あなたのコードの295文字バージョン:pastebin.com/d0LW0HM1
manatwork

3

Pyth、83バイト

免責事項:言語機能の一部は質問の投稿後に作成されたため、これは受賞候補ではありません。

.wc16@Lc4CM"±4%kÿjkã%"jC"T\0UP\0Z¾Õnþýn¿¿kþ©WÿõZ*Uj(©ª\0ªøÃ/ü\0?ð\0PjU©ªUª"4

16進ダンプは次のとおりです。

00000000   2E 77 63 31  36 40 4C 63  34 43 4D 22  B1 34 25 6B  .wc16@Lc4CM".4%k
00000010   8C FF 6A 6B  04 E3 9D 25  22 6A 43 22  54 5C 30 55  ..jk...%"jC"T\0U
00000020   50 5C 30 01  5A BE D5 6E  FE FD 6E BF  BF 6B FE A9  P\0.Z..n..n..k..
00000030   57 FF F5 5A  2A 55 6A 28  A9 AA 5C 30  AA F8 C3 2F  W..Z*Uj(..\0.../
00000040   FC 5C 30 3F  F0 5C 30 0F  50 14 05 6A  55 A9 AA 55  .\0?.\0.P..jU..U
00000050   AA 22 34                                            ."4

ここからプログラムをダウンロードして、次のコマンドで実行することもできます。

python3 pyth.py mario.pyth

これはファイルを作成しますo.png

マリオ

説明:

4つの異なる色しかないため、各ピクセルの色を保存するために必要なのは2ビットだけです。

.wc16@Lc4CM"..."jC"..."4
                  "..."   the colors of the image, 2 bit per pixel
                 C        convert these bytes to a number
                j      4  and convert it to base 4 (extracting the colors)
           "..."          the hexcodes of the 4 colors (3 byte per color)
         CM               convert each byte into its number
       c4                 split into 4 lists
     @L                   for each pixel, pick the correct list of color-list
  c16                     split into 16 rows
.w                        save it as "o.png"

これは、チャレンジが投稿される前の最後のバージョンのPythで機能しますか?
リルトシアスト

@ThomasKwaうん、忘れてた。情報を編集します。
ジャクベ

2

処理2-359文字

この課題を見て、すぐにProcessingのpixel []関数を考えました。私はそれが短くなることを望んでいましたが、これがコードゴルフの私の最初の試みであることを考えると、結果にまだかなり満足しています。

int i,l;i=l=0;size(12,16);loadPixels();for(char c:"3b5r6b9r3b3g2o1g1o4b1g1o1g3o1g3o2b1g1o2g3o1g3o1b2g4o4g4b7o4b2g1r3g5b3g1r2g1r3g1b4g4r4g2o1g1r1o2r1o1r1g5o6r5o8r2o2b3r2b3r3b3g4b3g1b4g4b4g".toCharArray()){while(l>0){pixels[i]=#6B8CFF;if(c=='r')pixels[i]=#B13425;if(c=='g')pixels[i]=#6A6B04;if(c=='o')pixels[i]=#E39D25;i++;l--;}if(c<58){l=c-48;}}updatePixels();

なし:

int i,l;i=l=0;
size(12,16);
loadPixels();
for(char c:"3b5r6b9r3b3g2o1g1o4b1g1o1g3o1g3o2b1g1o2g3o1g3o1b2g4o4g4b7o4b2g1r3g5b3g1r2g1r3g1b4g4r4g2o1g1r1o2r1o1r1g5o6r5o8r2o2b3r2b3r3b3g4b3g1b4g4b4g".toCharArray())
{
    while(l>0)
    {
        pixels[i]=#6B8CFF;
        if(c=='r')pixels[i]=#B13425;
        if(c=='g')pixels[i]=#6A6B04;
        if(c=='o')pixels[i]=#E39D25;
        i++;
        l--;
    }
    if(c<58){l=c-48;}
}
updatePixels();

ここから処理をダウンロードできます


2

Javascript 515

str='';
"000111110000|001111111110|002223323000|023233323330|023223332333|022333322220|000333333300|002212220000|022212212220|222211112222|332131131233|333111111333|331111111133|001110011100|022200002220|222200002222"
.split("|").forEach(function(ov, ok) {
str += '<div>'
    ov.split("").forEach(function(iv, ik) {
    str += '<div style="width:1px;height:1px;background-color:' + ['#6B8CFF','#B13425','#6A6B04','#E39D25'][iv] + ';display:inline-block"></div>';
    });
    str+= '</div>';
});
document.write(str);

ただ動いて、まだ中に入ってゴルフをしなければならない


1
div行を構成するsを、デフォルトでインラインのタグに置き換えることができます。私はそれをテストしていませんが、使用aは動作するはずです。のbackground代わりに使用することもできますbackground-color
NinjaBearMonkey 14年

2

Perl-Ungolfed 927

これは後でゴルフする必要があります。初めての試用Image::Magick

#!/usr/local/bin/perl
use Image::Magick;
use strict;
use warnings;

my @p = (
[0,0,0,1,1,1,1,1,0,0,0,0],
[0,0,1,1,1,1,1,1,1,1,1,0],
[0,0,2,2,2,3,3,2,3,0,0,0],
[0,2,3,2,3,3,3,2,3,3,3,0],
[0,2,3,2,2,3,3,3,2,3,3,3],
[0,2,2,3,3,3,3,2,2,2,2,0],
[0,0,0,3,3,3,3,3,3,3,0,0],
[0,0,2,2,1,2,2,2,0,0,0,0],
[0,2,2,2,1,2,2,1,2,2,2,0],
[2,2,2,2,1,1,1,1,2,2,2,2],
[3,3,2,1,3,1,1,3,1,2,3,3],
[3,3,3,1,1,1,1,1,1,3,3,3],
[3,3,1,1,1,1,1,1,1,1,3,3],
[0,0,1,1,1,0,0,1,1,1,0,0],
[0,2,2,2,0,0,0,0,2,2,2,0],
[2,2,2,2,0,0,0,0,2,2,2,2],
);
my $image = Image::Magick->new;
$image->Set(size=>'12x16');
$image->ReadImage('canvas:white');
for my $i (0..$#p) {
    for (0..(@{$p[$i]} - 1)) {
        my $color;
        $color = ($p[$i][$_] < 1 ? "#6B8CFF" : $p[$i][$_] < 2 ? "#B13425" : $p[$i][$_] < 3 ? "#6A6B04" : "#E39D25");
        print "$i : $_ : $color \n";
       $image->Set("pixel[$_,$i]"=> $color);
    }
}
#$image->Write("mario.png");
$image->Display();

私たちはこれらの多くを持っていると確信していますが、これは私のものです: マリオ!


2

Bash印刷可能: 179 158バイト

user2485710の回答に触発されました

端末を調整して、色を正確に一致させる必要があります。

eval "$(base64 -d<<</AD/8AAD9Wm/2amr2Wpq1qlX/qqv9RX/1RRXVQBVpIIaqAAqoAAK8DwP1f9XVf9V|xxd -b -c3 -g0|cut -c10-33|sed $'s/../\e[4$[2#&+1]m \e[0m/g;s/^/echo /')"

これは私が見るものです。私は何か間違っていますか?
ardnew 14年

2
@ardnew:BSDのbase64での使用-Dのためのデコードおよび-dのデバッグ
デニス14年

2

Tcl 298

package require base64
set d [base64::decode AVUABVVUCr7ALv78Lr+/K/6oA//wCmoAKmmoqlWq+ddv/VV/9VVfBUFQKgCoqgCq]
binary scan $d B* z
set i 0
foreach {a b} [split $z ""] {
if {$i % 12 == 0} {puts "\033\[0m"}
puts -nonewline "\033\[4[string map {00 4 01 1 10 2 11 3} $a$b];m  "
incr i
}
puts "\033\[0m"

Base 64のピクセルあたり2ビットの画像です。ピクセルはANSIエスケープコードにマッピングされます。

ここに画像の説明を入力してください


:さえしようとせず、あなたのコードは少しgolfable思わtio.run/...
sergiol

2

JavaScript-256文字(161難読化されたツイート)

d=v=>{for(i=v&15;i--;)O.innerHTML+=`<i style="color:#${'6B8CFF6A6B04B13425E39D25'.substr(x%4*6,6)}">█</i>`+(++f%12?'':'<br>');x++},f=x=0,[..."fhilsswsssuss££cgÓdcddc¤g£stcucds³c¹cefefcc¤c§"].map(v=>(d(v=v.charCodeAt(0)-99),d(v>>4)))
<p id=O>

ここに画像の説明を入力してください

方法:

  1. ビットマスクを使用して、63x8ビットの文字列は、0〜9の範囲の数字で構成される126x4ビットの値配列を提供します。(いらいらします... 4ビットで63文字を節約しましたが、50文字を使ってビットを再びアンパックしました。それでも、13文字は13文字です!:-)
  2. 4つのペイントカラーは、B、G、R、Oの順序で循環します。各反復で、現在の色に対して0〜9 divがレンダリングされます(12回ごとに改行が入ります)

カラーサイクルの最適な順序を決定するために、[R、G、B、O]の24個の順列それぞれの生データに対して圧縮アルゴリズムを実行し、最短の出力を生成するものを選択しました(126が最高、最低が最適でした約150個)

ETAは、obfusca-tweetを使用して他の回答を読んだ後にのみこれを発見しました...

eval(unescape(escape`𩀽𭠽🡻𩡯𬠨𪐽𭠦𜐵𞱩𛐭𞰩𣰮𪑮𫡥𬡈𥁍𣀫👠🁩𘁳𭁹𫁥🐢𨱯𫁯𬠺𘰤𮰧𝡂𞁃𡡆𝡁𝡂𜀴𠠱𜰴𜠵𡐳𞑄𜠵𙰮𬱵𨡳𭁲𚁸𙐴𚠶𛀶𚑽𘠾ﶈ�𛱩🡠𚰨𚰫𩠥𜐲🰧𙰺𙰼𨡲🠧𚐻𮀫𚱽𛁦👸🐰𛁛𛠮𛠢𩡨𪑬𬱳𭱳𬱳𭑳𬲣𸱣𩳓𩁣𩁤𨲤𩲣𬱴𨱵𨱤𬲳𨲹𨱥𩡥𩡣𨲤𨲧𘡝𛡭𨑰𚁶🐾𚁤𚁶👶𛡣𪁡𬡃𫱤𩑁𭀨𜀩𛐹𞐩𛁤𚁶🠾𝀩𚐩𒠼𬀠`.replace(/u../g,'')))

さらなるアイデア。-まれな7,8,9がそれぞれ4余分な60000Nで、3ビットのデータ範囲0-6を試してください。-水平方向のピクセル以外のすべての方向と速度のカラーサイクル順列を一度に確認します。-複数のレンダーパスを試して、色を重ねることができます。


D'ohは、これはバイトではなく文字に関するものであるため、16ビット文字を使用してデータを再び半分にした可能性があります。
でこぼこ

1

Javascript、253 240 238 236

Obfuscatweet ed source- 253 240 238 236

document.write(unescape(escape('🁳𨱲𪑰𭀾𘠵𫐲𫰹𫑨𜰰𞐷𫁯𩰹𜐰𜑰𪰹𮡰𝱵𞑶𭁸𭰹𜱱𭐸𞐸𝡷𭰹𭑯𩱫𞐳𨱳𬁨𞐶𪡭𪡥𞐶𬁬𫡵𞐶𭠷𮐲𞑭𝐸𜀹𭁨𮡯𞐳𨡥𨰵𘠮𬱰𫁩𭀨𞐩𛡦𫱲𡑡𨱨𚁦𭑮𨱴𪑯𫠨𨰩𮱤👤𫱣𭑭𩑮𭀻𨰽𬁡𬡳𩑉𫡴𚁣𛀳𝠩𛡴𫱓𭁲𪑮𩰨𝀩𞱷𪁩𫁥𚁣𛡬𩑮𩱴𪀼𜐲𚑣🐢𜀢𚱣𞱣𛡳𬁬𪑴𚀢𘠩𛡦𫱲𡑡𨱨𚁦𭑮𨱴𪑯𫠨𭠩𮱤𛡷𬡩𭁥𚀢🁰𘁳𭁹𫁥🐧𩁩𬱰𫁡𮐺𪑮𫁩𫡥𞱰𨑤𩁩𫡧𞠹𞱢𨑣𪱧𬡯𭑮𩀺𘰢𚱛𘠶𠠸𠱆𡠢𛀢𝡁𝡂𜀴𘠬𘡅𜰹𡀲𝐢𛀢𠠱𜰴𜠵𘡝𦰫𭡝𚰢𙰾🀯𬀾𘠩𯐩𞱤𛡷𬡩𭁥𚀢🁢𬠾𘠩𯐩🀯𬱣𬡩𬁴🠠').replace(/uD./g,'')))

難読化されていない- 395 370 365 361

<script>"5m2o9mh3097log9101pk9zp7u9vtxw93qu8986ww9uogk93csph96jmje96plnu96v7y29m5809thzo93bec5".split(9).forEach(function(c){d=document;c=parseInt(c,36).toString(4);while(c.length<12)c="0"+c;c.split("").forEach(function(v){d.write("<p style='display:inline;padding:9;background:#"+["6B8CFF","6A6B04","E39D25","B13425"][+v]+"'></p>")});d.write("<br>")})</script>

<p>タグトリックの@compass、および2(5)文字の@xemに感謝します。

デモ

データをベース36から変換し、ベース4に変換します。


私はそれをテストすることはできませんが、その後にpadding:9ユニットなしで何もしないとは思いません。の代わりに、aまたはq暗黙的にインラインであるような1文字の要素を使用することもできpます。
NinjaBearMonkey

@hslデモリンクを更新しましたが、少なくともMac上のChrome、Firefox、Safariではうまく機能します。
スナック14年

-2バイト:「|」を置き換えます 文字列とスプリットで9ずつ。また、あなたは24b)は、のような、あなたが保存するVARにそれを置くべきである「とのdocument.write」3回を使用
XEM

@xem番号分割のトリックを思い出してくれてありがとう。また、document.write変数に代入できないため(を使用する必要がありますdocument.write.bind(document))、document変数に代入するのが最善でした。
スナック14年

または、最初にこれを行うことができます:(d = document)[w = "write"](/ *書くこと* /)、そしてそれをした後:d [w]( "Hi")
xem

1

JavaScript ES6(HTML + CSS)、199 307 3195 3630

使用オブフスク--つぶやきを

eval(unescape(escape('𬰽𦱝𒠧𜰹𮡲𬀳𝁤𩡬𜱪𩱴𜐴𨡷𭐵𝁢𪱣𩠴𝱰𜡨𜱦𫁹𭀳𪑮𪀱𝀵𝀸𞐶𫑳𫱡𞑰𩡥𝰹𭁺𝑲𞑤𝁢𜰳𝁨𩁸𝀵𩀴𞐶𫠹𩱱𙰮𫑡𭁣𪀨𛰮𮰵𯐯𩰩𛡦𫱲𡑡𨱨𚀨𫠬𪐩🐾𦰮𛠮𬁡𬡳𩑉𫡴𚁮𛀳𝠩𛡴𫱓𭁲𪑮𩰨𝀩𧐮𩡯𬡅𨑣𪀨𚁭𛁪𚐽🡳𛡰𭑳𪀨𪠫𜐫𙱰𮀠𙰫𚀫𪐫𜐩𚰧𬁸𘀣𙰫𦰧𠠱𜰴𜠵𙰬𙰶𠠸𠱆𡠧𛀧𝡁𝡂𜀴𙰬𙱅𜰹𡀲𝐧𧑛𚱭𧐩𚐩𒡤𫱣𭑭𩑮𭀮𭱲𪑴𩐨𙰼𬀠𬱴𮑬𩐽𘡷𪑤𭁨𞠱𬁸𞱨𩑩𩱨𭀺𜑰𮀻𨡯𮀭𬱨𨑤𫱷𞠧𚱳𚰧𘠧𚐠').replace(/uD./g,'')))

これにより、画像や複数の要素を使用せずにスプライトが表示されます。CSS box-shadowプロパティを誤用して各ピクセルを作成するだけです。http://jsbin.com/pozohiyezo/で試してください。この難読化されていないバージョンは307文字です。

s=[]
'39zrp34dfl3jgt14bwu54bkcf47p2h3flyt3inh1454896msoa9pfe79tz5r9d4b334hdx45d496n9gq'.match(/.{5}/g).some((n,i)=>[...parseInt(n,36).toString(4)].forEach((m,j)=>s.push(j+1+'px '+(+i+1)+'px #'+['B13425','6B8CFF','6A6B04','E39D25'][+m])))
document.write('<p style="width:1px;height:1px;box-shadow:'+s+'"')

これは、元のプレーンバニラHTMLバージョンです。http://jsfiddle.net/gfeLn1ey/1/で実際の動作をご覧ください。

<p style="width:1px;height:1px;box-shadow:4px 1px 0 #B13425,5px 1px 0 #B13425,6px 1px 0 #B13425,7px 1px 0 #B13425,8px 1px 0 #B13425,12px 1px 0 #6B8CFF,3px 2px 0 #B13425,4px 2px 0 #B13425,5px 2px 0 #B13425,6px 2px 0 #B13425,7px 2px 0 #B13425,8px 2px 0 #B13425,9px 2px 0 #B13425,10px 2px 0 #B13425,11px 2px 0 #B13425,12px 2px 0 #6B8CFF,3px 3px 0 #6A6B04,4px 3px 0 #6A6B04,5px 3px 0 #6A6B04,6px 3px 0 #E39D25,7px 3px 0 #E39D25,8px 3px 0 #6A6B04,9px 3px 0 #E39D25,12px 3px 0 #6B8CFF,2px 4px 0 #6A6B04,3px 4px 0 #E39D25,4px 4px 0 #6A6B04,5px 4px 0 #E39D25,6px 4px 0 #E39D25,7px 4px 0 #E39D25,8px 4px 0 #6A6B04,9px 4px 0 #E39D25,10px 4px 0 #E39D25,11px 4px 0 #E39D25,12px 4px 0 #6B8CFF,2px 5px 0 #6A6B04,3px 5px 0 #E39D25,4px 5px 0 #6A6B04,5px 5px 0 #6A6B04,6px 5px 0 #E39D25,7px 5px 0 #E39D25,8px 5px 0 #E39D25,9px 5px 0 #6A6B04,10px 5px 0 #E39D25,11px 5px 0 #E39D25,12px 5px 0 #E39D25,2px 6px 0 #6A6B04,3px 6px 0 #6A6B04,4px 6px 0 #E39D25,5px 6px 0 #E39D25,6px 6px 0 #E39D25,7px 6px 0 #E39D25,8px 6px 0 #6A6B04,9px 6px 0 #6A6B04,10px 6px 0 #6A6B04,11px 6px 0 #6A6B04,12px 6px 0 #6B8CFF,4px 7px 0 #E39D25,5px 7px 0 #E39D25,6px 7px 0 #E39D25,7px 7px 0 #E39D25,8px 7px 0 #E39D25,9px 7px 0 #E39D25,10px 7px 0 #E39D25,12px 7px 0 #6B8CFF,3px 8px 0 #6A6B04,4px 8px 0 #6A6B04,5px 8px 0 #B13425,6px 8px 0 #6A6B04,7px 8px 0 #6A6B04,8px 8px 0 #6A6B04,12px 8px 0 #6B8CFF,2px 9px 0 #6A6B04,3px 9px 0 #6A6B04,4px 9px 0 #6A6B04,5px 9px 0 #B13425,6px 9px 0 #6A6B04,7px 9px 0 #6A6B04,8px 9px 0 #B13425,9px 9px 0 #6A6B04,10px 9px 0 #6A6B04,11px 9px 0 #6A6B04,12px 9px 0 #6B8CFF,1px 10px 0 #6A6B04,2px 10px 0 #6A6B04,3px 10px 0 #6A6B04,4px 10px 0 #6A6B04,5px 10px 0 #B13425,6px 10px 0 #B13425,7px 10px 0 #B13425,8px 10px 0 #B13425,9px 10px 0 #6A6B04,10px 10px 0 #6A6B04,11px 10px 0 #6A6B04,12px 10px 0 #6A6B04,1px 11px 0 #E39D25,2px 11px 0 #E39D25,3px 11px 0 #6A6B04,4px 11px 0 #B13425,5px 11px 0 #E39D25,6px 11px 0 #B13425,7px 11px 0 #B13425,8px 11px 0 #E39D25,9px 11px 0 #B13425,10px 11px 0 #6A6B04,11px 11px 0 #E39D25,12px 11px 0 #E39D25,1px 12px 0 #E39D25,2px 12px 0 #E39D25,3px 12px 0 #E39D25,4px 12px 0 #B13425,5px 12px 0 #B13425,6px 12px 0 #B13425,7px 12px 0 #B13425,8px 12px 0 #B13425,9px 12px 0 #B13425,10px 12px 0 #E39D25,11px 12px 0 #E39D25,12px 12px 0 #E39D25,1px 13px 0 #E39D25,2px 13px 0 #E39D25,3px 13px 0 #B13425,4px 13px 0 #B13425,5px 13px 0 #B13425,6px 13px 0 #B13425,7px 13px 0 #B13425,8px 13px 0 #B13425,9px 13px 0 #B13425,10px 13px 0 #B13425,11px 13px 0 #E39D25,12px 13px 0 #E39D25,1px 14px 0 #6B8CFF,2px 14px 0 #6B8CFF,3px 14px 0 #B13425,4px 14px 0 #B13425,5px 14px 0 #B13425,6px 14px 0 #6B8CFF,7px 14px 0 #6B8CFF,8px 14px 0 #B13425,9px 14px 0 #B13425,10px 14px 0 #B13425,11px 14px 0 #6B8CFF,12px 14px 0 #6B8CFF,1px 15px 0 #6B8CFF,2px 15px 0 #6A6B04,3px 15px 0 #6A6B04,4px 15px 0 #6A6B04,5px 15px 0 #6B8CFF,6px 15px 0 #6B8CFF,7px 15px 0 #6B8CFF,8px 15px 0 #6B8CFF,9px 15px 0 #6A6B04,10px 15px 0 #6A6B04,11px 15px 0 #6A6B04,12px 15px 0 #6B8CFF,1px 16px 0 #6A6B04,2px 16px 0 #6A6B04,3px 16px 0 #6A6B04,4px 16px 0 #6A6B04,5px 16px 0 #6B8CFF,6px 16px 0 #6B8CFF,7px 16px 0 #6B8CFF,8px 16px 0 #6B8CFF,9px 16px 0 #6A6B04,10px 16px 0 #6A6B04,11px 16px 0 #6A6B04,12px 16px 0 #6A6B04,6px 6px 0 5px #6B8CFF"

TIL、<pタグを閉じることができません:)
xem 14年

このコードは、regpackなどのツールで非常に優れた圧縮を行うことができます。729bの例を次に示します(ただし、JSを使用してHTMLを記述します):goo.gl/7fF7kx
xem

@xem私は実際にはJSでコードを生成することすら考えていませんでしたが、コードのパターンに従ってずっと短く購入することができました。
NinjaBearMonkey 14年

1

Javascript、256または245 252または241

256

document.write("k6n56kcraqlaqasasjaqbsasibtdlstlb2cmc2b2cid5dra2q3q2au7u55rj4j4kclcidld".replace(/./g,function(x){return new Array((x=parseInt(x,36))&7).join("<li style=padding:4%;float:left;background:#"+['B13425','6A6B04','6B8CFF','E39D25'][x>>3]+">")}))

256を上書きするのは悲しいことですが、印刷できない文字を使用する場合は245が可能です。

document.write(btoa(">§ç©­ª¥j¦¬jÈÚ©»²&ív[-½ÍÙÈåÚÚÚ­êÙ«»»køÉ\\Ù]").replace(/./g,function(x){return new Array((x=parseInt(x,36))&7).join("<li style=padding:4%;float:left;background:#"+["B13425","6A6B04","6B8CFF","E39D25"][x>>3]+">")}))

印刷できない文字を含むソリューションを送信すると問題が発生します。引数は、バックスラッシュをエスケープするために追加された長さの1シンボルのbtoa結果でなければなりませんatob("ij6n56kcraqlaqasasjaqbsasibtdlstlb2cmc2b2cid5dra2q3q2au7u55rj4j4kclcidld")

両方のソリューションを4つのシンボルで短くします。配列の作成に新しいものは必要ありません。

252

document.write("k6n56kcraqlaqasasjaqbsasibtdlstlb2cmc2b2cid5dra2q3q2au7u55rj4j4kclcidld".replace(/./g,function(x){return Array((x=parseInt(x,36))&7).join("<li style=padding:4%;float:left;background:#"+['B13425','6A6B04','6B8CFF','E39D25'][x>>3]+">")}))

241

document.write(btoa("©ùêG+j©Z©«²6ªnƬ»]Ëeog&sför'yv¶¶«z¶jîîçãâ>$rVÚÙ]").replace(/./g,function(x){return Array((x=parseInt(x,36))&7).join("<li style=padding:4%;float:left;background:#"+['B13425','6A6B04','6B8CFF','E39D25'][x>>3]+">")}))

このバージョンではエスケープする必要はありません。btoa引数は、の結果でありますatob("k6n56kcraqlaqasasjaqbsasibtdlstlb2cmc2b2cid5dra2q3q2au7u55rj4j4kclbaidld")


これと私の最後の課題にも印刷不可能な問題があることに気づきました。(もし簡単に間違えられるかもしれませんが)
バンピー

1

Perlの、266の 260 257 249 245バイト

$_="444111114444441111111114442223323444423233323334423223332333422333322224444333333344442212224444422212212224222211112222332131131233333111111333331111111133441114411144422244442224222244442222";s/\d/\033[4$&m  /g;s/.{84}/$&\033[00m\n/g;print

user2485710のbashソリューションと同様のアプローチを使用して、VT100スタイルの出力を記述します。12個の「vt100ピクセル」、12 * 7 = 84ごとに改行を挿入することにより、改行の明示的なNを削除します。


1

SmileBASIC、147 136文字

P$="xxxxxxxx
FOR I=0TO 191C=ASC("xxxxxxxxxxxxxxxxxxxxxxxx"[I/8])>>I MOD 8*2AND 3GPSET I/16,15AND I,ASC(P$[C*2])<<16OR ASC(P$[C*2+1])NEXT

出力(トリミング): スクリーンショット

データ文字列のすべての文字をx' に置き換えました。ここに文字コードがあります(UCS-2の場合):(
P$パレット):FF6B,8CFF,FFB1,3425,FF6A,6B04,FFE3,D925
画像データ:0000,83F8,0A80,A3FA,8BE4,A5EA,BEA5,A55A,7EE5,0575,BFF5,0156,BFF5,0156,BBA5,0575,3AF4,A55A,3BC4,A5EA,0BC4,A3FA,0300,83F8

パレットは文字列に格納され、各色(32ビット)は2文字(各16ビット)に格納されます。画像データ(ピクセルあたり2ビット)は別の文字列(文字あたり8ピクセル)に保存されます。
幸いなことに、チャレンジは文字でスコアリングされます。


1

05AB1E、87バイト(非競合)

•8,vkJíÝ1¢tt6,9XÂck$XSãõO©Ú"›qf®¸Ì#}„K0ÝCìxý}É~ð_áú•4BSvy•3«WKyÛòèz*Ðeb•16B6ôè'#ì})12ô»

オンラインでお試しください!

出力:

#B13425 #B13425 #B13425 #6B8CFF #6B8CFF #6B8CFF #6B8CFF #6B8CFF #B13425 #B13425 #B13425 #B13425
#B13425 #B13425 #6B8CFF #6B8CFF #6B8CFF #6B8CFF #6B8CFF #6B8CFF #6B8CFF #6B8CFF #6B8CFF #B13425
#B13425 #B13425 #6A6B04 #6A6B04 #6A6B04 #E39D25 #E39D25 #6A6B04 #E39D25 #B13425 #B13425 #B13425
#B13425 #6A6B04 #E39D25 #6A6B04 #E39D25 #E39D25 #E39D25 #6A6B04 #E39D25 #E39D25 #E39D25 #B13425
#B13425 #6A6B04 #E39D25 #6A6B04 #6A6B04 #E39D25 #E39D25 #E39D25 #6A6B04 #E39D25 #E39D25 #E39D25
#B13425 #6A6B04 #6A6B04 #E39D25 #E39D25 #E39D25 #E39D25 #6A6B04 #6A6B04 #6A6B04 #6A6B04 #B13425
#B13425 #B13425 #B13425 #E39D25 #E39D25 #E39D25 #E39D25 #E39D25 #E39D25 #E39D25 #B13425 #B13425
#B13425 #B13425 #6A6B04 #6A6B04 #6B8CFF #6A6B04 #6A6B04 #6A6B04 #B13425 #B13425 #B13425 #B13425
#B13425 #6A6B04 #6A6B04 #6A6B04 #6B8CFF #6A6B04 #6A6B04 #6B8CFF #6A6B04 #6A6B04 #6A6B04 #B13425
#6A6B04 #6A6B04 #6A6B04 #6A6B04 #6B8CFF #6B8CFF #6B8CFF #6B8CFF #6A6B04 #6A6B04 #6A6B04 #6A6B04
#E39D25 #E39D25 #6A6B04 #6B8CFF #E39D25 #6B8CFF #6B8CFF #E39D25 #6B8CFF #6A6B04 #E39D25 #E39D25
#6A6B04 #6A6B04 #6A6B04 #6B8CFF #6B8CFF #6B8CFF #6B8CFF #6B8CFF #6B8CFF #6A6B04 #6A6B04 #6A6B04
#6A6B04 #6A6B04 #6B8CFF #6B8CFF #6B8CFF #6B8CFF #6B8CFF #6B8CFF #6B8CFF #6B8CFF #6A6B04 #6A6B04
#B13425 #B13425 #6B8CFF #6B8CFF #6B8CFF #B13425 #B13425 #6B8CFF #6B8CFF #6B8CFF #B13425 #B13425
#B13425 #6A6B04 #6A6B04 #6A6B04 #B13425 #B13425 #B13425 #B13425 #6A6B04 #6A6B04 #6A6B04 #B13425
#6A6B04 #6A6B04 #6A6B04 #6A6B04 #B13425 #B13425 #B13425 #B13425 #6A6B04 #6A6B04 #6A6B04 #6A6B04

05AB1Eは色やグラフィックスを作成できないため...これが受け入れられない場合は削除します。


あなたはbashのラッパーを書いて、あなたのソリューションがあると言うことができるBash + 05AB1E
パベル

1
@Pavel私はそれをすることを考えていました、私はこの解決策を他の誰かの; P。
魔法のタコUr

私はそれが「勝った」とは言えませんが、すばらしい圧縮スコアなので、それを維持してください:)
xem

0

Sinclair BASIC-573バイト

OK、Spectrumは指定されたRGBカラーを表示できないため、可能な限り近い色を使用しました。

10 let x=0:let y=0:let i=0
20 let a$="1c2e1f2i1c4c6b461d4646c46c1b464b6c46c14b6d4d1d6g1d4b24c1e4c24b24c14d2d4d6b4262b6246e2f6e2c1b2c6b1b2c1b2c1c4c1d4c14d1d4d"
30 let l=len a$
40 let i=i+1:let c=1:let p=0:let k=val a$(i)
50 if a$(i+1)>="a" then let c=code a$(i+1)-96:let i=i+1
60 print at y,x;ink k;"\::":let p=p+1:let x=x+1:if x=12 then let x=0:let y=y+1
70 if p<c then goto 60
80 if i<l then goto 40

文字列は、色(1 =青、2 =赤など)の後に、ブロックが繰り返される回数を表す文字が続きます(ASCII値から96を引いて1,2,3などになる)。文字のない数字は、1つのブロックを描画します。

"\::"60行目は、TAPファイルに変換してFuseエミュレーターに読み込む前に、テキストエディターでグラフィックを入力する方法です。(画面上に実線のブロックグラフィックとして表示されます)。

各キーワードはSinclair BASICの1バイトであり、生成後にPEEKコマンドからのカウントが含まれています。

それはマリオです


0

Perl- 399 171バイト

use MIME::Base64;$_='R0lGODdhDAAQAKEEAGuM/+OdJWprBLE0JSwAAAAADAAQAAACNoSHaAvpaoQMQQRmLdUXZM55XCUJDIVSmDCUjMhKrQSzSamxAbKP+5P6PQaqBiSxcCVpuJWkAAA7';
print decode_base64($_)

gifファイルをstdoutに書き込みます。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.