H5 RPG小游戏死亡漫步（Death Strolling）

经典街机像素风格的小游戏。

h5, game, rpg

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 4729
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

const rgb = (r, g, b) => `rgb(${r},${g},${b})`;
const rgba = (r, g, b, a) => `rgba(${r},${g},${b},${a})`;

// define blend modes here
const blend = {
    // see: https://github.com/jamieowen/glsl-blend/blob/master/ for how they can be implemented.  
    multiply: (a, b, opacity) => {
        opacity = opacity || 0.33;
        a = a.normalize();
        b = b.normalize();
        return new Color(
            ((a.r * b.r * opacity) + (a.r * (1.0 - opacity))) * 255, ((a.g * b.g * opacity) + (a.g * (1.0 - opacity))) * 255, ((a.b * b.b * opacity) + (a.b * (1.0 - opacity))) * 255);
    },
    add: (a, b) => {
        a = a.normalize();
        b = b.normalize();
        return new Color(
            (a.r + b.r) * 255, (a.g + b.g) * 255, (a.b + b.b) * 255
        );
    }
};

const packageColors = [
    rgb(153, 121, 79),
    rgb(75, 75, 75),
    rgb(0, 191, 96),
    rgb(191, 0, 177)
];

const sprites = {

normanReedus: {
        width: 100,
        colors: ["rgb(38,16,10)", "rgb(48,44,36)", "rgb(84,64,46)", "rgb(89,74,62)", "rgb(48,51,60)", "rgb(142,89,72)", "rgb(112,113,102)", "rgb(150,137,114)", "rgb(171,125,104)", "rgb(107,93,98)", "rgb(137,130,129)", "rgb(178,170,154)"],
        shape: ",1x46,2x8,1x3,2,2,3x3,2,2,3,2x3,3x5,2x4,4,3,4,3,1x63,2x7,1x3,2x3,3,3,2x5,4,2,2,3,2x5,3x6,4,3,2,2,1x68,2x4,3,2x4,5,2,3x3,5,2x8,3,3,4,3x3,4,3,2,2,1x63,2x3,1,2x5,1,2x5,3,2,2,5,2x4,4,2,2,3,4,4,3,2,3,4,2,2,3,4,2,1x59,2x4,1,2x7,3,3,2x7,1,2,3,3,2,3x3,4,3,2,2,3,2x3,3,3,4,3,2,1x55,2x3,1,1,2x9,3,2,3,2x3,1,2,1,2,2,3,4,2,2,4,4,3,2x3,3,2,3,2,4,3,3,2,4,3,1x59,2x4,1,2x9,1,2x5,3x3,2,3x4,2,2,4,2,3,2,3x3,2,3x4,1x55,2,1,2x16,1,2,2,3,2,3,3,2,3,3,2x4,4,4,3,3,4,3,3,2,2,3,2,3,2,5,1x55,2,1,2,1,2x12,3,2x4,3x5,2x4,4,4,2,3,3,2,4,2,2,3,2,2,3,3,2,2,1x51,2,1,2,2,1,2,2,1,2,2,1,2,1,2x5,4,2x4,3x3,2x6,4,4,2,3,2,2,3x4,2,2,3,2,3,2x3,1x49,2x4,1,2,2,1,2,2,1x3,2x9,3,2x6,3,2,2,4,2x5,3,4,3,2x3,3,3,2,3,2,3,3,2,1x47,2x5,1,2,2,1,1,2x6,1,1,2x11,3,2,2,3,3,2x3,3x3,2x7,4,3,1,2,3,2,1x46,2x3,1,1,2x11,1x3,2x4,1,2x5,3,2,2,3,2x3,3x3,2x7,3,2,3,3,2x5,1x44,2x3,1,1,2x12,1,1,2x4,1,2,1,2x6,3,2x3,3,3,2x8,3,2x7,5,2,1x44,2,1x5,2x11,1,2x3,1,2x10,3,2x4,3,1,2x14,1,3,2,1x45,2x15,1,1,2x3,1,2,1,1,2x6,3,2x17,1,2,1,2,1,2x3,1x43,2,2,1,1,2x3,1,2x4,1,1,2x3,1,2,2,1x4,2,2,1x3,2,3,2x26,1x44,2x4,1,1,2,3,6,7,3,2x4,1,1,2,2,1x3,2,2,1x3,2x21,1,2,2,7,2x4,1x43,2,2,1,1,2,2,1,3,3,2,3,2x9,1x3,2,1x3,2,1,2x13,1,2x4,1,2x4,6,3,2x3,1x42,2,2,1,1,2,1,1,2x9,3,1,2x3,1,2x3,1,2,1,1,2,2,1,2x7,1,2x10,1,2,8,2,3,2x3,1x47,2x9,3,3,2x5,1,2,2,1,2,1x6,2x3,1,1,2,2,1,2x8,1,2x3,4,3,2,3,2,2,1x46,2,1,2x6,3x3,2x3,1,2,2,1,2,2,1,1,2,2,1x4,2,2,1,2x3,1,2x6,3,2x5,7,2,3,4,6,2,2,1x49,2,2,3,3,2x7,1,2x5,1,2,1x5,2x7,1,2x7,1,2x5,4,2,9,6,1,2,1x6,2,1x40,2x6,1x3,2,3,4,2x6,1,2,1x5,2x5,1,2,2,1,2x3,1,3,2,1,2x4,3,3,2,6,9,2,1x8,2,1x9,2,2,1x28,2x4,1x4,2x4,3,3,2x3,1,2,1x6,2,1x3,2,2,1,1,2,1,2,2,1,2x9,4,4,9,9,1x7,2x3,1x10,2,4,a,a,1x25,2,2,1,1,2,1,2x3,3,2,2,1,1,2,2,1,2,1,2,1x5,2,1,2x3,1,2x4,1,1,2x3,1,1,2,3,1,2,7,2,9,9,6,1x7,2x3,1x7,2x3,1,4,a,7,b,b,a,1x22,2,1x4,2x5,1,2,2,1,2,2,1,2,1,2,1x4,2x7,1,2x8,1,2,3,2,2,3,3,9x3,4,1,1,2x8,1x7,2x3,ax4,7,a,7,b,7,2,1x29,2,5,1x5,2,1x4,2,1,2x3,1,2x11,1,2,3,2,1,3,a,6,9x3,4,1,2x8,1x6,2,1,2,2,ax4,7x6,b,b,2,1x27,2,1x5,2,1x7,2,1,2,1,2x4,1,1,2,2,1,2,1,1,3,2x3,7,3,9x4,6,1,2x9,1x5,2x4,4,ax3,7x3,b,b,c,c,b,b,5,1x25,2,1x6,2,1x4,2,1,2,3,2,2,1,2,2,1,2,1,1,2x3,1,1,3,2,1,2,4,3,9x5,6,2x10,1x5,2,5,5,2,2,a,a,7x3,bx3,cx4,8,b,7,2,1x19,2,2,1,2,1x3,2,1,2,2,1,2x6,3,2x4,1,2,1x6,4,4,2,1,2,2,3,6,9x5,4,2x9,3,1x4,2,5x3,2,2,4,a,7x3,b,b,8,cx4,8x3,b,b,5,2,1x16,2x5,1,1,2x3,1,2x3,3x3,2x6,1x6,3,a,2x6,3,6,9,6,6,9,9,3,2x4,3x6,1x4,2,5,4,4,5,2,2,4,a,7,7,b,b,cx5,8,8,cx3,8,b,2,1x14,2,1,1,2,3,3,1,2,2,1,2,1,2x4,6,3,2,2,3,1,2,2,1x5,2x3,1,2,2,3,2,1,2,3,6x5,2x5,3x6,1x3,2,4x5,2,2,4,a,7,7,b,b,cx5,8,cx6,8,b,2,1x15,2,3,1x3,2,1x3,2,1,2,3,6,3,2,2,4,2,2,1,2,1,2,1,4,2,1x4,2,2,1x4,3,4,6,6,3,2x3,3x8,1x3,5,a,a,7,4,4,5,2,5,4,b,7,b,b,cx14,b,b,2,1x12,2,1x3,2,2,1x4,2,1,2,4,4,3,2,3,6,3,3,2x3,1,6,6,3,2,2,1x6,3,6,4,3,2x6,3,3,2,3x5,1,1,2,4,a,7x3,4,4,2,2,4,7,7,b,b,cx9,8,cx3,8,cx3,7,4,1x9,2,3,4,1,1,2,2,1x6,3,6,3,3,2,3,6,3,4,2x3,4,6,6,3,2,3,2x3,4,6,6,9,9,6,1,2x6,3,3,2,3x5,1,1,2,4,a,7x4,4,5,2,5,a,b,7,b,cx6,8,cx6,8,cx4,8,b,a,1x6,2,4,4,3,1,2x4,1,1,2,1,1,3,6,3,3,2,4,6,9,6,2,3,3,9x4,6x3,4,6,9x5,1,1,2x7,3x7,1,1,5,a,7x5,a,4,2,2,a,7,7,b,8x3,c,c,8,7,7,8x4,c,b,b,cx3,8,8,b,a,a,c,7,1,1,3,4,4,2x5,1x3,2,1,4,4,6,3,2,2,6,9,9,3,3,6,3,9x4,6x3,9x7,2x8,3x8,1,2,5,a,7x6,5,5,2,4,7,a,bx3,7,b,8,8,bx3,8,b,8,b,7,b,7,a,b,7x3,ax4,8,c,8,a,2,1,2x4,1,1,2,1,2,4,6,6,3,2,3,6,9,6,4,4,6,6,9x3,6x3,9x8,3,2x9,3,2,3x4,1,2,4,a,7x6,5,5,2,2,a,a,b,7,b,b,7x8,ax3,7,7,3,3,5,3,3,4,3,5,4,a,a,7,c,b,1,1,2,4,2,1x4,6x3,4,3,2,4,6x7,9x14,3,2x9,3,3,2,3,4,4,2,5,4,7x7,4,5,4,2,5,4,7,b,b,7,7,a,4,5,2,2,5x3,4,3,4x3,2,1,2x7,5,4,7,a,b,c,a,2x3,1,1,3,6x3,3x3,6x6,9x16,3,3,2x8,3x5,4,2,4,a,a,7x6,4,5,a,2x10,5,2,1x4,2,2,4x3,a,4,3,5x4,2x6,4,a,a,c,a,1,1,3,6x5,4,6x7,9x8,6,6,9x6,3x6,2x4,4,3x5,2,4,a,4,ax3,7,a,4,2,2,4,4,2,2,5,2,2,1,1,2,1x3,2x5,5,4,7,b,b,7x3,a,4x9,3,4,a,3,7,8,4,6x14,9x6,6,6,9x3,6,9x3,6,2x7,3x7,2,5,4x8,2,1,2x3,1,2,2,1x5,2,2,3,4,3,2,1,1,2x8,5,4,a,a,7x3,4,2x4,a,4x3,8,6x15,9x3,6x4,9x3,6,9x4,2x7,3,2,2,3x3,2,3,2,5,5,2,2,5x3,2,1x7,2,1,1,2,5,5,4,a,a,7,7,b,b,7,bx3,a,5,2,1,2x11,5x3,8,8,7x4,6x14,9,9,6x4,9x8,2x11,3,3,2,3,2x5,1x7,2,5x3,2,2,a,a,7x4,bx4,7x3,a,4,5,2,5x4,2x7,5,2x4,a,c,8x4,6x18,3,3,1,2,6x3,9,9,6,2x5,3,2,3x3,2,3,2,2,3,1,2,2,1x7,4,4,a,a,7x3,2,5,7,7,5x5,4,5,4,7,bx4,a,5,2x11,1,2,5,2,5,b,c,8x3,7,6x14,9x3,6,3,2,1,1,2,6x3,3,2,3x5,2,3x3,2,3,3,2,3,2,5,3,4,5,2,2,1x5,2x7,7,b,7,b,b,c,b,b,8,c,c,b,4,2x12,1,1,4,5,2x4,4,c,c,8x3,6x12,9x6,6,6,2,1,1,2,3,2x3,3x5,2,3,2x4,3x3,2,2,5,3,4,a,a,2,5,5,4,7x6,b,1,2,cx3,b,7x3,4,2x4,5,5,2x6,1,1,2,5,a,b,b,4,2x4,5,cx3,8,8,7,6x8,9x8,6x3,2,2,3x11,2x3,3x6,ax4,7x3,4,5x4,4,4,7,b,8,5,b,2,4,8,8,7,5,2x11,1,1,2x3,a,7x5,a,2x5,cx4,8,8,6x7,9x3,6x8,4,3x7,2x3,3,3,2x4,3,5,2x4,7x9,a,4x3,5,2,b,4,7,b,4,2,b,b,2x3,1,1,2,5,5,2,1,1,2x4,a,b,b,8x5,b,b,2,1,2x3,c,8,8,c,8,8,7,6x9,4,3x3,4x4,3x8,2,3x3,2x5,5,3,5,3,5,2,7x10,a,4,2x3,4,a,b,b,c,2x5,1x5,4,4,5,2,4,b,8x6,cx3,8,8,c,b,1,2,3,b,8x3,c,8,c,8,6x8,3,3,2,2,3x6,2,3x7,2x9,3x3,5,5,7x7,ax3,4,3,2x3,4,a,bx4,2,4,1,2,2,1x5,4,5,7,7,bx3,8x8,b,b,8,4,8x6,cx4,8,6,6,4,3,3,6,4,4,6x4,3,2,1x3,3x5,2x13,3,3,2,5,a,a,7,7,a,a,7,4,3x3,4,a,4,b,a,b,b,4,4,1x4,2,1x3,5,1,1,4,2,7,b,b,8,8,b,8x8,cx6,8,8,cx6,8,3,4x4,6,6,9,6x5,4,2x11,3,2x6,3x4,2,2,ax7,4,3,3,4,7,cx5,b,5,2,1x5,2,1,1,5,1,1,2,2,bx3,7,b,8,8,cx10,a,cx4,8,cx5,8,a,3x3,6x10,2x5,1,2x3,3,2x6,3,2,3x6,a,a,4,4,3x4,b,cx7,b,1x11,2,1x4,2x6,4,7,8,8,b,cx3,8,cx8,8,8,cx4,8,3x3,6x6,4,3,3,2,1,1,2x16,3x5,2,4,3,5,2x3,4,8,bx6,7,4,4,1x3,2,1x4,2,1,1,2,2,1x3,2,5,5,2x3,1,2,a,a,4,7,c,c,8,8,4,8,c,c,8,cx6,8x4,3,3,6x6,4,3,2,2,1x3,2x6,3x3,2x4,3x7,2,1x4,2,5,4,1x3,2x3,1,1,2,5,1x3,2,1x4,2,1x3,2,1x6,2x3,1,1,2,a,4,1,4,b,b,7,8,8,c,8,cx9,8,8,a,3,6x7,4,3,1x4,2x6,3x3,2x4,3x7,2,1x4,4,4,a,1x6,2,2,7,5,1x4,2x5,1x3,2x9,5,2x3,5,2,2,5,1,1,2,4,7,8,cx12,8,8,7,6,6,9x3,6,6,3,1,1,2x9,3,2,2,3,2,2,3x6,2,3,1x3,5,4,5,b,7,2x3,1x8,2x9,1,1,2x5,5,2,1,1,2x3,4,5,1,2,4,a,b,c,b,b,8x7,cx6,8,8,7,a,6,9,6x3,4,2x11,3,2x4,3x7,2,3,1,2,4,5,5,2,b,8,b,1x8,2x11,1x4,2x4,5x5,2,5,2,1x3,4,1,1,a,a,3,2,1,1,4,7,b,8x7,b,7,a,4,a,6,6,3,3,4,5,2x9,3,2x4,3x7,2,3,1,5x4,2,5,7,1x7,2x16,1,1,2x4,5x7,2,4,c,b,a,2x3,5,2,a,7,a,7,8,8,b,8x3,7,bx3,7,7,a,a,4,3,3,4x3,3x3,2x10,3x7,2,3,2,2,5,5,2x3,1x7,2x15,5,2,2,5,2,1,2x3,5,5,4,4,5x5,cx3,b,a,b,c,c,8x4,7x13,4,4,2,5,4,3,a,3x7,2x4,3x3,2,3x4,2x9,1x5,2x6,1x10,2x7,5,2x3,5x8,2,7,c,c,8,7,7,8,8,7,ax3,4,4,7x9,a,7,a,4x3,a,4,3x7,2x4,3x3,2,3x4,2x7,1,2,1x4,2x3,1x5,4,7,ax3,4,4,2,1x5,2x5,5,5,2,2,5,4,5,4,5x3,2,1,8,c,8,7,7,8,8,7,a,4x3,a,7x6,a,a,4,a,4x4,a,4,4,3x5,2x6,3,2,2,3x3,2x8,1x5,2,2,1x3,ax3,bx8,7,b,b,7,5,1x3,2x3,5x6,3,5x5,2,1,3,8,8,a,a,b,7,7,a,4x4,a,7,ax5,4x6,5,2,3x6,2x9,3x3,2,2,3,1,1,2,1x10,a,b,7,7,bx3,8x12,a,2,1x3,2,5x5,2,5x6,1,2,4,c,b,7x7,4,3,3,a,a,7,a,4,a,a,4x4,5,2,3x8,2x8,3,3,2,2,3,3,1x11,7,7,b,7,b,8,8,c,c,8x3,c,8,cx7,8,b,7,3,2,1,1,2,5x4,2,2,1,1,2,5,5,4,2,4,8,8,7x4,b,7,7,a,4,a,7,7,a,a,4x5,2,2,3x9,2x12,3,3,1x5,2,1x3,4,7,b,b,7,8x3,cx16,8x3,b,5,1,1,2,5x4,1x4,2x5,4,7,8,8,b,7x4,a,4,4,7x3,a,4x4,5,5,2,2,3x3,2,a,a,7,3,2x11,3,3,2,1x8,7,7,b,8,b,8x3,cx20,8,8,4,2,1,2,5x3,2,1x3,2x5,ax4,8,b,7x4,a,4,4,a,4x5,2x6,3,ax4,7,a,2x18,1x3,7,bx3,8,b,8x3,cx20,8,8,c,7,2,1,2,5x3,1x5,2x3,7x4,ax3,7,b,7,7,4,3,3,4x3,3,2,1,2x4,5,2,ax4,4,7,3,2x13,1,2,2,1,1,2,7,b,b,7,8,8,cx25,8x4,5,1,2,5,5,2,1x3,5,2x3,7x7,a,3,2,3,a,a,4x4,2,1x3,2x3,1,1,a,a,4x3,a,7,2x3,3,2x9,1x4,5,7,7,b,b,8x4,cx29,5,1,2,5,5,2,1,1,2,1,2,2,4,7x7,ax3,5,1,1,2,4,2,1,2,1,1,2x3,1,1,2,a,4,4,a,7,7,a,2x11,3,1,2,1,4,7,7,bx4,8,cx30,8,b,1,1,2,2,5,1,1,2x5,7x6,ax3,7,ax3,5,1x3,2,5,1,1,2,2,1,1,5,ax4,7x3,4,3,3,2x8,3,2,1,5,7,7,bx4,8,8,cx32,4,1,2,5,2,1,1,2,5,2x3,a,7x7,a,7,ax3,4x3,5,4,4,5,1,1,2,2,1,1,ax5,7x3,3x5,2x8,7,7,bx5,8,8,cx33,2,1,2,5,2,1,2x6,7x12,a,a,4,ax3,2,2,1,2,2,1,1,ax3,4,a,7x3,3x6,2,3,2,3,2,2,a,7,7,bx4,8x3,cx33,8,1,1,2,2,1,1,2x6,7x11,ax7,2,2,1,2,2,1,4x4,3,7x3,3x6,2,2,3,3,2,4,a,7,7,bx3,8x4,cx34,b,1,1,2,1x3,2x5,4,7,7,a,7x9,ax5,4,5,1,2,2,1,5,ax3,3,7x4,3x9,2,a,a,7,7,bx3,8x4,cx34,8,4,1x5,2x6,7x13,ax5,2,2,1x4,ax3,4,a,7x3,3x8,2,2,7,b,7,8,c,8x3,c,8,8,cx35,8,5,1x5,2x3,1,2,7x3,bx3,7x7,ax6,5,1x4,4,ax3,4,a,7,7,3x8,2,2,7,b,a,b,8,cx5,8,cx35,8,8,2,1x4,2,1x4,2,7,bx6,7x7,ax4,5,2,1x3,2,ax3,3,7x3,3x5,4,4,3,2,3,7,b,7,b,8,8,c,8,c,c,8,cx33,8,c,c,8,2,2,1x4,5x3,2,2,7x3,bx5,7x6,ax5,5,1x3,5,ax3,5,a,7,7,4,3x7,2,3,7,b,c,8,c,b,c,8,cx36,8x3,b,2x3,1x3,2,5x3,1,a,7,bx6,7x7,ax4,4,5,1x3,4,a,a,4,a,7x3,3,4,3x4,2,3,3,7,7,bx3,c,8,8,c,8,cx35,8,8,7,2x3,1x3,2,5x3,1,2,7,7,bx5,7x7,ax5,5,2,1,1,4,a,a,4,a,7x3,3x6,2,3,3,7x3,b,b,c,8,cx39,8,7,5,a,2,1x4,2,2,1,1,2,b,7,b,b,7x9,a,7,ax4,4,5,2,1,4,ax4,7x3,4,3x4,2,2,3,3,b,b,7,b,b,c,8,c,8,cx4,8,8,cx29,8,8,7,b,b,2,1x5,2,1x3,2,a,7x14,ax4,4,5,2,1,5,ax5,7,7,a,4x4,3x4,7,a,bx5,8,8,cx34,8x3,7,8,8,b,1x6,2x4,a,7x15,ax4,4,5,1,1,ax5,7x3,4x5,3x3"
    },
    logo: {
        width: 100,
        colors: ["#000"],
        shape: "0x49,1,0x74,1x4,0x8,1x4,0x9,1,0x8,1x5,0x7,1,0x3,1,0x49,1,0,0,1,0x8,1,0x12,1,1,0x9,1,0x9,1,0x3,1,0x49,1,0x3,1,0x7,1,0x12,1,1,0x9,1,0x9,1,0x3,1,0x49,1,0x3,1,0x7,1,0x12,1,1,0x9,1,0x9,1,0x3,1,0x49,1,0x3,1,0x7,1,0x12,1,1,0x9,1,0x9,1,0x3,1,0x49,1,0x3,1,0x7,1,0x12,1,1,0x9,1,0x9,1,0x3,1,0x49,1,0x3,1,0x7,1,0x11,1,0,1,0x9,1,0x9,1,0x3,1,0x49,1,0x3,1,0x7,1,0x11,1,0,1,0x9,1,0x9,1,0x3,1,0x49,1,0x3,1,0x7,1x3,0x9,1,0,0,1,0x8,1,0x9,1x5,0x49,1,0x3,1,0x7,1,0x11,1,0,0,1,0x8,1,0x9,1,0x3,1,0x49,1,0x3,1,0x7,1,0x11,1x4,0x8,1,0x9,1,0x3,1,0x49,1,0x3,1,0x7,1,0x11,1,0,0,1,0x8,1,0x9,1,0x3,1,0x49,1,0x3,1,0x7,1,0x10,1,1,0,0,1,0x8,1,0x9,1,0x3,1,0x49,1,0x3,1,0x7,1,0x10,1,0x3,1,0x8,1,0x9,1,0x3,1,0x49,1,0,0,1,1,0x7,1,0x10,1,0x4,1,0x7,1,0x9,1,0x3,1,0x49,1,0,0,1,0x8,1,0x10,1,0x4,1,0x7,1,0x9,1,0x3,1,0x49,1x4,0x8,1x4,0x7,1,0x4,1,0x7,1,0x9,1,0x3,1,0x49,1x3,0x9,1x4,0x7,1,0x4,1,0x7,1,0x9,1,0x3,1,0x65,1,0x11,1,0x7,1,0x79,1,0x11,1,0x7,1,0x79,1,0x11,1,0x7,1,0x79,1,0x11,1,0x7,1,0x79,1,0x11,1,0x7,1,0x79,1,0x11,1,0x7,1,0x79,1,0x11,1,0x7,1,0x79,1,0x11,1,0x7,1,0x79,1,0x11,1,0x7,1,0x79,1,0x11,1,0x7,1,0x79,1,0x11,1,0x7,1,0x79,1,0x11,1,0x7,1,0x79,1,0x11,1,0x7,1,0x79,1,0x11,1,0x7,1,0x79,1,0x11,1,0x7,1,0x79,1,0x11,1,0x7,1,0x79,1,0x11,1,0x7,1,0x79,1,0x11,1,0x7,1,0x77,1x3,0x11,1,0x7,1,0x41,1,1,0x19,1x5,0x9,1x4,0x7,1,0x3,1,0x7,1,0x20,1,0x4,1,0x8,1x4,0,0,1x4,0x7,1x5,0x6,1x5,0x8,1,0x3,1,1,0x6,1,0x3,1,0x7,1,0x12,1,0x7,1,1,0x3,1,0x8,1,0,0,1,0,1,1,0,0,1,0x9,1,0x8,1,0x3,1,1,0x6,1,1,0x3,1,1,0x6,1,0x3,1,0x7,1,0x12,1,0x7,1,1,0x3,1,0x7,1,1,0,0,1,0,1,0x3,1,0x9,1,0x8,1,0x4,1,0x6,1,0x4,1,0,1,0x5,1,0x3,1,0x7,1,0x12,1,0x7,1,1,0x3,1,0x7,1,0x3,1,0,1,0x13,1,0x8,1,0x4,1,0x6,1,0x4,1,0,1,0x5,1,0x3,1,0x7,1,0x12,1,0x7,1,1,0x3,1,0x7,1,0x5,1,0x13,1,0x8,1,0x4,1,0x6,1,0x4,1,0,1,0x5,1,0x3,1,0x7,1,0x12,1,0x7,1,0,1,0,0,1,0x7,1,0x5,1,0x13,1,0x8,1,0x3,1,1,0x6,1,0x4,1,0,1,0x5,1,0x3,1,0x7,1,0x12,1,0x7,1,0,1,0,0,1,0x6,1,0x6,1,0x13,1,0x8,1,0x3,1,1,0x6,1,0x4,1,0,1,0x5,1,0x3,1,0x7,1,0x12,1,0x7,1,0,1,0,0,1,0x6,1,0x6,1,1,0x12,1,0x8,1,0x3,1,0x7,1,0x4,1,0,1,0x5,1,0x3,1,0x7,1,0x12,1,0x7,1,0,0,1,0,1,0x6,1,0x4,1,0,0,1x3,0x10,1,0x8,1x5,0x7,1,0x4,1,0,1,0x5,1,0x3,1,0x7,1,0x12,1,0x7,1,0,0,1,0,1,0x6,1,0x3,1,1,0x5,1,0x9,1,0x8,1x4,0x8,1,0x4,1,0,1,0x5,1,0x3,1,0x7,1,0x12,1,0x7,1,0,0,1,0,1,0x6,1,0,0,1,1,0,1,0x4,1,0x9,1,0x8,1,0,0,1,0x8,1,0x4,1,0,1,0x5,1,0x3,1,0x7,1,0x12,1,0x7,1,0,0,1x3,0x7,1,0,1,0,0,1,0x4,1,0x9,1,0x8,1,0,0,1,1,0x7,1,0x4,1,0,1,0x5,1,0x3,1,0x7,1,0x12,1,0x7,1,0x3,1,1,0x7,1,0,1,0,0,1,0x4,1,0x9,1,0x8,1,0x3,1,0x7,1,0x4,1,0,1,0x5,1,0x3,1,0x7,1,0x12,1,0x7,1,0x3,1,1,0x7,1,0,1,0,0,1,1,0x3,1,0x9,1,0x8,1,0x3,1,0x7,1,0x4,1,0,1,0x5,1,0x3,1,0x7,1,0x12,1,0x7,1,0x3,1,1,0x7,1,0,1,0,1,0,1,1,0,0,1,0x9,1,0x8,1,0x3,1,0x7,1,0x4,1,0,1,0x5,1,0x3,1,0x7,1,0x12,1,0x7,1,0x3,1,1,0x7,1x3,0,1,0,1,1,0,1,1,0x9,1,0x8,1,0x3,1,0x7,1,1,0x3,1x3,0x5,1,0x3,1,0x7,1,0x12,1,0x7,1,0x4,1,0x8,1x4,0,1,0,1,1,0x10,1,0x8,1,0x3,1,1,0x7,1,1,0,0,1,1,0x6,1,0x3,1,0x7,1,0x12,1,0x7,1,0x4,1,0x9,1,1,0,0,1,0,1,1,0x10,1,0x8,1,0x4,1,0x8,1x4,0x7,1x5,0x7,1x5,0x8,1,0x7,1,0x4,1,0x9,1,0x3,1,0x13,1,0x25,1,0x11,1,0x7,1,0x12,1,0x7,1,0x14,1,0x3,1,0x13,1,0x25,1,0x11,1,0x7,1,0x12,1,0x7,1,0x14,1,0x3,1,0x13,1,0x25,1,0x11,1,0x7,1,0x12,1,0x7,1,0x14,1,0x3,1,0x13,1,0x25,1,0x11,1,0x7,1,0x12,1,0x7,1,0x14,1,0x3,1,0x13,1,0x25,1,0x11,1,0x7,1,0x12,1,0x7,1,0x14,1,0x3,1,0x13,1,0x25,1,0x11,1,0x7,1,0x12,1,0x7,1,0x14,1,0x3,1,0x13,1,0x25,1,0x11,1,0x7,1,0x12,1,0x7,1,0x14,1,0x3,1,0x13,1,0x25,1,0x11,1,0x7,1,0x12,1,0x7,1,0x14,1,0x3,1,0x13,1,0x25,1,0x11,1,0x7,1,0x12,1,0x7,1,0x14,1,0x3,1,0x13,1,0x25,1,0x11,1,0x7,1,0x12,1,0x7,1,0x14,1,0x3,1,0x13,1,0x25,1,0x11,1,0x7,1,0x12,1,0x7,1,0x14,1,0x3,1,0x13,1,0x25,1,0x11,1,0x20,1,0x7,1,0x14,1,0x17,1,0x25,1,0x11,1,0x20,1,0x7,1,0x14,1,0x17,1,0x25,1,0x11,1,0x20,1,0x7,1,0x14,1,0x17,1,0x25,1,0x11,1,0x20,1,0x7,1,0x14,1,0x17,1,0x25,1,0x11,1,0x20,1,0x7,1,0x14,1,0x17,1,0x37,1,0x20,1,0x7,1,0x14,1,0x76,1,0x7,1,0x14,1,0x76,1,0x7,1,0x14,1,0x76,1,0x22,1,0x99,1,0x203"
    },
    grass: [{
        width: 16,
        colors: ["rgb(152,179,192)", "rgb(97, 137, 158)"],
        shape: "0x34,1,0x4,2,0x10,1,2,2,0,0,1,2,0x10,1,2,2,0,0,1,0x11,1,2,0,0,1,2,0x10,1,2,2,0,1,2,0x10,1,2,2,0,1,2,0x11,1,2,0,1,2,0x11,1,2,0,1,2,0x11,1,2,0,1,2,0x11,1,2,0,1,1,0x11,1,2,0,1,1,0x11,1,1,0,1,1,0x46"
    }, {
        width: 16,
        colors: ["rgb(152,179,192)", "rgb(97, 137, 158)"],
        shape: "0x53,1,0x4,2,0x10,1,2,0,0,1,2,0x10,1,2,0,0,1,2,0x10,1,2,0,0,1,2,0x10,1,2,0,0,1,0x11,1,2,0,1,2,0x11,1,2,0,1,2,0x11,1,2,0,1,2,0x11,1,2,0,1,1,0x11,1,2,0,1,1,0x11,1,1,0,1,1,0x46"
    }, {
        width: 16,
        colors: ["rgb(152,179,192)", "rgb(97, 137, 158)"],
        shape: "0x23,1,0x14,1,2,0,0,1,0x11,1,2,0,1,1,0x11,1,2,0,1,2,0x11,1,0,0,1,2,0x11,1,0,1,1,0x11,1,2,0,1,1,0x11,1,2,0,1,2,0x11,1,2,0,1,0x12,1,2,0,1,2,0x11,1,2,0,1,1,0x11,1,2,0,1,1,0x11,1,1,0,1,1,0x46"
    }, {
        width: 16,
        colors: ["rgb(152,179,192)", "rgb(97, 137, 158)"],
        shape: "0x53,1,0x4,2,0x10,1,2,0,0,1,2,0x10,1,2,0,0,1,2,0x10,1,2,0,0,1,2,0x10,1,2,0,0,1,0x11,1,2,0,1,2,0x11,1,2,0,1,2,0x11,1,2,0,1,2,0x11,1,2,0,1,1,0x11,1,2,0,1,1,0x11,1,1,0,1,1,0x46"
    }],
    rocks: [{
        width: 8,
        colors: [rgb(140, 140, 140), rgb(125, 125, 125)],
        shape: "0x10,1,1,0,1,0x3,1x3,2,1,1,0,1x4,2,1,1,0,1,2x3,1,2,2,1,2x8,0x16"
    }, {
        width: 8,
        colors: [rgb(140, 140, 140), rgb(125, 125, 125)],
        shape: "0x11,1,0x6,1x3,0x4,1x4,0x4,1,2x3,1,0x3,2x6,0x17"
    }],
    badflower: {
        width: 5,
        colors: ["rgb(152,179,192)", "rgb(97, 137, 158)"],
        shape: "0x17,1,0x3,1,2,1,0x6"
    },
    flowers: [{
        width: 5,
        colors: ["rgb(152,179,192)", "rgb(97, 137, 158)"],
        shape: "0,0,1,0x3,1,2,1,0,0,2,1,2,0x3,2,0x4,2,0x7"
    }, {
        width: 5,
        colors: ["rgb(152,179,192)", "rgb(97, 137, 158)"],
        shape: "0,1,0x3,1,2,1,0,0,2,1,2,0x3,2,0x5,2,0x7"
    }, {
        width: 5,
        colors: ["rgb(152,179,192)", "rgb(97, 137, 158)"],
        shape: "0x3,1,0x3,1,2,1,0,0,2,1,2,0x3,2,0x3,2,0x7"
    }],
    mountains: [{
        width: 64,
        colors: ["rgb(152,179,192)", "rgb(97, 137, 158)"],
        shape: "0x797,1x4,0x59,1x4,2x3,0x56,1x4,2x5,0x55,1x3,2x7,0x53,2,2,1,2x9,0x50,2,2,1,1,2x11,0x49,2,2,1,2x13,0x47,2,2,1,2x15,0x46,2,1,2x17,0x44,2,2,1,2x3,1,2x13,0x44,2x5,1,1,2x14,0x42,2x6,1,2x16,0x41,2,1,2,1,2,1,1,2x17,0x39,2,1,1,2,2,1,1,2x18,0x39,2,1,2,2,1,1,2x20,0x37,2,1,2x3,1,2x5,1,2x16,0x35,2,2,1,2,2,1,1,2x5,1,2x16,0x35,2,1,2x9,1,2x18,0x33,2,1,2,1,2,2,1,2x4,1,2x20,0x31,2,1,2x4,1,2x26,0x31,2x5,1,2,2,1,2,2,1,1,2x21,0x30,1,2,1,2x4,1,1,2x25,0x29,2,2,1,1,2x3,1,1,2x27,0x27,2,1,2x6,1,1,2x28,0x26,1,2,1,1,2x3,1,1,2x30,0x23,2,2,1,2,2,1,2x3,1,2x31,0x23,2,1,2,2,1,2x3,1,2,2,1,1,2x29,0x22,2,1,2,1,1,2,2,1,2x3,1,2x30,0x22,2,1,2,1,2,2,1,1,2,2,1,2x32,0x20,2,1,2,2,1,2,2,1,1,2,2,1,2,1,2x31,0x19,2,1,2,1,1,2,1,2x3,1,2,2,1,2x32,0x17,2,1x4,2,1,2x4,1,2,1,2x33,0x17,1,1,2,2,1,2,1,2x3,1,2,1,2x35,0x15,2,1,2,2,1,2,1,2x3,1,2,1,1,2x35,0x14,2,1,2,2,1,1,2x6,1,1,2x37,0x13,1,1,2,2,1,2x6,1,1,2x38,0x12,2,1,2,2,1,2x3,1,2x3,1,1,2x39,0x10,2,1,2,2,1,1,2x3,1,2,2,1,1,2x7,1,2x32,0x10,2,1,2,2,1,2x3,1,2,2,1x3,2x6,1,1,2x33,0x8,2,1,2x3,1,2x3,1,2,2,1,1,2x6,1,2x35,0x7,2,1,1,2x6,1,2x3,1,2x6,1,1,2x36,0x6,2,1,2x3,1,2x3,1,2,2,1,1,2x6,1,1,2x36,0x5,2,1,1,2,2,1,2x3,1,2x3,1,2x7,1,2x37,0x4,2,2,1,2,2,1,2x4,1,2,2,1,2x7,1,2x39,0x3,2,1,1,2x6,1,2x3,1,2x6,1,2x40,0x3,1,1,2x7,1,2x51,0,0,2,2,1,1,2x58,0,0,2x62,0x257"
    }, {
        width: 36,
        colors: ["rgb(152,179,192)", "rgb(97, 137, 158)"],
        shape: "0x337,1,1,2,0x32,2,1,2x3,0x30,2,2,1,2x4,0x29,2,1,2x6,0x27,2,1,1,2x7,0x26,2x10,0x25,2x5,1,2x6,0x24,2,1,1,2,1,1,2x6,0x24,1,1,2,2,1,1,2x7,0x22,2,1,1,2,1,1,2x9,0x21,1,1,2,2,1,1,2x9,0x20,2,1,1,2,1,1,2x10,0x19,2,1,1,2,2,1,1,2x11,0x18,2,1,1,2,1,1,2x12,0x17,2,2,1,2,2,1,2x14,0x16,2,1,1,2,2,1,2x14,0x16,2,1,1,2x18,0x14,2,1,1,2x3,1,2,1,2x13,0x14,2,1,1,2,2,1x3,2x15,0x13,1,1,2,2,1,1,2,1,2,2,1,2x13,0x11,2,1,1,2,1,1,2x20,0x10,2,1,2,2,1,1,2,1,2,2,1,2x16,0x8,2x5,1,2,1,1,2,2,1,2x17,0x7,2x8,1,2,1,1,2x18,0x5,2x31,0x76"
    }],
    clouds: [{
        width: 20,
        colors: ["rgb(255,255,255)", "rgb(166, 166, 166)", "rgb(200, 200, 200)"],
        shape: "0x85,1x4,0x15,1x5,0x14,2,1x6,0x12,2,2,1x6,0,0,1,0x9,2,1x7,2,1x3,0x8,2,1x6,2,2,1x4,0x6,2,2,3,3,1,1,3,3,2,1x5,0x6,2,3x6,2,3,3,1x4,0x6,2,3x6,2,3x3,1x5,0x4,2,2,3,2,3,2x4,3x5,1x3,0x3,2x13,3x4,1,0x3,2x18,0x80"
    }, {
        width: 20,
        colors: ["rgb(255,255,255)", "rgb(166, 166, 166)", "rgb(200, 200, 200)"],
        shape: "0x168,1x4,0x12,1x8,0,1,0x9,1x12,0x7,1x14,0x5,2,1,3x7,1x4,2,1x3,0x3,2x7,3x5,2,2,3x3,1,0x4,2,2,3,3,2x5,3x5,2x3,0x4,2x15,0x81"
    }, {
        width: 20,
        colors: ["rgb(255,255,255)", "rgb(166, 166, 166)", "rgb(200, 200, 200)"],
        shape: "0x68,2,1,1,0x16,2,3,1x3,0x15,2,3,1x4,0x13,2,3,1x3,2,2,3,1,0x9,2x3,3,1x3,2,3,1x3,0x7,2x4,3,1x3,2,3,1x3,0x6,2,3,1,2,2,3,1x3,2,3,1x3,0x5,2,3x3,1,2,3,1x7,2,2,1,0x3,2,3x4,2,2,3,1x6,2,3,1,1,0,2x4,3x5,1x3,3,2,3x3,1x3,2,2,3,2,3,2x4,3x3,2x4,3x3,2,0,2x19,0x100"
    }, {
        width: 20,
        colors: ["rgb(255,255,255)", "rgb(166, 166, 166)", "rgb(200, 200, 200)"],
        shape: "0x209,2,1,0x17,2,2,1,1,0x15,2x5,1,0x13,2x7,0x127"
    }],
    wraith: {
        stages: [
            // invisible-ish,
            [{
                width: 16,
                colors: ["rgb(87,87,87)", "rgb(59, 59, 59)", "rgb(122, 122, 122)", "rgb(33,33,33)"],
                blend: (x, y) => blend.multiply(x, y, Math.random() * 0.5),
                shape: "0x22,3,3,1,0x12,3,3,1x3,0,0,4,0x5,4,0,0,3,3,1x3,0,4,0x9,3,1x4,0x11,3,1,0,1,0x15,1,0x13,3,0,0,1,0,0,1,0x6,4,0x4,1,0x26,4,0,3,3,0,1,0x28,3,0,1,2,0x12,3,0,0,2,0,0,1,0x10,1,2,0x13,1,0x5,3,1,0x9,1,0x5,1,0x8,3,0,2,0x5,2,0x21,4,0,0,3,0x4,1,0x11,3,0,0,1,0x13,3,0,0,2,0x36"
            }, {
                width: 16,
                blend: (x, y) => blend.multiply(x, y, Math.random() * 0.5),
                colors: ["rgb(87,87,87)", "rgb(59, 59, 59)", "rgb(122, 122, 122)", "rgb(33,33,33)"],
                shape: "0x22,3,3,1,0x10,4,0,3,3,1,1,0x11,4,3,0,1,1,0x12,3,1x4,0,4,0x10,1x3,0x13,3,0,0,1,0,2,0x11,1,0,1,0,1,2,0x4,4,0x4,3,1,0x10,4,0x5,1,0x49,1,2,0x11,1,0x30,1,0x32,2,0x4,2,0x13,1,0x8,4,0x3,1,0,1,0x31,2,0x38"
            }],
            // visible
            [{
                width: 16,
                blend: blend.multiply,
                colors: ["rgb(87,87,87)", "rgb(59, 59, 59)", "rgb(122, 122, 122)", "rgb(33,33,33)"],
                shape: "0x22,1x3,0x12,1x5,0x11,1x6,0x10,1x6,0x10,1x6,0x10,2x5,1,0x6,1,0x3,2x6,0x6,1,0x3,2x6,0x6,1,0x3,2x6,0x6,1,0x3,1x3,2,2,0x7,1,1,0,0,1x5,0,1,0x6,1,0,0,1x7,0x6,1,0,0,1,3,3,1x4,0x6,1,0,0,2,3,3,1,1,0x8,1,0,0,2x5,0x8,1,0,0,2x5,0x8,1,0,1,0,2x3,0x9,1x3,0,3x3,0x9,1x3,0,3,3,0x11,1,0,0,3,3,0x16,3,0x39"
            }, {
                width: 16,
                blend: blend.multiply,
                colors: ["rgb(87,87,87)", "rgb(59, 59, 59)", "rgb(122, 122, 122)", "rgb(33,33,33)"],
                shape: "0x22,1x3,0x12,1x5,0x11,1x6,0x10,1x6,0x10,1x6,0x10,2x6,0x8,1,0,2x6,0x8,1,0,2x6,0x8,1,0,2x6,0x8,1,0,1x3,2,2,0x8,1,1,0,1x6,0x7,1,0,0,1x6,0x7,1,0,0,1,3,3,1,1,0x8,1,0,0,2,3,3,1,1,0x8,1,0,0,2x5,0x8,1,0,0,2x5,0x8,1,0,1,0,2x3,0x9,1x3,0,3x3,0x9,1x3,0,3,3,0x11,1,0,0,3,3,0x16,3,0x39"
            }, {
                width: 16,
                blend: blend.multiply,
                colors: ["rgb(87,87,87)", "rgb(59, 59, 59)", "rgb(122, 122, 122)", "rgb(33,33,33)"],
                shape: "0x22,1x3,0x12,1x5,0x11,1x5,0x11,1x6,0x10,1x6,0x10,2x6,0x10,2x6,0x6,1,1,0,0,2x6,0x6,1,0x3,2x6,0x6,1,0x3,1x3,2x3,0x6,1,0x3,1x7,0x5,1,0x3,1x7,0x5,1,1,0,0,1,3,3,1,1,0x7,1,1,0,0,2,3,3,1,1,0x7,1,1,0,0,2x5,0x8,1,0,0,2x5,0x8,1,0,0,1,2x3,0x9,1,1,0,1,3x3,0x9,1x3,0,3,3,0x11,1,1,0,3,3,0x16,3,0x39"
            }]
        ]
    },

attention: {
        colors: ["#000000", "#ff0000"],
        width: 16,
        shape: "0x20,2x7,0x8,2x9,0x7,2x3,1x3,2x3,0x7,2x3,1x3,2x3,0x7,2x3,1x3,2x3,0x7,2x3,1x3,2x3,0x7,2x3,1x3,2x3,0x7,2x3,1x3,2x3,0x7,2x3,1x3,2x3,0x7,2x9,0x7,2x3,1x3,2x3,0x7,2x3,1x3,2x3,0x7,2x3,1x3,2x3,0x7,2x9,0x8,2x7,0x5"
    },
    npc: {
        idle: [{
            width: 16,
            colors: ["rgb(165,131,90)", "#ffebce", "#1858cc", "#ffffff", "#008fd7", "#646664", "#0073ad", "#7c562c", "rgb(75, 75, 75)"],
            shape: "0x20,1x6,0x9,1x8,0x8,1x8,0x7,1x9,0x7,1x9,0x7,8x5,2,4,8,8,0x8,8x3,2,2,3,2,0x7,9x3,8,2x5,0x7,9x3,8,2x5,0x7,9x3,5x3,2,2,0x8,9x3,5x5,0x8,9x3,5x5,0x8,9x3,5,6,6,5,5,0x8,9x3,7,6,6,5,5,0x8,9x3,7x5,0x8,9,9,0,7x5,0x12,7x3,0x13,6x3,0x13,6,6,0x14,6x3,0x56"
        }, {
            width: 16,
            colors: ["rgb(165,131,90)", "#ffebce", "#1858cc", "#ffffff", "#008fd7", "#646664", "#0073ad", "#7c562c", "rgb(75, 75, 75)"],
            shape: "0x19,1x6,0x9,1x8,0x8,1x9,0x6,1x10,0x6,1x10,0x6,8x6,2,4,8,8,0x7,8x4,2,2,3,2,0x7,9x3,8,2x5,0x7,9x3,8,2x5,0x7,9x3,5x3,2,2,0x8,9x3,5x5,0x8,9x3,5x5,0x8,9x3,5,6,6,5,5,0x8,9x3,7,6,6,5,5,0x8,9x3,7x5,0x8,9,9,0,7x5,0x12,7x3,0x13,6x3,0x13,6,6,0x14,6x3,0x56"
        }, {
            width: 16,
            colors: ["rgb(165,131,90)", "#ffebce", "#1858cc", "#ffffff", "#008fd7", "#646664", "#0073ad", "#7c562c", "rgb(75, 75, 75)"],
            shape: "0x20,1x5,0x10,1x7,0x8,1x9,0x7,1x9,0x6,1x10,0x6,8x6,2,4,8,8,0x7,8x4,2,2,3,2,0x7,9x3,8,2x5,0x7,9x3,8,2x5,0x7,9x3,5x3,2,2,0x8,9x3,5x5,0x8,9x3,5x5,0x8,9x3,5,6,6,5,5,0x8,9x3,7,6,6,5,5,0x8,9x3,7x5,0x8,9,9,0,7x5,0x12,7x3,0x13,6x3,0x13,6,6,0x14,6x3,0x56"
        }]
    },
    player: {
        shadow: {
            width: 16,
            colors: ["#000000"],
            blend: blend.multiply,
            shape: "0x164,1x8,0x7,1x10,0x5,1x12,0x4,1x12,0x5,1x10,0x7,1x8,0x4"
        },
        idleUp: [{
            width: 16,
            colors: ["rgb(165,131,90)", "#ffebce", "#1858cc", "#ffffff", "rgb(223,198,17)", "#646664", "rgb(180, 170, 77)", "#7c562c", "rgb(75, 75, 75)"],
            shape: "0x7,5x3,0,9,0x10,5x3,9,5,9,0x9,5x4,9,5,9,0x9,5x4,9,5,9,0x9,5x4,9x3,0x9,7,5,7x3,9,7,0x9,7x5,9,7,0x9,1x5,9,1,0x9,1x5,9,1,0x9,1x7,0x8,5,1x7,0x7,6,5,1x7,5,6,0x5,6,5,1x7,6,6,0x5,6,6,1x7,6,0x8,1x7,0x9,1x7,0x9,1x7,0x9,7x3,0,7x3,0x9,6x3,0,6x3,0x9,6x3,0,6x3,0x9,6x3,0,6x3,0x52"
        }, {
            width: 16,
            colors: ["rgb(165,131,90)", "#ffebce", "#1858cc", "#ffffff", "rgb(223,198,17)", "#646664", "rgb(180, 170, 77)", "#7c562c", "rgb(75, 75, 75)"],
            shape: "0x7,5x3,9,0,9,0x9,5x4,9,0,9,0x8,5x5,9,5,9,0x8,5x5,9x3,0x8,5x6,9,0x9,7,5,7x3,5,9,0x9,7x5,9,7,0x9,1x5,9,1,0x9,1x5,9,1,0x9,1x7,0x8,5,1x7,0x7,6,5,1x7,5,6,0x5,6,5,1x7,6,6,0x5,6,6,1x7,6,0x8,1x7,0x9,1x7,0x9,1x7,0x9,7x3,0,7x3,0x9,6x3,0,6x3,0x9,6x3,0,6x3,0x9,6x3,0,6x3,0x52"
        }, {
            width: 16,
            colors: ["rgb(165,131,90)", "#ffebce", "#1858cc", "#ffffff", "rgb(223,198,17)", "#646664", "rgb(180, 170, 77)", "#7c562c", "rgb(75, 75, 75)"],
            shape: "0x7,5x3,0x12,5x4,9,0,9,0x8,5x5,9,5,9,0x8,5x5,9,5,9,0x8,5x5,9x3,0x8,7,5,7x3,5,9,0x9,7x5,9,7,0x9,1x5,9,1,0x9,1x5,9,1,0x9,1x7,0x8,5,1x7,0x7,6,5,1x7,5,6,0x5,6,5,1x7,6,6,0x5,6,6,1x7,6,0x8,1x7,0x9,1x7,0x9,1x7,0x9,7x3,0,7x3,0x9,6x3,0,6x3,0x9,6x3,0,6x3,0x9,6x3,0,6x3,0x52"
        }],
        idleDown: [{
            width: 16,
            colors: ["rgb(165,131,90)", "#ffebce", "#1858cc", "#ffffff", "rgb(223,198,17)", "#646664", "rgb(180, 170, 77)", "#7c562c", "rgb(75, 75, 75)"],
            shape: "0x4,9,0x13,9,0,9,0x13,9,0,9,0,5x3,0x9,9x3,5x5,0x9,9,5x7,0x8,9,5,5,8x3,5,5,0x8,9,7,8x5,7,0x8,9,7,2,4,2,4,2,7,0x8,9,7,2,3,2,3,2,7,0x9,7,2x5,7,0x9,1,5,2x3,5,1,0x9,5,7,5x3,7,5,0x8,5,5,7,5x3,7,5,5,0x7,5,5,7,5x3,7,5,5,0x6,6,6,5,7,5x3,7,5,6,6,0x5,6,6,5,7,5x3,7,5,6,6,0x7,7x7,0x9,7x7,0x9,7x3,0,7x3,0x9,6x3,0,6x3,0x9,6x3,0,6x3,0x53"
        }, {
            width: 16,
            colors: ["rgb(165,131,90)", "#ffebce", "#1858cc", "#ffffff", "rgb(223,198,17)", "#646664", "rgb(180, 170, 77)", "#7c562c", "rgb(75, 75, 75)"],
            shape: "0x3,9,0x13,9,0,9,0x13,9,0,9,0,0,5x3,0x8,9x3,0,5x5,0x8,9,0,5x7,0x7,9,0,5,5,8x3,5,5,0x7,9,0,7,8x5,7,0x7,9,0,7,2,4,2,4,2,7,0x8,9,7,2,3,2,3,2,7,0x8,9,7,2x5,7,0x9,1,5,2x3,5,1,0x9,5,7,5x3,7,5,0x8,5,5,7,5x3,7,5,5,0x7,5,5,7,5x3,7,5,5,0x6,6,6,5,7,5x3,7,5,6,6,0x5,6,6,5,7,5x3,7,5,6,6,0x7,7x7,0x9,7x7,0x9,7x3,0,7x3,0x9,6x3,0,6x3,0x9,6x3,0,6x3,0x53"
        }, {
            width: 16,
            colors: ["rgb(165,131,90)", "#ffebce", "#1858cc", "#ffffff", "rgb(223,198,17)", "#646664", "rgb(180, 170, 77)", "#7c562c", "rgb(75, 75, 75)"],
            shape: "0x16,9,0,9,0x13,9,0,9,0x3,5x3,0x7,9x3,0,0,5x5,0x7,9,0,0,5x7,0x6,9,0,0,5,5,8x3,5,5,0x7,9,0,7,8x5,7,0x7,9,0,7,2,4,2,4,2,7,0x8,9,7,2,3,2,3,2,7,0x8,9,7,2x5,7,0x9,1,5,2x3,5,1,0x9,5,7,5x3,7,5,0x8,5,5,7,5x3,7,5,5,0x7,5,5,7,5x3,7,5,5,0x6,6,6,5,7,5x3,7,5,6,6,0x5,6,6,5,7,5x3,7,5,6,6,0x7,7x7,0x9,7x7,0x9,7x3,0,7x3,0x9,6x3,0,6x3,0x9,6x3,0,6x3,0x53"
        }],

death: [{
            width: 16,
            colors: ["rgb(165,131,90)", "#ffebce", "#1858cc", "#ffffff", "rgb(223,198,17)", "#646664", "rgb(180, 170, 77)", "#7c562c", "rgb(75, 75, 75)", "rgb(75, 75, 75)", "rgb(50, 50, 50)"],
            shape: "0x18,9,0,9,0,5x5,0x7,9,0,9,5x7,0x6,9,0,9,5x7,0x6,9,9,0,5x8,0x6,9,9,5x8,0x7,9,7,5,5,7,2,4,8,8,0x6,1,1,7x3,2,2,3,2,0x7,1,1,7,7,2x5,0x7,1,1,7,7,2x5,0x7,1x3,5x3,2,2,0x8,1x3,5x5,0x8,1x3,5x5,0x8,1x3,5,6,6,5,5,0x8,1x3,7,6,6,5,5,0x8,1,1,0,7x5,0x11,7x5,0x12,7x3,0x13,6x3,0x13,6,6,0x14,6x3,0x54"
        }, {
            width: 16,
            colors: ["rgb(165,131,90)", "#ffebce", "#1858cc", "#ffffff", "rgb(223,198,17)", "#646664", "rgb(180, 170, 77)", "#7c562c", "rgb(75, 75, 75)", "rgb(75, 75, 75)", "rgb(50, 50, 50)"],
            shape: "0x18,9,0,9,0,5x5,0x7,9,0,9,5x7,0x6,9,0,9,5x7,0x6,9,9,0,5x8,0x6,9,9,5x8,0x7,9,7,5,5,7,2,4,8,8,0x6,1,1,7x3,2,2,3,2,0x7,1,1,7,7,2x5,0x7,1,1,7,7,2x5,0x7,1x3,5x3,2,2,0x8,1x3,5x5,0x8,1x3,5x5,0x8,1x3,5,6,6,5,5,0x8,1x3,7,6,6,5,5,0x8,1,1,0,7x5,0x11,7x5,0x12,7x3,0x13,6x3,0x13,6,6,0x14,6x3,0x8,ax13,0x33"
        }, {
            width: 16,
            colors: ["rgb(165,131,90)", "#ffebce", "#1858cc", "#ffffff", "rgb(223,198,17)", "#646664", "rgb(180, 170, 77)", "#7c562c", "rgb(75, 75, 75)", "rgb(75, 75, 75)", "rgb(50, 50, 50)"],
            shape: "0x34,9,0,9,0,5x5,0x7,9,0,9,5x7,0x6,9,0,9,5x7,0x6,9,9,0,5x8,0x6,9,9,5x8,0x7,9,7,5,5,7,2,4,8,8,0x6,1,1,7x3,2,2,3,2,0x7,1,1,7,7,2x5,0x7,1,1,7,7,2x5,0x7,1x3,5x3,2,2,0x8,1x3,5x5,0x8,1x3,5x5,0x8,1x3,5,6,6,5,5,0x8,1x3,7,6,6,5,5,0x8,1,1,0,7x3,a,7,0x11,7,7,a,a,7,0x11,ax4,0x11,ax3,b,a,a,0x9,ax3,b,b,ax3,0x6,ax4,b,b,ax7,0x5,bx9,0x19"
        }, {
            width: 16,
            colors: ["rgb(165,131,90)", "#ffebce", "#1858cc", "#ffffff", "rgb(223,198,17)", "#646664", "rgb(180, 170, 77)", "#7c562c", "rgb(75, 75, 75)", "rgb(75, 75, 75)", "rgb(50, 50, 50)"],
            shape: "0x50,9,0,9,0,5x5,0x7,9,0,9,5x7,0x6,9,0,9,5x7,0x6,9,9,0,5x8,0x6,9,9,5x8,0x7,9,7,5,a,7,2,4,8,8,0x6,1,1,7,7,a,2,2,3,2,0x7,1,1,7,a,a,2x4,0x7,1,1,7,a,a,2x4,0x7,1x3,a,5,5,2,2,0x8,1x3,a,5x4,0x8,1x3,a,a,5,a,5,0x8,1,1,ax5,5,0x8,1,1,ax5,5,0x8,1,1,a,b,b,a,a,7,0x10,a,b,ax4,0x9,a,a,b,ax5,0x7,a,a,b,b,ax7,0x4,a,bx10,a,a,0x4,bx10,0x19"
        }, {
            width: 16,
            colors: ["rgb(165,131,90)", "#ffebce", "#1858cc", "#ffffff", "rgb(223,198,17)", "#646664", "rgb(180, 170, 77)", "#7c562c", "rgb(75, 75, 75)", "rgb(75, 75, 75)", "rgb(50, 50, 50)"],
            shape: "0x66,9,0,9,0,5x5,0x7,9,0,9,5x7,0x6,9,0,9,5,5,ax4,5,0x6,9,9,0,5,ax5,5,5,0x6,9,9,5,a,a,5,a,a,5,5,0x7,9,7,ax5,8,8,0x6,1,1,7,ax3,2,a,2,0x7,1,1,7,ax3,2,a,2,0x7,1,1,7,ax4,2,2,0x7,1,1,ax5,2,0x8,1,1,ax5,5,0x8,1,1,a,a,b,a,a,5,0x8,1,a,a,b,b,a,a,5,0x8,1,a,a,b,ax4,0x8,ax3,b,ax5,0x6,ax4,b,a,b,ax3,0x5,a,a,bx9,a,0x5,bx10,0x7,bx8,0x21"
        }, {
            width: 16,
            colors: ["rgb(165,131,90)", "#ffebce", "#1858cc", "#ffffff", "rgb(223,198,17)", "#646664", "rgb(180, 170, 77)", "#7c562c", "rgb(75, 75, 75)", "rgb(75, 75, 75)", "rgb(50, 50, 50)"],
            shape: "0x137,a,0x14,a,a,0x11,a,0,0,a,b,0x10,b,a,a,0,b,b,0x10,a,a,b,a,b,a,0x10,a,a,b,a,b,a,0x9,b,a,a,bx3,a,0x9,bx6,a,a,0x7,a,bx6,a,a,0x7,bx7,a,a,0x7,bx8,a,b,0x5,a,bx8,ax3,0x4,bx10,ax3,0x4,bx11,0x6,bx6,0x23"
        }],
        idle: [{
            width: 16,
            colors: ["rgb(165,131,90)", "#ffebce", "#1858cc", "#ffffff", "rgb(223,198,17)", "#646664", "rgb(180, 170, 77)", "#7c562c", "rgb(75, 75, 75)"],
            shape: ",9,0,9,0x13,9,0,9,0,5x5,0x7,9,0,9,5x7,0x6,9,9,0,5x7,0x7,9,0,5x8,0x6,9,9,5x8,0x7,9,7,5,5,7,2,4,8,8,0x6,1,1,7x3,2,2,3,2,0x7,1,1,7,7,2x5,0x7,1,1,7,7,2x5,0x7,1x3,5x3,2,2,0x8,1x3,5x5,0x8,1x3,5x5,0x8,1x3,5,6,6,5,5,0x8,1x3,7,6,6,5,5,0x8,1,1,0,7x5,0x11,7x5,0x12,7x3,0x13,6x3,0x13,6,6,0x14,6x3,0x56"
        }, {
            width: 16,
            colors: ["rgb(165,131,90)", "#ffebce", "#1858cc", "#ffffff", "rgb(223,198,17)", "#646664", "rgb(180, 170, 77)", "#7c562c", "rgb(75, 75, 75)"],
            shape: "0x16,9,0,9,0,5x5,0x7,9,0,9,5x7,0x6,9,0,9,5x7,0x6,9,9,0,5x8,0x6,9,9,5x8,0x7,9,7,5,5,7,2,4,8,8,0x6,1,1,7x3,2,2,3,2,0x7,1,1,7,7,2x5,0x7,1,1,7,7,2x5,0x7,1x3,5x3,2,2,0x8,1x3,5x5,0x8,1x3,5x5,0x8,1x3,5,6,6,5,5,0x8,1x3,7,6,6,5,5,0x8,1,1,0,7x5,0x11,7x5,0x12,7x3,0x13,6x3,0x13,6,6,0x14,6x3,0x56"
        }, {
            width: 16,
            colors: ["rgb(165,131,90)", "#ffebce", "#1858cc", "#ffffff", "rgb(223,198,17)", "#646664", "rgb(180, 170, 77)", "#7c562c", "rgb(75, 75, 75)"],
            shape: "0,9,0x15,9,0,9,5x5,0x8,9,0,9,5x6,0x7,9x3,5x6,0x8,9,5x8,0x7,9,5x8,0x7,9,7,5,5,7,2,4,8,8,0x6,1,1,7x3,2,2,3,2,0x7,1,1,7,7,2x5,0x7,1,1,7,7,2x5,0x7,1x3,5x3,2,2,0x8,1x3,5x5,0x8,1x3,5x5,0x8,1x3,5,6,6,5,5,0x8,1x3,7,6,6,5,5,0x8,1,1,0,7x5,0x11,7x5,0x12,7x3,0x13,6x3,0x13,6,6,0x14,6x3,0x56"
        }],
        walkUp: [{
            width: 16,
            colors: ["rgb(165,131,90)", "#ffebce", "#1858cc", "#ffffff", "rgb(223,198,17)", "#646664", "rgb(180, 170, 77)", "#7c562c", "rgb(75, 75, 75)"],
            shape: "0x7,5x3,0,9,0x10,5x3,9,5,9,0x9,5x4,9,5,9,0x9,5x4,9,5,9,0x9,5x4,9x3,0x9,7,5,7x3,9,7,0x9,7x5,9,7,0x9,1x5,9,1,0x9,1x5,9,1,0x9,1x7,0x8,5,1x7,0x7,6,5,1x7,5,6,0x5,6,5,1x7,6,6,0x5,6,6,1x7,6,0x8,1x7,0x9,1x7,0x9,1x7,0x9,7x3,0,7x3,0x9,6x3,0,6x3,0x9,6x3,0,6x3,0x9,6x3,0,6x3,0x52",
        }, {
            width: 16,
            colors: ["rgb(165,131,90)", "#ffebce", "#1858cc", "#ffffff", "rgb(223,198,17)", "#646664", "rgb(180, 170, 77)", "#7c562c", "rgb(75, 75, 75)"],
            shape: "0x7,5,5,0x13,5,5,9,5,9,0x10,5x3,9,5,9,0x9,5x4,9,5,9,5,0x8,5x4,9x3,5,0x8,7,7,5,7,7,9,7,7,0x8,7x6,9,7,0x9,1x5,9,1,0x9,1x5,9,1,0x8,5,1x7,0x7,5,5,1x7,0x7,5,5,1x7,5,0x5,6,6,5,1x7,6,0x5,6,6,0,1x7,6,0x8,1x7,0x9,1x7,0x9,1x7,0x9,7x6,0x10,6x6,0x10,6x6,0x10,6x3,0x56"
        }, {
            width: 16,
            colors: ["rgb(165,131,90)", "#ffebce", "#1858cc", "#ffffff", "rgb(223,198,17)", "#646664", "rgb(180, 170, 77)", "#7c562c", "rgb(75, 75, 75)"],
            shape: "0x7,5x3,0x12,5x3,9,5,0x10,5x4,9,5,9,0x9,5x4,9,5,9,5,0x8,5x4,9x3,5,0x8,7,5,7x3,9,7,7,0x8,7x5,9,7,7,0x8,1x5,9,1,0x9,1x5,9,1,0x9,1x7,5,0x8,1x7,5,5,0x6,5,1x7,5,5,0x6,5,1x7,6,5,0x6,6,1x7,6,0x8,1x7,0x9,1x7,0x9,1x7,0x10,7x6,0x10,6x6,0x10,6x6,0x13,6x3,0x52"
        }],
        walkDown: [{
            width: 16,
            colors: ["rgb(165,131,90)", "#ffebce", "#1858cc", "#ffffff", "rgb(223,198,17)", "#646664", "rgb(180, 170, 77)", "#7c562c", "rgb(75, 75, 75)"],
            shape: "0x4,9,0x13,9,0,9,0x13,9,0,9,0,5x3,0x9,9x3,5x5,0x9,9,5x7,0x8,9,5,5,8x3,5,5,0x8,9,7,8x5,7,0x8,9,7,2,4,2,4,2,7,0x8,9,7,2,3,2,3,2,7,0x9,7,2x5,7,0x9,1,5,2x3,5,1,0x9,5,7,5x3,7,5,0x8,5,5,7,5x3,7,5,5,0x7,5,5,7,5x3,7,5,5,0x6,6,6,5,7,5x3,7,5,6,6,0x5,6,6,5,7,5x3,7,5,6,6,0x7,7x7,0x9,7x7,0x9,7x3,0,7x3,0x9,6x3,0,6x3,0x9,6x3,0,6x3,0x53"
        }, {
            width: 16,
            colors: ["rgb(165,131,90)", "#ffebce", "#1858cc", "#ffffff", "rgb(223,198,17)", "#646664", "rgb(180, 170, 77)", "#7c562c", "rgb(75, 75, 75)"],
            shape: "0x3,9,0x13,9,0,9,0x13,9,0,9,0,5x4,0x8,9x3,0,5x5,0x8,9,0,5x7,0x7,9,0,5,5,8x3,5,5,0x7,9,0,7,8x5,7,0x7,9,0,7,2,4,2,4,2,7,0x8,9,7,2,3,2,3,2,7,0x8,9,7,2x5,7,0x9,1,5,2x3,5,1,0x9,5,7,5x3,7,5,0x8,5,5,7,5x3,7,5,5,0x6,5x3,7,5x3,7,5,5,0x6,6,6,5,7,5x3,7,5,6,0x6,6,6,5,7,5x3,7,5,6,0x8,7x7,0x9,7x7,0x9,7x7,0x9,6x7,0x9,6x4,0x56"
        }, {
            width: 16,
            colors: ["rgb(165,131,90)", "#ffebce", "#1858cc", "#ffffff", "rgb(223,198,17)", "#646664", "rgb(180, 170, 77)", "#7c562c", "rgb(75, 75, 75)"],
            shape: "0x17,9,0x15,9,0,9,0,0,5x4,0x7,9,0,9,0,5x5,0x7,9x3,5x7,0x7,9,0,5,5,8x3,5,5,0x7,9,0,7,8x5,7,0x7,9,0,7,2,4,2,4,2,7,0x8,9,7,2,3,2,3,2,7,0x8,9,7,2x5,7,0x9,1,5,2x3,5,1,0x9,5,7,5x3,7,5,0x8,5,5,7,5x3,7,5,5,0x7,5,5,7,5x3,7,5x3,0x6,6,5,7,5x3,7,5,6,6,0x6,6,5,7,5x3,7,5,6,6,0x7,7x7,0x9,7x7,0x10,7x6,0x10,6x6,0x12,6x4,0x53"
        }],
        walk: [{
            width: 16,
            colors: ["rgb(165,131,90)", "#ffebce", "#1858cc", "#ffffff", "rgb(223,198,17)", "#646664", "rgb(180, 170, 77)", "#7c562c", "rgb(75, 75, 75)"],
            shape: ",9,0,9,0x13,9,0,9,0,5x5,0x7,9,9,0,5x7,0x7,9,0,5x7,0x7,9,0,5x7,0x7,9,9,5x8,0x7,9,7,5,5,7,7,4,8,8,0x6,1,1,7x4,2,3,2,0x7,1,1,7x4,2x3,0x7,1x3,7x3,2x3,0x7,1x3,7,5,5,2,2,0x8,1x3,5x4,7,0x8,1x3,5x4,7,5,0x7,1x3,5x3,6,7,7,0x7,1,1,0,7,7,6x3,7,0x7,1,1,0,7x6,0x9,7x7,0x9,7x3,0,7x3,0x9,6x3,0,0,7,6,6,0x8,6x3,0,0,6x3,0x8,6x4,0,6x4,0x52",
        }, {
            width: 16,
            colors: ["rgb(165,131,90)", "#ffebce", "#1858cc", "#ffffff", "rgb(223,198,17)", "#646664", "rgb(180, 170, 77)", "#7c562c", "rgb(75, 75, 75)"],
            shape: ",9,0,9,0x13,9,0,9,0,5x5,0x7,9,0,9,5x7,0x6,9,9,0,5x7,0x7,9,0,5x8,0x6,9,9,5x8,0x7,9,7,5,5,7,2,4,8,8,0x6,1,1,7x3,2,2,3,2,0x7,1,1,7,7,2x5,0x7,1,1,7,7,2x5,0x7,1x3,5x3,2,2,0x8,1x3,5x4,7,0x8,1x3,5x4,7,0x8,1x3,5,6,6,5,7,0x8,1x3,7,6,6,5,7,0x8,1,1,0,7x5,0x11,7x5,0x12,7x3,0x13,6x3,0x13,6,6,0x14,6x3,0x56"
        }, {
            width: 16,
            colors: ["rgb(165,131,90)", "#ffebce", "#1858cc", "#ffffff", "rgb(223,198,17)", "#646664", "rgb(180, 170, 77)", "#7c562c", "rgb(75, 75, 75)"],
            shape: ",9,0,9,0x13,9,0,9,0,5x4,0x8,9x3,5x7,0x7,9,0,5x8,0x6,9,9,5x8,0x7,9,5x8,0x7,9,7,5,7,7,2,4,8,8,0x6,1,1,7x3,2,2,3,2,0x7,1,1,7,7,2x5,0x7,1,1,7,7,2x5,0x7,1x3,5x3,2,2,0x8,1,1,5x5,7,0x8,1,1,5x5,7,5,5,0x6,1,1,5,6,5x3,7,5,6,6,0x5,1,1,6,6,5x3,7,5,6,6,0x5,1,1,0,0,7x4,0x11,7x6,0x10,7x6,0x11,7,7,6,6,0x12,7,7,6x3,0x13,6x4,0x53"
        }],
        walkNoHoodie: [{
            width: 16,
            colors: ["rgb(165,131,90)", "#ffebce", "#1858cc", "#ffffff", "rgb(223,198,17)", "#646664", "rgb(180, 170, 77)", "#7c562c"],
            shape: "000000100000000000001111110000000001111111100000000111111111000000111111111100000011111111110000008888824880000000088822320000000008822222000000000882222200000000000552250000000000555555000000000055555500000000005556570000000000776667000000000077777700000000077777770000000007770777000000000666007660000000066600666000000006666066660000000000000000000000000000000000000000000000000000",
        }, {
            width: 16,
            colors: ["rgb(165,131,90)", "#ffebce", "#1858cc", "#ffffff", "rgb(223,198,17)", "#646664", "rgb(180, 170, 77)", "#7c562c"],
            shape: "000000100000000000001111110000000001111111100000000111111111000000111111111100000011111111110000008888824880000000088822320000000008822222000000000882222200000000005552250000000000555555000000000055555500000000005665500000000000766550000000000077777000000000007777700000000000077700000000000006660000000000000660000000000000066600000000000000000000000000000000000000000000000000000000"
        }, {
            width: 16,
            colors: ["rgb(165,131,90)", "#ffebce", "#1858cc", "#ffffff", "rgb(223,198,17)", "#646664", "rgb(180, 170, 77)", "#7c562c"],
            shape: "0x6,1,0x13,1x6,0x9,1x8,0x8,1x9,0x6,1x10,0x6,1x10,0x6,8x5,2,4,8,8,0x8,8x3,2,2,3,2,0x9,8,8,2x5,0x9,8,8,2x5,0x10,5x3,2,2,5,0x9,5x7,0x9,5x8,0x8,5,6,5x5,6,6,0x7,6,6,5x5,6,6,0x9,7x4,0x11,7x6,0x10,7x6,0x11,7,7,6,6,0x12,7,7,6x3,0x13,6x4,0x53"
        }]
    }
}

