像素艺术,第1集:展示超级马里奥


47

这是我!

今天的任务很简单:编写一个程序或一个函数,在NES上的蓝色背景上显示来自Super Mario Bros的空闲的小Mario小精灵。

任何种类的输入都是有效的,只要它在屏幕/窗口/浏览器的任何位置显示那些12 * 16像素即可。

(编辑:如果您的语言不能做像素画,则可以放大显示的图像。您还可以输出ASCII画或HTML画,但是使用正确的颜色。)

图片(放大400%):

您必须使用以下颜色:

  • 蓝色:#6B8CFF
  • 红色:#B13425
  • 绿色/棕色:#6A6B04
  • 橙色:#E39D25

最短的程序(字符数)获胜!

存在标准漏洞(尤其是不允许网络连接),但是允许在程序中硬编码和显示图像文件。(使用此技巧的条目将单独排名)

开始了!


现任排行榜

仅使用代码的最短答案:

使用某种硬编码图像的最短答案:


2
另外,不允许创建文件吗?它必须显示吗?
Martin Ender 2014年

1
我在该图像中看不到任何图案。因此,这全部归结为一种语言可以使用的最佳压缩方式。
Optimizer

20
挑剔:那是马里奥,不是超级马里奥。
丹尼斯

5
这是一个有趣的主意...这里是一个续集挑战的主意:将Mario图片(任何格式)转换成Luigi的图片!
Zibbobz 2014年

3
我们可以制作一个像他一样的piet程序吗?
Conor O'Brien

Answers:


36

HTML / JS,206 158 153 102


102

使用的技巧:将压缩的GIF文件另存为HTML文件,并在末尾添加<img src =#>

感谢此条目:@NiettheDarkAbsol的https://codegolf.stackexchange.com/a/39926/10732

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>

演示版


使用的工具:


您不需要标签。只需使用Chrome的数据uri,然后在您的网址栏中输入即可。200个字符
优化程序

嗯...我认为dataURI不是有效的“程序”。但是你是对的。所有浏览器都在地址栏中允许dataURIs。
xem 2014年

现在,您自己将漏洞用作OP;)。您需要将所有工作转移到GIF格式的外部/内置压缩中。如果这很酷,我们现在都应该去寻找具有最佳压缩率的晦涩图像格式,这样我本可以省下很多工作来编写自己的压缩文件。;)
Martin Ender 2014年

2
@xem好吧,你的挑战,你的电话。但是,如果我们现在只是寻找压缩程度最高的现有文件格式,那似乎毫无意义。;)
Martin Ender 2014年

1
看来rawgit链接已死。
艾迪生·克伦普

27

Mathematica,412 292 252 212 163 148 143 141 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-4(而不是base-5)对调色板索引进行编码来获得这些字符。现在,我不介意修正下面的解释和屏幕截图,因此我将答案的原始base-5版本留给您:


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

我正在用Unicode字符编码像素(可以按字符计数!)。

这是Mathematica中的样子:

在此处输入图片说明

运作方式如下:

