{"pageProps":{"examples":[{"js":"let qgml_config = {\"worlds\":[{\"id\":\"world-fqaOJL\",\"state\":{},\"groups\":[],\"actors\":[{\"group\":null,\"state\":\"({\\r\\n                position: { // the starting position of the actor\\r\\n                    x: 80,\\r\\n                    y: 55\\r\\n                }, size: { // the starting size of the actor\\r\\n                    width: 20,\\r\\n                    height: 25\\r\\n                }\\r\\n            })\",\"sprite\":null,\"animator\":{\"spritesheets\":{\"idle\":{\"frameTime\":10,\"name\":\"sheet-AsgQk5YbcQWGwjj4\"},\"run\":{\"frameTime\":5,\"name\":\"sheet-vCgX9jThJGqgHaOF\"}}},\"customSetup\":null,\"customUpdate\":null,\"isTemplate\":false,\"className\":null,\"id\":\"player\"}],\"actorTemplates\":[],\"texts\":[],\"default\":true}],\"rootElementID\":\"qgml-game\",\"defaultWorld\":\"world-fqaOJL\",\"width\":300,\"height\":300,\"assets\":{\"spritesheets\":[{\"name\":\"sheet-AsgQk5YbcQWGwjj4\",\"frames\":[\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAAsSAAALEgHS3X78AAABtElEQVR42u2YMUoEQRBF5wCGgoGZICx4AA+g4CUMBG9gpJE3MNJLmAhGhh7BVDBcz9FuNfuH8luNbqJ29X9QDD10MP9XdXX3TJMQQgghhBBCCPHrvL9eFI6hxD/enZRhTYB4PB+uz2oMZQDEr4ZVvD2HMgAZXz7fzjFMDziedqsBXvwwBph4hDfBxjS1cJxf3vRt0vbOolh4A2DC1da+F1ha0a0JEA0DTLA3AeO1wFwG+LI3oZEJGB8enVahqBYE3ndtgAmEAd4EBCpg3Q9mI7qugJZ47gdYHpZpbpRpDPCNMAoWn8YAZJ93A4hGRFsgLwGa96+pH+yzj/cs3rJKmU3TBOdtzmVx8qIgvlUBHD1VQIXFG+j4fgfgKkljgP/4t5enwo0x6hEtE3oUDyGTiUfwQQgHoF4FfiseeBP4dNhohrkwkd6EqALSmuBPglEl+G2x0RP6Fn+/d/DpKMyVwPcDm58u+8g2dgJvAt6ZCekqwMoaGfZH5Gh3cKe+PNlHZvmOEFVCSvHB/74v8HJIwU/FY14qE5D9Ta7MaSphk9KPfpqkXA5CCCGEEEIIIYQQQog/5QOPJ6oibY7z+AAAAABJRU5ErkJggg==\",\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAAsSAAALEgHS3X78AAABtElEQVR42u2YMUoEQRBF5wCGgoGZICx4AA+g4CUMBG9gpJE3MNJLmAhGhh7BVDBcz9FuNfuH8luNbqJ29X9QDD10MP9XdXX3TJMQQgghhBBCCPHrvL9eFI6hxD/enZRhTYB4PB+uz2oMZQDEr4ZVvD2HMgAZXz7fzjFMDziedqsBXvwwBph4hDfBxjS1cJxf3vRt0vbOolh4A2DC1da+F1ha0a0JEA0DTLA3AeO1wFwG+LI3oZEJGB8enVahqBYE3ndtgAmEAd4EBCpg3Q9mI7qugJZ47gdYHpZpbpRpDPCNMAoWn8YAZJ93A4hGRFsgLwGa96+pH+yzj/cs3rJKmU3TBOdtzmVx8qIgvlUBHD1VQIXFG+j4fgfgKkljgP/4t5enwo0x6hEtE3oUDyGTiUfwQQgHoF4FfiseeBP4dNhohrkwkd6EqALSmuBPglEl+G2x0RP6Fn+/d/DpKMyVwPcDm58u+8g2dgJvAt6ZCekqwMoaGfZH5Gh3cKe+PNlHZvmOEFVCSvHB/74v8HJIwU/FY14qE5D9Ta7MaSphk9KPfpqkXA5CCCGEEEIIIYQQQog/5QOPJ6oibY7z+AAAAABJRU5ErkJggg==\",\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAAsSAAALEgHS3X78AAABtElEQVR42u2YMUoEQRBF5wCGgoGZICx4AA+g4CUMBG9gpJE3MNJLmAhGhh7BVDBcz9FuNfuH8luNbqJ29X9QDD10MP9XdXX3TJMQQgghhBBCCPHrvL9eFI6hxD/enZRhTYB4PB+uz2oMZQDEr4ZVvD2HMgAZXz7fzjFMDziedqsBXvwwBph4hDfBxjS1cJxf3vRt0vbOolh4A2DC1da+F1ha0a0JEA0DTLA3AeO1wFwG+LI3oZEJGB8enVahqBYE3ndtgAmEAd4EBCpg3Q9mI7qugJZ47gdYHpZpbpRpDPCNMAoWn8YAZJ93A4hGRFsgLwGa96+pH+yzj/cs3rJKmU3TBOdtzmVx8qIgvlUBHD1VQIXFG+j4fgfgKkljgP/4t5enwo0x6hEtE3oUDyGTiUfwQQgHoF4FfiseeBP4dNhohrkwkd6EqALSmuBPglEl+G2x0RP6Fn+/d/DpKMyVwPcDm58u+8g2dgJvAt6ZCekqwMoaGfZH5Gh3cKe+PNlHZvmOEFVCSvHB/74v8HJIwU/FY14qE5D9Ta7MaSphk9KPfpqkXA5CCCGEEEIIIYQQQog/5QOPJ6oibY7z+AAAAABJRU5ErkJggg==\",\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAAsSAAALEgHS3X78AAABtElEQVR42u2YMUoEQRBF5wCGgoGZICx4AA+g4CUMBG9gpJE3MNJLmAhGhh7BVDBcz9FuNfuH8luNbqJ29X9QDD10MP9XdXX3TJMQQgghhBBCCPHrvL9eFI6hxD/enZRhTYB4PB+uz2oMZQDEr4ZVvD2HMgAZXz7fzjFMDziedqsBXvwwBph4hDfBxjS1cJxf3vRt0vbOolh4A2DC1da+F1ha0a0JEA0DTLA3AeO1wFwG+LI3oZEJGB8enVahqBYE3ndtgAmEAd4EBCpg3Q9mI7qugJZ47gdYHpZpbpRpDPCNMAoWn8YAZJ93A4hGRFsgLwGa96+pH+yzj/cs3rJKmU3TBOdtzmVx8qIgvlUBHD1VQIXFG+j4fgfgKkljgP/4t5enwo0x6hEtE3oUDyGTiUfwQQgHoF4FfiseeBP4dNhohrkwkd6EqALSmuBPglEl+G2x0RP6Fn+/d/DpKMyVwPcDm58u+8g2dgJvAt6ZCekqwMoaGfZH5Gh3cKe+PNlHZvmOEFVCSvHB/74v8HJIwU/FY14qE5D9Ta7MaSphk9KPfpqkXA5CCCGEEEIIIYQQQog/5QOPJ6oibY7z+AAAAABJRU5ErkJggg==\",\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAAsSAAALEgHS3X78AAABtElEQVR42u2YMUoEQRBF5wCGgoGZICx4AA+g4CUMBG9gpJE3MNJLmAhGhh7BVDBcz9FuNfuH8luNbqJ29X9QDD10MP9XdXX3TJMQQgghhBBCCPHrvL9eFI6hxD/enZRhTYB4PB+uz2oMZQDEr4ZVvD2HMgAZXz7fzjFMDziedqsBXvwwBph4hDfBxjS1cJxf3vRt0vbOolh4A2DC1da+F1ha0a0JEA0DTLA3AeO1wFwG+LI3oZEJGB8enVahqBYE3ndtgAmEAd4EBCpg3Q9mI7qugJZ47gdYHpZpbpRpDPCNMAoWn8YAZJ93A4hGRFsgLwGa96+pH+yzj/cs3rJKmU3TBOdtzmVx8qIgvlUBHD1VQIXFG+j4fgfgKkljgP/4t5enwo0x6hEtE3oUDyGTiUfwQQgHoF4FfiseeBP4dNhohrkwkd6EqALSmuBPglEl+G2x0RP6Fn+/d/DpKMyVwPcDm58u+8g2dgJvAt6ZCekqwMoaGfZH5Gh3cKe+PNlHZvmOEFVCSvHB/74v8HJIwU/FY14qE5D9Ta7MaSphk9KPfpqkXA5CCCGEEEIIIYQQQog/5QOPJ6oibY7z+AAAAABJRU5ErkJggg==\",\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAAsSAAALEgHS3X78AAABuUlEQVR42u2YMUoEQRBF+wCGgoGZIAgewAMoeAkDwRsYaeQNjPQSJoKRoUcwFQzXc7RUs3/4U9QsbrR29X9Q7OzQwf5f1dXVW4oQQgghhBBCCLETfr5uq4+hxL89X9YhTTDhEI/P14frFkMZQILbs30OswVgwOrjaRbDGHBRDsc1wMQj2AT7Tsuqj5u7x/4N2j84qd4AxP3eMUQuRtcmQDRMMMEwAc8mcJMJ3RrAWYfY6Pns/KqJNJM47H23BnjxFrwV8M6eTSjEWti67isgEo9gc5BpE8k9omsDvHg0wiiQfd8kuzeAxfNp4IWvS392BPotQGv+Pe0HwwD3vnjx1P0LhGdogtMZT1ks3gCIjyrAR08V0IjEG+j62B5um+QxgH/89+d7jZrjQp9IIX7a8yYeYUL8NIghqFeRG8UDNsHPADwFprj0RJhANmGpAlKawFMgm8B3AZwK0dzQvfiXo9PZGBxVAvcFW58u+8g0ToGoEsyEdBWArr8ea6djMGqMNPXlyT4y6+8IUSWkFO/+6wthE9IY8FfxWJfKBGR/mytzmkrYpvT9vSDtdhBCCCGEEEIIIYQQQuyUX5Y3r3Rp81SuAAAAAElFTkSuQmCC\",\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAAsSAAALEgHS3X78AAABpElEQVR42u2YMUoEQRBFx8TIUDAwEwTBA3gABVMPYCB4AyONvIGRXsJEMDL0CJsKhnqO1j/sX/4UPQsbaVf/B0XvNBPM/1Vd3b3DYIwxxhhjjDHGmL/i++OmxOhK/OvTeenSBAineIwv91er6M4AiP6dKl/vj+PYzRJg5iFcoxsDzob9fg2AeIaufzzLayXG9e1DSWcA427ncByXImejaROi4Iut7Yl4jBC4zoRmDZjLuorf3TsqJ6eXo0j81sB8CgMoGqLUDIpkMOOYb74CauJrGWZApDbJFAZQPJ7XiUfEXaJlA8aPpgE6H8VL85tsgXEJLJdHU6z2eREyqAEUL+JyNcEoHmj315g7BLVcARNBn4u3Ehtj7BFZDRggnsFtUA2QLXBIJ56oCfFQVGmGuYBAZF5NqFVAShPiIahWCez2oR/kEP98cDwxAIJjT9C+gPfTZZ+Z1l0gVgJMSFUBXNfMsB6POcZKaLXbVzPPrKr42l1BTUglPvzNtfa2mMqETcVzzacwgdnf5Ko8d1hKXfq1CkhhgjHGGGOMMcYYY4wx5l/xA8jHmXJ4MsBrAAAAAElFTkSuQmCC\",\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAAsSAAALEgHS3X78AAABlklEQVR42u2YPUoFQRCE9wCGgoGZIDzwAB5AwUsYCN7gRRp5AyO9hIlgZOgRTAVDPcdIL68evUWPaKTdUx80+8MEW9U/O7vTJIQQQgghhBBCCPFHfL6tG8cw4p/uz5rFsCZAPI6PNxdzDGWAEzyf23GoNjDRHy93ixhqCA5twOm03yzQ+ybermlZ47i8us1v0u7eqsEAb8L1zqE3ofUirQkQzAaYcIi340ZgLQNYLEzwwnF+fHI+C7U1PnA/nQEsHgZwJaA6TOCmFbZGpK6AnvgoLMsWPCOyGjA/MAzw93vCWXx2Aybs8kjE1BMfvQK5BWhdjg2PFx8ZYFmlzNYZgj5776/PrTcYuU16ka4CkHkTj4heg9QGZQxYPKw3gTdDQSuUyP4We3jLvDeBN0KdeZAf3gNElQADgnmQX/zDwdHCgKgdfDXY+nLZR6a/mwlmTqkKwGT3mWf47ZB60HHmkdWeeOwJvAmlxAd/ebpfi6VM+K149HwJE+jX1o8+lXszoXTpRxVQwgQhhBBCCCGEEEIIIcS/4gv66X+3a20csgAAAABJRU5ErkJggg==\",\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAAsSAAALEgHS3X78AAABlUlEQVR42u2XMUoEQRBF+wCGgoGZIAgewAMoeAkDYW9gpJE3MNq9hIlgZOgRTAVDPUevNfRf/hTdq2sgVPd/UAy7O8H8VzW1MykJIYQQQgghhBBCiP/neXWZv95vZjVc+JqEIURYcC/h6f56nCmAAA7//XUebgeg63b8fF2OI+AiHU6hERx1t3echwiPYgn22QTYsZyafS1uH3I34REYEhC+TEGzwkrw4VkChy8T0K8AhGxJ2D84mYLakevs/CquAB+Ug7EIBOUpgJDQE8ACfGd9lyGAF2VkAbMxx3et4D58dAEZAtxmT7XwLljzFii7IA6ug9WdgGIBPS3BjYCPt5cpCJYf//1hEloPQWEnAJ238Ci//TEB1t3S4W4EbC7WLpwl+AmwI3ZBS0LE7k/w/z9LgIjaTujm5cfCPB6dzp4BfpJg53clgB9/+beahK4mABsfVTvHT0PY+7zVfXrB2fqozBK6Cu/Hftu7QlcSdg2P+97fEqG7/1tRfumFlrDL6NcmoCUiCSGEEEIIIYQQQgghxB9ZAzRae1iYWvMQAAAAAElFTkSuQmCC\",\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAAsSAAALEgHS3X78AAABjklEQVR42u2XMUoEQRBF+wCGgoGZICx4AA+g4CUMBG+wkUbewEgvYSIYGXoEU8FQz9Fay/7hT1mtLoJQ3f9BBTu7wf5XNTU9pQghhBBCCCGEEEKI/+Xh9qS+vyxnNVz4YSVYcC/h/upsXAkW/vNSHWoHWGgW8PZ0M46A47K7Co2y8MMIsPAoFmCfL7f2WUL1dX5xXbsJ7yVYeJLQrLQSovAIzOG7F4CwkQR8Z0G3dxazOjw6zSvAB0WoaCLsOnfcf04vwHc26rTfEZkFzMYc16LQqGhJZhVQIcAtthKFd8Gat8B6F+Q68XH4aCfQ9i/fTUnWHTAJeH1+XAXBAuTHHyahdQhKOwHovIVH+ScABFh31x3uRsDsz7IEfybgXdCSkLH7E7jPWQKL4IUY7ITcWJi7vYMpaCSBD0f4fVcCeNzxJGAJuGYSupoAbH2UPyH6aaBHXj/dpzP+lyNyaxq6Co+gP70vdCdhk/Aof0uk7/5vRfHSSy9hk9H37watg1MRQgghhBBCCCGEEEKIP/ABJzR3QFUkBZIAAAAASUVORK5CYII=\",\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAAsSAAALEgHS3X78AAABkUlEQVR42u2YMUrGQBCF9wCWgoWdIPzgATyAgpewELyBlVbewEovYSNYWXoEW8Hy9xzrP5Inb4dJ+G3EnX0fDAlJirw3M7uTlCKEEEIIIYQQQgjxhzw/nNXP96smhhM/rAkm3JvwdHsxXhWw+M2l8QxA1u04mTAOEL1+vf+JYcSflv1qwQbc7ByyAdXH5fVdTSHaByrBzicTZqNbE+bEm2CYgPMlE7o3wMRBaHQNx929VRPHJ+f9GuCFsjB/DwYg4/ZM9xUwJz4yAtnn9aFnA75fmvq6IKtL4RfI3iuAhxxEiXp86vNmC/QtQM/0NfCweG8AxFN2cy2CnMGPt5caLYyIuSGo6wpA5k08Ar3O2x+1QSoDmhdmE/wsgDaYyjxN9htMBJvAQxGvBd3P/RE8C0SVwG3g1oQc4h8PjpphKDKB1wZ7Pl32IXRpTTAT0lWAlTUy7+/53cHt/XkqANmNvhV8JaQUz6Uf4XeHdL+/tnmOTUiV/d98NqcxYdvSj36cpKsEIYQQQgghhBBCCCHEv+ALy/93QvrDk24AAAAASUVORK5CYII=\",\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAAsSAAALEgHS3X78AAABmklEQVR42u2YMUoFQRBE5wCGgoGZIAgewAMoeAkDwRsYaeQNjPQSJoKRoUcwFQz1HKO9WJ/acla+iTg99aBZdpngV3X/7t4txRhjjDHGGGOMMX/Jw+1xfX85n8Vw4oc1IYSzCfdXp1MMacDn7SQ+rkMZgIy/Pd2sYpgecFS2JwNY/DAGhHgEmxD3dKxqnF1c92/Q5tZejWADYMLlxi5ELkbXJkA0DAjBbALufzKhWwO47BEhOILFx/Xg8KSiUhDxLIUBEMpVwKEVEOe6rwDNOGdWqwLZ5h6RwgCI50bYChafwYDpR8MAft4S/vU/n41A/QvQmX5MQJcnIaUlnrKbqwmq+IC7PsfSEtRzBcwEvT4/1tZUGMGAEuIRugxh/rf6QArxgE3QpQh9IMXOv0SIZBNaFZDWBF6EWpXAE0F6Qg7xdzv7KwNCMJugb4o4ny77uvqqCaiEdBXAb3gQiqtOB1l+8lQAsqsGtKZDSvHyyesbOh3SfQNc55z2hDTZ/81rcxoT1i391oeTdJVgjDHGGGOMMcYYY4z5F3wAAjiVkdV2dLEAAAAASUVORK5CYII=\",\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAAsSAAALEgHS3X78AAABr0lEQVR42u2YMUoEQRBF+wCGgoGZIAh7AA+g4CUMBG9g5EZ7g430EiaCkaFHMBUM13O0VuOX30UpbqJ09X9QDNM7wf5f1VU9U4oQQgghhBBCCPHnvL1cVR9TiX+4PavTmgDxuN6vLlpMZQDEf9w28XadZgtA/ObppotpDDgt+y3rUxpg4hFsgt3TY9XH5fV6fIN2946qNwCx3DmEyG9jaBNYuIllA7BmAn8yYVgDWDzEWrB4ux6fnDeRVikctp7CAAhlE3jNhEKshYkfvgK8YGTVVwUybSK5R6QyAI0wCmTfN8kUBiD7PA288M/S70ag3wL0zBC0P83Zx7oXT92/+z1DE/wadZTJwsIgPqoAH6NVQMOLN9D5eRJQleQygAW8Pj/WaCz6HpFJPMQUE4/AGGQDXCNMQyeITfAnw6AZ5sNEsglRBaQ1gU+CUSXwWAx6wvji7w4W3VHYVwIfkfF8uuwj25gEbALWzIR0FWBljQzzETmaDnTyy5N9ZNa/I0SVkFK8+94X4rdDCn4rHs+lMgHZ3+aVOU0lbFP60UeTlNtBCCGEEEIIIYQQQgjxr7wDJ9SkafZswIsAAAAASUVORK5CYII=\",\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAAsSAAALEgHS3X78AAABoklEQVR42u2YMUoEQRBF5wCGgoGZIAgewAMoeAkDwRsYaeQNjPQSJoKRoUcwFQzXc7TWwB/+fnvc3UTt6v+gmNnZDub/qq6u3WEwxhhjjDHGGGN+nY+3y6LRlfin+9PSrQkQj+vjzfkYXRkA8V8fR/Fx7WobwIDFy90U3Yg/GXansu/WADXhemu/XFzdsglFQ75vj+2dgxIBA9iEuCcTZqNZEyCYTQjBuOL+6PgsnwGc8RCqJrARqACsQcCYpg2AWBXH1RFC4x4Zj2dNV8Aq8ZplGMA9Io0B3AhrwlV8GgOQfT0NVHztCNQtIOv+NeMLc/bxvGaAzgBZmuB0zlMWv1VAiFo1BLVYASMqPtDzX7dIKgP45d9fn4s2xlqPmDOhRfEQMoR4RG0SrDTCFCwJYhN0OpzpBbkIkWxCrQLSmsCTYK0S2ISZntC2+Ie9w6VRuGYC94ZYny77EPpTTwgT0lVAlDUyr9/p6UBTX57sI7Nza9iElOK57NcxIY0B64rHulQmIPub/GROUwmblH7tT5OU28EYY4wxxhhjjDHGGPOnfAKhWp4+HOSsQQAAAABJRU5ErkJggg==\",\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAAsSAAALEgHS3X78AAABsElEQVR42u2YMUoEQRBF+wCGgoGZICx4AA+g4CUMBG+wkUbewEgvYSIYGXoEU8FQzzFag3/5frrVTdSu/g+KmVk6mP+ruqpnSzHGGGOMMcYYY36d16flpDGU+Lvro2lYEyAe19uLkzmGMgDi3x9n8XEdygBk/OXhahXD9IDDsj0bwOKHMSDEI9iE841dNWDSOD277Nukza3FFKEmRMQ9mTC1olsTIJgNCMEwAfcfAnMZwBkPoTAh7hF43j84noWiWhD4vWsDIJa3gpoQAuOKjMe6riugJb7WD5Bp7RFpDOBGWAsVn8YAZF+nAUQjaiNQt4Cs+9fMLyzjrXCDg/DIqmQ2TRNczXnKYmFREN+qAI2eKmBGxQc89jhSGsAv//x4P2ljrPWIlgk9ioeQEuIRfAbgA1CvAr8VD9gEPR02mmEuQiSbUKuAtCbwSbBWCTwWGz2hb/E3O3ufjsJaCfp9EOvTZR/ZxiRgE/BbmJCuAqKskWE9Jut0oFNfnuwjs601bEJK8Sj7r9DtkIKfise6VCYg++t8MqephHVKv/anScrtYIwxxhhjjDHGGGOM+VPeAISiowYsZmGQAAAAAElFTkSuQmCC\"],\"frameTime\":10},{\"name\":\"sheet-vCgX9jThJGqgHaOF\",\"frames\":[\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABACAYAAADlNHIOAAAACXBIWXMAAAsSAAALEgHS3X78AAABbUlEQVR42u3YPUoEQRCG4T2AoWBgJgiCB/AACl7CQPAGRhp5AyO9hIlgZOgRTAVDPcdqDVtL2a6LP9uu4PNC0Tvb2fdO1fTMaAQAAAAAAAAAAD7L88PxuC2pdObmcn9ci4QlSoiwc70+OxyKgCVIeL0cwo81/ov16OSciN8I/+nu4k1F+FkkdGJ1bWu8N1of7vpWwCR0AnoRwddKCbHGdYSeEgjoHH4KyDpd2ZxKIKCjgAy6Sqh7O7sHBPQMvwqY9VsHdBKQ4cdDOAKeJSX2sgMmK35AnmimHZDhR+VpqO5F6EZQBwntOT/CbiuDz9IBC6QV8Hh/+65q+AR07IhZ4c8rkS14HNWZn/VVKeR84whaw28FfDRuhN/xTbiGb94T8L++AdXxky9ikuosob54tZ8grja2Ceh999c7PgLXAb8YfoYcs75+E5p3AsICBMzbJ+CPdIjxs0QBwieAAEl4BgAAAAAAAAAAAAAAMPACjdM0bDzojK0AAAAASUVORK5CYII=\",\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABACAYAAADlNHIOAAAACXBIWXMAAAsSAAALEgHS3X78AAABVElEQVR42u3YMUoDQRQG4D2ApWBhJwiCB/AACl7CQvAGVlp5Ayu9hI1gZekRbAXLeI7IC3nLuKQQycys8H0wJJvy/3fezmYYAAAAAAD4R14ez5exvj6ufyzJNAx/UwnS6RB+fj7fXSqgRxHrO18BvcJfvD2M6+rmXgk17e4dLc+G/dWKOz5WWUDsBCU0CH9aQqy4Pjm9UEAt0/CnJdzuHI4lSKtRARl6WUAsaVUsIIKOcRTzviyh/C6tSgVEwLEi/PKZkL/bAQ0KiPCzgE0P5vXuYEvGwMuj5uf769aWiH+pRgFS/cMYyh1Rjp1ypziGVj4F5QkonwF5LfxG7wBl6PEp9MYvYOWdH+EroP7MHxQwwxGkgA7h53WEX7wVU3sElcHn22+E/3RwrIBe48cOaBh+hp3/hDp+dhhBSQEzKMXomcFIkoa7XwEYQQAAAAAAAACw8g2vHPhiX+ql4gAAAABJRU5ErkJggg==\",\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABACAYAAADlNHIOAAAACXBIWXMAAAsSAAALEgHS3X78AAABVElEQVR42u3YMUoEQRBG4TmAoWBgJgiCB/AACl7CwDOYGXkJvYSJYGToEUwFQz3HLrVQSzmsMoHdHfg9KHanN3t/V1fPThMAAAAAAAAAAFjK88PlKurr/eZbMdNR/q4Q2GnI/sFJCN5UlZ+fT3fXAmgtf777U378JoDOuz/lf77eb4upxgHEZ9TFdLjZ8VE1gFhnq1EAVX5WhhAVz7d7x0JoGUCVPw8hnyMExjoEkLs9Q9ABHQMI0UX2/Bk9AqiDOdfPzq8E0GsI57U018lvy1Z4ufOvPt5e/qwoXtAFsfNbBMDuQuotKDvC4B04CzIA53+HnV/l59DNEOK7EBofOT8F4BY0oANyx9e1fBljq2EnzGXP/5p4PDoVQKsjaJdsHTDoFlQ7wAwYEEAO4OwG8ju/A2QAjpwB8yDkEz9IPvHk/88AyBcCAAAAAAAAAAAAAAC/sgZAug2B+LyEzgAAAABJRU5ErkJggg==\",\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABACAYAAADlNHIOAAAACXBIWXMAAAsSAAALEgHS3X78AAABWUlEQVR42u3YsUkFQRCH8SvAUDAwEwTBAixAwSYMrMHMyCa0CRPByNASTAVDrePJiCPjcXoX3K4Ivw+Ge28v+/67s7s3DAAAAAAAAAAAAP+E+5vTTdTb88W3Yqaj/KkQ2GnE9s5ByN1Myc/n3dW5AFrKrzUOIcYE0CmAsfzXx+uvYqthAPHMOhl2P2Z8lAA6BxDyszKEqBxjrGEAVf44hMutfSH0DiCl5wrI/6w1bkF1tsfveG8FdA4gKt/VVcFYp1NQzvx8d3R8Rn6vi1g5dm5enh5WK7ZnQsg20yIAlmeYOoKWVYEe4qcuY7kHMNVIfj7rJhwbbg0lj6GfGzNaBDEVQB0L+bd7h0Jo1YKq/Kgqf3w/YG3lFvST4Cq/BsTcykfQJS1GAB0C+K29lNsx1pY/N7NHH+aw9gY811bIbyh/qVgh/KF8NAiAfCEAAAAAAAAAAAAAALCYd/wPFmlE8s2hAAAAAElFTkSuQmCC\",\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABACAYAAADlNHIOAAAACXBIWXMAAAsSAAALEgHS3X78AAABVUlEQVR42u3YsUkGQRCG4SvAUDAwEwTBAixAwSYMrMHMyCa0CRPByNASTAVDreOXOZhjPAwucHcNnheGu73we3dnd2+aAAAAAAAAAADAVp4fLndRX+83P0oynYKvRcBACRF6Pp/urgloyf7BSQQ811pCfCNgUPifr/dLSaqxgHhGXUyH84yPIqCTgBp+VkqIivHZ+RUJLQXU8NcSbveO57G0OgrI0HMFkNBBQIacFXvDWojEGguIyo25fitS0HITjrDzWLpuTdJqwxJ4OXLuPt5e/qxEvOEeEDO8hQAJb5Sw3nxTinQ68NsdgIABoa/vBCHBDbiTiHoaSgnxJGCAgAi9vkupcQuqbadexvJdWg0l1JkfYT8enS433xxLqvHsrwJy9lsBHcLPgKPP116v/zcWsPX/EAGDV4n2M1CA/v8PBEiCAHuANAAAAAAAAAAAAAAAo/kGnOAH6tS2xccAAAAASUVORK5CYII=\",\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABACAYAAADlNHIOAAAACXBIWXMAAAsSAAALEgHS3X78AAABVUlEQVR42u3YMUoEMRSH8TmApWBhJwiCB/AACl7CwjPYWXkJvYSNYGXpEWwFSz3HrG/wDTGsaLHJrPD74JEM233/5CXZYQAAAAAAAAAA/CMe787HqI/Xq2/FTEf560JgZ4EdkOPDzaUAWrK7dzTWqz/lf/4sgNbyQ3JULf/9+XYuphoHEOPZsD9VrPgoAXQKoJRfhxAV3yenF0JoFUAtvw4h5tc7hwLoGUAIzxByzlbjAEJ0ngllCOWcsUYBhOCvNjPWoZRBMNYwgLyO/nQwC2CzzMKLq+b49vK0saL4jzugRQDM/kLZTor2Mh/AWk6nENb0+GnMc4ClhUII+V6/HVpQLT9XfsgXQOfVn/IFsNBtSABbsCNCfr5+/QG3gPx8Fd8fHE/FTMdzINuPHdBZfilc/1/oNVwfxgJYMBStZwtaEhtWvwCgBQEAAAAAAAAAAAAAMKwAt2D1K09IwOYAAAAASUVORK5CYII=\",\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABACAYAAADlNHIOAAAACXBIWXMAAAsSAAALEgHS3X78AAABUUlEQVR42u3XsUkEQRQG4C3AUDAwEwTBAixAwSYMBDsw0sgOjLQJE8HI0BJMBcOzjpW33JPnoXDg7uyB3wfD3O1l/z8zO9d1AAAAAADAuj7eLvvVIZUGnu5P+xxKmDn8nB9vzocRny+ubpXQqojlih/CjzmexayERuEvXu6+jQhfARPb3jnoT7rdYdWvFrAMXgFTieDryBJiju9Hx2dD+ApoEH4WkCOfZQkSa1BAlpCfr7f2h1kBE4UfAceIc74GXn/LXSC1kQuo4eeLuD6vZdgBE+2AvGZGAbWEOuJ3O2AcX4HXe/776/NoQ8RrmqIAqf5hV/xy9NDiXVALiPdAnPfO/Mb3/yxBATMXkbchBcxQQIYfo/xHoOXKr3/GHvYOFdC6FDtg5h0RoXsHzBB+rnjBz1CAm88GlGD1b8ARJA3h/8+jRxJ2AAAAAAAAAAD86BN5CQoLAjCU2gAAAABJRU5ErkJggg==\",\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABACAYAAADlNHIOAAAACXBIWXMAAAsSAAALEgHS3X78AAABeUlEQVR42u2XMUoEQRBF5wCGgoGZIAgewAMoeAkDwRsYabQ3MFovYSIYGXoEU8FwPUfLX+ZLb+3sLGp3j8J7UPTsTPZfV3dt1wEAAAAAAAAAAAAAAPwTPt6uUyxSacDT/XlyIWFCCQrb6+Psclm9gHR1c4eI2rvf4Stwha9V77QioYEEhb94ma+Uw0dARc66/aTSro8CFPru3hECagaflyVo1W+F3gePgNrhW4DrducwnZxeIKClAEvQKgGWgIAK4TvgMRn67g7oRUAJAQ7fF2weeHymA8rgcfKrA/L3EjHUGQ6fDigoIc74Ct+VHz/uDgQUJgp4f31eq75DCL92RwyFP1ZEVvg4ilOPjp3vSkHODwUMjZ35faDKjx7Cb/BHLArwRERihcPfJCFORAr/4eAYATWIY2d8TwdMEH7+fegegILH0Fi4277DL3f/tvB9/pNWpd2/KVzCbzR+jgkg/Il2PxL+iABAAgAAAAAAAAAAAAAAAAAAwJJPamg82XOTX+UAAAAASUVORK5CYII=\"],\"frameTime\":5}],\"sprites\":[]},\"debug\":false,\"vars\":{\"world-fqaOJL\":{\"player\":\"(getActor ('player'))\"}},\"keymappers\":{\"world-fqaOJL\":{\"w|down\":\"(function () {\\r\\n                player.state.position.y -= 2;\\r\\n\\r\\n                player.animator.set ('run');\\r\\n            })\",\"s|down\":\"(function () {\\r\\n                player.state.position.y += 2;\\r\\n\\r\\n                player.animator.set ('run');\\r\\n            })\",\"a|down\":\"(function () {\\r\\n                player.state.position.x -= 2;\\r\\n\\r\\n                player.animator.set ('run');\\r\\n\\r\\n                // tells the animator to be facing left\\r\\n                player.direction.set ('horizontal', 'left');\\r\\n            })\",\"d|down\":\"(function () {\\r\\n                player.state.position.x += 2;\\r\\n\\r\\n                player.animator.set ('run');\\r\\n\\r\\n                // tells the animator to be facing right\\r\\n                player.direction.set ('horizontal', 'right');\\r\\n            })\",\"[w,a,s,d]|up\":\"(function () {\\r\\n                // if all movement keys are up (w, a, s, d), set the animation to 'idle'\\r\\n                player.animator.set ('idle');\\r\\n            })\"}},\"scripts\":{},\"actor-templates\":[],\"text-templates\":[]};QGML.setup (qgml_config);","qgml":"<!-- basic canvas configuration\r\n    (default size is 300x300) -->\r\n<qgml\r\n    width = 300\r\n    height = 300\r\n>\r\n    <world default>\r\n        <!-- the player actor -->\r\n        <actor\r\n            id = 'player' // the id of the actor\r\n            state = ({\r\n                position: { // the starting position of the actor\r\n                    x: 80,\r\n                    y: 55\r\n                }, size: { // the starting size of the actor\r\n                    width: 20,\r\n                    height: 25\r\n                }\r\n            })\r\n            animator = ({\r\n                spritesheets: {\r\n                    idle: {\r\n                        strip: '../assets/noBKG_KnightIdle_strip.png',\r\n                        frames: 15, // the number of frames in the strip\r\n                        frameTime: 10 // how many game ticks each frame should stay on screen\r\n                    },\r\n                    run: {\r\n                        strip: '../assets/noBKG_KnightRun_strip.png',\r\n                        frames: 8,\r\n                        frameTime: 5\r\n                    }\r\n                }\r\n            })\r\n        />\r\n        <!-- declaring a variable called \"player\" for ease of use\r\n            (so we don't have to call getActor ('player') everytime)  -->\r\n        <var player = (getActor ('player'))/>\r\n        <!-- the keymapper used for movement -->\r\n        <keymapper\r\n            w|down = (function () {\r\n                player.state.position.y -= 2;\r\n\r\n                player.animator.set ('run');\r\n            })\r\n            s|down = (function () {\r\n                player.state.position.y += 2;\r\n\r\n                player.animator.set ('run');\r\n            })\r\n            a|down = (function () {\r\n                player.state.position.x -= 2;\r\n\r\n                player.animator.set ('run');\r\n\r\n                // tells the animator to be facing left\r\n                player.direction.set ('horizontal', 'left');\r\n            })\r\n            d|down = (function () {\r\n                player.state.position.x += 2;\r\n\r\n                player.animator.set ('run');\r\n\r\n                // tells the animator to be facing right\r\n                player.direction.set ('horizontal', 'right');\r\n            })\r\n\r\n            [w,a,s,d]|up = (function () {\r\n                // if all movement keys are up (w, a, s, d), set the animation to 'idle'\r\n                player.animator.set ('idle');\r\n            })\r\n        />\r\n    </world>\r\n</qgml>","meta":{"title":"Basic Animator Example","desc":"A basic game featuring an animated moving character.","width":300,"height":300},"name":"basic-animator"},{"js":"let qgml_config = {\"worlds\":[{\"id\":\"world-QMZyg7\",\"state\":{},\"groups\":[],\"actors\":[{\"group\":null,\"state\":\"({\\r\\n                // the starting position of the actor\\r\\n                position: {\\r\\n                    x: 80,\\r\\n                    y: 55\\r\\n                }, size: { // the starting size of the actor\\r\\n                    width: 40,\\r\\n                    height: 40\\r\\n                }\\r\\n            })\",\"sprite\":{\"name\":\"sprite-NyOpaB5hZgq4IXfn\",\"path\":\"../assets/reddy.png\"},\"animator\":null,\"customSetup\":null,\"customUpdate\":null,\"isTemplate\":false,\"className\":null,\"id\":\"player\"}],\"actorTemplates\":[],\"texts\":[],\"default\":true}],\"rootElementID\":\"qgml-game\",\"defaultWorld\":\"world-QMZyg7\",\"width\":300,\"height\":300,\"assets\":{\"spritesheets\":[],\"sprites\":[{\"name\":\"sprite-NyOpaB5hZgq4IXfn\",\"image\":\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAACXBIWXMAAC4jAAAuIwF4pT92AAAA+klEQVRYw+3YsQ6CMBAG4D6CgzsLi5uTg4/g5Hv4QiYu7gy6+xwmxsQn8CFO2qQJPYXrYcPR5oY/AZocX6ENpQYATDf3/QYk896tjU177GJmDzwslj5gc63rpLltV1H5gc0HCN2kBnI7gqH5AKVgFFSBCvTBk2lsx6g65QF9++t4coHmEoQLi62TP5Aq6Nsp6Ng6fODjmQYYWecLeK4qF3wD3HM8uGNfNbdOOcC+G3AnCbdOecCpo0AFKlCBUkAuNPhc2YVAm6FrkwO7SAoo8gSHlvH//B4kBYqMQWloOUApaFbAYAOTgqaGewg+791hnTMwgArGObIBfgA4YZT18DM2cQAAAABJRU5ErkJggg==\"}]},\"debug\":false,\"vars\":{\"world-QMZyg7\":{\"player\":\"(getActor ('player'))\"}},\"keymappers\":{\"world-QMZyg7\":{\"w|down\":\"(function () {\\r\\n                player.state.position.y -= 2;\\r\\n            })\",\"s|down\":\"(function () {\\r\\n                player.state.position.y += 2;\\r\\n            })\",\"a|down\":\"(function () {\\r\\n                player.state.position.x -= 2;\\r\\n\\r\\n                // tells the sprite to be facing left\\r\\n                player.direction.set ('horizontal', 'left');\\r\\n            })\",\"d|down\":\"(function () {\\r\\n                player.state.position.x += 2;\\r\\n\\r\\n                // tells the sprite to be facing right\\r\\n                player.direction.set ('horizontal', 'right');\\r\\n            })\"}},\"scripts\":{},\"actor-templates\":[],\"text-templates\":[]};QGML.setup (qgml_config);","qgml":"<!-- basic canvas configuration\r\n    (default size is 300x300) -->\r\n<qgml\r\n    width = 300\r\n    height = 300\r\n>\r\n    <world default>\r\n        <!-- the player actor -->\r\n        <actor\r\n            id = 'player' // the id of the actor\r\n            state = ({\r\n                // the starting position of the actor\r\n                position: {\r\n                    x: 80,\r\n                    y: 55\r\n                }, size: { // the starting size of the actor\r\n                    width: 40,\r\n                    height: 40\r\n                }\r\n            })\r\n            sprite = \"../assets/reddy.png\"\r\n        />\r\n        <!-- declaring a variable called \"player\"\r\n            for ease of use (so we don't have to\r\n            call getActor ('player') everytime)  -->\r\n        <var player = (getActor ('player'))/>\r\n        <!-- the keymapper used for movement -->\r\n        <keymapper\r\n            w|down = (function () {\r\n                player.state.position.y -= 2;\r\n            })\r\n            s|down = (function () {\r\n                player.state.position.y += 2;\r\n            })\r\n            a|down = (function () {\r\n                player.state.position.x -= 2;\r\n\r\n                // tells the sprite to be facing left\r\n                player.direction.set ('horizontal', 'left');\r\n            })\r\n            d|down = (function () {\r\n                player.state.position.x += 2;\r\n\r\n                // tells the sprite to be facing right\r\n                player.direction.set ('horizontal', 'right');\r\n            })\r\n        />\r\n    </world>\r\n</qgml>","meta":{"title":"Basic Character Example","desc":"A basic game featuring a moving character.","width":300,"height":300},"name":"basic-character"},{"js":"let qgml_config = {\"worlds\":[{\"id\":\"game\",\"state\":{},\"groups\":[],\"actors\":[{\"group\":null,\"state\":\"({\\r\\n                size: {\\r\\n                    width: QGML.width,\\r\\n                    height: QGML.height\\r\\n                },\\r\\n                position: {\\r\\n                    x: 0,\\r\\n                    y: 0\\r\\n                },\\r\\n                color: 'black'\\r\\n            })\",\"sprite\":null,\"animator\":null,\"customSetup\":null,\"customUpdate\":null,\"isTemplate\":false,\"className\":null,\"id\":\"background\"},{\"group\":null,\"state\":\"({\\r\\n                size: {\\r\\n                    width: 54,\\r\\n                    height: 34\\r\\n                },\\r\\n                position: {\\r\\n                    x: QGML.width / 2 - 54 / 2,\\r\\n                    y: QGML.height - 50\\r\\n                }\\r\\n            })\",\"sprite\":{\"name\":\"sprite-JEMWWzzUyEzI0xpY\",\"path\":\"./assets/laser_cannon_sheet.png\"},\"animator\":null,\"customSetup\":null,\"customUpdate\":null,\"isTemplate\":false,\"className\":null,\"id\":\"laser_cannon\"}],\"actorTemplates\":[],\"texts\":[{\"group\":null,\"state\":\"({ position: { x: 0, y: 0 }, color: 'white', size: 32})\",\"value\":\"\\n SCORE: ${score}\\n \",\"font\":{\"type\":\"web\",\"name\":\"Consolas\"},\"id\":\"text-zZAKPWklZYivu9cv\"},{\"group\":null,\"state\":\"({ position: { x: 0, y: QGML.height - 60 }, color: 'white', size: 32})\",\"value\":\"\\n LIVES: ${lives}\\n \",\"font\":{\"type\":\"web\",\"name\":\"Consolas\"},\"id\":\"text-CESUDtcXoi4rF1Ev\"}],\"default\":true},{\"id\":\"over-screen\",\"state\":{},\"groups\":[],\"actors\":[{\"group\":null,\"state\":\"({\\r\\n                size: {\\r\\n                    width: QGML.width,\\r\\n                    height: QGML.height\\r\\n                },\\r\\n                position: { x: 0, y: 0 },\\r\\n                color: 'black'\\r\\n            })\",\"sprite\":null,\"animator\":null,\"customSetup\":null,\"customUpdate\":null,\"isTemplate\":false,\"className\":null,\"id\":\"background\"}],\"actorTemplates\":[],\"texts\":[{\"group\":null,\"state\":\"({ position: { x: 375, y: 200 }, align: 'center', size: 48, color: 'white' })\",\"value\":\"\\n GAME OVER!\\n SCORE: ${score}\\n \",\"font\":{\"type\":\"web\",\"name\":\"Consolas\"},\"id\":\"text-McpLt47hiLYqrwAC\"},{\"group\":null,\"state\":\"({ position: { x: 375, y: 400 }, align: 'center', size: 28, color: 'white' })\",\"value\":\"\\n PRESS SPACE TO RESTART\\n \",\"font\":{\"type\":\"web\",\"name\":\"Consolas\"},\"id\":\"text-5SDeYPUIgR3vp3g4\"}],\"default\":false}],\"rootElementID\":\"qgml-game\",\"defaultWorld\":\"game\",\"width\":750,\"height\":800,\"assets\":{\"spritesheets\":[{\"name\":\"sheet-A1sgdwz86M7vzkxt\",\"frames\":[\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAYAAAA6RwvCAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAZUlEQVRYw+3WMQ4AIAgDQP7/ZhL8gcSCArEDm4QbKkHMTDoU1KSqtitC/oN4gzNghMyCRAcjMEJ6Q04bb7wnZDbkRXgJ6Q3xwpUdVnizElIGyTh+I8c3If0hSLiig1N+DSFlkIpajeeKFuiHBLUAAAAASUVORK5CYII=\",\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAYAAAA6RwvCAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAYElEQVRYw+3SSwoAIAgEUO9/ZsH2LTKzz0gjzM7PCxIzE4QsDamqjULIfxDv8A4YIbUg2cMrMEKwIdHBE/2E1Ibc+LyEYEMm0tfufkLqQbxFXoVhhMBD0ouSDyEEH/I8DZWVrnYG2/1KAAAAAElFTkSuQmCC\"],\"frameTime\":20},{\"name\":\"sheet-yeII3qKGvN6ykUwZ\",\"frames\":[\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAiCAYAAAAge+tMAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAbUlEQVRYw+3XsQoAIAhFUf//mwVbGzOfUnAHt7BjYKVFhP0YR4vcPfZQI27yAweuhKsLURwEcOCd93h3AAfeDc8mrsJuCgEOPAOfbj5F8wIHXoG/9gABBz4Nnx6WgQOvwqsbdXyiRqZ84MAfjgXEywYoKcpDFwAAAABJRU5ErkJggg==\",\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAiCAYAAAAge+tMAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAeUlEQVRYw+3WQQ7AIAhEUe9/ZhK6bewCcaC2yTeZHeJzoWG4+/hjlorMzO+pRuz0Bw48CZ9X60U29j98wIFXwueDugMceDc821iFLdQDBy7B3358FY8XOPAMPPrwD8DCoQ84cBEeDjnFSfcHDlyEd0PliwAHLsI/nwsociuo8t4itAAAAABJRU5ErkJggg==\"],\"frameTime\":60},{\"name\":\"sheet-3uWpfoFu3XjNrwKb\",\"frames\":[\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAiCAYAAAAd6YoqAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAbUlEQVRYw+3YSQ4AIQhEUe9/ZhK8gh2qCNp/UTsH3kYDKzPXC5EcEhFZCRAgt0GqhbkDBEg3ZHrhJzAgQCZBqh+k+oMFAmQahFcLyN8g6kbKvV/WIQIBIoJ8vdi9HgiQbkjHAM05AAQCxA15IRsDa3PunGKmYwAAAABJRU5ErkJggg==\",\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAiCAYAAAAd6YoqAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAcElEQVRYw+3XMQ4AIQhEUe9/ZhK23m3UMCK6n2RKCa+B2Ny93RBJEzPzSIAAOQ0SHWx1gADJhlQffAQGBEglSPRAqg8sECDVIGwtIH+DDORVCcvgW7IfIhAgIkivpuAZ74EASYaoB1veHwiQzZDyeQAM8Jlu1aS0sgAAAABJRU5ErkJggg==\"],\"frameTime\":30}],\"sprites\":[{\"name\":\"sprite-JEMWWzzUyEzI0xpY\",\"image\":\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAAiCAYAAAAUAipQAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAUElEQVRYw+3POQoAIBAEwf3/m4U1NVNBvKig45mKzIwf2zNSItvAwMDWQnqBgYGBgYGthM0eOx0Y2O2w1yAjUDAwMDAwMDAwMDAwsBdgP1YB4jgGvH4LinoAAAAASUVORK5CYII=\"},{\"name\":\"sprite-90XD11MG9h2Luj38\",\"image\":\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAAiCAYAAAAUAipQAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAbElEQVRYw+3YQQoAIAhE0e5/adsHIYETjvzAVWG9FmGuiFgT4zZxjizR63r5fsCANYepN5ZfHDBgZrDqx0KeHxgwc5htETwGlo1uB0/PCwxYMxiv4nQYlQcwYLUwftDAgNXC6AQDA/a3d28XG+607kfRxO7QAAAAAElFTkSuQmCC\"},{\"name\":\"sprite-vVwHWXYRB0646AsR\",\"image\":\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAAiCAYAAAAUAipQAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAa0lEQVRYw+3YsQoAIAhF0ff/P21Lk0MRKKhd5DVFdRqikplpYnYjH1+65LV/6nzAgDWAZUNTNw4YsIaw6MMidXxgwAbASucL2K2qLf5YwIAVhHEqTodx8wAGLBbGCxoYsFgYP8HAgAXCJmYB2i/6hCw17pYAAAAASUVORK5CYII=\"},{\"name\":\"sprite-KKnDEMfMQHD66Ohm\",\"image\":\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGIAAAAsCAYAAACe920SAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAq0lEQVR42u3bMQ6AIAwFUA/iZJy9/4Ec9Qw4MDgaEwUKb/hrgb6FEDqllCapn6qLn/OaWgoIECBAgAABAkQZiNYaGwkOBAgQIECAANEjxGgNLwEEAgQIECBAgIgM8dUG1HkGAgFCHRAgYtXZtxwQo0GMft08lpya110QIAQECAERAaLWo9/f60Y5FwgQIECAAAGiV4i3B4k+aNjNTz8QIECAAAECRNBhRrlzAcyV/ye0ZCAbAAAAAElFTkSuQmCC\"}]},\"debug\":false,\"vars\":{\"global\":{\"score\":0},\"game\":{\"currentRow\":4,\"aliens\":\"([[], [], [], [], []])\",\"frameCount\":0,\"rowsDirections\":\"([1, 1, 1, 1, 1])\",\"bulletsToDestroy\":\"([])\",\"aliensToDestroy\":\"([])\",\"shieldPiecesToDestroy\":\"([])\",\"explosionsToDestroy\":\"([])\",\"ufosToDestroy\":\"([])\",\"shieldPieces\":\"([])\",\"rowsHeights\":\"([60, 60, 60, 60, 60])\",\"lastSwitch\":1,\"lives\":3,\"numberOfAliens\":55,\"player\":\"(getActor ('laser_cannon'))\"}},\"keymappers\":{\"game\":{\"right_arrow|down\":\"(function () {\\r\\n                player.state.position.x += 3;\\r\\n            })\",\"left_arrow|down\":\"(function () {\\r\\n                player.state.position.x -= 3;\\r\\n            })\",\"space|pressed\":\"(function () {\\r\\n                if (!getActorsByClass ('player-bullet').length) {\\r\\n                    spawn ('player-bullet', {\\r\\n                        position: {\\r\\n                            x: player.state.position.x + 25,\\r\\n                            y: player.state.position.y - 8\\r\\n                        },\\r\\n                        size: {\\r\\n                            width: 4,\\r\\n                            height: 20\\r\\n                        },\\r\\n                        color: 'green'\\r\\n                    });\\r\\n                }\\r\\n            })\"},\"over-screen\":{\"space|pressed\":\"(function () {\\r\\n                // loadWorld tells variables from the game world arent defined --- fix this\\r\\n                location.reload ();\\r\\n            })\"}},\"scripts\":{\"game\":{\"update\":\"\\n\\r\\n            if (frameCount % (Math.floor ((numberOfAliens / 2)) || 1) == 0) {\\r\\n                let lastAlien = null,\\r\\n                    firstAlien = null;\\r\\n                let aliveAliens = aliens [currentRow].filter (a => a !== null);\\r\\n                if (aliveAliens.length) {\\r\\n                    lastAlien = aliveAliens [aliveAliens.length - 1];\\r\\n                    firstAlien = aliveAliens [0];\\r\\n                }\\r\\n                if (lastAlien && lastAlien.state.position.x > QGML.width - 60) {\\r\\n                    rowsDirections = [-1, -1, -1, -1, -1];\\r\\n                    if (lastSwitch == 1) {\\r\\n                        for (let i = 0; i < rowsHeights.length; i++) {\\r\\n                            rowsHeights [i] += 34;\\r\\n                        }\\r\\n                    }\\r\\n                    lastSwitch = -1;\\r\\n                }\\r\\n                else if (firstAlien && firstAlien.state.position.x < 27) {\\r\\n                    rowsDirections = [1, 1, 1, 1, 1];\\r\\n                    if (lastSwitch == -1) {\\r\\n                        for (let i = 0; i < rowsHeights.length; i++) {\\r\\n                            rowsHeights [i] += 34;\\r\\n                        }\\r\\n                    }\\r\\n                    lastSwitch = 1;\\r\\n                }\\r\\n\\r\\n                for (let alien of aliens [currentRow]) {\\r\\n                    if (alien) {\\r\\n                        alien.state.position.x += rowsDirections [currentRow] * 10;\\r\\n                        alien.state.position.y = currentRow * 54 + rowsHeights [currentRow];\\r\\n                    }\\r\\n                }\\r\\n\\r\\n                if (currentRow > 0) currentRow --;\\r\\n                else currentRow = 4;\\r\\n            }\\r\\n\\r\\n\\r\\n            for (let bullet of bulletsToDestroy) {\\r\\n                destroy (bullet);\\r\\n            }\\r\\n\\r\\n            bulletsToDestroy = [];\\r\\n\\r\\n            for (let i = 0; i < aliensToDestroy.length; i++) {\\r\\n                numberOfAliens = 0;\\r\\n                for (let j = 0; j < 5; j++) {\\r\\n                    for (let k = 0; k < aliens [j].length; k++) {\\r\\n                        if (aliens [j] [k]) numberOfAliens ++;\\r\\n                        if (aliens [j] [k] == aliensToDestroy [i]) {\\r\\n                            aliens [j] [k] = null;\\r\\n                        }\\r\\n                    }\\r\\n                }\\r\\n                destroy (aliensToDestroy [i]);\\r\\n            }\\r\\n\\r\\n            aliensToDestroy = [];\\r\\n\\r\\n            for (let i = 0; i < shieldPiecesToDestroy.length; i++) {\\r\\n                for (let j = 0; j < shieldPieces.length; j++) {\\r\\n                    if (shieldPieces [j] == shieldPiecesToDestroy [i]) {\\r\\n                        shieldPieces [j] = null;\\r\\n                    }\\r\\n                }\\r\\n                destroy (shieldPiecesToDestroy [i]);\\r\\n            }\\r\\n\\r\\n            shieldPiecesToDestroy = [];\\r\\n\\r\\n            for (let explosion of explosionsToDestroy) {\\r\\n                destroy (explosion);\\r\\n            }\\r\\n\\r\\n            explosionsToDestroy = [];\\r\\n\\r\\n            for (let ufo of ufosToDestroy) {\\r\\n                destroy (ufo);\\r\\n            }\\r\\n\\r\\n            ufosToDestroy = [];\\r\\n\\r\\n            if (Math.random () < 0.0004) {\\r\\n                if (!getActorsByClass ('ufo').length) {\\r\\n                    let dir = Math.sign (0.5 - Math.random ());\\r\\n                    spawn ('ufo', {\\r\\n                        position: {\\r\\n                            x: (dir > 0) ? (- 100) : (QGML.width + 100),\\r\\n                            y: 10\\r\\n                        },\\r\\n                        size: {\\r\\n                            width: 98,\\r\\n                            height: 44\\r\\n                        }\\r\\n                    }).setDirection (dir);\\r\\n                }\\r\\n                \\r\\n            }\\r\\n\\r\\n            if (numberOfAliens === 1) {\\r\\n                loadWorld ('over-screen');\\r\\n            }\\r\\n\\r\\n            frameCount++;\\r\\n        \",\"setup\":\"\\n\\r\\n\\r\\n            for (let i = 0; i < 4; i++) {\\r\\n                spawn ('shield-spawner', {\\r\\n                    position: {\\r\\n                        x: 50 + 180 * i,\\r\\n                        y: 630\\r\\n                    }, size: { width: 0, height: 0 }\\r\\n                });\\r\\n            }\\r\\n\\r\\n            for (let i = 0; i < 5; i++) {\\r\\n                for (let j = 0; j < 11; j++) {\\r\\n                    let type = 1;\\r\\n                    if (i == 1 || i == 2) type = 2;\\r\\n                    if (i == 3 || i == 4) type = 3;\\r\\n                    let alien = spawn (`alien${type}`, {\\r\\n                        position: {\\r\\n                            x: j * 60 + 28,\\r\\n                            y: i * 54 + rowsHeights [i]\\r\\n                        },\\r\\n                        size: {\\r\\n                            width: (type === 1) ? 34 : ((type === 2) ? 46 : 50),\\r\\n                            height: 34\\r\\n                        }\\r\\n                    });\\r\\n                    alien.setMatrixPos (i, j);\\r\\n                    aliens [i].push (alien);\\r\\n                }\\r\\n            }\\r\\n\\r\\n            \\r\\n        \"}},\"actor-templates\":[{\"group\":null,\"state\":\"\",\"sprite\":null,\"animator\":{\"spritesheets\":{\"idle\":{\"frameTime\":20,\"name\":\"sheet-A1sgdwz86M7vzkxt\"}}},\"customSetup\":\"(function () {\\r\\n            this.matrixPos = { i: null, j: null };\\r\\n            this.setMatrixPos = function (i, j) {\\r\\n                this.matrixPos = { i, j };\\r\\n            }\\r\\n\\r\\n            this.destroy = function () {\\r\\n                score += 30;\\r\\n                spawn ('alien-explosion', {\\r\\n                    position: this.state.position,\\r\\n                    size: this.state.size\\r\\n                });\\r\\n                aliensToDestroy.push (this);\\r\\n            }\\r\\n\\r\\n            this.shoot = function () {\\r\\n                spawn ('alien-bullet', {\\r\\n                    position: {\\r\\n                        x: this.state.position.x + 15,\\r\\n                        y: this.state.position.y\\r\\n                    },\\r\\n                    size: {\\r\\n                        width: 4,\\r\\n                        height: 15\\r\\n                    },\\r\\n                    color: 'white'\\r\\n                });\\r\\n            }\\r\\n        })\",\"customUpdate\":\"(function () {\\r\\n            if (this.matrixPos.i === 4 || aliens [this.matrixPos.i + 1] [this.matrixPos.j] === null) {\\r\\n                if (Math.random () < 0.001) {\\r\\n                    this.shoot ();\\r\\n                }\\r\\n            }\\r\\n        })\",\"isTemplate\":true,\"className\":null,\"id\":\"alien1\"},{\"group\":null,\"state\":\"\",\"sprite\":null,\"animator\":{\"spritesheets\":{\"idle\":{\"frameTime\":60,\"name\":\"sheet-yeII3qKGvN6ykUwZ\"}}},\"customSetup\":\"(function () {\\r\\n            this.matrixPos = { i: null, j: null };\\r\\n            this.setMatrixPos = function (i, j) {\\r\\n                this.matrixPos = { i, j };\\r\\n            }\\r\\n\\r\\n            this.destroy = function () {\\r\\n                score += 20;\\r\\n                spawn ('alien-explosion', {\\r\\n                    position: this.state.position,\\r\\n                    size: this.state.size\\r\\n                });\\r\\n                aliensToDestroy.push (this);\\r\\n            }\\r\\n\\r\\n            this.shoot = function () {\\r\\n                spawn ('alien-bullet', {\\r\\n                    position: {\\r\\n                        x: this.state.position.x + 21,\\r\\n                        y: this.state.position.y\\r\\n                    },\\r\\n                    size: {\\r\\n                        width: 4,\\r\\n                        height: 15\\r\\n                    },\\r\\n                    color: 'white'\\r\\n                });\\r\\n            }\\r\\n        })\",\"customUpdate\":\"(function () {\\r\\n            if (this.matrixPos.i === 4 || aliens [this.matrixPos.i + 1] [this.matrixPos.j] === null) {\\r\\n                if (Math.random () < 0.001) {\\r\\n                    this.shoot ();\\r\\n                }\\r\\n            }\\r\\n        })\",\"isTemplate\":true,\"className\":null,\"id\":\"alien2\"},{\"group\":null,\"state\":\"\",\"sprite\":null,\"animator\":{\"spritesheets\":{\"idle\":{\"frameTime\":30,\"name\":\"sheet-3uWpfoFu3XjNrwKb\"}}},\"customSetup\":\"(function () {\\r\\n            this.matrixPos = { i: null, j: null };\\r\\n            this.setMatrixPos = function (i, j) {\\r\\n                this.matrixPos = { i, j };\\r\\n            }\\r\\n\\r\\n            this.destroy = function () {\\r\\n                score += 10;\\r\\n                spawn ('alien-explosion', {\\r\\n                    position: this.state.position,\\r\\n                    size: this.state.size\\r\\n                });\\r\\n                aliensToDestroy.push (this);\\r\\n            }\\r\\n\\r\\n            this.shoot = function () {\\r\\n                spawn ('alien-bullet', {\\r\\n                    position: {\\r\\n                        x: this.state.position.x + 23,\\r\\n                        y: this.state.position.y\\r\\n                    },\\r\\n                    size: {\\r\\n                        width: 4,\\r\\n                        height: 15\\r\\n                    },\\r\\n                    color: 'white'\\r\\n                });\\r\\n            }\\r\\n        })\",\"customUpdate\":\"(function () {\\r\\n            if (this.matrixPos.i === 4 || aliens [this.matrixPos.i + 1] [this.matrixPos.j] === null) {\\r\\n                if (Math.random () < 0.001) {\\r\\n                    this.shoot ();\\r\\n                }\\r\\n            }\\r\\n        })\",\"isTemplate\":true,\"className\":null,\"id\":\"alien3\"},{\"group\":null,\"state\":\"\",\"sprite\":null,\"animator\":null,\"customSetup\":null,\"customUpdate\":\"(function () {\\r\\n            this.state.position.y -= 13;\\r\\n            if (this.state.position.y < 0) {\\r\\n                spawn ('shield-explosion', {\\r\\n                    position: {\\r\\n                        x: this.state.position.x,\\r\\n                        y: -5\\r\\n                    },\\r\\n                    size: this.state.size\\r\\n                });\\r\\n                bulletsToDestroy.push (this);\\r\\n            }\\r\\n\\r\\n            // destroy here needs to be fixed\\r\\n            for (let i = 0; i < 5; i++) {\\r\\n                for (let alien of aliens [i]) {\\r\\n                    if (alien && overlaps (this, alien)) {\\r\\n                        alien.destroy ();\\r\\n                        bulletsToDestroy.push (this);\\r\\n                    }\\r\\n                }\\r\\n            }\\r\\n\\r\\n            for (let ufo of getActorsByClass ('ufo')) {\\r\\n                if (overlaps (this, ufo)) {\\r\\n                    ufo.destroy ();\\r\\n                    bulletsToDestroy.push (this);\\r\\n                }\\r\\n            }\\r\\n\\r\\n            for (let piece of shieldPieces) {\\r\\n                if (piece && overlaps (this, piece)) {\\r\\n                    spawn ('shield-explosion', {\\r\\n                        position: this.state.position,\\r\\n                        size: this.state.size\\r\\n                    });\\r\\n                    bulletsToDestroy.push (this);\\r\\n                    piece.takeDamage ();\\r\\n                }\\r\\n            }\\r\\n            \\r\\n        })\",\"isTemplate\":true,\"className\":null,\"id\":\"player-bullet\"},{\"group\":null,\"state\":\"\",\"sprite\":null,\"animator\":null,\"customSetup\":null,\"customUpdate\":\"(function () {\\r\\n            this.state.position.y += 10;\\r\\n            if (this.state.position.y > QGML.height) bulletsToDestroy.push (this);\\r\\n\\r\\n            if (overlaps (this, player)) {\\r\\n                // take one life away\\r\\n                lives --;\\r\\n                spawn ('shield-explosion', {\\r\\n                    position: this.state.position,\\r\\n                    size: this.state.size\\r\\n                });\\r\\n                bulletsToDestroy.push (this);\\r\\n                // should also check if lives === 0 and end the game\\r\\n                if (lives === 0) loadWorld ('over-screen');\\r\\n            } else {\\r\\n                for (let piece of shieldPieces) {\\r\\n                    if (piece && overlaps (this, piece)) {\\r\\n                        spawn ('shield-explosion', {\\r\\n                            position: this.state.position,\\r\\n                            size: this.state.size\\r\\n                        });\\r\\n                        bulletsToDestroy.push (this);\\r\\n                        piece.takeDamage ();\\r\\n                    }\\r\\n                }\\r\\n            }\\r\\n        })\",\"isTemplate\":true,\"className\":null,\"id\":\"alien-bullet\"},{\"group\":null,\"state\":\"\",\"sprite\":null,\"animator\":null,\"customSetup\":\"(function () {\\r\\n            for (let i = 0; i < 4; i++) {\\r\\n                for (let j = 0; j < 3; j++) {\\r\\n                    if ((i == 1 || i == 2) && j == 2) continue;\\r\\n                    let piece = spawn ('shield-piece', {\\r\\n                        position: {\\r\\n                            x: this.state.position.x + i * 30,\\r\\n                            y: this.state.position.y + j * 30\\r\\n                        },\\r\\n                        size: {\\r\\n                            width: 30,\\r\\n                            height: 30\\r\\n                        },\\r\\n                        color: '#00FC00'\\r\\n                    })\\r\\n                    shieldPieces.push (piece);\\r\\n                }\\r\\n            }\\r\\n        })\",\"customUpdate\":null,\"isTemplate\":true,\"className\":null,\"id\":\"shield-spawner\"},{\"group\":null,\"state\":\"\",\"sprite\":null,\"animator\":null,\"customSetup\":\"(function () {\\r\\n            this.health = 3;\\r\\n            this.color = 'rgba(0, 252, 0, 1)';\\r\\n            this.mapRange = (value, x1, y1, x2, y2) => (value - x1) * (y2 - x2) / (y1 - x1) + x2;\\r\\n            this.takeDamage = function () {\\r\\n                this.health--;\\r\\n\\r\\n                let alpha = this.mapRange (this.health, 3, 0, 1, 0);\\r\\n                this.state.color = `rgba(0, 252, 0, ${alpha.toFixed (2)})`;\\r\\n                if (this.health <= 0) {\\r\\n                    shieldPiecesToDestroy.push (this);\\r\\n                }\\r\\n            }\\r\\n        })\",\"customUpdate\":null,\"isTemplate\":true,\"className\":null,\"id\":\"shield-piece\"},{\"group\":null,\"state\":\"\",\"sprite\":{\"name\":\"sprite-90XD11MG9h2Luj38\",\"path\":\"./assets/alien_explosion.png\"},\"animator\":null,\"customSetup\":\"(function () {\\r\\n            this.lifespan = 5;\\r\\n        })\",\"customUpdate\":\"(function () {\\r\\n            this.lifespan--;\\r\\n            if (!this.lifespan) {\\r\\n                explosionsToDestroy.push (this);\\r\\n            }\\r\\n        })\",\"isTemplate\":true,\"className\":null,\"id\":\"alien-explosion\"},{\"group\":null,\"state\":\"\",\"sprite\":{\"name\":\"sprite-vVwHWXYRB0646AsR\",\"path\":\"./assets/shield_explosion.png\"},\"animator\":null,\"customSetup\":\"(function () {\\r\\n            this.lifespan = 5;\\r\\n        })\",\"customUpdate\":\"(function () {\\r\\n            this.lifespan--;\\r\\n            if (!this.lifespan) {\\r\\n                explosionsToDestroy.push (this);\\r\\n            }\\r\\n        })\",\"isTemplate\":true,\"className\":null,\"id\":\"shield-explosion\"},{\"group\":null,\"state\":\"\",\"sprite\":{\"name\":\"sprite-KKnDEMfMQHD66Ohm\",\"path\":\"./assets/ufo_sheet.png\"},\"animator\":null,\"customSetup\":\"(function () {\\r\\n            this.direction = 1;\\r\\n            this.setDirection = function (dir) {\\r\\n                this.direction = dir;\\r\\n            }\\r\\n\\r\\n            this.destroy = function () {\\r\\n                score += 300;\\r\\n                spawn ('alien-explosion', {\\r\\n                    position: this.state.position,\\r\\n                    size: this.state.size\\r\\n                });\\r\\n                ufosToDestroy.push (this);\\r\\n            }\\r\\n        })\",\"customUpdate\":\"(function () {\\r\\n            this.state.position.x += this.direction * 4;\\r\\n            if (this.direction > 0) {\\r\\n                if (this.state.position.x > QGML.width + 100) {\\r\\n\\r\\n                }\\r\\n            } else {\\r\\n                if (this.state.position.x < -100) {\\r\\n                    ufosToDestroy.push (this);\\r\\n                }\\r\\n            }\\r\\n        })\",\"isTemplate\":true,\"className\":null,\"id\":\"ufo\"}],\"text-templates\":[null,null,null,null]};QGML.setup (qgml_config);","qgml":"<qgml\r\n    width = 750\r\n    height = 800\r\n>\r\n    <actor-template\r\n        id = \"alien1\"\r\n        animator = ({\r\n            spritesheets: {\r\n                idle: {\r\n                    strip: './assets/alien1_sheet.png',\r\n                    frames: 2,\r\n                    frameTime: 20\r\n                }\r\n            }\r\n        })\r\n        setup = (function () {\r\n            this.matrixPos = { i: null, j: null };\r\n            this.setMatrixPos = function (i, j) {\r\n                this.matrixPos = { i, j };\r\n            }\r\n\r\n            this.destroy = function () {\r\n                score += 30;\r\n                spawn ('alien-explosion', {\r\n                    position: this.state.position,\r\n                    size: this.state.size\r\n                });\r\n                aliensToDestroy.push (this);\r\n            }\r\n\r\n            this.shoot = function () {\r\n                spawn ('alien-bullet', {\r\n                    position: {\r\n                        x: this.state.position.x + 15,\r\n                        y: this.state.position.y\r\n                    },\r\n                    size: {\r\n                        width: 4,\r\n                        height: 15\r\n                    },\r\n                    color: 'white'\r\n                });\r\n            }\r\n        })\r\n        update = (function () {\r\n            if (this.matrixPos.i === 4 || aliens [this.matrixPos.i + 1] [this.matrixPos.j] === null) {\r\n                if (Math.random () < 0.001) {\r\n                    this.shoot ();\r\n                }\r\n            }\r\n        });\r\n    />\r\n    <actor-template\r\n        id = \"alien2\"\r\n        animator = ({\r\n            spritesheets: {\r\n                idle: {\r\n                    strip: './assets/alien2_sheet.png',\r\n                    frames: 2,\r\n                    frameTime: 60\r\n                }\r\n            }\r\n        })\r\n        setup = (function () {\r\n            this.matrixPos = { i: null, j: null };\r\n            this.setMatrixPos = function (i, j) {\r\n                this.matrixPos = { i, j };\r\n            }\r\n\r\n            this.destroy = function () {\r\n                score += 20;\r\n                spawn ('alien-explosion', {\r\n                    position: this.state.position,\r\n                    size: this.state.size\r\n                });\r\n                aliensToDestroy.push (this);\r\n            }\r\n\r\n            this.shoot = function () {\r\n                spawn ('alien-bullet', {\r\n                    position: {\r\n                        x: this.state.position.x + 21,\r\n                        y: this.state.position.y\r\n                    },\r\n                    size: {\r\n                        width: 4,\r\n                        height: 15\r\n                    },\r\n                    color: 'white'\r\n                });\r\n            }\r\n        })\r\n        update = (function () {\r\n            if (this.matrixPos.i === 4 || aliens [this.matrixPos.i + 1] [this.matrixPos.j] === null) {\r\n                if (Math.random () < 0.001) {\r\n                    this.shoot ();\r\n                }\r\n            }\r\n        });\r\n    />\r\n    <actor-template\r\n        id = \"alien3\"\r\n        animator = ({\r\n            spritesheets: {\r\n                idle: {\r\n                    strip: './assets/alien3_sheet.png',\r\n                    frames: 2,\r\n                    frameTime: 30\r\n                }\r\n            }\r\n        })\r\n        setup = (function () {\r\n            this.matrixPos = { i: null, j: null };\r\n            this.setMatrixPos = function (i, j) {\r\n                this.matrixPos = { i, j };\r\n            }\r\n\r\n            this.destroy = function () {\r\n                score += 10;\r\n                spawn ('alien-explosion', {\r\n                    position: this.state.position,\r\n                    size: this.state.size\r\n                });\r\n                aliensToDestroy.push (this);\r\n            }\r\n\r\n            this.shoot = function () {\r\n                spawn ('alien-bullet', {\r\n                    position: {\r\n                        x: this.state.position.x + 23,\r\n                        y: this.state.position.y\r\n                    },\r\n                    size: {\r\n                        width: 4,\r\n                        height: 15\r\n                    },\r\n                    color: 'white'\r\n                });\r\n            }\r\n        })\r\n        update = (function () {\r\n            if (this.matrixPos.i === 4 || aliens [this.matrixPos.i + 1] [this.matrixPos.j] === null) {\r\n                if (Math.random () < 0.001) {\r\n                    this.shoot ();\r\n                }\r\n            }\r\n        });\r\n    />\r\n\r\n    <actor-template\r\n        id = \"player-bullet\"\r\n        update = (function () {\r\n            this.state.position.y -= 13;\r\n            if (this.state.position.y < 0) {\r\n                spawn ('shield-explosion', {\r\n                    position: {\r\n                        x: this.state.position.x,\r\n                        y: -5\r\n                    },\r\n                    size: this.state.size\r\n                });\r\n                bulletsToDestroy.push (this);\r\n            }\r\n\r\n            // destroy here needs to be fixed\r\n            for (let i = 0; i < 5; i++) {\r\n                for (let alien of aliens [i]) {\r\n                    if (alien && overlaps (this, alien)) {\r\n                        alien.destroy ();\r\n                        bulletsToDestroy.push (this);\r\n                    }\r\n                }\r\n            }\r\n\r\n            for (let ufo of getActorsByClass ('ufo')) {\r\n                if (overlaps (this, ufo)) {\r\n                    ufo.destroy ();\r\n                    bulletsToDestroy.push (this);\r\n                }\r\n            }\r\n\r\n            for (let piece of shieldPieces) {\r\n                if (piece && overlaps (this, piece)) {\r\n                    spawn ('shield-explosion', {\r\n                        position: this.state.position,\r\n                        size: this.state.size\r\n                    });\r\n                    bulletsToDestroy.push (this);\r\n                    piece.takeDamage ();\r\n                }\r\n            }\r\n            \r\n        })\r\n    />\r\n\r\n    <actor-template\r\n        id = \"alien-bullet\"\r\n        update = (function () {\r\n            this.state.position.y += 10;\r\n            if (this.state.position.y > QGML.height) bulletsToDestroy.push (this);\r\n\r\n            if (overlaps (this, player)) {\r\n                // take one life away\r\n                lives --;\r\n                spawn ('shield-explosion', {\r\n                    position: this.state.position,\r\n                    size: this.state.size\r\n                });\r\n                bulletsToDestroy.push (this);\r\n                // should also check if lives === 0 and end the game\r\n                if (lives === 0) loadWorld ('over-screen');\r\n            } else {\r\n                for (let piece of shieldPieces) {\r\n                    if (piece && overlaps (this, piece)) {\r\n                        spawn ('shield-explosion', {\r\n                            position: this.state.position,\r\n                            size: this.state.size\r\n                        });\r\n                        bulletsToDestroy.push (this);\r\n                        piece.takeDamage ();\r\n                    }\r\n                }\r\n            }\r\n        })\r\n    />\r\n\r\n    <actor-template\r\n        id = \"shield-spawner\"\r\n        setup = (function () {\r\n            for (let i = 0; i < 4; i++) {\r\n                for (let j = 0; j < 3; j++) {\r\n                    if ((i == 1 || i == 2) && j == 2) continue;\r\n                    let piece = spawn ('shield-piece', {\r\n                        position: {\r\n                            x: this.state.position.x + i * 30,\r\n                            y: this.state.position.y + j * 30\r\n                        },\r\n                        size: {\r\n                            width: 30,\r\n                            height: 30\r\n                        },\r\n                        color: '#00FC00'\r\n                    })\r\n                    shieldPieces.push (piece);\r\n                }\r\n            }\r\n        });\r\n    />\r\n\r\n    <actor-template\r\n        id = \"shield-piece\"\r\n        setup = (function () {\r\n            this.health = 3;\r\n            this.color = 'rgba(0, 252, 0, 1)';\r\n            this.mapRange = (value, x1, y1, x2, y2) => (value - x1) * (y2 - x2) / (y1 - x1) + x2;\r\n            this.takeDamage = function () {\r\n                this.health--;\r\n\r\n                let alpha = this.mapRange (this.health, 3, 0, 1, 0);\r\n                this.state.color = `rgba(0, 252, 0, ${alpha.toFixed (2)})`;\r\n                if (this.health <= 0) {\r\n                    shieldPiecesToDestroy.push (this);\r\n                }\r\n            }\r\n        })\r\n    />\r\n\r\n    <actor-template\r\n        id = \"alien-explosion\"\r\n        sprite = \"./assets/alien_explosion.png\"\r\n        setup = (function () {\r\n            this.lifespan = 5;\r\n        })\r\n        update = (function () {\r\n            this.lifespan--;\r\n            if (!this.lifespan) {\r\n                explosionsToDestroy.push (this);\r\n            }\r\n        })\r\n    />\r\n\r\n    <actor-template\r\n        id = \"shield-explosion\"\r\n        sprite = \"./assets/shield_explosion.png\"\r\n        setup = (function () {\r\n            this.lifespan = 5;\r\n        })\r\n        update = (function () {\r\n            this.lifespan--;\r\n            if (!this.lifespan) {\r\n                explosionsToDestroy.push (this);\r\n            }\r\n        })\r\n    />\r\n\r\n    <actor-template\r\n        id = \"ufo\"\r\n        sprite = \"./assets/ufo_sheet.png\"\r\n        setup = (function () {\r\n            this.direction = 1;\r\n            this.setDirection = function (dir) {\r\n                this.direction = dir;\r\n            }\r\n\r\n            this.destroy = function () {\r\n                score += 300;\r\n                spawn ('alien-explosion', {\r\n                    position: this.state.position,\r\n                    size: this.state.size\r\n                });\r\n                ufosToDestroy.push (this);\r\n            }\r\n        })\r\n        update = (function () {\r\n            this.state.position.x += this.direction * 4;\r\n            if (this.direction > 0) {\r\n                if (this.state.position.x > QGML.width + 100) {\r\n\r\n                }\r\n            } else {\r\n                if (this.state.position.x < -100) {\r\n                    ufosToDestroy.push (this);\r\n                }\r\n            }\r\n        })\r\n    />\r\n\r\n    <var score = 0/>\r\n\r\n    <world id = \"game\" default>\r\n        <var\r\n            currentRow = 4\r\n            aliens = ([[], [], [], [], []])\r\n            frameCount = 0\r\n            rowsDirections = ([1, 1, 1, 1, 1])\r\n            bulletsToDestroy = ([])\r\n            aliensToDestroy = ([])\r\n            shieldPiecesToDestroy = ([])\r\n            explosionsToDestroy = ([])\r\n            ufosToDestroy = ([])\r\n            shieldPieces = ([])\r\n            rowsHeights = ([60, 60, 60, 60, 60])\r\n            lastSwitch = 1\r\n            lives = 3\r\n            numberOfAliens = 55\r\n        />\r\n        <script setup>\r\n\r\n            for (let i = 0; i < 4; i++) {\r\n                spawn ('shield-spawner', {\r\n                    position: {\r\n                        x: 50 + 180 * i,\r\n                        y: 630\r\n                    }, size: { width: 0, height: 0 }\r\n                });\r\n            }\r\n\r\n            for (let i = 0; i < 5; i++) {\r\n                for (let j = 0; j < 11; j++) {\r\n                    let type = 1;\r\n                    if (i == 1 || i == 2) type = 2;\r\n                    if (i == 3 || i == 4) type = 3;\r\n                    let alien = spawn (`alien${type}`, {\r\n                        position: {\r\n                            x: j * 60 + 28,\r\n                            y: i * 54 + rowsHeights [i]\r\n                        },\r\n                        size: {\r\n                            width: (type === 1) ? 34 : ((type === 2) ? 46 : 50),\r\n                            height: 34\r\n                        }\r\n                    });\r\n                    alien.setMatrixPos (i, j);\r\n                    aliens [i].push (alien);\r\n                }\r\n            }\r\n\r\n            \r\n        </script>\r\n\r\n        <script update>\r\n            if (frameCount % (Math.floor ((numberOfAliens / 2)) || 1) == 0) {\r\n                let lastAlien = null,\r\n                    firstAlien = null;\r\n                let aliveAliens = aliens [currentRow].filter (a => a !== null);\r\n                if (aliveAliens.length) {\r\n                    lastAlien = aliveAliens [aliveAliens.length - 1];\r\n                    firstAlien = aliveAliens [0];\r\n                }\r\n                if (lastAlien && lastAlien.state.position.x > QGML.width - 60) {\r\n                    rowsDirections = [-1, -1, -1, -1, -1];\r\n                    if (lastSwitch == 1) {\r\n                        for (let i = 0; i < rowsHeights.length; i++) {\r\n                            rowsHeights [i] += 34;\r\n                        }\r\n                    }\r\n                    lastSwitch = -1;\r\n                }\r\n                else if (firstAlien && firstAlien.state.position.x < 27) {\r\n                    rowsDirections = [1, 1, 1, 1, 1];\r\n                    if (lastSwitch == -1) {\r\n                        for (let i = 0; i < rowsHeights.length; i++) {\r\n                            rowsHeights [i] += 34;\r\n                        }\r\n                    }\r\n                    lastSwitch = 1;\r\n                }\r\n\r\n                for (let alien of aliens [currentRow]) {\r\n                    if (alien) {\r\n                        alien.state.position.x += rowsDirections [currentRow] * 10;\r\n                        alien.state.position.y = currentRow * 54 + rowsHeights [currentRow];\r\n                    }\r\n                }\r\n\r\n                if (currentRow > 0) currentRow --;\r\n                else currentRow = 4;\r\n            }\r\n\r\n\r\n            for (let bullet of bulletsToDestroy) {\r\n                destroy (bullet);\r\n            }\r\n\r\n            bulletsToDestroy = [];\r\n\r\n            for (let i = 0; i < aliensToDestroy.length; i++) {\r\n                numberOfAliens = 0;\r\n                for (let j = 0; j < 5; j++) {\r\n                    for (let k = 0; k < aliens [j].length; k++) {\r\n                        if (aliens [j] [k]) numberOfAliens ++;\r\n                        if (aliens [j] [k] == aliensToDestroy [i]) {\r\n                            aliens [j] [k] = null;\r\n                        }\r\n                    }\r\n                }\r\n                destroy (aliensToDestroy [i]);\r\n            }\r\n\r\n            aliensToDestroy = [];\r\n\r\n            for (let i = 0; i < shieldPiecesToDestroy.length; i++) {\r\n                for (let j = 0; j < shieldPieces.length; j++) {\r\n                    if (shieldPieces [j] == shieldPiecesToDestroy [i]) {\r\n                        shieldPieces [j] = null;\r\n                    }\r\n                }\r\n                destroy (shieldPiecesToDestroy [i]);\r\n            }\r\n\r\n            shieldPiecesToDestroy = [];\r\n\r\n            for (let explosion of explosionsToDestroy) {\r\n                destroy (explosion);\r\n            }\r\n\r\n            explosionsToDestroy = [];\r\n\r\n            for (let ufo of ufosToDestroy) {\r\n                destroy (ufo);\r\n            }\r\n\r\n            ufosToDestroy = [];\r\n\r\n            if (Math.random () < 0.0004) {\r\n                if (!getActorsByClass ('ufo').length) {\r\n                    let dir = Math.sign (0.5 - Math.random ());\r\n                    spawn ('ufo', {\r\n                        position: {\r\n                            x: (dir > 0) ? (- 100) : (QGML.width + 100),\r\n                            y: 10\r\n                        },\r\n                        size: {\r\n                            width: 98,\r\n                            height: 44\r\n                        }\r\n                    }).setDirection (dir);\r\n                }\r\n                \r\n            }\r\n\r\n            if (numberOfAliens === 1) {\r\n                loadWorld ('over-screen');\r\n            }\r\n\r\n            frameCount++;\r\n        </script>\r\n        <actor\r\n            id = \"background\"\r\n            state = ({\r\n                size: {\r\n                    width: QGML.width,\r\n                    height: QGML.height\r\n                },\r\n                position: {\r\n                    x: 0,\r\n                    y: 0\r\n                },\r\n                color: 'black'\r\n            })\r\n        />\r\n\r\n        <actor\r\n            id = 'laser_cannon'\r\n            state = ({\r\n                size: {\r\n                    width: 54,\r\n                    height: 34\r\n                },\r\n                position: {\r\n                    x: QGML.width / 2 - 54 / 2,\r\n                    y: QGML.height - 50\r\n                }\r\n            })\r\n            sprite = \"./assets/laser_cannon_sheet.png\"\r\n        />\r\n\r\n        <var player = (getActor ('laser_cannon'))/>\r\n\r\n        <!-- fix <text> without font throwing error -->\r\n        <text state = ({ position: { x: 0, y: 0 }, color: 'white', size: 32}) font = \"Consolas\">\r\n            SCORE: ${score}\r\n        </text>\r\n\r\n        <text state = ({ position: { x: 0, y: QGML.height - 60 }, color: 'white', size: 32}) font = \"Consolas\">\r\n            LIVES: ${lives}\r\n        </text>\r\n\r\n        <keymapper\r\n            right_arrow|down = (function () {\r\n                player.state.position.x += 3;\r\n            })\r\n            left_arrow|down = (function () {\r\n                player.state.position.x -= 3;\r\n            })\r\n            space|pressed = (function () {\r\n                if (!getActorsByClass ('player-bullet').length) {\r\n                    spawn ('player-bullet', {\r\n                        position: {\r\n                            x: player.state.position.x + 25,\r\n                            y: player.state.position.y - 8\r\n                        },\r\n                        size: {\r\n                            width: 4,\r\n                            height: 20\r\n                        },\r\n                        color: 'green'\r\n                    });\r\n                }\r\n            })\r\n        />\r\n    </world>\r\n\r\n    <world\r\n        id = \"over-screen\"\r\n    >\r\n        <actor\r\n            id = \"background\"\r\n            state = ({\r\n                size: {\r\n                    width: QGML.width,\r\n                    height: QGML.height\r\n                },\r\n                position: { x: 0, y: 0 },\r\n                color: 'black'\r\n            })\r\n        />\r\n        <text state = ({ position: { x: 375, y: 200 }, align: 'center', size: 48, color: 'white' }) font = \"Consolas\">\r\n            GAME OVER!\r\n            SCORE: ${score}\r\n        </text>\r\n\r\n        <text state = ({ position: { x: 375, y: 400 }, align: 'center', size: 28, color: 'white' }) font = \"Consolas\">\r\n            PRESS SPACE TO RESTART\r\n        </text>\r\n        <keymapper\r\n            space|pressed = (function () {\r\n                // loadWorld tells variables from the game world arent defined --- fix this\r\n                location.reload ();\r\n            });\r\n        />\r\n    </world>\r\n</qgml>","meta":{"title":"Space Invaders Example","desc":"Space invaders created with QGML","width":750,"height":800},"name":"space-invaders"}]},"__N_SSG":true}