// should give an avg of 35% compression, will use if the sprite data gets out of hand.
const compressSprite = (sprite) => {
    const shape = [...sprite.shape];
    const groups = [];
    let groupIndex = 0;
    let lastGroupColor = 0;
    for (let i = 0; i < shape.length; ++i) {
        let group = undefined;
        const color = shape[i];
        if (lastGroupColor != color) group = groups[++groupIndex];
        else group = groups[groupIndex];
        if (!group) group = groups[groupIndex] = [];
        group.push(color);
        lastGroupColor = color;
    }
    return {
        compressed: true,
        width: sprite.width,
        colors: sprite.colors,
        shape: groups.map(x => x.length > 2 ? `${x[0]}x${x.length}` : x).join(",")
    };
};
const decompressSprite = (sprite) => {
    if (!sprite.shape.includes(",")) {
        return sprite;
    }
    const output = [];
    const parts = sprite.shape.split(',');
    for (let part of parts) {
        if (part.indexOf('x') > 0) {
            const data = part.split('x');
            const value = data[0];
            const count = parseInt(data[1]);
            for (let i = 0; i < count; ++i) {
                output.push(value);
            }
        } else {
            output.push(part);
        }
    }
    return {
        colors: sprite.colors,
        blend: sprite.blend,
        width: sprite.width,
        shape: output.join("")
    };
};
// resolution of the SNES
const resolution = {
    width: 512,
    height: 448
};
const spriteScaleX = 2;
const spriteScaleY = 1;
const canvas = window.game; //https://www.youtube.com/watch?v=rP3UngLFou4
const ctx = canvas.getContext("2d");