首先,我们定义一个f将Unicode字符串(作为第一个参数#传入)转换为整数列表的函数。首先,我们获得字符代码。那些可以解释为以65536为基数的数字。然后,我们将该数字转换为另一个基数,作为第二个参数传入#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将其拆分为的行12并将其提供给Image。瞧!

编辑:使用Unicode包装,RLE不再值得。删除它可以保存50个字符。

编辑:当然,没有RLE,也没有必要去基数16。

编辑:在我们讨论的同时,为什么不对调色板进行Unicode包装呢?(我有一种预感,我可以通过将整个调色板也设置为一个字符串并在其中使用来节省更多的钱Partition。稍后我将尝试使用。)

编辑:是的,那确实剃掉了另外5个字节。


1
您介意添加结果的屏幕截图吗?(不是我不信任您的代码,而是对它的显示方式感到好奇:在窗口中还是在浏览器中?否则?)
xem

@xem会的。这是一个能够图形化输入和输出的REPL环境。
Martin Ender 2014年

不确定,但是您正在镜像图像的下部吗?
Optimizer

1
@Optimizer不,我怀疑我能用少于要保存的字符来完成此操作。
马丁·恩德

当我查看Mathematica文档时,看不到波浪号的任何用法,但在这里看来您正在使用它将一个函数的结果馈入另一个函数,然后将附加参数应用于第二个函数(IntegerDigits)?另外,调色板:在查看图像时,似乎只有四种颜色,但是您的调色板似乎包括以下几种颜色:{177、52、37、107、140、255、106、107、4、227 ,157,37}。查看Image的文档,除非提供了ColorScale-> RGB之类的其他选项,否则它看起来会打印出灰度。
CryptoCommander 2014年

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个1字节。这允许将数据作为单个DWORD加载。通过掩盖该值的最低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 / v4j6b9qPAQVAQP4A5B

样本输出: 在此处输入图片说明


10

GIF-93字节

现在,对图像进行硬编码显然还可以,所以...是吗?:D

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

如记事本++所示

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


@NiettheDarkAbsol我不确定您如何计算它的大小,但是我计算了150个字节。无论如何,得分都是按字符计的,似乎是114个字符。
Martin Ender 2014年

2
是的,PHP代码段对我来说很好(即使您可以删除最后2个字节)。但是原始的gif片段不是程序。
xem

1
@xem:如果将浏览器视为HTML / javascript / etc的“解释器”,并通过相同的机制将其原始gif片段提供给它,则会产生所需的输出...两者之间的差异会变小
Mooing Duck

10

击+ 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/}/
grawity 2014年

h 我甚至upvoted DigitalTrauma的相关提示,但我一直忘了{.. }。谢谢@grawity。
manatwork,2014年

8

Octo / XO-Chip,70字节

Octo是一种高级汇编语言,可编译为CHIP-8虚拟机的字节编码指令。Octo对基本的CHIP-8字节码提供了一些称为“ XO-Chip”的自定义扩展,包括能够通过覆盖位平面绘制4色位图的功能。

编译后的字节如下:

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 

主程序是三个两个字节的指令。将内存索引寄存器设置i到数据段的开头,选择绘图平面3(3是位掩码;这表示您希望在两个位平面都以4色模式进行绘图),然后在x和y位置给定一个sprite寄存器v0(初始化为零)。最后的0提供了精灵的大小,在SuperChip和XO-Chip指令集中,它将绘制一个16x16的精灵。在4色模式下,第一个平面的位图紧跟着第二个平面的位图。

要查看这些平面的工作原理,请考虑以下经过修改的程序,该程序在绘制mario之后向右滚动一个平面:

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编写的其他解决方案之一。围绕此工具,实际上在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彩色瓷砖字符串,然后将其转换为十六进制字符串。底数4的索引表示颜色(0 =蓝色,1 =红色等),带有内联p的CSS用于div,因为div需要扩展内容(p也较短)。由于CSS需要以字母开头,因此在CSS标记之前添加“ A”。

CSS填充会产生像素。这些都没有使用Unicode字符,无论如何我都不是很熟悉,尽管在这种情况下可能会低于300。使用填充的相对优势在于,在这种情况下,您可以将图像放大到每个像素所需的大小。我使用了9个像素,但是如果您花费额外的字符,则每个表示的像素最多可以获取99个像素。


CSS,127 119 118 114 100 13 0个字符

从切换prp,不需要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>'));}

我试图从这个普通的JS处理十六进制字符串中尽可能地减少,但是由于这是我的第一次尝试,所以这就是我仅使用我所知道的方法所能走的距离。通过添加标签的功能已缩短了HTML编写,并且类使用以4为底的值来确定要显示的颜色。

使用其他的缩短方式,用[]括号替换charAt,并删除A0类并将蓝色设置为p的默认颜色,从而节省了10个字符。rpCSS的巨大损失抵消了使用标签的额外成本。

从删除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

另外,您可以删除&lt; html>标记,将&lt; style>标记放在末尾,并删除最后一个CSS规则的/ style和尾随的“}”。
xem

