Develop Reference

Canvas game slows down after a while. What could have caused this? - javascript

I'm making a breakout game with html canvas and javascript. I'm working on this project for a while.
Yesterday i realized that game started the slow down after hours of playing. I checked my code but everything was fine. Then i restarted chrome and the game back to normal. What could have caused this?
Is chrome collecting objects or something on the background and it gets heavy after hours? is that a thing?
Here is the all the js code:
document.addEventListener("DOMContentLoaded", function(){
canvas = document.getElementById("ctx").getContext("2d");
document.addEventListener("keydown", keyDown, false);
document.addEventListener("keyup", keyUp, false);
document.querySelector("#newGame").addEventListener("click", newGame, false);
document.querySelector("#pickLevel").addEventListener("click", pickLevel, false);
document.querySelector("#restart").addEventListener("click", restart, false);
document.querySelector("#toMainMenu").addEventListener("click", mainMenu, false);
levels = {
map01 : [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 6, 8, 10, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 7, 13, 15, 17, 10, 1, 0, 0, 0, 0, 0, 0, 0, 19, 14, 20, 2, 4, 17, 8, 17, 0, 0, 0, 0, 0, 0, 0, 21, 2, 9, 11, 9, 15, 0, 0, 0, 0, 0, 0, 4, 0, 0, 10, 11, 18, 16, 0, 0, 4, 0, 0, 0, 3, 11, 3, 0, 0, 19, 20, 0, 0, 3, 11, 3, 0, 2, 10, 18, 10, 2, 0, 0, 0, 0, 2, 10, 18, 10, 1, 0, 17, 13, 17, 9, 1, 0, 0, 1, 9, 17, 5, 17, 0, 0, 0, 20, 12, 16, 8, 7, 6, 8, 3, 4, 12, 0, 0, 0, 0, 0, 19, 11, 15, 14, 13, 15, 10, 11, 0, 0, 0, 0, 0, 0, 0, 18, 10, 21, 20, 2, 10, 0, 0, 0, 0, 0, 0, 0, 0, 0, 17, 9, 1, 9, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 16, 8, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
map02 : [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 4, 10, 11, 12, 0, 0, 17, 18, 19, 4, 5, 0, 0, 8, 11, 14, 10, 13, 0, 0, 15, 16, 17, 18, 19, 0, 0, 15, 18, 21, 17, 20, 0, 0, 8, 9, 10, 11, 12, 0, 0, 8, 9, 10, 11, 12, 0, 0, 21, 14, 7, 6, 13, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 5, 1, 4, 7, 0, 0, 7, 20, 7, 13, 14, 0, 0, 9, 12, 8, 11, 14, 0, 0, 14, 6, 12, 4, 10, 0, 0, 16, 19, 15, 18, 21, 0, 0, 21, 13, 19, 11, 17, 0, 0, 15, 16, 17, 18, 19, 0, 0, 8, 20, 15, 18, 16, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 12, 13, 14, 5, 1, 0, 0, 7, 9, 13, 14, 14, 0, 0, 10, 13, 9, 12, 8, 0, 0, 14, 6, 12, 4, 10, 0, 0, 17, 20, 16, 19, 15, 0, 0, 21, 13, 19, 11, 17, 0, 0, 10, 11, 12, 13, 14, 0, 0, 15, 20, 11, 18, 21, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
map03 : [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 8, 9, 10, 11, 12, 13, 14, 1, 2, 3, 4, 5, 6, 7, 15, 16, 17, 18, 19, 20, 21, 8, 9, 10, 11, 12, 13, 14, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 8, 9, 10, 11, 12, 13, 14, 1, 1, 2, 3, 4, 5, 6, 15, 16, 17, 18, 19, 20, 21, 8, 8, 9, 10, 11, 12, 13, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
map04 : [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 10, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 17, 3, 11, 8, 0, 0, 0, 0, 0, 0, 0, 0, 0, 18, 17, 16, 18, 4, 20, 0, 0, 0, 0, 0, 0, 0, 20, 10, 17, 18, 19, 13, 14, 6, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 8, 4, 19, 8, 9, 10, 11, 12, 13, 10, 17, 7, 0, 6, 1, 16, 15, 16, 17, 18, 19, 20, 21, 6, 7, 1, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 15, 16, 17, 18, 19, 20, 21, 8, 9, 10, 11, 12, 13, 14, 0, 9, 10, 11, 12, 13, 14, 2, 3, 4, 5, 6, 7, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 15, 16, 17, 18, 19, 20, 21, 1, 0, 0, 0, 0, 0, 0, 0, 1, 2, 3, 4, 5, 6, 0, 0, 0, 0, 0, 0, 0, 0, 0, 8, 9, 10, 11, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
map05 : [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 8, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 9, 15, 8, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 10, 16, 0, 0, 9, 3, 0, 0, 0, 0, 0, 0, 0, 11, 17, 0, 13, 7, 0, 10, 4, 0, 0, 0, 0, 0, 12, 18, 0, 5, 20, 14, 6, 0, 11, 5, 0, 0, 0, 13, 19, 0, 4, 12, 20, 21, 13, 20, 0, 12, 6, 0, 14, 20, 0, 3, 11, 19, 0, 0, 20, 12, 4, 0, 13, 7, 21, 0, 2, 10, 18, 0, 3, 4, 0, 19, 11, 3, 0, 14, 0, 1, 9, 17, 0, 7, 10, 11, 1, 0, 18, 10, 2, 0, 7, 8, 16, 0, 10, 14, 17, 18, 8, 7, 0, 17, 9, 1, 14, 15, 0, 1, 17, 21, 0, 0, 15, 14, 3, 0, 16, 8, 0, 0, 1, 8, 19, 0, 17, 18, 0, 21, 10, 7, 0, 0, 0, 0, 8, 15, 0, 2, 8, 9, 10, 0, 17, 14, 0, 0, 0, 0, 0, 0, 16, 11, 0, 0, 14, 15, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
map06 : [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 18, 1, 8, 16, 11, 0, 6, 7, 0, 0, 0, 0, 0, 3, 2, 8, 15, 4, 0, 13, 6, 14, 0, 0, 0, 0, 10, 3, 9, 15, 19, 0, 20, 5, 13, 21, 0, 0, 0, 17, 4, 10, 16, 12, 0, 7, 4, 12, 20, 19, 0, 0, 2, 5, 11, 17, 5, 0, 21, 3, 11, 19, 12, 0, 0, 9, 6, 12, 18, 20, 0, 1, 2, 10, 18, 18, 0, 0, 16, 17, 13, 19, 13, 0, 8, 1, 9, 17, 11, 0, 0, 0, 1, 15, 20, 6, 0, 2, 7, 8, 16, 4, 0, 0, 0, 0, 8, 17, 21, 0, 9, 6, 14, 15, 17, 0, 0, 0, 0, 0, 15, 14, 0, 16, 5, 13, 21, 10, 0, 0, 0, 0, 0, 0, 7, 0, 4, 4, 12, 20, 3, 0, 0, 0, 0, 0, 0, 0, 0, 11, 3, 11, 19, 16, 0, 0, 0, 0, 0, 0, 0, 0, 17, 10, 10, 18, 9, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 15, 17, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 8, 17, 15, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 15, 8, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
map07 : [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 6, 20, 0, 0, 0, 20, 5, 0, 0, 0, 0, 0, 0, 5, 13, 18, 14, 0, 8, 2, 12, 4, 0, 0, 0, 0, 0, 12, 2, 5, 21, 3, 15, 3, 4, 11, 0, 0, 0, 0, 3, 19, 9, 12, 7, 10, 6, 10, 11, 1, 1, 0, 0, 0, 10, 21, 16, 19, 14, 17, 13, 17, 18, 1, 8, 0, 0, 0, 17, 1, 2, 3, 4, 5, 6, 7, 1, 2, 15, 0, 0, 0, 4, 8, 9, 10, 11, 12, 13, 14, 8, 9, 2, 0, 0, 0, 11, 15, 16, 17, 18, 19, 20, 21, 15, 16, 9, 0, 0, 0, 18, 20, 1, 2, 3, 4, 5, 6, 7, 3, 16, 0, 0, 0, 0, 1, 8, 9, 10, 11, 12, 13, 14, 10, 0, 0, 0, 0, 0, 8, 15, 16, 17, 18, 19, 20, 21, 17, 0, 0, 0, 0, 0, 15, 7, 1, 3, 4, 5, 6, 4, 20, 0, 0, 0, 0, 0, 0, 14, 8, 10, 11, 12, 13, 11, 0, 0, 0, 0, 0, 0, 0, 21, 16, 17, 18, 19, 16, 18, 0, 0, 0, 0, 0, 0, 0, 0, 20, 6, 7, 5, 20, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 13, 14, 12, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 20, 20, 19, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 16, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
map08 : [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 8, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 15, 12, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 19, 9, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 9, 6, 16, 12, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 16, 13, 3, 19, 8, 3, 0, 0, 0, 0, 0, 0, 0, 0, 3, 20, 10, 6, 15, 10, 5, 0, 0, 0, 0, 0, 0, 0, 10, 7, 17, 13, 2, 17, 12, 6, 0, 0, 0, 0, 0, 0, 17, 14, 4, 20, 9, 4, 19, 13, 7, 0, 0, 0, 0, 0, 4, 1, 11, 7, 16, 11, 8, 20, 14, 1, 0, 0, 0, 0, 11, 8, 18, 14, 17, 18, 15, 16, 21, 8, 2, 0, 0, 0, 18, 15, 18, 21, 19, 20, 21, 8, 9, 10, 11, 10, 0, 0, 8, 9, 10, 11, 12, 13, 14, 1, 2, 3, 4, 5, 12, 0, 1, 2, 3, 4, 5, 6, 7, 15, 16, 17, 18, 19, 20, 21, 15, 16, 17, 18, 19, 20, 21, 8, 9, 10, 11, 12, 13, 14, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
map09 : [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 7, 0, 3, 6, 17, 18, 11, 17, 18, 19, 20, 21, 8, 0, 14, 0, 10, 13, 0, 0, 0, 0, 0, 0, 0, 3, 15, 0, 21, 0, 17, 20, 20, 21, 8, 9, 10, 11, 0, 10, 2, 0, 6, 0, 2, 5, 0, 0, 0, 0, 0, 6, 0, 17, 9, 0, 13, 0, 9, 12, 0, 0, 2, 3, 0, 13, 0, 1, 16, 0, 20, 0, 16, 19, 0, 0, 9, 10, 0, 20, 0, 4, 3, 0, 5, 0, 1, 4, 0, 0, 16, 17, 0, 7, 0, 11, 10, 0, 12, 0, 8, 11, 0, 0, 1, 1, 0, 14, 0, 18, 17, 0, 19, 0, 15, 18, 0, 0, 8, 4, 0, 21, 0, 5, 4, 0, 4, 0, 7, 3, 0, 0, 15, 11, 0, 1, 0, 12, 11, 0, 11, 0, 14, 10, 0, 0, 2, 18, 0, 8, 0, 19, 18, 0, 18, 0, 21, 17, 0, 0, 9, 5, 0, 15, 0, 6, 5, 0, 1, 0, 0, 0, 0, 0, 16, 12, 0, 2, 0, 13, 12, 0, 8, 9, 10, 11, 12, 13, 14, 19, 0, 9, 0, 20, 19, 0, 0, 0, 0, 0, 0, 0, 8, 9, 0, 16, 0, 12, 15, 16, 17, 18, 19, 20, 21, 15, 16, 17, 0, 18, 0, 19, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
};
let map_col = 14;
let map_row = 34;
let secondPassed = 0;
let oldTimeStamp = 0;
let WIDTH = canvas.canvas.width;
let HEIGHT = canvas.canvas.height;
let right_arrow_keycode = 39;
let left_arrow_keycode = 37;
let a_keycode = 65;
let d_keycode = 68;
let pressLeft;
let pressRight;
let game_over;
let islevelUp;
let dt = 1/60.0;
let brickList;
let tilesets = {
tileset1: {
image: new Image(),
columns: 7,
rows: 3,
tile_width: 32,
tile_height: 16
}
};
tilesets.tileset1.image.src = "img/tileset/brick_tileset.png";
let heart_sprite_sheet = {
spin: {
frame_set : [0,1,2,3],
image : new Image()
}
}
heart_sprite_sheet.spin.image.src = "img/heart/heart_sprite.png";
let delay = 0;
let frame_set;
let level;
function newGame(){
document.querySelector(".mainMenu").style.display="none";
level = 0;
score = 0;
levelUp();
}
function restart(){
document.querySelector(".gameOver").style.display="none";
level -= 1;
levelUp();
}
function mainMenu(){
document.querySelector(".gameOver").style.display="none";
document.querySelector(".mainMenu").style.display="block";
}
function pickLevel(){
score = 0;
document.querySelector(".pickLevel").style.display="block";
document.querySelector(".mainMenu").style.display="none";
}
function loop(timeStamp){
getDeltaTime(timeStamp);
ballCollision();
ballMovement();
paddleMovement();
heartMovement();
heartAnimUpdate();
// document.getElementById("output").innerHTML = "gameover: " + game_over + ", islevelup: " + islevelUp;
draw();
if(!game_over && !islevelUp){
window.requestAnimationFrame(loop);
}
else if(game_over){
gameOver();
}
else if(islevelUp){
levelUp();
}
}
function Animation(){
this.count = 0
this.delay = delay;
this.frame = 0;
this.frame_index = 0;
this.frame_set = frame_set;
}
Animation.prototype.change = function(frame_set, delay){
if(this.frame_set != frame_set){
this.count = 0;
this.delay = delay;
this.frame_index = 0;
this.frame_set = frame_set;
this.frame = this.frame_set[this.frame_index];
}
}
Animation.prototype.update = function(){
this.count ++;
if(this.count >= this.delay){
this.count = 0;
this.frame_index =(this.frame_index == this.frame_set.length -1)?0: this.frame_index + 1;
this.frame = this.frame_set[this.frame_index];
}
}
function Ball(){
this.image = new Image(),
this.x = 250,
this.y = 450,
this.velocity = 150,
this.radius = 8,
this.dx = 1,
this.dy = -1
}
function ballReset(){
ball.x = paddle.x + paddle.width/2;
ball.y = 450;
ball.dx = 1;
ball.dy = -1;
ball.velocity = 150;
}
function drawBall(){
canvas.drawImage(ball.image, Math.floor(ball.x), Math.floor(ball.y), ball.radius*2, ball.radius*2);
}
function ballMovement(){
ball.x += (ball.velocity * deltaTime ) * ball.dx * 0.999;
ball.y += (ball.velocity * deltaTime ) * ball.dy * 0.999;
}
function ballCollision(){
//borders for ball
if(ball.y - ball.radius <= 0 && ball.y < 0){
ball.dy = ball.dy * -1;
ball.y = ball.radius;
}
if(ball.y > HEIGHT){
heartList.pop();
if(heartList.length == 0){
game_over = true;
}else{
ballReset();
}
}
if(ball.x + ball.radius > WIDTH && ball.x > 0){
ball.dx = ball.dx * -1;
ball.x = WIDTH-ball.radius;
}
if(ball.x - ball.radius < 0 && ball.x < 0){
ball.dx = ball.dx * -1;
ball.x = ball.radius;
}
// ball and paddle collision detection
let testX = ball.x;
let testY = ball.y;
if(ball.x < paddle.x){
testX = paddle.x;
//left
}
else if(ball.x > paddle.x+paddle.width){
testX = paddle.x + paddle.width;
//right
}
if(ball.y < paddle.y){
testY = paddle.y;
//top
}
else if(ball.y > paddle.y+ paddle.height){
testY = paddle.y + paddle.height;
//bottom
}
let distX = ball.x - testX;
let distY = ball.y - testY;
let distance = Math.sqrt((distX*distX)+(distY*distY));
if(distance <= ball.radius){
let collidePoint = ball.x - (paddle.x + paddle.width/2);
collidePoint = collidePoint / (paddle.width/2);
let angle = collidePoint * Math.atan2(ball.y, ball.x);
ball.dx = ball.velocity * deltaTime * Math.sin(angle);
ball.dy = -ball.velocity * deltaTime * Math.cos(angle);
}
//brick collision
for (let i = 0; i < brickList.length; i++){
let b = brickList[i];
if(b.status){
let bottom = false;
let top = false;
let b_testX = ball.x;
let b_testY = ball.y;
if(ball.x < b.x){
b_testX = b.x;
}
else if(ball.x > b.x + b.width){
b_testX = b.x + b.width;
}
if(ball.y < b.y){
b_testY = b.y;
top = true;
}
else if(ball.y > b.y + b.height){
b_testY = b.y + b.height;
bottom = true;
}
let distX_fromBrick = ball.x - b_testX;
let distY_fromBrick = ball.y - b_testY;
let distance = Math.sqrt((distX_fromBrick * distX_fromBrick) + (distY_fromBrick * distY_fromBrick));
if(distance < ball.radius){
let collidePoint = ball.x - (b.x + b.width/2);
collidePoint = collidePoint / (b.width/2);
let angle = collidePoint * Math.atan2(ball.y, ball.x);
if(top){
ball.dx = ball.velocity * deltaTime * Math.sin(angle);
ball.dy = -ball.velocity * deltaTime * Math.cos(angle);
}
if(bottom){
ball.dx = -ball.velocity * deltaTime * Math.sin(angle);
ball.dy = ball.velocity * deltaTime * Math.cos(angle);
}
b.status = false;
brokenBricks ++;
scoreUp();
if(brokenBricks == brickList.length){
islevelUp = true;
}
}
}
}
}
function Paddle(){
this.image = new Image(),
this.x = 200,
this.y = 490,
this.width = 64,
this.height = 20,
this.velocity = 500
}
function drawPaddle(){
canvas.drawImage(paddle.image, Math.floor(paddle.x), Math.floor(paddle.y),paddle.width,paddle.height);
}
function paddleMovement(){
if(pressRight&&paddle.x+paddle.width<WIDTH){
paddle.x += (paddle.velocity * deltaTime )*0.999;
}
if(pressLeft&&paddle.x>0){
paddle.x -= (paddle.velocity * deltaTime )*0.999;
}
}
function Brick(x,y){
this.image = new Image(),
this.x = x,
this.y = y,
this.width = 32,
this.height = 16,
this.status = true
}
function drawMap (){
for(let i = 0; i < map.length; i++){
let value = map[i]-1;
let source_x = (value%tilesets.tileset1.columns) * tilesets.tileset1.tile_width;
let source_y = Math.floor(value/tilesets.tileset1.columns) * tilesets.tileset1.tile_height;
let destination_x = (i%map_col) * tilesets.tileset1.tile_width;
let destination_y = Math.floor(i/map_col) * tilesets.tileset1.tile_height;
if(map[i] != 0){
if(!isBrickAlive(destination_x, destination_y)){continue;}
}
canvas.drawImage(tilesets.tileset1.image, source_x, source_y, tilesets.tileset1.tile_width, tilesets.tileset1.tile_height, destination_x, destination_y, tilesets.tileset1.tile_width, tilesets.tileset1.tile_height );
}
}
function createBrick(){
for(let i = 0; i<map.length; i++){
if(map[i] != 0){
let x = (i%map_col)*tilesets.tileset1.tile_width;
let y = Math.floor(i/map_col)*tilesets.tileset1.tile_height;
let brick = new Brick(x, y);
brickList.push(brick);
}
}
}
function isBrickAlive(x,y){
for(let i = 0; i < brickList.length; i++){
let brick = brickList[i];
if(brick.status && brick.x == x && brick.y == y){
return true;
}
}
}
function scoreUp(){
score += 1;
}
function scoreText(){
canvas.font = `15px gameFont`;
canvas.fillStyle = "white";
canvas.fillText("SCORE:"+ score, 8, 30);
}
function Heart(x,y){
this.image = new Image(),
this.animation = new Animation(),
this.x = x,
this.y = y,
this.width = 7,
this.height = 7
}
function heartCreate(){
let heart1 = new Heart(350,8);
heartList.push(heart1);
let heart2 = new Heart(375,8);
heartList.push(heart2);
let heart3 = new Heart(400,8);
heartList.push(heart3);
let heart4 = new Heart(425,8);
heartList.push(heart4);
}
function heartDraw(){
for(let i = 0; i < heartList.length; i++){
let heart = heartList[i];
canvas.drawImage(heart_sprite_sheet.spin.image, heart.width * heart.animation.frame, 0, heart.width, heart.height, heart.x, heart.y, heart.width*3, heart.height*3);
}
}
function heartMovement(){
for(let i = 0; i < heartList.length; i++){
let heart = heartList[i];
heart.image = heart_sprite_sheet.spin.image;
heart.animation.change(heart_sprite_sheet.spin.frame_set, 12);
}
}
function heartAnimUpdate(){
for(let i = 0; i < heartList.length; i++){
let heart = heartList[i];
heart.animation.update();
}
}
function draw(){
canvas.clearRect(0,0,WIDTH,HEIGHT);
canvas.imageSmoothingEnabled = false;
canvas.save();
drawBg();
drawMap();
drawPaddle();
scoreText();
heartDraw();
drawBall();
canvas.restore();
}
function keyDown(event){
if(event.keyCode === right_arrow_keycode || event.keyCode === d_keycode){
pressRight = true;
}
if(event.keyCode === left_arrow_keycode || event.keyCode === a_keycode){
pressLeft = true;
}
}
function keyUp(event){
if(event.keyCode === right_arrow_keycode || event.keyCode === d_keycode){
pressRight = false;
}
if(event.keyCode === left_arrow_keycode || event.keyCode === a_keycode){
pressLeft = false;
}
}
function drawBg(){
switch(level){
case 1:
canvas.beginPath();
canvas.fillStyle = "#76428A";
canvas.fillRect(0,0,WIDTH,HEIGHT);
canvas.closePath();
break;
case 2:
canvas.beginPath();
canvas.fillStyle = "#8C2929";
canvas.fillRect(0,0,WIDTH,HEIGHT);
canvas.closePath();
break;
case 3:
canvas.beginPath();
canvas.fillStyle = "#639BFF";
canvas.fillRect(0,0,WIDTH,HEIGHT);
canvas.closePath();
break;
case 4:
canvas.beginPath();
canvas.fillStyle = "#4B692F";
canvas.fillRect(0,0,WIDTH,HEIGHT);
canvas.closePath();
break;
case 5:
canvas.beginPath();
canvas.fillStyle = "#9BADB7";
canvas.fillRect(0,0,WIDTH,HEIGHT);
canvas.closePath();
break;
case 6:
canvas.beginPath();
canvas.fillStyle = "#D95763";
canvas.fillRect(0,0,WIDTH,HEIGHT);
canvas.closePath();
break;
case 7:
canvas.beginPath();
canvas.fillStyle = "#3F3F74";
canvas.fillRect(0,0,WIDTH,HEIGHT);
canvas.closePath();
break;
case 8:
canvas.beginPath();
canvas.fillStyle = "#663931";
canvas.fillRect(0,0,WIDTH,HEIGHT);
canvas.closePath();
break;
case 9:
canvas.beginPath();
canvas.fillStyle = "#DF7126";
canvas.fillRect(0,0,WIDTH,HEIGHT);
canvas.closePath();
break;
default:
canvas.beginPath();
canvas.fillStyle = "#639BFF";
canvas.fillRect(0,0,WIDTH,HEIGHT);
canvas.closePath();
break;
}
//açık mavi: 639BFF
//mor: 76428A
//yeşil: 4B692F
//pembe: D77BBA
//turuncu: DF7126
//koyu mavi: 3F3F74
//pembe-kırmızı: D95763
//koyu mor: 45283C
//baby-blue: 9BADB7
//mavi: 5B6EE1
//koyu kırmızı: 8C2929
}
function getDeltaTime(timeStamp){
secondPassed = (timeStamp - oldTimeStamp) / 1000;
oldTimeStamp = timeStamp;
deltaTime = Math.min(secondPassed , dt);
return deltaTime;
}
function startGame(){
secondPassed = 0;
oldTimeStamp = 0;
brokenBricks = 0;
game_over = false;
pressLeft = false;
pressRight = false;
islevelUp = false;
brickList = new Array();
heartList = new Array();
createBrick();
heartCreate();
draw();
startEngine();
}
function startEngine(){
window.requestAnimationFrame(loop);
}
function gameOver(){
document.querySelector(".gameOver").style.display="block";
document.getElementById("score").innerHTML = score;
score = 0;
}
function levelUp(){
ball = new Ball();
paddle = new Paddle();
level++;
switch(level){
case 1:
map = levels.map01;
ball.image.src = "img/ball/blue_ball.png";
paddle.image.src = "img/paddle/black_paddle.png";
break;
case 2:
map = levels.map02;
ball.image.src = "img/ball/green_ball.png";
paddle.image.src = "img/paddle/blue_paddle.png";
break;
case 3:
map = levels.map03;
ball.image.src = "img/ball/purple_ball.png";
paddle.image.src = "img/paddle/brown_paddle.png";
break;
case 4:
map = levels.map04;
ball.image.src = "img/ball/red_ball.png";
paddle.image.src = "img/paddle/golden_paddle.png";
break;
case 5:
map = levels.map05;
ball.image.src = "img/ball/yellow_ball.png";
paddle.image.src = "img/paddle/green_paddle.png";
break;
case 6:
map = levels.map06;
ball.image.src = "img/ball/blue_ball.png";
paddle.image.src = "img/paddle/purple_paddle.png";
break;
case 7:
map = levels.map07;
ball.image.src = "img/ball/red_ball.png";
paddle.image.src = "img/paddle/red_paddle.png";
break;
case 8:
map = levels.map08;
ball.image.src = "img/ball/yellow_ball.png";
paddle.image.src = "img/paddle/black_paddle.png";
break;
case 9:
map = levels.map09;
ball.image.src = "img/ball/purple_ball.png";
paddle.image.src = "img/paddle/blue_paddle.png";
break;
default:
game_over = true;
break;
}
startGame();
}});

Related

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 28 days ago.
Improve this question
How can I yield the same output in Javascript, given this Python example?
I want to loop over an array and check a value, if condition met, store it.
arr1 = [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 7, 7, 0, 0, 0, 0, 0, 0, 0,
13, 13, 0, 0, 0, 0, 0, 0, 0, 0, 13, 13, 0, 0, 0, 0, 0, 0,
0, 0, 0, 15, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 14, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0,
0, 0]
new_labels = []
previous = None
for l in arr1:
if l != previous:
new_labels.append(l)
previous = l
# expected:
[0, 7, 0, 13, 0, 13, 0, 15, 0, 14, 0, 2, 0]

This can be done more simply with Array#filter.
let arr1 = [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 7, 7, 0, 0, 0, 0, 0, 0, 0,13, 13, 0, 0, 0, 0, 0, 0, 0, 0, 13, 13, 0, 0, 0, 0, 0, 0,0, 0, 0, 15, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 14, 0, 0,0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0,0, 0];
let res = arr1.filter((x, i) => x !== arr1[i - 1]);
console.log(JSON.stringify(res));

In the image A-L is the longest path, but L-M is the heaviest
The heaviest path of the graph is the path with the most edges connected to it, for this current case the heaviest path is L-M with 19 edges: L-K, K-J, J-I, I-H, H-G, G-F, F-E, F-M, M-N, M-O, M-P, M-Q, M-R, M-S, M-T, M-U, M-V, M-W, M-X.
I am trying to create a program that will check that the inputted matrix represents a tree graph, and if it does, that returns the number of edges on the heaviest path of the graph. In other words it will return the M(d) of the graph.
For this current case the output will be the number of edges connected to L-M path which is 19.
But I can not find a way to do that. Here I created a function to find the row with the least 1s to set it as a root, but don't know how to proceed.
let matrix = [
[0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
//find row with least 1s
function findRowWithLeastOnes(matrix_data) {
let counter = 0;
let row = 0;
for (let i = 0; i < matrix_data.length; i++) {
for (let j = 0; j < matrix_data[i].length; j++) {
if (matrix_data[i][j] === 1) {
counter++;
}
}
if (counter < matrix_data.length) {
row = i;
console.log(row);
return row;
}
}
}
findRowWithLeastOnes(matrix);

We can use the following algorithm:
Turn the matrix into an adjacency list so to avoid scanning zeroes all the time, and to have easy access to the degree of a node, which contributes to the weight.
Choose any node to start with (e.g. 0) and find the heaviest path from it. We can use a depth-first search for that (for instance, using recursion). From all paths that are found, keep the heaviest. To avoid an edge being traversed back and forth, remember what the previous node was in the traversal: it should not be revisited. If there was a previous node, we should avoid counting the traversed edge twice in the sum of weights.
Take the last node in that path: this is the node that is the furthest away from our starting node in terms of weight. This node will be an end-point of the heaviest path we are looking for.
Use the same algorithm a second time to find the heaviest path from that node. This is the path we need.
If your question is also about determining whether a graph is a tree, you would essentially need to check there are no cycles (a depth first traversal can be used again) and that from one node all others can be reached (again depth first can serve). Maybe you'd also want to check that the graph is undirected, i.e. that the matrix is mirrored along the main diagonal.
function isUndirected(matrix) {
if (matrix.length !== matrix[0]?.length) return false; // must be square
for (let i = 0; i < matrix.length; i++) {
for (let j = i; j < matrix.length; j++) {
if (matrix[i][j] !== matrix[j][i]) return false;
}
}
return true;
}
function isTree(matrix) {
const visited = Array(matrix.length).fill(false);
function dfs(node, previous=-1) {
if (visited[node]) return false; // cycle
visited[node] = true;
const neighbors = matrix[node];
for (let neighbor = 0; neighbor < neighbors.length; neighbor++) {
if (neighbor != previous && neighbors[neighbor] && !dfs(neighbor, node)) return false;
}
return true;
}
// When no cycles were found and all nodes were reachable from node 0 => tree!
return dfs(0) && !visited.includes(false);
}
function findHeaviestPathFrom(adj, node, previous=-1) {
const neighbors = adj[node];
let heaviest = {
nodes: [],
weight: 0
};
for (let neighbor of neighbors) {
if (neighbor != previous) {
const path = findHeaviestPathFrom(adj, neighbor, node);
if (path.weight > heaviest.weight) heaviest = path;
}
}
heaviest.nodes.push(node);
heaviest.weight += neighbors.length - (previous !== -1)
return heaviest;
}
function findHeaviestPath(matrix) {
// Turn the matrix into an adjacency list
let adj = matrix.map(row => row.map((isEdge, i) => isEdge ? i : -1).filter(i => i > -1));
// Find the node that has the heaviest connection to node 0
let remote = findHeaviestPathFrom(adj, 0).nodes[0];
// Find heaviest path starting in that node
return findHeaviestPathFrom(adj, remote);
}
const matrix = [
[0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
];
if (!isUndirected(matrix)) console.log("The graph is directed");
else if (!isTree(matrix)) console.log("The graph is not a tree");
else console.log("Heaviest path: ", JSON.stringify(findHeaviestPath(matrix)));

i asked a similar question a couple of hours ago but was unable to solve it thus far.
I have simplified my code, run it through JSHint, checked it with a fine tooth comb for errors and I still cannot get it to draw my map.
My sprites are saved in the correct location so that's not the issue.
It must be my code, but I'm baffled. Please see code:
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var pathSpr = new Image();
pathSpr.src = "sprites/spr_path.png";
var wallSpr = new Image();
wallSpr.src = "sprites/spr_wall.png";
var tilePosX = 0;
var tilePosY = 0;
var tileSize = 25;
var mapArray = [
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
];
function drawMap() {
for (var cols = 0; cols < mapArray.length; cols++) {
for (var rows = 0; rows < mapArray[cols].length; rows++) {
if (mapArray[cols][rows] == 0) {
ctx.drawImage(pathSpr, tilePosX, tilePosY, tileSize, tileSize);
}
if (mapArray[cols][rows] == 1) {
ctx.drawImage(wallSpr, tilePosX, tilePosY, tileSize, tileSize);
}
tilePosX += tileSize;
tilePosY += tileSize;
}
}
}
function clearCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.length);
}
function draw() {
drawMap();
}
function run() {
clearCanvas();
draw();
}
setInterval(run, 100);
I am trying to iterate through y mapArray and draw tiles based on the number in each of the positions in the array.
I am sure that I must be making errors in my code but I just can't see where. Please read and provide any suggestion you can.
Thank you

You have two major problems:
You are using the images without knowing if they're already been loaded or not.
In your draw function, you're incrementing tilePosX += tileSize; and tilePosY += tileSize; but you never reset them to 0, so after the first frame, the draw function will draw them outside the visible area, thus not working properly.
Here is the working code (with comments), I added a mechanism to load images before using them, and changed the draw function so it won't use the unecessary tilePosX and tilePosY (that can be calculated using the indexes i and j of the current tile):
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// ###########################################################################
// image srcs should be in an array to facilitate the loading process bellow
var images = [
"http://via.placeholder.com/25/f00?text=+",
"http://via.placeholder.com/25/0f0?text=+"
];
// ###########################################################################
// only needing tileSize
var tileSize = 25;
var mapArray = [
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
];
function drawMap() {
mapArray.forEach(function(row, j) { // for each subarray (row) in myArray
row.forEach(function(cell, i) { // for each element (cell) in that row
ctx.drawImage(images[cell], // draw the image from the array images where cell represents the index
i * tileSize, // posX = i * tileSize (i is the index of this cell from the row array)
j * tileSize, // posY = j * tileSize (j is the index of this row from the myArray array)
tileSize, tileSize);
});
});
}
function clearCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.length);
}
function draw() {
drawMap();
}
function run() {
clearCanvas();
draw();
}
// ###########################################################################
// a function that takes an array of srcs and replace them with their equivalent images, when the whole array is loaded, it calls the callback function.
function loadImages(images, callback) {
var n = images.length; // store the number of images as counter
function checkIfDone() { // this will be called each time an image gets loaded
n--; // we just decrement the counter of remaining images
if (n === 0) callback(); // if the counter reaches 0 (no more images to load, all are loaded) then we call the callback function
}
images.forEach(function(src, i) { // for each src in the array images
var img = new Image(); // create a new image
img.onload = checkIfDone; // when this image gets loaded call checkIfDone
// img.onerror = ...; // if any error occured while loading the image
img.src = src; // haha obvious
images[i] = img; // replace the src from the array with the image itself
});
}
loadImages(images, function() { // call loadImages on our array of srcs images and passing a function that starts the party once all images are loaded
setInterval(run, 100);
});
// ###########################################################################
<canvas width=800 height=800 id="myCanvas"></canvas>

I am trying to create a graph to display performance of a system. My issue is that Higcharts, for some reason, won't recognize that I have more than one series. The first series displays perfectly, however the second is no where to be seen.
I am using Django 1.8 to loop the data from dictionaries.
My series code:
series: [
{% for ID, run in attDict.items|sort %}
{
yAxis: 0,
id: "Run" + {{forloop.counter}},
name: "RunID " + {{ID}},
color: getLineColor({{ID}}),
data: {{run}},
marker: {
fillColor: getFillColor({{forloop.counter}}),
},
visible: false
},
{% endfor %}
{% for key, task in TaskE.items|sort %}
{
yAxis: 1,
id: "during",
linkedTo: "Run" + {{forloop.counter}},
name: "Duringtask for run " + {{key}}
type: 'area',
color: '#12e000',
fillOpacity: 0.3,
data: {{task}},
visible: fasle
}{% if forloop.last %}{% else %},{% endif %}
{% endfor %}
]
The output look like this:
series: [
{
yAxis: 0,
id: "Run" + 1,
name: "RunID " + 250,
color: getLineColor(250),
data: [0, 0, 0, 0, 0, 0, 6, 33, 27, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 83, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
marker: {
fillColor: getFillColor(1),
},
visible: false
},
{
yAxis: 0,
id: "Run" + 2,
name: "RunID " + 256,
color: getLineColor(256),
data: [0, 0, 0, 1, 0, 0, 0, 0],
marker: {
fillColor: getFillColor(2),
},
visible: false
},
{
yAxis: 0,
id: "Run" + 3,
name: "RunID " + 257,
color: getLineColor(257),
data: [0, 0, 0, 1, 0, 0, 0, 0],
marker: {
fillColor: getFillColor(3),
},
visible: false
},
{
yAxis: 0,
id: "Run" + 4,
name: "RunID " + 265,
color: getLineColor(265),
data: [83, 0, 101, 0, 0, 96, 0],
marker: {
fillColor: getFillColor(4),
},
visible: false
},
{
yAxis: 0,
id: "Run" + 5,
name: "RunID " + 295,
color: getLineColor(295),
data: [14, 3, 0, 0, 0, 8, 0, 0, 0, 0, 0, 0, 0, 70, 0, 0, 0, 37, 0, 0, 0, 0, 0, 9, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 83, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 52, 0, 0, 0, 0, 0, 0, 0, 45, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 77, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 0, 0, 0, 0, 0, 16, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 67, 0, 0, 0, 8, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 88, 0, 0, 0, 0, 14, 0, 0, 0, 0, 0, 0, 0, 0, 0, 16, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 32, 0, 0, 3, 0, 58, 0, 0, 0, 0, 0, 0, 0, 0, 14, 0, 0, 0, 0, 0, 0, 0, 0, 0],
marker: {
fillColor: getFillColor(5),
},
visible: false
},
{
yAxis: 0,
id: "Run" + 6,
name: "RunID " + 296,
color: getLineColor(296),
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 116, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 17, 0, 0, 0, 1, 0, 0, 0, 0, 28, 15],
marker: {
fillColor: getFillColor(6),
},
visible: false
},
]

You are explicitly telling the chart not to show the series in the legend by using this:
linkedTo: "Run" + {{forloop.counter}}
When two series are linked, only the first one appears in the legend.
Toggling the visibility of this also toggles the linked series.
Reference:
http://api.highcharts.com/highcharts/plotOptions.series.linkedTo
Remove the linkedTo property from the second loop, and it should work fine.

I am trying to read in a tilemap that is in a JSON format. Here's the tilemap:
var obj = {
"height": 20,
"layers": [{
"data": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 6, 6, 6, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 9, 9, 9, 9, 9, 0, 0, 0, 0, 0, 3, 7, 7, 3, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 0, 0, 0, 0, 0, 0, 0, 0, 1, 2, 2, 2, 7, 7, 7, 7, 7, 3, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 7, 7, 7, 7, 8, 8, 7, 7, 8, 8, 8, 8, 8, 0, 0, 0, 0, 0, 0, 0, 0, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 7, 7, 8, 7, 7, 8, 7, 7, 7, 7, 8, 8, 8, 0, 0, 0, 0, 0, 0, 0, 0, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7],
"height": 20,
"name": "Tile Layer 1",
"opacity": 1,
"type": "tilelayer",
"visible": true,
"width": 50,
"x": 0,
"y": 0
}],
"nextobjectid": 1,
"orientation": "orthogonal",
"properties": {},
"renderorder": "right-down",
"tileheight": 64,
"tilesets": [{
"firstgid": 1,
"image": "tileset.png",
"imageheight": 128,
"imagewidth": 320,
"margin": 0,
"name": "tileset",
"properties": {},
"spacing": 0,
"tilecount": 10,
"tileheight": 64,
"tilewidth": 64
}],
"tilewidth": 64,
"version": 1,
"width": 50
};
Here's the code I use to read it in:
var levelData = JSON.parse(xhr.responseText);
var lvlHeight = levelData.height;
var lvlWidth = levelData.width;
var tilesets = levelData.tilesets;
var tilesetWidth = tilesets[0].imagewidth;
var tilesetHeight = tilesets[0].imageheight;
var tileWidth = levelData.tilesets[0].tilewidth;
var tileHeight = levelData.tilesets[0].tileheight;
var tileCount = levelData.tilesets[0].tilecount;
var layers = levelData.layers;
// print out levelData to see if it works
for(var j = 0; j < levelData.layers[0].data.length; ++j) {
console.log(levelData.layers[0].data[i]);
}
for(var i = 0; i < layers.length; ++i) {
that.mapLayers.push(new TileMapLayer(lvlWidth, lvlHeight, tileWidth, tileHeight, layers[i].name, tilesetWidth, tilesetHeight, tileCount, layers[i].data));
}
However, whenever I try to log it to the console, I always get undefined. Could someone please tell me what's wrong?

you are printing i in index instead of j
for (var j = 0; j < levelData.layers[0].data.length; ++j) {
console.log(levelData.layers[0].data[i]); // <= should be j
}
Try like this
for (var j = 0; j < levelData.layers[0].data.length; ++j) {
console.log(levelData.layers[0].data[j]);
}