const screenX = (value) => value; //spriteScaleX * value;
const screenY = (value) => value; //spriteScaleY * value;

ctx.imageSmoothingEnabled = false;
canvas.width = resolution.width;
canvas.height = resolution.height;

let lastUpdate = 0;
let totalElapsed = 0;

fillRect(x, y, w, h) {
        x = Math.floor(x)
        y = Math.floor(y)
        w = Math.floor(w)
        h = Math.floor(h)
        const color = Color.parse(this.ctx.fillStyle);
        if (x != 0 || y != 0 || w != this.width || h != this.height) {
            for (let i = y; i < y + h; ++i) {
                for (let j = x; j < x + w; ++j) {
                    const index = (i * (this.width) + j) * 4;
                    this.buffer.data[index] = color.r;
                    this.buffer.data[index + 1] = color.g;
                    this.buffer.data[index + 2] = color.b;
                    this.buffer.data[index + 3] = color.a;
                }
            }
            // not implemented
        } else {
            for (let i = 0; i < this.buffer.data.length; i += 4) {
                this.buffer.data[i] = color.r;
                this.buffer.data[i + 1] = color.g;
                this.buffer.data[i + 2] = color.b;
                this.buffer.data[i + 3] = color.a;
            }
        }
    }

clear(color, color2, color3, color4) {
        color = color || "black";
        if (color && color2) {
            let colorStops = 8;
            let w = this.width;
            let h = this.height;
            let h1 = h / 3;
            if (color3 && color4) {
                this.drawLinearGradient(color, color2, colorStops, 0, 0, w, h1 * 2);
                this.drawLinearGradient(color, color2, colorStops / 2, 0, h1 * 2, w, h1);
            } else {
                this.drawLinearGradient(color, color2, colorStops * 1.5, 0, 0, w, h);
            }
        } else {
            this.ctx.fillStyle = color || "black";
            this.fillRect(0, 0, canvas.width, canvas.height);
        }
    }

