Related
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'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();
}});
I am making a super mario game and the map for it is made from an array. like so
const map =
[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, 2, 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, 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,];
In order to make collisions i want to find the index of the block that is under mario, and check whether its 0 or something else, which would allow me to make him stop falling when a block with the index 1 is under him.
I am trying to write it like this:
export function findBlockUnder(posX: number, posY: number) {
for (let index = 0; index < map.length; index++) {
return map[index] }
}
But this returns the first index of the array.
Is there a way to get the index from the position Y of mario?
assuming you have defined the width and height of your map :
function findBlockUnder(posX: number, posY: number) {
return map[posY * width + posX]
}
Assuming the entries in the array represent left to right, top to bottom, and you know how many columns there are in the map, you can look up a given position via:
const GRID_COLUMNS = 32; // or whatever
function findBlockUnder(x, y) {
return map[ y * GRID_COLUMNS + x ]
}
However, if you broke your map into a two-dimensional array such that each entry represented a row of cell values, you could then access a given cell via rows[y][x]. (It might be more intuitive if it were chunked into columns instead of rows so the x would come first, but for the purposes of this discussion this is fine.)
The snippet below demonstrates this idea, rendering the map onto a canvas and then highlighting a cell at random and displaying its coordinates and value. Most of the code here is to support the drawing and highlighting but it seemed useful to have a visualization.
const map = [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, 2, 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, 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,
];
// splits the input array into arrays of the given length
function chunk(data, size, prev = []) {
prev.push(data.splice(0, size));
return data.length ? chunk(data, size, prev) : prev;
}
const numCols = 32;
// break map into an array rows, 32 cells per row
// so we can access a row via rows[y], and a specific
// cell via rows[y][x]
const rows = chunk(map, numCols);
// random cell highlighting interval
const rate = 2000;
// container for text output
const outputDiv = document.getElementById('output');
// get the canvas and its drawing context
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
// compute cell size based on canvas size
// and the number of rows and columns
const cellSize = {
width: ctx.canvas.width / numCols,
height: ctx.canvas.height / rows.length
}
// define some colors
const colors = ['bisque', 'tomato'];
// gap between cells
const inset = 1;
// initial paint of the cells
rows.forEach((columns, r) => {
columns.forEach((value, c) => {
drawCell(c, r);
});
})
// utility for filling the cell at x, y.
// if color isn't unspecified it'll use the map's value to get a color
function drawCell(x, y, color) {
ctx.fillStyle = color || colors[rows[y][x] % colors.length];
ctx.fillRect(x * cellSize.width + inset, y * cellSize.height + inset, cellSize.width - inset, cellSize.height - inset);
}
// chooses a cell at random and highlights it
function highlightRandomCell() {
// choose a random coordinate
const x = Math.floor(Math.random() * (numCols - 1));
const y = Math.floor(Math.random() * rows.length);
// get the cell's value
const cellValue = rows[y][x];
// display the coordinate and its value in the output div
outputDiv.innerHTML = `(${x}, ${y}) ${cellValue}`;
// fill the cell
drawCell(x, y, 'black');
// reset the cell
setTimeout(() => drawCell(x, y), rate);
}
// highlight some cells
setInterval(highlightRandomCell, rate);
<canvas width="200" height="112"></canvas>
<div id="output"></div>
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]);
}
I use Tiled to make a map. However when rendering the map in Phaser the transparency doesn't seem to work.
It works as expected in Tiled:
Unfortunately not when rendered with Phaser:
main.js:
var game = new Phaser.Game(320, 320, Phaser.AUTO, 'mquest', { preload: preload, create: create });
function preload() {
game.load.tilemap('test', 'assets/js/maps/test.json', null, Phaser.Tilemap.TILED_JSON);
game.load.image('forest_tiles', 'assets/img/forest_tiles.png');
}
function create() {
game.stage.backgroundColor = '#787878';
map = game.add.tilemap('test');
map.addTilesetImage('Forest', 'forest_tiles');
backgroundLayer = map.createLayer('Background');
foregroundLayer = map.createLayer('Foreground');
topLayer = map.createLayer('Top');
backgroundLayer.resizeWorld();
}
And the test.json:
{ "height":20,
"layers":[
{
"data":[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, 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, 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, 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, 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, 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, 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, 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, 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, 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, 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, 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, 1, 1, 1, 1],
"height":20,
"name":"Background",
"opacity":1,
"type":"tilelayer",
"visible":true,
"width":20,
"x":0,
"y":0
},
{
"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, 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, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
"height":20,
"name":"Foreground",
"opacity":1,
"type":"tilelayer",
"visible":true,
"width":20,
"x":0,
"y":0
},
{
"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, 5, 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, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
"height":20,
"name":"Top",
"opacity":1,
"type":"tilelayer",
"visible":true,
"width":20,
"x":0,
"y":0
}],
"orientation":"orthogonal",
"properties":
{
},
"renderorder":"right-down",
"tileheight":16,
"tilesets":[
{
"firstgid":1,
"image":"..\/..\/img\/forest_tiles.png",
"imageheight":160,
"imagewidth":240,
"margin":0,
"name":"Forest",
"properties":
{
},
"spacing":0,
"tileheight":16,
"tilewidth":16,
"transparentcolor":"#ffffff"
}],
"tilewidth":16,
"version":1,
"width":20
}
I thought the engine handled the transparency if a transparentcolor property was set as it was through Tiled, but apparently not.
The problem was solved when just transparent the white color through a software like Photoshop or Gimp.