사용자 삽입 이미지
Jacob Seidelin 씨가 매우 재미있는 실험을 했네요.
14KB라는 작은 용량의 자바스크립트 단일 파일로 슈퍼 마리오를 구현했습니다.

재미있는 사실은 외부 이미지를 하나도 사용하지 않고 오로지 Canvas를 사용하고 거기에 자바스크립트로 직접 랜더링하는 기법을 사용하였습니다.

스프라이트(sprite)는 지정된 사용자 정의 문자열만 일정 형식으로 저장되어있고 오직 4가지 색상만 지원되며 그외의 스프라이트는 약 40~60byte 정도 소비하게 될것입니다.
스프라이트 : 화면을 구성하기 위해서 미리 지정해놓은 데이터

aSpriteData = [
    "}\"??"??"??"??"엘?~C_ +?"??"??"?P7콿K%?퐑_\"?죂죂죃M@??,    //  0 ground
    "a ' ![?7개b?mt<N?z]~쭽R?f_7l},tl},+}%XN쾄b[bl??Y_?!@ $",        //  1 qbox
    "!A % @,[] ??;탇?X?<$ ℓ 8}}@Prc'U#Z'H'@??"is ?08@?",            //  2 mario
    "  ?A.@H#q8말e-퐊?켹W:&X줭<&bbX~# }LWP41}k?3쮙#1f RQ@@:4@$",            //  3 mario jump
    "   40 q$!hWa-퐊?_Y}a?0#aaPw@=cmY<mq쯋Bagaq&@q#0?t0?$",            //  4 mario run
    "+hP_@",                                    //  5 pipe left
]


특이한 점은 파이어폭스에서 보게 되면 64base로 인코딩 된 데이터를 소리를 바로 출력해준다는 것입니다.
64Base 인코딩 데이터는 IE에서는 현재 지원하지 않아 no Music 버젼도 따로 있습니다.

<embed id="sound_0"
src
="data:audio/mid;base64,TVRoZAAAAAYAAQAEAMBNVHJrAAAAGQD/UQMFe3EA/1gEBAIYCAD/
WQIAAAD/LwBNVHJrAAABqwD/AwRCYXNzAP8gAQAAsAdhAMAjhgCQJGGCHoAkQAeQK1qCB5AwX
AeAK0CBUZApVQSAMECCJJAwWQmAKUCCD5ApVwGAMECBRJAkXQyAKUCCC5AoWQSAJECCC5Ar
XA+AKEBGgCtAB5AwU4UjgDBAAZArXIFMgCtAAZAkWYIjkCtYBIAkQIIYkDBXDYArQIEsgDBACZApXIITg
ClABJAwWYILgDBAA5ApVoFJkCRcAoApQIFPkCxsBIAkQIISgCxABpAubIIEkDBiBIAuQII7kCtiA4AwQDmA
K0AgkCtWgUKQJGUQgCtAgQ6AJEAqkCRZgiKQK1gJgCRAgg6AK0AAkDBZgUmAMEADkClOghiQMFEBg
ClAggiAMEAFkClTgUmQJFwGgClAgiSQKFYLgCRAggiQK1oOgChAT5AwVQOAK0CFFIAwQASQK1aBOJ
AkXAWAK0CCMJArXASAJECCF4ArQAKQMFeBRpApUwKAMECCHYApQAKQMFaCFoAwQAiQKUGBN5
AkWg2AKUCBN5AsbBCAJECCFoAsQAOQLnGCCpAwZAKALkCFEoAwQAD/LwBNVHJrAAACSAD/Aw
ZNZWxvZHkA/yABAQCxB38AwRmHTJFPXyuBT0AskU5mKYFOQDaRTWU3gU1ALpFLdU6BS0BtkUxiaYF
MQFeRRFlJgURAEpFFalqBRUALkUhxgUqRRVwIgUhAUZFIbg6BRUBAgUhAB5FKZ3uBSkCBM5FPZDWB
T0AhkU5nLYFOQDGRTWUzgU1AKZFLX4EzgUtAE5FMZ36BTEAnkVRugR2BVEAvkVRkRYFUQBmRVGSC
fYFUQIFPkU9nMIFPQCqRTmcmgU5AN5FNZjeBTUArkUtlMoFLQIEikUxhQoFMQHiRRFRYkUVhAYFEQFm
BRUAJkUhqgUCRRWECgUhAWZFIbAiBRUBDgUhACpFKc4FigUpASJFLdoIFgUtAHZFKc4IEgUpADZFIaY
McgUhAhCuRT2Q4gU9AJJFOZi+BTkAukU1fMoFNQC6RS2qBV4FLQAWRTF6BTpFETx6BTEAxkUVnB4FE
QF+RSGANgUVAgSqRRV4IgUhAV5FIYhqBRUAugUhACJFKX4E4gUpAd5FPZS2BT0ArkU5qLIFOQDSRTW
BTgU1AEpFLaoFGkUxXBIFLQIEEgUxAMpFUX4ENgVRAKpFUXjqBVEAckVRkgxCBVECBO5FPV1eRTlwW
gU9APYFOQBKRTVYugU1ALZFLbIE3kUxUAoFLQIFwkUROCYFMQFSBREAMkUU6U5FIXAGBRUCBLIFIQ
AmRRVNRgUVACJFIXEyBSEAIkUpBghqBSkALkUtzgguBS0AFkUpnghuBSkAHkUNmhjaBQ0AA/y8ATVRy
awAAACwA/wMYU2VxdWVuY2VkIGJ5IE1pa2UgTWFydGVsAP8gAQcAtwdkAMcAAP8vAA
"

loop="true"
 autostart="true" style="position: absolute; left: -1000px;" type="audio/mid"/>


브라우저마다의 테스트 또한 해보았나 봅니다.  모든 브라우저에서 잘 동작하고 유독 최신 사파리에서는 가장 좋은 퍼포먼스를 보인다고 합니다.

간단히 테스트 해봤지만 조금 불안하기는 합니다.  그런데  외부 요소 없이 오로지 Javascript 로만 이정도로
구현했다는 것에 박수를 보냅니다. ^^

Jacob Seidelin 씨도 이 것을 테스트라고 표현했고 만들어 놓은 마리오가 어떤 다른것들을 만들기 위한 수단으로는 완벽하지는 않고 레퍼런스 정도로 본다고 했네요.

원글 : http://blog.nihilogic.dk/2008/04/super-mario-in-14kb-javascript.html
게임 : http://www.nihilogic.dk/labs/mario/mario_large_music.htm

John Resig 가 벌써 관련 글을 올렸네요.
참고 : http://ejohn.org/blog/embedding-and-encoding-in-javascript/
신고
Posted by Rhio.kim