¿Como lo hice?
Lo hice en un Canvas.
El elemento canvas es parte de HTML5 y permite una dinámica de representación de secuencias de comandos de formas 2D y las imágenes de mapa de bits. Se trata de un nivel bajo, el modelo de procedimiento que actualiza un mapa de bits y no tiene una gráfica integrada en la escena.
Les explicare algo del código (que es bastante básico)
<!doctype html>
<html>
<head>
<title>Mario en HTML5</title>
<style type="text/css">
canvas{
border:solid;
}
</style>
</head>
<body>
<canvas id="mario">Tu navegador no soporta canvas.</canvas>
<script>
window.addEventListener("load",init);
function init(){
</script>
</body>
</html>
Acá básicamente, creamos el canvas.
Si ustedes corren ese código veran que les aparece un rectángulo blanco con líneas negras, ese es nuestro lienzo.
Luego, procedemos a dibujar los pixeles.
var canvas = document.getElementById("mario";
var ctx = canvas.getContext("2d";
var x = 0, y = 143, ancho = 7, alto = 7; //Dibuja un rectangulo de 7x7 de color marron y lo ubica
ctx.fillStyle=rgb(107,66,38); //en las coordenadas X 0 e Y 143
ctx.fillRect(x,y,ancho,alto);
(acá aparece sin los emoticones de mierda e.e )
Este sería tan solo 1 pixel, entonces, debemos escribir eso repetidamente e ir cambiando las coordenadas para poder ir formando la figura deseada...
Y bue, después de 1 hora copiando, pegando y cambiando coordenadas logre lo siguiente
Pueden verlo en mi web: http://paste.ideaslabs.com/show/uL8EW8PUeu