drawLinearGradient(colorStart, colorStop, colorSteps, gradientX, gradientY, w, h) {
        gradientX = Math.floor(gradientX || 0);
        gradientY = Math.floor(gradientY || 0);
        colorSteps = colorSteps || 8;
        const c1 = Color.parse(colorStart);
        const c2 = Color.parse(colorStop);
        for (let y = gradientY; y < gradientY + h; ++y) {
            for (let x = gradientX; x < gradientX + w; ++x) {
                const color = Color.lerp(
                    c1, c2,
                    Math.floor(((y / h) * colorSteps)) / colorSteps);

const index = (y * w + x) * 4;
                this.buffer.data[index] = color.r;
                this.buffer.data[index + 1] = color.g;
                this.buffer.data[index + 2] = color.b;
                this.buffer.data[index + 3] = color.a;
            }
        }
    }

drawText(text, x, y, color, size, font) {
        color = color || this.ctx.fillStyle;
        size = size || "12px";
        font = font || "'Press Start 2P'";
        this.textBuffer.text(text, x, y, color, size, font);
    }

drawSprite(sprite, x, y, scaleX, scaleY, flip, mask) {
        x = Math.floor(x);
        y = Math.floor(y);
        scaleX = scaleX || 1;
        scaleY = scaleY || scaleX;
        flip = flip || false;
        if (sprite.shape.includes(",")) {
            sprite = decompressSprite(sprite);
        }
        let shape = [...sprite.shape];
        let pw = screenX(scaleX);
        let ph = screenY(scaleY);

// this is slower, but will give us a correct render
        pw = Math.floor(pw);
        ph = Math.floor(ph);
        const spriteWidth = sprite.width;
        const spriteHeight = sprite.shape.length / sprite.width;
        const newWidth = Math.floor(spriteWidth * pw);
        const newHeight = Math.floor(spriteHeight * ph);
        const resized = resizeSprite(sprite, spriteWidth, spriteHeight, newWidth, newHeight);
        shape = [...resized.shape];
        const colorMap = sprite.colors.map(c => Color.parse(c));
        for (var y1 = 0; y1 < newHeight; ++y1) {
            for (var x1 = 0; x1 < newWidth; ++x1) {
                const xsrc = flip ? (newWidth - x1) - 1 : x1;
                let index = (y1 * newWidth + xsrc);
                let colorIndex = getColorIndex(shape[index]);
                if (colorIndex == 0) {
                    continue;
                }

if (x1 + x < 0 || y1 + y < 0) {
                    continue;
                }

let color = colorMap[colorIndex - 1];
                let pixelIndex = ((y1 + y) * this.width + (x1 + x));
                const pixel = pixelIndex * 4;

if (sprite.blend) {
                    const bcolor = new Color(this.buffer.data[pixel + 0], this.buffer.data[pixel + 1], this.buffer.data[pixel + 2]);
                    color = sprite.blend(bcolor, color);
                }
                if (mask) {
                    // const bcolor = new Color(this.buffer.data[pixel + 0], this.buffer.data[pixel + 1], this.buffer.data[pixel + 2]);          
                    if (this.buffer.data[pixel + 0] == mask.r &&
                        this.buffer.data[pixel + 1] == mask.g &&
                        this.buffer.data[pixel + 2] == mask.b) {
                        this.buffer.data[pixel + 0] = color.r;
                        this.buffer.data[pixel + 1] = color.g;
                        this.buffer.data[pixel + 2] = color.b;
                        this.buffer.data[pixel + 3] = 255;
                    }
                } else {
                    this.buffer.data[pixel + 0] = color.r;
                    this.buffer.data[pixel + 1] = color.g;
                    this.buffer.data[pixel + 2] = color.b;
                    this.buffer.data[pixel + 3] = 255;
                }
            }
        }
    }