@xem好吧,我剪掉所有的行并将所有东西压扁。我将尝试找出一种将js拆分为obfuscatweet的最佳方法。
罗盘2014年

1
obfuscatweet接受任何js代码(因此您可以在其中放置289个js字符)或任何html代码(因此您可以在此处复制html文件)。可以使用正确的charset元标记在浏览器的控制台或HTML文件中执行obfuscatweet的输出。
xem

psst,您忘了删除CSS部分的最后一个“}”。没有它就可以工作。
xem 2014年

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)

并输出:

马里奥

基本上,我将Mario图像转换为每个像素为2位数字。然后,我将其编码为base 32,即代码中显示的字符串。首先将字符串重新整形为5 x 16(每行(12像素)的2位数字被编码为基数32),然后转换回基数10。结果再次转换为基数4,得到12x16的数组2位数字。这些数字使用绘制imagesc()。然后,使用colormap()所需十六进制值的自定义颜色图来分配颜色。

有趣的是,使用的字节数的三分之一只是为了让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}将有所帮助。
manatwork 2014年

@manatwork再试一次。
SomeShinyObject 2014年

真好 但是为什么div?出于好奇,我尝试了ECMAScript版本。得到了372个字符:jsfiddle.net/768h7brb
manatwork 2014年

因为<div></div>比短document.createElement('div')。而且JSFiddle不喜欢document.write
SomeShinyObject 2014年

1
反转三元运算符的条件以摆脱比较的右边:i%12?"":"<br>"
manatwork 2014年

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):
马里奥放大


嘿,我想知道是否有人会以某种方式利用对称性。我无法找到最终使用的方法。
Bumpy

4

C,4999字节

这绝对不能与这里的某些答案竞争,但我想我会给C答案。该代码是一条长行,因此这里是pastebin链接。如果您愿意,这是gzip压缩代码的base64编码:

H4sICAzFGFYCA21hcmlvLmMA3Zc9DsIwDIXv0qndUqchkXwUurAgdYiFEEyIu4NYaZBI7PzNT3Lsz4mf408bjdPjct3odh6HVeujdgg4K4vzohCM8esdjHOpkrVoALUtIrBX8y1R04DKNCGZmTp85CVdAHifYuxO3mElIlju6xaRICOgCo4pD64PoiTzHnkZcHYnRhAYcEEpFznxB1mXP4TdS/KeVGYPZbmVaQHlnRVZFi65OkhoGodq+RHrby4xsTj8i6RmapXrPvfa0Q8ZWZY1/UPbSiC7Z2bYA7r0zla57Xmo8sOEzxdNYIXFhxMAAA==

值得注意的是,它不需要外部库即可运行。

需要xterm,Konsole或GNOME终端,因为它使用RGB扩展到ANSI颜色转义码来输出正确的颜色(ANSI未定义橙色)。出于明显的原因,ideone无法正常工作。它可以在使用xterm的Cygwin下的Windows中运行(实际上,这就是我测试的方式)。MSYS可能工作;我不确定。

我的机器上的输出(xterm):

是我,马里奥!


2
-1并非10的倍数
Conor O'Brien 2015年

抱歉,这是分数的参考
Conor O'Brien 2015年

4

Excel VBA中,310 307 295个字节

匿名VBE Instants Window函数,可将单元格的Mario输出到Activesheet对象 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程序

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个字节,用于删除空白-12个字节,用于[...]Range(...)表示法上使用表示法;从十六进制颜色转换为整数颜色

输出量

是我


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

3

Pyth,83个字节

免责声明:这不是一个成功的候选人,因为某些语言功能是在发布问题后创建的。

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

这是一个十六进制转储:

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的最新版本中有效?
lirtosiast,2015年

@ThomasKwa是的,忘记了。我将编辑一个信息。
Jakube

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默认为内联的标记替换组成行的。我还没有测试过,但是使用a应该可以。您也可以使用background代替background-color
NinjaBearMonkey 2014年

2

