Develop Reference

Angular rxjs : The List Object map method is not consistency?

I don't know why my code is returning unexpected output, I assume I am not familiar with the logic how to use map method. The map return confirms and schedules separately. I would like to get the result as below, but it output empty list twice. sometime the first one is empty, the example below I gave is the other result. Any help will be much appreciated!
This is a typescript code using rxjs map if i understand right.
Code here:
const confirms = this.List.map(r => {
console.log('confirmed',r.map(c => c.ConfirmedCapacity));
return r.map(c => c.ConfirmedCapacity)[etaIndex];
});
const schedules = this.List.map(r => {
console.log('scheduled',r.map(c => c.ConfirmedCapacity));
return r.map(c => c.ScheduledCapacity)[etaIndex];
});
Expected result:
confirmed (21) [0, 0, 0, 0, 0, 0, 0, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
scheduled (21) [0, 0, 0, 0, 0, 0, 0, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
Get :
confirmed (21) [0, 0, 0, 0, 0, 0, 0, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
confirmed (21) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
scheduled (21) [0, 0, 0, 0, 0, 0, 0, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
scheduled (21) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]

How to find the weight of the heaviest path of an undirected, unweighted graph (M(d) of the graph), using adjacency matrix

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)));

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

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();
}});

Converting a level string to an array in a completely different format in Javascript

I need to convert
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,]
To
[[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4],]
I am still very new at Javascript, and I am trying to work on a level editor for a game that I am modifying. I can't change the way that either the level editor or the actual game loads levels, so my only option is to convert the formats. I am really bad at explaining my code, but the level is loaded in-game using "level[x][y]", with blocks being represented by numbers in an array. I have been working on this for several days, so any help would be appreciated. The width of the level will vary, being at least 20, but the height will always be 15. Both levels start at (0,0). Thank you for your time.
UPDATE:
I need to do something like this:
Convert
'1,2,3,4,5,6,7,8,9' to
[['1','4','7',],['2','5','8'],['3','6','9']]
(Obviously it would be bigger than this)
I can also access the width of the level and use that in the code, and the height will always be 15.
UPDATE:
I figured it out. Thank you all so much for your help. Here is the code:
function parseLvlObj(lvlObj) {
lvl = lvlObj.level.split(',');
lvlHeight = lvlObj.levelheight;
lvlWidth = lvlObj.levelwidth;
done1 = [];
var i,j,temparray,chunk = lvlObj.levelwidth;
k = 0;
for (i=0,j=lvl.length; i<j; i+=chunk) {
temparray = lvl.slice(i,i+chunk);
done1[k] = temparray;
k = k + 1;
}
done = [];
done1.pop();
i = 0;
j = 0;
while (i < lvlObj.levelwidth) {
done[i] = [];
while (j < lvlObj.levelheight) {
done[i][j] = done1[j].pop();
j = j + 1;
}
i = i + 1;
j = 0;
}
lvlObj.level = done;
return lvlObj;
}
level = {"level":"0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,","levelwidth":20,"levelheight":15,"exitX":100,"exitY":100};
console.log(parseLvlObj(level))

Use split, splice and Array.from will simplify.
const chunks = (str, size) => {
const arr = str.split(",");
return Array.from({ length: Math.ceil(arr.length / size) }, (_, i) =>
arr.slice(i * size, (i + 1) * size)
);
};
const str = "1,2,3,4,5,6,7,8,9";
console.log(chunks(str, 3));
console.log(chunks(str, 4));

What you're looking for is commonly called Chunking. Unfortunately there isn't a clean chunker in Javascript (right now). I've created a simple one, below to show how this is done.
var level = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, ]
function chunk(arrayInput, chunkSize) {
var outArray = []
while (arrayInput.length) {
outArray.push(arrayInput.splice(0, chunkSize))
}
return outArray;
}
var chunkedLevel = chunk(level,30);
console.log(chunkedLevel)

You could use the slice() method doing something like this:
Array.prototype.chunk = function (chunkSize) {
const chunkedArray = [];
for (let i = 0; i < this.length; i += chunkSize) {
chunkedArray.push(this.slice(i, i + chunkSize));
}
return chunkedArray;
};
Now you just have to use chunk() on your original array:
const string = "0,1,2,3,4,5,6,7";
// Remove whitespaces and split on each ','
const array = string.replace(/ /g, '').split(',');
const chunked = array.chunk(2);
console.log(chunked);
// [ [ 0, 1 ], [ 2, 3 ], [ 4, 5 ], [ 6, 7 ] ]

JavaScript JSON array undefined

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]);
}