blit() {
        this.ctx.putImageData(this.buffer, 0, 0);
        for (let text of this.textBuffer.texts) {
            this.ctx.fillStyle = text.color;
            this.ctx.font = `${text.size} ${text.font} `;
            this.ctx.fillText(text.text, text.x, text.y);
        }
        this.textBuffer.reset();
    }
}
class Keyboard {
    constructor() {
        this.state = [];
        this.prevState = [];
    }
    isKeyDown(key) {
        return !!this.state[key.toLowerCase()];
    }
    isKeyPressed(key) {
        const code = key.toLowerCase();
        return !!this.prevState[code] && !!!this.state[code];
    }
    keydown(evt) {
        const code = evt.code.toLowerCase();
        this.prevState[code] = this.state[code];
        this.state[evt.code.toLowerCase()] = true;
    }
    keyup(evt) {
        const code = evt.code.toLowerCase();
        this.prevState[code] = this.state[code];
        this.state[code] = false;
    }
    reset() {
        for (let code in this.state) {
            this.prevState[code] = this.state[code];
        }
    }
}
class Mouse {
    constructor() {
        this.state = [];
        this.prevState = [];
        this.x = 0;
        this.y = 0;
    }
    isButtonDown(button) {
        return !!this.state[button];
    }
    isButtonPressed(button) {
        return !!this.prevState[button] && !!!this.state[button];
    }
    down(evt) {
        const code = evt.button;
        this.prevState[code] = this.state[code];
        this.state[code] = true;
    }
    up(evt) {
        const code = evt.button;
        this.prevState[code] = this.state[code];
        this.state[code] = false;
    }
    move(evt) {
        const rect = canvas.getBoundingClientRect();
        this.x = evt.clientX - rect.left;
        this.y = evt.clientY - rect.top;
    }
    reset() {
        for (let code in this.state) {
            this.prevState[code] = this.state[code];
        }
    }
}
class GameState {
    constructor(game, renderer) {
        this.game = game;
        this.SoundLayer = game.SoundLayer;
        this.renderer = renderer;
        this.keyboard = game.keyboard;
        this.mouse = game.mouse;
    }
    nextState() {
        this.game.nextState();
    }
    repeatState() {
        this.game.repeatState();
    }
}