Perl-非高尔夫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

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位的字符串提供了一个126x4位的值数组,该数组由0-9范围内的数字组成。(令人沮丧的是……通过4位节省了63个字符,但又花了50个字符再次将这些位拆包,大声笑。不过,13个字符等于13个字符!:-)
  2. 4种绘画颜色按以下顺序循环:B,G,R,O。在每次迭代中,为当前颜色渲染0-9格(每12行换行)

为了确定颜色循环的最佳顺序,我针对[R,G,B,O]的24个置换中的每个置换对原始数据运行了压缩算法,并选择了产生最短输出的压缩算法(最佳是126,最佳是大约150左右)

ETA仅在使用obfusca-tweet阅读其他答案后才发现此问题。

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

进一步的想法。-尝试3位数据范围0-6,罕见的7,8,9分别获得4个额外值:60000N。-一次检查所有方向和速度上的颜色周期排列,而不是水平检查一个像素。-尝试多次渲染,以使颜色可以分层。


D'oh刚刚发现这是关于字符而不是再见的,因此使用16位字符可能会将数据再次减半。
Bumpy

1

JavaScript中,253 240 238 236

Obfuscatweet ED源- 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>

感谢@compass提供<p>标签技巧,以及@xem提供2(5)个字符。

演示版

它将数据从基数36转换为基数4。


我无法对其进行测试,但我认为padding:9在此之后没有单元就不会做任何事情。您也可以使用像这样的单字母元素aq隐式内联而不是p
NinjaBearMonkey 2014年

@hsl我已经更新了演示链接,并且至少在Mac上的Chrome,Firefox和Safari上可以正常使用。
零食

-2字节:替换“ |” 在字符串中加9并拆分。另外,您使用3次“ document.write”,则应将其放入var中进行保存,例如24b)
xem

@xem感谢您提醒我数字分割技巧。而且由于无法分配document.write变量(应使用document.write.bind(document)),所以我最好的办法是分配document给变量。
零食

或者,您可以第一次执行此操作:(d = document)[w =“ write”](/ *要写的东西* /),然后执行以下操作:d [w](“ Hi”)
xem

1

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

使用Obfusc-a-tweet

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

此代码在regpack之类的工具中可以具有很好的压缩效果。这是729b中的示例(尽管JS用于编写HTML):goo.gl/7fF7kx
xem

@xem实际上我什至都没有考虑过用JS生成代码,但是我能够按照代码的模式来缩短购买时间。
NinjaBearMonkey 2014年

1

Javascript,256或245252或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]+">")}))

提交具有不可打印字符的解决方案存在一些问题。的参数btoa必须是的结果,atob("ij6n56kcraqlaqasasjaqbsasibtdlstlb2cmc2b2cid5dra2q3q2au7u55rj4j4kclcidld")其中添加了1个长度的符号以逃避反斜杠。

将这两个解决方案都缩短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")


我注意到了这一不可打印的问题,也是我的最后一个挑战。我认为只有字符8、9和13才有帮助(尽管我很容易弄错)
Bumpy

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

输出(裁剪): 屏幕截图

我用xs 替换了数据字符串中的所有字符,这是字符代码(在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位)存储在两个字符(每个16位)中。图像数据(每个像素2位)存储在另一个字符串(每个字符8个像素)中。
幸运的是,挑战以字符计分,因为如果保存在UTF-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
Pavel

1
@Pavel我正在考虑这样做,我想我将与其他人的; P配合使用此解决方案。
魔术章鱼缸

我不能说它“赢了”,但请保留它,因为这是一个不错的压缩成绩:)
xem

0

Sinclair BASIC-573字节

好的,因此光谱不能显示指定的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等)。一个没有字母的数字只会画一个方块。

"\::"第60行介绍了如何在变成TAP文件以加载到Fuse仿真器之前在文本编辑器中输入图形。(在屏幕上显示为实心块图形)。

在Sinclair BASIC中,每个关键字都是一个字节,生成后包含来自PEEK命令的计数。

是马里奥


0

Perl- 399171字节

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

将gif文件写入stdout。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.