JS13k 2018 Sprite test #1

by Noncho Savov

HTML

<canvas id=a width=8 height=8 class=pixelated>

CSS

.pixelated {
  /*image-rendering:-moz-crisp-edges;           Firefox        */
  /*image-rendering:-o-crisp-edges;             Opera          */
  /*image-rendering:-webkit-optimize-contrast;  Safari         */
  /*image-rendering:optimize-contrast;          CSS3 Proposed  */
  /*image-rendering:crisp-edges;                CSS4 Proposed  */
  image-rendering:pixelated;                 /* CSS4 Proposed  */
  /*-ms-interpolation-mode:nearest-neighbor;    IE8+           */
}

JavaScript

var colors = [,"003300", "008800", "00cc00"];
/*var sprite = [
	[0,0,0,1,1,0,0,0],
  [0,0,1,2,2,1,0,0],
  [0,1,2,0,0,2,1,0],
  [1,2,0,3,3,0,2,1],
  [1,2,0,3,3,0,2,1],
  [0,1,2,0,0,2,1,0],
  [0,0,1,2,2,1,0,0],
  [0,0,0,1,1,0,0,0],
];*/
var sprite = [
	[,,,1,1],
  [,,1,2,2,1],
  [,1,2,,,2,1],
  [1,2,,3,3,,2,1],
  [1,2,,3,3,,2,1],
  [,1,2,,,2,1],
  [,,1,2,2,1],
  [,,,1,1]
];
var scale = 2;
var canvas = document.createElement("canvas");
canvas.className = "pixelated";
canvas.width = sprite.length*scale;
canvas.height = sprite.length*scale;
var context = canvas.getContext("2d");
var clr;
for(var y = 0; y < sprite.length; y++){
	for(var x = 0; x < sprite[y].length; x++){
    clr = colors[sprite[y][x]];
    if(clr) drawPixel(context, x, y, clr);
  }
}

function drawPixel(ctx, x, y, c){
	ctx.fillStyle = "#"+c;
	ctx.beginPath();
  ctx.rect(x*scale, y*scale, scale, scale);
  ctx.fill();
}

document.body.appendChild(canvas);
canvas.style.transform = "scale(5) translateX(30px) translateY(10px)";


return;
c=a.getContext`2d`
C="00ff40932d2d0000a0ffff00ff8000800080000000"
px=[];
P="adDdML@dZ[Hejy[{RwrvHv~WV~~x~FF".replace(/./g,a=>{
  z=a.charCodeAt()
  px.push(z&7)
  px.push((z>>3)&7)
})
S=8
for(j=0;j<S;j++){
  for(i=0;i<S;i++){
    if(px[j*S+i]){
      c.fillStyle="#"+C.substr(6*(px[j*S+i]-1),6);
      c.fillRect(i,j,1,1);
    }
  }
}
a.style.transform = "scale(10) translateX(5px) translateY(5px)";