class FadeOut {
    constructor(renderer, complete) {
        this.renderer = renderer;
        this.complete = complete;
        this.barsCount = 256;
        this.dropSpeed = 500;
        this.timer = 2;
        this.maxStartHeight = 250;
        this.time = this.timer;
        this.bars = new Array(this.barsCount);
        this.reset();
    }

get covered() {
        return this.bars.filter(x => x < this.renderer.height + this.maxStartHeight).length == 0;
    }

update(elapsed) {
        this.time -= elapsed;
        if (this.time <= 0 && this.complete && !this.bars.find(x => x < this.renderer.height + 10)) {
            this.reset();
            this.complete();
        } else {
            for (let x = 0; x < this.barsCount; ++x) {
                this.bars[x] += elapsed * this.dropSpeed;
            }
        }
    }

render(elapsed) {
        const barWidth = this.renderer.width / this.barsCount;
        for (let x = 0; x < this.barsCount; ++x) {
            const renderHeight = this.bars[x] - this.maxStartHeight;
            if (renderHeight > 0) {
                this.renderer.ctx.fillStyle = "black";
                this.renderer.fillRect(x * barWidth, 0, barWidth, renderHeight);
            }
        }

// if (this.covered) {      
        this.renderer.drawSprite(sprites.normanReedus, 6, 7, 5, 5, false, Color.parse("#000000"));
        // }
    }
    reset() {
        this.time = this.timer;
        for (let x = 0; x < this.barsCount; ++x) {
            this.bars[x] = Math.random() * this.maxStartHeight;
        }
    }
}

class Rain extends GameState {
    constructor(game, renderer) {
        super(game, renderer);

this.makeRainDrop = (x, y) => {
            return {
                width: 4,
                visible: true,
                hide: false,
                x: x,
                y: y,
                blend: blend.add, // (x, y) => blend.multiply(x, y, 1),
                colors: [rgb(55, 55, 55)],
                shape: "0001001001001000"
            };
        }
        this.dropSpeed = 250;
        this.density = 0.1;
        this.dropCount = Math.floor(this.density * this.renderer.width);
        const xSpread = this.renderer.width / this.dropCount;
        const yVariation = this.renderer.height;

this.rainDrops = [];
        for (let x = 0; x < this.dropCount; ++x) {
            this.rainDrops.push(this.makeRainDrop(x * xSpread, Math.random() * yVariation));
        }

this.duration = this.getNextDuration();
        this.timer = this.duration;
        this.raining = false;
    }

getNextDuration() {
        return (Math.random() * 20) + 5;
    }

update(elapsed) {
        if (this.raining) {
            const progress = 1 - (this.timer / this.duration);
            if (progress > 0.5) {
                const visibleCount = Math.floor(Math.max(0, (this.timer / this.duration) * this.dropCount));
                let visibleDrops = this.rainDrops.filter(x => x.visible && !x.hide);
                while (visibleDrops.length > visibleCount) {
                    const index = Math.floor(Math.random() * visibleDrops.length);
                    if (visibleDrops[index]) {
                        visibleDrops[index].hide = true;
                        visibleDrops = this.rainDrops.filter(x => x.visible && !x.hide);
                    }
                }
            }

for (let drop of this.rainDrops) {
                drop.x -= elapsed * this.dropSpeed / 2;
                drop.y += (elapsed * this.dropSpeed) * (Math.random() * 0.25 + 0.75);
                const rain = this.SoundLayer.Rain;
                if (drop.x < 0) {
                    drop.x = this.renderer.width;
                    if (!rain.playing) rain.play();
                    if (drop.hide) {
                        drop.visible = false;
                    }
                }
                if (drop.y > this.renderer.height) {
                    drop.y = 0;
                    if (!rain.playing) rain.play();
                    if (drop.hide) {
                        drop.visible = false;
                    }
                }
            }
        }

if (this.timer > 0 && this.raining) {
            this.timer -= elapsed;
        }
        if (this.timer <= 0 && this.rainDrops.filter(x => x.visible).length == 0) {
            this.raining = false;
            this.duration = this.getNextDuration();
            this.timer = this.duration;
        }
    }
    render(elapsed) {
        if (!this.raining) {
            return;
        }

for (let i = 0; i < this.rainDrops.length; ++i) {
            const drop = this.rainDrops[i];
            if (drop.visible) {
                this.renderer.drawSprite(drop, drop.x, drop.y, 2, 2);
            }
        }
    }
    start() {
        this.raining = true;
        this.duration = this.getNextDuration();
        this.timer = this.duration;

const xSpread = this.renderer.width / this.dropCount;
        const yVariation = this.renderer.height;

this.rainDrops.forEach((x, i) => {
            x.visible = true;
            x.hide = false;
            x.x = i * xSpread, x.y = Math.random() * yVariation
        });
    }
    stop() {
        this.raining = false;
    }
}

class Intro extends GameState {
    constructor(game, renderer) {
        super(game, renderer);
        this.animationFrameIndex = 0;
        this.animationUpdateTime = 0.25;
        this.animationUpdateTimer = this.animationUpdateTime;
        this.animationX = 10;
        this.wraithX = -90;
        this.animationSpeed = 40;
        this.wraithFrame = 0;
        this.wraithVisibility = 0;
        this.cloudX = 40;
        this.playTextVisible = true;
        this.playTextTime = 2;
        this.playTextTimeShort = 0.5;
        this.playTextTimer = this.playTextTime;
        this.fadeOutActive = false;
        this.fadeOut = new FadeOut(this.renderer, () => {
            this.fadeOutActive = false;
            this.fadeOut.reset();
            this.nextState();
        });

// dev only, remove later
        // this.rain = new Rain(game, renderer);
    }

update(elapsed) {
        this.animationUpdateTimer -= elapsed;
        if (this.animationUpdateTimer <= 0) {
            this.animationUpdateTimer = this.animationUpdateTime;
            this.animationFrameIndex = (this.animationFrameIndex + 1) % sprites.player.walk.length;
            this.wraithFrame = (this.wraithFrame + 1) % sprites.wraith.stages[this.wraithVisibility].length;
        }
        this.playTextTimer -= elapsed;
        this.animationX += elapsed * this.animationSpeed;
        this.wraithX += elapsed * this.animationSpeed;
        this.cloudX += elapsed * (this.animationSpeed / 3);
        if (this.cloudX >= this.renderer.width) {
            this.cloudX = 0;
        }
        if (this.animationX >= this.renderer.width) {
            this.animationX = 0;
        }
        if (this.wraithX >= this.renderer.width) {
            this.wraithX = 0;
        }
        if (this.wraithX >= this.animationX) {
            this.wraithX = this.animationX - 90;
        }
        if (this.playTextTimer <= 0) {
            this.playTextVisible = !this.playTextVisible;
            if (!this.playTextVisible) {
                this.playTextTimer = this.playTextTimeShort;
            } else {
                this.playTextTimer = this.playTextTime;
            }
        }

if (this.rain) {
            this.rain.update(elapsed);
        }

if ((this.mouse.isButtonPressed(0) || this.keyboard.isKeyPressed("space")) && !this.fadeOutActive) {
            this.fadeOutActive = true;
        }
        if (this.fadeOutActive) {
            this.fadeOut.update(elapsed);
        }
    }

render(elapsed) {
        this.renderer.clear("rgb(237,233,232)", "rgb(167,185,195)", "rgb(116,125,132)", "rgb(50,55,59)");
        const j = this.renderer.height / 3;
        const x = (this.renderer.width / 2) - (screenX(sprites.logo.width * 2) / 2)
        const y = 75; // (renderer.height / 2) - ((screenY(sprites.logo.shape.length / sprites.logo.width))/2)

this.renderer.drawSprite(sprites.clouds[0], this.cloudX, 60, 4, 2, true);
        this.renderer.drawSprite(sprites.clouds[1], 100 + this.cloudX, 52, 2, 2, true);
        this.renderer.drawSprite(sprites.clouds[2], 160 + this.cloudX, 44, 3, 2, true);
        this.renderer.drawSprite(sprites.clouds[3], 220 + this.cloudX, 60, 3, 2, true);

this.renderer.drawSprite(sprites.mountains[1], 280, 205, 5, 3);
        this.renderer.drawSprite(sprites.mountains[0], 5, 128, 5, 3);

this.renderer.drawSprite(sprites.player.shadow, this.animationX - 2, j * 2 + 14, 2, 2);
        this.renderer.drawSprite(sprites.player.walk[this.animationFrameIndex], this.animationX, j * 2, 2, 2);
        this.renderer.drawSprite(sprites.wraith.stages[this.wraithVisibility][this.wraithFrame],
            this.wraithX, j * 2 + Math.sin(elapsed * Math.random()), 2, 2, true);
        if (this.rain) {
            this.rain.render(elapsed);
        }

this.renderer.drawSprite(sprites.logo, x, y, 2, 2);

let text = "Press space to play.";
        let m = this.renderer.ctx.measureText(text);
        if (!this.fadeOutActive && this.playTextVisible) {
            this.renderer.drawText(text, this.renderer.width / 2 - m.width / 2, 287, "black", "14px");
        }
        if (this.fadeOutActive) {
            this.fadeOut.render(elapsed);
        }
    }
}

const animations = {
    npc: {
        idle: {
            idle: true,
            sprites: sprites.npc.idle,
            interval: 0.2,
            timer: 0.2,
            frame: 0,
            offsetX: 0
        }
    },
    death: {
        idle: true,
        sprites: sprites.player.death,
        interval: 0.2,
        timer: 0.2,
        frame: 0,
        offsetX: -4,
        playOnce: true
    },
    walk: {
        idle: false,
        sprites: sprites.player.walk,
        interval: 0.2,
        timer: 0.2,
        frame: 0,
        offsetX: 0,
    },
    walkUp: {
        idle: false,
        sprites: sprites.player.walkUp,
        interval: 0.2,
        timer: 0.2,
        frame: 0,
        offsetX: -3
    },
    walkDown: {
        idle: false,
        sprites: sprites.player.walkDown,
        interval: 0.2,
        timer: 0.2,
        frame: 0,
        offsetX: 0
    },
    idle: {
        idle: true,
        sprites: sprites.player.idle,
        interval: 0.2,
        timer: 0.2,
        frame: 0,
        offsetX: 0
    },
    idleUp: {
        idle: true,
        sprites: sprites.player.idleUp,
        interval: 0.2,
        timer: 0.2,
        frame: 0,
        offsetX: -3,
    },
    idleDown: {
        idle: true,
        sprites: sprites.player.idleDown,
        interval: 0.2,
        timer: 0.2,
        frame: 0,
        offsetX: 0
    },
};

class Zone extends GameState {
    constructor(game, renderer, isStartingPoint, isDestination, index) {
        super(game, renderer);
        this.maxWraiths = 10;
        this.isStartingPoint = isStartingPoint;
        this.isDestination = isDestination;
        this.rollWraiths();
        this.index = index;

this.grassIndex = 0;
        this.grassWaveInterval = 0.3;
        this.grassTimer = this.grassWaveInterval;

this.flowerAnimation = 0;

this.grass = [];
        this.rocks = [];
        this.flowers = [];

this.addGrass();
        this.addFlowers();
    }

addGrass() {
        const grassWidth = 32;
        const grassHeight = 16.5;
        const grassColumns = (this.renderer.width / grassWidth) - 1;
        const grassRows = (this.renderer.height / grassHeight) - 1;
        for (let i = 0; i < grassRows; ++i) {
            for (let j = 0; j < grassColumns; ++j) {
                if (Math.random() < 0.05) {
                    this.grass.push({
                        x: j * grassWidth,
                        y: i * grassHeight
                    });
                }
            }
        }
    }

addFlowers() {
        const width = 12;
        const height = 16;
        const columns = (this.renderer.width / width) - 1;
        const rows = (this.renderer.height / height) - 1;
        for (let i = 0; i < rows; ++i) {
            for (let j = 0; j < columns; ++j) {
                if (Math.random() < 0.005) {
                    this.flowers.push({
                        x: j * width,
                        y: i * height,
                        state: 0
                    });
                }
            }
        }
    }

rollWraiths() {
        this.wraiths = [];
        this.hasWraith = Math.random() <= 0.4 && !this.isDestination && !this.isStartingPoint && this.game.state.zone != this;
        if (this.hasWraith) {
            const count = Math.floor(Math.random() * this.maxWraiths) + 1;
            for (let i = 0; i < count; ++i)
                this.wraiths.push(new Wraith(this.game, this.renderer));
        }
    }

update(elapsed) {
        this.grassTimer -= elapsed;
        if (this.grassTimer <= 0) {
            this.grassIndex = (this.grassIndex + 1) % sprites.grass.length;
            this.flowerAnimation = (this.flowerAnimation + 1) % sprites.flowers.length;
            this.grassTimer = this.grassWaveInterval;
        }
        const player = this.game.state.player;
        const pX = player.x + 16;
        const pY = player.y + 48;
        for (let flower of this.flowers) {
            if (flower.state == 1) {
                continue;
            }
            if (pX >= flower.x && pX <= flower.x + 16 &&
                pY >= flower.y + 16 && pY <= flower.y + 32) {
                flower.state = 1;
                if (!this.SoundLayer.Flower.playing) {
                    this.SoundLayer.Flower.play();
                }
            }
        }

if (this.hasWraith) {
            this.wraiths.forEach(x => x.update(elapsed));
        }
    }
    render(elapsed) {
        this.renderer.clear(rgb(97, 137, 158), rgb(44, 101, 130));

for (let flower of this.flowers) {
            if (flower.state == 1) {
                // its broken :< stop stomping on the flowers!
                this.renderer.drawSprite(sprites.badflower, flower.x, flower.y, 4, 4);
            } else {
                this.renderer.drawSprite(sprites.flowers[this.flowerAnimation], flower.x, flower.y, 4, 4);
            }
        }

for (let grass of this.grass) {
            this.renderer.drawSprite(sprites.grass[this.grassIndex], grass.x, grass.y, 2, 1);
        }
        if (this.hasWraith) {
            this.wraiths.forEach(x => x.render(elapsed));
        }
    }
}

// not rly a state but mehps
class Wraith extends GameState {
    constructor(game, renderer) {
        super(game, renderer);

this.wraithVisibility = 0;
        this.x = ((this.renderer.width / 2) * Math.random()) + ((this.renderer.width / 3) * Math.random());
        this.y = ((this.renderer.height / 2) * Math.random()) + ((this.renderer.height / 3) * Math.random());
        this.targetX = -1;
        this.targetY = -1;
        this.nextTarget();

this.wraithFrame = 0;
        this.animationTime = 0.2;
        this.animationTimer = this.animationTime;
        this.moveSpeed = 1000;
        this.followSpeed = 85;
        this.flip = false;
    }

nextTarget() {
        this.targetX = this.renderer.width * Math.random() + 50
        this.targetY = this.renderer.height * Math.random() + 50
    }

update(elapsed) {
        this.animationTimer -= elapsed;
        if (this.animationTimer <= 0) {
            this.animationTimer = this.animationTime;
            this.wraithFrame = (this.wraithFrame + 1) % sprites.wraith.stages[this.wraithVisibility].length;
        }

const player = this.game.state.player;
        if (this.targetX != -1 && this.targetY != -1 && !this.game.holdingBreath) {
            // this following code should give some nice glitchy placement :-)      
            if (this.wraithVisibility == 0) {

const distX = this.targetX - this.x;
                const distY = this.targetY - this.y;
                const normalX = 1 / distX
                const normalY = 1 / distY
                this.x += normalX * elapsed * this.moveSpeed;
                this.y += normalY * elapsed * this.moveSpeed;

this.flip = distX < 0;

const sqrMagnitude = Math.sqrt(distX * distX + distY * distY);

if (sqrMagnitude < 0.001) {
                    this.nextTarget();
                }

if (this.x < 0 || this.x > this.renderer.width) {
                    this.x = 0;
                    this.nextTarget();
                }

if (this.y > this.renderer.height || this.y < 0) {
                    this.y = 0;
                    this.nextTarget();
                }
            } else {
                // player detected, move normally towards player        
                const distX = (player.x + 16) - this.x;
                const distY = (player.y + 24) - this.y;
                const mag = Math.sqrt(distX * distX + distY * distY);
                this.flip = distX < 0;

if (mag <= 8) {
                    this.game.state.death();
                    return;
                }

render(elapsed) {
        const shake = Math.sin(elapsed * Math.random());
        let frame = sprites.wraith.stages[this.wraithVisibility][this.wraithFrame];
        this.renderer.drawSprite(
            frame,
            this.x, this.y + shake, 2, 2, this.flip);
    }
}

class Gameplay extends GameState {
    constructor(game, renderer) {
        super(game, renderer);
        this.player = {
            x: 50,
            y: 50,
            flip: false,
            speed: 80,
            animation: animations.idle
        };

this.fadeOutActive = false;
        this.fadeOut = new FadeOut(this.renderer, () => {
            this.fadeOutActive = false;
            this.fadeOut.reset();
            this.nextState();
        });

this.deathTimer = undefined;
        this.canMove = true;
        this.delivered = false;
        this.packagesDelivered = 0;
        this.packageColorIndex = 0;
        this.npcPackageColorIndex = 1

this.animationFrameIndex = 0;
        this.animationUpdateTimer = animations.npc.idle.interval;

this.canDeliver = false;
        this.runMultiplier = 2;
        this.zoneX = 0;
        this.zoneY = 0;
        this.zoneColumns = 10;
        this.zoneRows = 10;
        this.zone = undefined;

let destinationPlaced = false;
        const destIndex = Math.floor((Math.random() * 95) + 1);
        const St = () => new Zone(game, renderer, true, false);
        const Ra = (i) => {
            let z = new Zone(game, renderer, false,
                i == destIndex, i);
            if (z.isDestination) destinationPlaced = z.isDestination;
            return z;
        };

this.zones = [St()];
        for (let i = 1; i < this.zoneColumns * this.zoneRows; ++i) {
            this.zones.push(Ra(i));
        }

this.rain = new Rain(game, renderer);

this.Manuscript = new Manuscript

this.UILayer = new UI(window.ui, this.Manuscript)

// Testing Sounds
        if (!this.SoundLayer.BGM.playing) {
            this.SoundLayer.BGM.play({
                loop: true
            })
        }
        // END: Testing Sounds

this.loadZone();

animations.death.frame = 0; // resets the death animation in case this is a second play
        this.setPlayerPackageColor(0);
        this.setNpcPackageColor(1);
        this.UILayer.scoreUpdated(0);
    }

get playerSprite() {
        return this.player.animation.sprites[this.player.animation.frame];
    }

updatePlayerAnimations(elapsed) {
        this.player.animation.timer -= elapsed;
        if (this.player.animation.timer <= 0) {
            this.player.animation.timer = this.player.animation.interval;
            const nextFrame = (this.player.animation.frame + 1) % this.player.animation.sprites.length;
            if (nextFrame != 0 || !this.player.animation.playOnce) {
                this.player.animation.frame = nextFrame;
            }
        }
    }

checkForZoneChange(elapsed) {
        const zoneX = this.zoneX;
        const zoneY = this.zoneY;
        if (this.player.x > this.renderer.width - 26) {
            this.player.x = 0;
            this.zoneX++;
        } else if (this.player.x < 0) {
            this.player.x = this.renderer.width - 26;
            this.zoneX--;
        } else if (this.player.y > this.renderer.height - 48) {
            this.player.y = 0;
            this.zoneY++;
        } else if (this.player.y < 0) {
            this.player.y = this.renderer.height - 48;
            this.zoneY--;
        }

if (zoneX != this.zoneX || zoneY != this.zoneY) {
            if (this.zoneX < 0) {
                this.zoneX = this.zoneColumns - 1;
            }
            if (this.zoneY < 0) {
                this.zoneY = this.zoneRows - 1;
            }
            this.zoneX = this.zoneX % this.zoneColumns;
            this.zoneY = this.zoneY % this.zoneRows;
            this.loadZone();
        }
    }

loadZone() {
        this.delivered = false;
        const zoneX = this.zoneX;
        const zoneY = this.zoneY;
        const zoneIndex = zoneY * this.zoneColumns + zoneX;
        const dest = this.zones.find(x => x.isDestination);
        let i = this.zones.indexOf(dest);
        let desZoneX = Math.floor(i % this.zoneColumns);
        let desZoneY = Math.floor(i / this.zoneColumns);
        this.zone = this.zones[zoneIndex];
        if (Math.random() < 0.1 && !this.rain.raining) {
            this.rain.start();
        }

this.setPlayerPackageColor(this.packageColorIndex);
        this.setNpcPackageColor(this.npcPackageColorIndex);

this.UILayer.positionUpdated(
            this.zoneX,
            this.zoneY,
            desZoneX,
            desZoneY);
    }

setColor(arr, idx, clr) {
        for (let i = 0; i < arr.length; ++i) {
            arr[i].colors[idx] = clr;
        }
    }

setPlayerPackageColor(colorIndex) {
        this.setColor(sprites.player.walk, 0, packageColors[colorIndex]);
        this.setColor(sprites.player.idle, 0, packageColors[colorIndex]);
        this.setColor(sprites.player.walkDown, 0, packageColors[colorIndex]);
        this.setColor(sprites.player.idleDown, 0, packageColors[colorIndex]);
        this.setColor(sprites.player.walkUp, 0, packageColors[colorIndex]);
        this.setColor(sprites.player.idleUp, 0, packageColors[colorIndex]);
        this.setColor(sprites.player.death, 0, packageColors[colorIndex]);
    }

setNpcPackageColor(colorIndex) {
        this.setColor(sprites.npc.idle, 8, packageColors[colorIndex]);
    }

deliverPackage() {
        this.SoundLayer.Talk.play();

this.delivered = true;
        ++this.packagesDelivered;

this.npcPackageColorIndex = this.packageColorIndex++;
        this.packageColorIndex = this.packageColorIndex % packageColors.length;

this.setPlayerPackageColor(this.packageColorIndex);
        this.setNpcPackageColor(this.npcPackageColorIndex);
        this.npcPackageColorIndex = (this.packageColorIndex + 1) % packageColors.length;
        this.UILayer.scoreUpdated(this.packagesDelivered);

this.canMove = false;

this.UILayer.showDeliveryDialog(() => this.canMove = true);

this.zone.isDestination = false;
        do {
            const destIndex = Math.floor((Math.random() * 95) + 1);
            if (destIndex != this.zones.indexOf(this.zone)) {
                this.zones[destIndex].isDestination = true;
                const x = destIndex % this.zoneColumns;
                const y = destIndex / this.zoneColumns;
                this.UILayer.positionUpdated(
                    this.zoneX, this.zoneY,
                    x, y);
                break;
            }
        } while (true);

this.zones.forEach(x => x.rollWraiths());
    }

moveUp() {
        return this.keyboard.isKeyDown('arrowup') // || this.keyboard.isKeyDown('keyw');
    }

moveDown() {
        return this.keyboard.isKeyDown('arrowdown') // || this.keyboard.isKeyDown('keys');
    }

moveLeft() {
        return this.keyboard.isKeyDown('arrowleft') // || this.keyboard.isKeyDown('keya');
    }

moveRight() {
        return this.keyboard.isKeyDown('arrowright') // || this.keyboard.isKeyDown('keyd');
    }

update(elapsed) {
        /*
        if (!this.SoundLayer.BGM.playing) {
          this.SoundLayer.BGM.play();
        }*/

let isMoving = false;
        let verMovement = false;
        let horMovement = false;
        let move = this.player.speed * elapsed;
        let oldX = this.player.x;
        let oldY = this.player.y;

this.rain.update(elapsed);

if (this.zone) {
            this.zone.update(elapsed);
            this.animationUpdateTimer -= elapsed;
            if (this.animationUpdateTimer <= 0) {
                this.animationFrameIndex = (this.animationFrameIndex + 1) % animations.npc.idle.sprites.length;
                this.animationUpdateTimer = animations.npc.idle.interval;
            }
        }

if (this.deathTimer) {
            this.deathTimer -= elapsed;
            if (this.deathTimer <= 0) {
                this.UILayer.reset();
                this.fadeOutActive = true;
                this.fadeOut.update(elapsed);
                // this.nextState(); // goes to either gameover screen or main menu if no gameover is defined.
                return;
            }
        }

if (this.game.lungCapacity <= 0) {
            this.game.holdingBreath = false;
        }

if (this.canMove) {
            if (this.keyboard.isKeyDown("shiftleft") || this.keyboard.isKeyDown("shiftright") && !this.game.holdingBreath) {
                if (this.decreaseLungCapacity(elapsed)) {
                    move *= this.runMultiplier;
                }
            }

// Testing Sounds
            if (
                this.moveUp() ||
                this.moveDown() ||
                this.moveLeft() ||
                this.moveRight()) {
                if (this.game.holdingBreath) {
                    this.decreaseLungCapacity(elapsed);
                }
                isMoving = true;
                // TODO: This guy triggers way too fast. Gotta throttle it.
                if ((!this.footstep || !this.footstep.playing) && !this.game.holdingBreath) {
                    this.footstep = this.SoundLayer.Footstep;
                    if (!this.footstep.playing) {
                        this.footstep.play()
                    }
                }
                // 
            }
            // End: Testing Sounds

if (this.moveUp() || this.moveDown()) {
                verMovement = true;
            }

if (this.moveLeft() || this.moveRight()) {
                horMovement = true;
            }

if (this.moveLeft()) {
                this.player.x -= verMovement ? move / 1.5 : move;
                this.player.flip = true;
                this.player.animation = animations.walk;
            } else if (this.moveRight()) {
                this.player.x += verMovement ? move / 1.5 : move;
                this.player.flip = false;
                this.player.animation = animations.walk;
            }

if (this.moveDown()) {
                this.player.y += horMovement ? move / 1.5 : move;
                this.player.animation = animations.walkDown;
                this.player.flip = false;
            } else if (this.moveUp()) {
                this.player.y -= horMovement ? move / 1.5 : move;
                this.player.animation = animations.walkUp;
                this.player.flip = false;
            }
        }

this.updatePlayerAnimations(elapsed);

if (this.player.x == oldX && this.player.y == oldY && !this.player.animation.idle) {
            if (this.player.animation == animations.walkUp) {
                this.player.animation = animations.idleUp;
            } else if (this.player.animation == animations.walkDown) {
                this.player.animation = animations.idleDown;
            } else {
                this.player.animation = animations.idle;
            }
        }

if (this.keyboard.isKeyDown("space")) {
            if (this.game.lungCapacity > 0) {
                this.game.holdingBreath = true;
                this.decreaseLungCapacity(elapsed);
            }
        } else {
            this.game.holdingBreath = false;
            this.increaseLungCapacity(isMoving ? elapsed / 3 : elapsed);
        }

this.checkForZoneChange(elapsed);

const testW = 48;
        const testH = 64;
        if (this.zone.isDestination) {
            if (this.player.x >= this.renderer.width / 2 - (testW + testW / 2) &&
                this.player.y >= this.renderer.height / 2 - testH &&
                this.player.y <= this.renderer.height / 2 + testH &&
                this.player.x <= this.renderer.width / 2 + testW) {

this.canDeliver = !this.delivered;
                if (this.keyboard.isKeyPressed("space")) {
                    this.canDeliver = false;
                    this.deliverPackage();
                    return;
                }
                return;
            }
        }

this.canDeliver = false;

if (this.fadeOutActive) {
            this.fadeOut.update(elapsed);
        }
    }

decreaseLungCapacity(elapsed) {
        const before = this.game.lungCapacity;
        this.game.lungCapacity = Math.max(0, this.game.lungCapacity - elapsed);
        this.UILayer.decrementLungCapBars();
        return before != this.game.lungCapacity && this.game.lungCapacity >= 1;
    }

increaseLungCapacity(elapsed) {
        this.game.lungCapacity = Math.min(8, this.game.lungCapacity + elapsed);
        this.UILayer.incrementLungCapBars();
    }

death() {
        if (!this.canMove) {
            return;
        }
        this.canMove = false;
        if (!this.SoundLayer.Death.playing) {
            this.SoundLayer.Death.play();
        }
        this.player.animation = animations.death;
        this.deathTimer = this.player.animation.interval * this.player.animation.sprites.length;
    }

drawPlayer() {
        if (!this.deathTimer || this.deathTimer >= 0.6) {
            this.renderer.drawSprite(
                sprites.player.shadow, this.player.x - 2, this.player.y + 14, 2, 2, this.player.flip);
        }
        this.renderer.drawSprite(
            this.playerSprite,
            this.player.flip ? this.player.x - 4 : this.player.x + this.player.animation.offsetX,
            this.player.y, 2, 2, this.player.flip);
    }

drawNpc() {
        const flip = this.player.x - this.renderer.width / 2 < 0;
        this.renderer.drawSprite(sprites.player.shadow,
            this.renderer.width / 2 - 18 + (flip ? 5 : 0),
            this.renderer.height / 2 - 10, 2, 2, flip);

this.renderer.drawSprite(sprites.npc.idle[this.animationFrameIndex],
            this.renderer.width / 2 - 16,
            this.renderer.height / 2 - 24, 2, 2, flip);
    }

render(elapsed) {
        if (this.zone) {
            this.zone.render(elapsed);
        }

if (this.zone && this.zone.isDestination || this.delivered) {
            if (this.player.y >= this.renderer.height / 2 - 16) {
                this.drawNpc();
                this.drawPlayer();
            } else {
                this.drawPlayer();
                this.drawNpc();
            }

if (this.canDeliver) {
                this.renderer.drawSprite(sprites.attention, this.renderer.width / 2 - 16, this.renderer.height / 2 - 64, 2, 2);
            }

} else {
            this.drawPlayer();
        }
        this.rain.render(elapsed);

if (this.fadeOutActive) {
            this.fadeOut.render(elapsed);
        }
    }
}

class Sound {
    constructor(src, durationOverride) {
        this.audio = new Audio(src);
        // this.audio.volume = 0.75;
        this.ready = false;
        this.loop = false;
        this.played = false;
        this.audio.addEventListener("loadedmetadata", () => this.onReady());
        this.overrideDuration = durationOverride;
    }

set volume(value) {
        this.audio.volume = value;
    }

get volume() {
        return this.audio.volume;
    }

onReady() {
        this.ready = true;
    }
    resume() {
        if (this.audio.resume) {
            this.audio.resume();
        } else {
            this.audio.play();
        }
    }
    play(options) {
        this.audio.currentTime = 0;

// this.audio.loop = options && options.loop
        if (options) this.loop = !!options.loop
        this.played = true;
        this.audio.play();
    }
    stop() {
        this.audio.pause();
    }
    get duration() {
        if (!this.ready) {
            return this.overrideDuration || 0;
        }
        return this.overrideDuration || this.audio.duration;
    }
    get playing() {
        return this.audio.currentTime > 0 && !this.audio.paused && this.audio.currentTime <= this.duration;
    }
}

// Responsible for handlings sounds and BGM
class SoundManager {
    constructor() {
        this.pausedSounds = [];
        this.sounds = {
            BGM: new Sound('https://s3-us-west-2.amazonaws.com/s.cdpn.io/16584/eerie_bgm.wav', 7.2925),
            // Footstep01: new Sound('https://s3-us-west-2.amazonaws.com/s.cdpn.io/16584/footstep01.ogg'),
            Footstep01: new Sound('https://s3-us-west-2.amazonaws.com/s.cdpn.io/163870/walk0.wav'),
            Footstep02: new Sound('https://s3-us-west-2.amazonaws.com/s.cdpn.io/163870/walk1.wav'),
            Talk: new Sound('https://s3-us-west-2.amazonaws.com/s.cdpn.io/163870/talk.wav'),
            Wraith01: new Sound('https://s3-us-west-2.amazonaws.com/s.cdpn.io/163870/wraith_reaction2.wav'),
            Wraith02: new Sound('https://s3-us-west-2.amazonaws.com/s.cdpn.io/163870/wraith_reaction.wav'),
            Rain01: new Sound('https://s3-us-west-2.amazonaws.com/s.cdpn.io/163870/rain.wav'),
            Rain02: new Sound('https://s3-us-west-2.amazonaws.com/s.cdpn.io/163870/rain2.wav'),
            Rain03: new Sound('https://s3-us-west-2.amazonaws.com/s.cdpn.io/163870/rain3.wav'),
            Rain04: new Sound('https://s3-us-west-2.amazonaws.com/s.cdpn.io/163870/rain4.wav'),
            Rain05: new Sound('https://s3-us-west-2.amazonaws.com/s.cdpn.io/163870/rain5.wav'),
            Death: new Sound('https://s3-us-west-2.amazonaws.com/s.cdpn.io/163870/death2.wav'),
            Flower: new Sound('https://s3-us-west-2.amazonaws.com/s.cdpn.io/163870/flower.wav')
        }

this.sounds.Talk.volume = 0.75
        this.sounds.Death.volume = 0.5
        this.sounds.Footstep01.volume = 0.2
        this.sounds.Footstep02.volume = 0.2
    }

update() {
        this.all.forEach(x => {
            if (!x.playing && x.loop && x.played) x.play()
        });
    }

pauseAll() {
        this.pausedSounds = this.all.filter(x => x.playing);
        this.pausedSounds.forEach(x => x.stop());
    }

resumeAll() {
        this.pausedSounds.forEach(x => x.resume());
        this.pausedSounds = [];
    }

get all() {
        return [...Object.values(this.sounds)];
    }

get allSoundsReady() {
        return Object.values(this.sounds).every(x => x.ready)
    }
    get BGM() {
        return this.sounds.BGM
    }
    get Talk() {
        return this.sounds.Talk
    }
    get Death() {
        return this.sounds.Death
    }

get Flower() {
        return this.sounds.Flower;
    }

get Wraith() {
        return this.sounds[Math.floor(Math.random() * 2) ? 'Wraith01' : 'Wraith02']
    }
    get Rain() {
        let r = `Rain0${(Math.floor(Math.random() * 5)) + 1}`
        return this.sounds[r]
    }
    get Footstep() {
        return this.sounds[Math.floor(Math.random() * 2) ? 'Footstep01' : 'Footstep02']
    }
}

class Game {
    constructor() {
        this.renderer = new GameRenderer(ctx, canvas);
        this.SoundLayer = new SoundManager();
        this.keyboard = new Keyboard();
        this.mouse = new Mouse();
        this.lungCapacity = 8; // Default value, Anders will set it further down ;)
        this.holdingBreath = false;
        this.stateIndex = -1;
        this.states = [
            () => new Intro(this, this.renderer), () => new Gameplay(this, this.renderer),
            // () => new Gameover(this, this.renderer)
        ];
        this.nextState();
    }

repeatState() {
        this.holdingBreath = false;
        this.lungCapacity = 8;
        this.state = this.states[this.stateIndex]();
    }

nextState() {
        this.holdingBreath = false;
        this.lungCapacity = 8;
        this.stateIndex = (this.stateIndex + 1) % this.states.length;
        this.state = this.states[this.stateIndex]();
    }

update(elapsed) {
        this.SoundLayer.update();
        if (this.state.update)
            this.state.update(elapsed);
    }
    render(elapsed) {
        if (this.state.render)
            this.state.render(elapsed);
    }
}

// UI Layer Logic

// Utility Classes
const getDimensions = elm => elm.getBoundingClientRect()

var events = {
    on(event, cb, opts) {
            if (!this.namespaces) // save the namespaces on the DOM element itself
                this.namespaces = {};

this.namespaces[event] = cb;
            var options = opts || false;

this.addEventListener(event.split('.')[0], cb, options);
            return this;
        },
        off(event) {
            this.removeEventListener(event.split('.')[0], this.namespaces[event]);
            delete this.namespaces[event];
            return this;
        }
}

// Extend the DOM with these above custom methods
window.on = document.on = Element.prototype.on = events.on;
window.off = document.off = Element.prototype.off = events.off;

function addEvent(signature, ...args) {
    window.on(signature, ...args)
}

function removeEvent(signature, ...args) {
    window.off(signature, ...args)
}

// END: Utility Classes

class Manuscript {
    constructor() {
        this.lines = {
            onPackageDelivered: [
                `Thank you for getting me this precious package. Now please, take this with you to my brother in need!`,
                `Thanks buddy. Here's a new delivery. Tread carefully.`,
                `Finally. This will help us recover from the last attack. Please, relay this to the other survivors.`
            ]
        }
    }

getRandomIndex(arr) {
        return Math.floor(Math.random() * arr.length)
    }

getRandomLineFrom(lines) {
        return lines[this.getRandomIndex(lines)]
    }

get onPackageDelivered() {
        return this.getRandomLineFrom(this.lines.onPackageDelivered)
    }
}

class UI {
    constructor(ui, manuscript) {
        this.UI = ui // window.ui
        this.Manuscript = manuscript

this.breathingInterval
        this.regainBreathInterval

this.lungCapacityBars

/* this.holdBreath = this.holdBreath
        this.regainBreath = this.regainBreath */

this.fitToCanvas = this.fitToCanvas

if (!this.UI.innerHTML.length) this.init()
    }

reset() {
        this.UI.innerHTML = ''
    }

fitToCanvas(canvas) {
        const gameRenderAreaObj = canvas.getBoundingClientRect()

this.UI.style.width = `${gameRenderAreaObj.width}px`
        this.UI.style.height = `${gameRenderAreaObj.height}px`
        this.UI.style.top = `${gameRenderAreaObj.top}px`
        this.UI.style.left = `${gameRenderAreaObj.left}px`
    }

registerComponents() {
        this.ScoreComponent()
        this.LungCapacityComponent()
        this.NavigatorComponent()
        this.DialogComponent()
        this.HelpManualComponent()
    }

HelpManualComponent() {
        const elm = document.createElement('div')
        elm.id = 'UIHelpManual'

elm.classList.add('c-instructions')
        elm.classList.add('in')

elm.addEventListener('click', () => {
            elm.classList.remove('in')
        })

document.addEventListener('keypress', e => {
            if (e.key === 'h') {
                elm.classList.toggle('in')
            }
        })

elm.innerHTML = `
        <div class="c-instructions__headline">
          <div>Fragile Express</div>
          <div><small>Training Manual</small></div>
        </div>
        <div class="c-instructions__content">
          <div class="c-instructions__checklists">
            <section>
              <div><strong>Do:</strong></div>
              <ul>
                <li>Deliver packages</li>
                <li>Hold your breath (Space) around Wraiths</li>
                <li>Run if needed (Shift)</li>
                <li>Use your Radar</li>
                <li>View this manual (h key)</li>
              </ul>
            </section>
            <section>
              <div><strong>Don't:</strong></div>
              <ul>
                <li>Get killed by Wraiths</li>
                <li>Lose your breath</li>
                <li>Take off your suit</li>
              </ul>
            </section>
          </div>
        </div>`

this.UI.appendChild(elm)
    }

ScoreComponent() {
        const elm = document.createElement('div')
        elm.id = 'UIScore'
        elm.classList.add('c-score')

const totalDeliveries = 0

elm.innerHTML = `
      <label id='UIScoreDelivered'>Delivered: ${totalDeliveries}</label>
    `

this.UI.appendChild(elm)
    }

DialogComponent() {
        const elm = document.createElement('div')
        elm.id = 'UIDialog'
        elm.classList.add('c-dialog')

elm.innerHTML = `Hey Snake, Snake? Snaaaaaaaaake? This is Big Boss. Snakkkkkeeeez!`

this.UI.appendChild(elm)
    }

NavigatorComponent() {
        const elm = document.createElement('div')
        elm.id = 'UINavigator'
        elm.classList.add('c-navigator')

elm.innerHTML = `
       <div class="player"></div>
       <div class="dot"></div>
    `

this.UI.appendChild(elm)
    }

LungCapacityComponent() {
        const elm = document.createElement('div')
        elm.id = 'UILungCapacity'
        elm.classList.add('c-lung-capacity')

const OxygenBars = Array.from({
            length: game.lungCapacity
        }).map(bar => `
      <div class="c-lung-capacity__bar"></div>
    `).join('')

elm.innerHTML = `
      <label class="c-lung-capacity__label">Lungs</label>
      <div class="c-lung-capacity__bars">${OxygenBars}</div>
    `

elm.style.position = 'absolute'
        elm.style.left = '7%'
        elm.style.bottom = '8%'

this.UI.appendChild(elm)
        this.lungCapacityBars = elm.querySelectorAll('.c-lung-capacity__bar')
    }

showDeliveryDialog(onComplete) {
        if (window.UIDialog) {
            window.UIDialog.innerHTML = this.Manuscript.onPackageDelivered
            window.UIDialog.style.display = 'block'

}
        setTimeout(() => {
            window.UIDialog.style.display = 'none'
            window.UIDialog.innerHTML = ``
                // this will make sure the player can 
                // walk again after the dialog is completed.
            if (onComplete) onComplete();
        }, 4000)
    }

scoreUpdated(score) {
        if (window.UIScoreDelivered) {
            window.UIScoreDelivered.innerHTML = `Delivered: ${score}`
        }
    }

positionUpdated(curZoneX, curZoneY, desZoneX, desZoneY) {
        const nav = document.querySelector('.c-navigator')
        const dot = nav.querySelector('.dot')
        const wh = 100
        const wh2 = wh / 2
        const wh4 = wh / 4
        const dotS = getDimensions(dot).width
        const dotH = dotS / 4
        const dX = desZoneX - curZoneX
        const dY = desZoneY - curZoneY

// calculate position within circle

const x = Math.min(wh, Math.max(0, (dX * wh4) / 2 + wh2)) - dotH
        const y = Math.min(wh, Math.max(0, (dY * wh4) / 2 + wh2)) - dotH

dot.style.transform = `translate(${x}px, ${y}px)`
        dot.style.transformOrigin = `0 0`
    }

// Events
    registerEvents() {
        // this.handleBreathing()
    }

decrementLungCapBars() {
        // game.lungCapacity = Math.max(0, game.lungCapacity - 1)
        const barIndex = Math.floor(game.lungCapacity)
        for (let i = barIndex; i < this.lungCapacityBars.length; ++i) {
            this.lungCapacityBars[i].style.opacity = 0
        }
    }

incrementLungCapBars() {
        const barIndex = Math.min(this.lungCapacityBars.length, Math.floor(game.lungCapacity))
        for (let i = 0; i < barIndex; ++i) {
            this.lungCapacityBars[i].style.opacity = 1
        }
    }

init() {
        this.fitToCanvas(canvas)
        this.registerComponents()
        this.registerEvents()
        window.addEventListener("resize", () => this.fitToCanvas(canvas))
    }
}

编译

CSS

html,
body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    overflow-y: hidden;
    background-color: #f3f3f3;
    font-family: "Press Start 2P";
}
body {
    background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/163870/bg0.png");
    background-repeat: repeat;
    background-size: 250px 250px;
}
#game {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    max-width: 100%;
    max-height: 100%;
    padding: 20px;
    border: 7px solid black;
    background-color: white;
    box-shadow: 14px 13px 0px -4px rgba(0, 0, 0, 0.38);
}
ui-layer.ui-layer {
    user-select: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    font-family: "Press Start 2P", cursive;
}
.c-lung-capacity__label {
    display: block;
    font-size: 12px;
    margin-bottom: 5px;
}
.c-lung-capacity__bars {
    display: flex;
    margin-left: 2px;
}
.c-lung-capacity__bar {
    display: inline-block;
    width: 4px;
    height: 10px;
    background-color: orange;
    box-shadow: 2px 2px 0 0 #333333;
    transition: opacity 140ms ease-in-out;
    opacity: 1;
    will-change: opacity;
}
.c-lung-capacity__bar:not(:last-child) {
    margin-right: 4px;
}
.c-navigator {
    width: 102px;
    height: 102px;
    background-color: rgba(0, 0, 0, 0.15);
    position: absolute;
    bottom: 7.5%;
    right: 7.5%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.c-navigator .player {
    display: inline-block;
    width: 4px;
    height: 4px;
    border: 2px solid rgba(255, 255, 255, 0.15);
    position: absolute;
}
.c-navigator .dot {
    width: 4px;
    height: 4px;
    background-color: orange;
    position: absolute;
    top: 0;
    left: 0;
}
.c-score {
    top: 7%;
    left: 7%;
    position: absolute;
}
.c-score label {
    font-size: 12px;
    color: black;
    letter-spacing: -0.05em;
}
.c-dialog {
    position: absolute;
    padding: 20px;
    left: 20%;
    right: 20%;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.25);
    color: white;
    display: none;
    text-align: center;
    border: 2px solid rgba(0, 0, 0, 0.05);
    font-size: 13px;
    line-height: 25px;
}
.c-instructions {
    width: 315px;
    height: 300px;
    background-color: #cccaaa;
    box-shadow: 4px 4px 0 0 #aaaaaa;
    padding: 20px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 50%;
    transform: translateY(-50%);
    z-index: 99;
    transition: opacity 250ms ease-in-out, transform 250ms ease-in-out;
    transform: translate(100%, 100%) rotate(45deg);
    opacity: 0;
    will-change: opacity, transform;
}
.c-instructions.in {
    transform: translate(0%, -50%) rotate(0deg);
    opacity: 1;
}
.c-instructions__headline {
    position: absolute;
    top: 12px;
    left: 0;
    right: 0;
    max-width: 75%;
    margin: 0 auto;
    text-align: center;
    font-size: 13px;
    background-color: #cccaaa;
    padding: 5px;
    line-height: 20px;
}
.c-instructions__content {
    border: 4px solid #aaaaaa;
    height: 100%;
    font-size: 9px;
}
.c-instructions__content .c-instructions__checklists {
    padding: 50px 15px 0 15px;
}
.c-instructions__content .c-instructions__checklists section + section {
    margin-top: 25px;
}
.c-instructions__content .c-instructions__checklists ul li {
    line-height: 14px;
}
.uppercase {
    text-transform: uppercase;
}

HTML

经典街机像素风格的小游戏。

h5, game, rpg

编辑器支持Emmet

快捷键

经典街机像素风格的小游戏。

h5, game, rpg

HTML5涂鸦跳跃（Doodle Jump）小游戏

HTML5 一款Platformer跑跳游戏引擎

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：