Phaser. Moving game character on 2d grid, along fixed path

Phaser. Moving game character on 2d grid, along fixed path - javascript

Started working with Phaser making my first game and so far progress has been fine, but I have hit a snag, where my inexperience is getting the best of me.
So the situation is as follows. I have a map generated from a 2D matrix. The Purple tiles in the picture.
var testMap = [
[0, 0, 0, 1, 1, 1, 1, 1],
[0, 1, 1, 1, 1, 1, 0, 1],
[0, 0, 0, 0, 0, 1, 1, 1],
[1, 1, 0, 0, 0, 0, 0, 0],
[1, 1, 0, 0, 0, 0, 0, 0],
[1, 0, 0, 0, 0, 0, 0, 0],
[1, 0, 1, 1, 1, 1, 1, 1],
[1, 0, 0, 0, 0, 1, 1, 1],
[1, 0, 1, 1, 0, 1, 1, 1],
[1, 0, 1, 1, 0, 1, 1, 1],
[1, 0, 1, 1, 0, 1, 1, 1],
[1, 0, 1, 1, 0, 1, 1, 1],
[1, 0, 1, 1, 0, 1, 1, 1],];
And I have a range of tiles around the player, that he can move to. The Green tiles in the picture.
I've also made a system that reads the mouse location and generates a path to the tile that the mouse is over. I have this path information in an array. The White tiles in the picture.
var path = [[3,3],[4,3],[5,3],[5,4],[5,5]];
And now I want to make the player move along this path, by using the coordinates of the path array. And ideally have a function in between, that checks if the player has stepped on a trap when he steps on a new tile while moving.
But I keep hitting a wall with this function. Any and all ideas would be a appreciated.

See this example. It's about tween interpolations, but illustrates a tween along a path as well. Basically instead of a single value for x, you pass an array.

Related

How to write out n*n Matrix values in JavaScript?

I'm new to JavaScript, so I decided to try to make a simple n*n Array. When I'm trying to write it out, I get, something starnge back.
var map = [
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 2, 3, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 3, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
];
function GoTh() {
for (var i = 0; i < map.length; i++) {
for (var j = 0; j < map[i].length; j++) {
console.log(map[i][j]);
}
}
}
GoTh();
I expected it to write all 100 values, but it gives back this:
1 2 3 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 3 1

That's because same-value console.logs are grouped together in browsers' consoles.
This can usually be disabled, i.e. in Chrome & Opera:
In Firefox it's in console's settings (press F1 while using console)
Another option is to write more data along with the value, eg.:
console.log(i, j, map[i][j]);

The problem is the ouput in the console itself. If there are multiple similar entries - like the first 10 elements of value 1 in the first row plus the 1 in the second row, it will be grouped as a single entry of 11. You can see that there are multiple if you look to the right of a particular entry.

JS and JSON - how find number of position

I have JSON file with users_id array. On this array I have active users, so this numbers are not sequential. How I can check (on jQuery) number of position users_id = 18 (answer = 3)? Next I want read value from other string so I can read json.data_todo_counter[3].
{
"users_id": [1, 2, 3, 18, 24],
"data_chat_timeread": [0, 0, 0, 0, 0],
"data_chat_timecurrent": [100, 0, 0, 0, 0],
"data_chat_counter": [4, 0, 0, 0, 0],
"data_todo_counter": [2, 0, 0, 0, 0]
}

This function searches for the key in the keyMember of input and if found, it returns the element of valueMember at the found index:
function getSomething(input, key, keyMember, valueMember) {
var index = input[keyMember].indexOf(key);
if (index >= 0) {
return input[valueMember][index];
} else {
/not found
}
}
Example usage:
getSomething({
"users_id": [1, 2, 3, 18, 24],
"data_chat_timeread": [0, 0, 0, 0, 0],
"data_chat_timecurrent": [100, 0, 0, 0, 0],
"data_chat_counter": [4, 0, 0, 0, 0],
"data_todo_counter": [2, 0, 0, 0, 0]
}, 18, "users_id", "data_todo_counter");

Animation in Visual 2D Arrays

I'm currently making a Pacman ghost with visual 2D arrays. I want the ghost to move like this:
I think I would use CSS transitions, but I'm not sure how! If there's a way to do it in javascript, that would be just as helpful. Here is my code:
<!doctype html>
<html>
<head>
<title>Visualizing 2D arrays</title>
<style>
#stage {
position:relative;
}
.cell {
position:absolute;
width:30px;
height:30px;
border:1px solid black;
background-color:black;
}
</style>
</head>
<body>
<div id="stage"></div>
<script>
// GRAB A REFERENCE TO THE STAGE
var stage = document.querySelector("#stage");
// THE 2D ARRAY THAT DEFINES THE PATTERN
var pattern = [
[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,0,0,0,0,0,0],
[0,0,0,0,1,1,1,1,1,1,1,1,0,0,0,0],
[0,0,0,1,1,1,1,1,1,1,1,1,1,0,0,0],
[0,0,1,2,2,1,1,1,1,2,2,1,1,1,0,0],
[0,0,2,2,2,2,1,1,2,2,2,2,1,1,0,0],
[0,0,3,3,2,2,1,1,3,3,2,2,1,1,0,0],
[0,1,3,3,2,2,1,1,3,3,2,2,1,1,1,0],
[0,1,1,2,2,1,1,1,1,2,2,1,1,1,1,0],
[0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
[0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
[0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
[0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
[0,1,1,0,1,1,1,0,0,1,1,1,0,1,1,0],
[0,1,0,0,0,1,1,0,0,1,1,0,0,0,1,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
];
// THE SIZE OF EACH CELL
var SIZE = 30;
// THE SPACE BETWEEN EACH CELL
var SPACE = 10;
// DISPLAY THE ARRAY
var ROWS = pattern.length;
var COLS = pattern[0].length;
// CREATE THE DIVS and POSITION THEM IN THE STAGE... BUT DON'T WORRY ABOUT COLORING THEM HERE!!!!
for (var row = 0; row < ROWS; row++) {
for (var col = 0; col < COLS; col++) {
// CREATE A DIV HTML ELEMENT CALLED CELL
var cell = document.createElement("div");
// SET ITS CSS CLASS TO CELL
cell.setAttribute("class", "cell");
// GIVE EACH OF THE CREATED DIVS A UNIQUE ID
// BASED ON THE ROW# AND COL#
// EXAMPLE : <div id="c-1-2" class="cell"></div>
// In this example, row = 1 and col = 2
cell.setAttribute("id", "c-" + row + "-" + col);
// ADD A CLICK HANDLER TO EACH OF THE INDIVIDUAL DIVS
cell.addEventListener("click", cellClick, false);
// ADD THE DIV HTML ELEMENT TO THE STAGE
stage.appendChild(cell);
// POSITION THE CELL IN THE CORRECT PLACE
// WITH 10 PIXELS OF SPACE AROUND IT
cell.style.top = row * (SIZE + SPACE) + "px";
cell.style.left = col * (SIZE + SPACE) + "px";
}
}
colorizeDivs();
function cellClick() {
// RIP APART THE DIV ID THAT WAS CLICKED ON
// WERE HIDING THE ROW AND COLUMN IN THE ID
// THE FORMAT OF THE ID IS "C-ROW#-COL#"
// EXAMPLE : <div id="c-1-2" class="cell"></div>
// In this example, row = 1 and col = 2
var zpos;
// THE "this" KEYWORD RETURNS THE HTML ELEMENT THAT WAS CLICKED ON
var thisid = this.id;
zpos = thisid.indexOf("-");
thisid = thisid.substr(zpos+1);
zpos = thisid.indexOf("-");
var thisRow = thisid.substr(0,zpos);
var thisCol = thisid.substr(zpos+1);
// now that we have the row and column for this div... change the array
pattern[thisRow][thisCol] += 1;
if (pattern[thisRow][thisCol] > 7) {
pattern[thisRow][thisCol] = 0;
}
colorizeDivs();
}
function colorizeDivs() {
for (var row = 0; row < ROWS; row++) {
for (var col = 0; col < COLS; col++) {
var cell = document.querySelector("#c-" + row + "-" + col);
if (pattern[row][col] === 0) {
cell.style.backgroundColor = "black";
} else if (pattern[row][col] === 1) {
cell.style.backgroundColor = "orange";
} else if (pattern[row][col] === 2) {
cell.style.backgroundColor = "white";
} else if (pattern[row][col] === 3) {
cell.style.backgroundColor = "blue";
} else if(pattern[row][col] === 4) {
cell.style.backgroundColor = "green";
} else if(pattern[row][col] === 5) {
cell.style.backgroundColor = "red";
} else if(pattern[row][col] === 6) {
cell.style.backgroundColor = "lightblue";
} else if(pattern[row][col] === 7) {
cell.style.backgroundColor = "pink";
}
}
}
}
</script>
</body>
</html>
Thank you!

I don't believe you would be able to use CSS transitions in this case. Transitions are typically applied to an entire HTML element, while you are attempting to selectively change certain colours of the ghost. I have created a solution to your problem in this fiddle. What this solution does is add another visual pattern representing the second frame of the ghost movement, as shown below:
var patterns = [
[
[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, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0],
[0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0],
[0, 0, 1, 2, 2, 1, 1, 1, 1, 2, 2, 1, 1, 1, 0, 0],
[0, 0, 2, 2, 2, 2, 1, 1, 2, 2, 2, 2, 1, 1, 0, 0],
[0, 0, 3, 3, 2, 2, 1, 1, 3, 3, 2, 2, 1, 1, 0, 0],
[0, 1, 3, 3, 2, 2, 1, 1, 3, 3, 2, 2, 1, 1, 1, 0],
[0, 1, 1, 2, 2, 1, 1, 1, 1, 2, 2, 1, 1, 1, 1, 0],
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
[0, 1, 1, 0, 1, 1, 1, 0, 0, 1, 1, 1, 0, 1, 1, 0],
[0, 1, 0, 0, 0, 1, 1, 0, 0, 1, 1, 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, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0],
[0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0],
[0, 0, 1, 2, 2, 1, 1, 1, 1, 2, 2, 1, 1, 1, 0, 0],
[0, 0, 2, 2, 2, 2, 1, 1, 2, 2, 2, 2, 1, 1, 0, 0],
[0, 0, 3, 3, 2, 2, 1, 1, 3, 3, 2, 2, 1, 1, 0, 0],
[0, 1, 3, 3, 2, 2, 1, 1, 3, 3, 2, 2, 1, 1, 1, 0],
[0, 1, 1, 2, 2, 1, 1, 1, 1, 2, 2, 1, 1, 1, 1, 0],
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
[0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0],
[0, 0, 1, 1, 0, 0, 0, 1, 1, 0, 0, 0, 1, 1, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
]
];
The next important aspect for creating this animation is to create a render loop with the requestAnimationFrame function. This is simply used to run the render function as fast as possible,
var startTime = Date.now();
var SPEED = 5; // Runs 5 times per second
function render() {
requestAnimationFrame(render.bind(this));
var elapsed = (Date.now() - startTime) / 1000;
var index = Math.floor((elapsed * SPEED) % patterns.length);
colorizeDivs(patterns[index]);
}
render();
So what the render function first does is calculate how long the animation has run for in seconds, which is also known as the elapsed time. This value can then be used to retrieve the appropriate index from the patterns defined above. This calculation simply applies the floor and modulo operation so that the index is always from the bound 0 to patterns.length - 1. After the index is retrieved, the current pattern is passed into the colorizeDivs function so the cells can be updated.

Multidimensional array fill

I'm trying to fill an area in a multidimensional array and not sure on the approach.
For example I have the following array:
var map = [
[0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 2, 2, 2, 2, 2, 2, 0, 0],
[0, 2, 0, 0, 0, 0, 2, 0, 0],
[0, 2, 0, 2, 0, 0, 2, 0, 0],
[0, 2, 0, 0, 2, 0, 2, 0, 0],
[0, 0, 2, 0, 0, 0, 2, 0, 0],
[0, 0, 0, 2, 2, 2, 2, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0]
];
And then I am trying to get the number from X and Y position and fill all those numbers (which is 0) with a number given such as 1, which will result in the following array:
var map = [
[0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 2, 2, 2, 2, 2, 2, 0, 0],
[0, 2, 1, 1, 1, 1, 2, 0, 0],
[0, 2, 1, 2, 1, 1, 2, 0, 0],
[0, 2, 1, 1, 2, 1, 2, 0, 0],
[0, 0, 2, 1, 1, 1, 2, 0, 0],
[0, 0, 0, 2, 2, 2, 2, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0]
];
Basically just replacing all numbers next to each other (0) with (1) within that area.
What is the correct way to do this with JavaScript?

Assuming you're given a starting position and you want to then fill all neighboring values up/down, left/right that contain the same value, you can do something like this:
var map = [
[0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 2, 2, 2, 2, 2, 2, 0, 0],
[0, 2, 0, 0, 0, 0, 2, 0, 0],
[0, 2, 0, 2, 0, 0, 2, 0, 0],
[0, 2, 0, 0, 2, 0, 2, 0, 0],
[0, 0, 2, 0, 0, 0, 2, 0, 0],
[0, 0, 0, 2, 2, 2, 2, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0]
];
function fill(data, x, y, newValue) {
// get target value
var target = data[x][y];
function flow(x,y) {
// bounds check what we were passed
if (x >= 0 && x < data.length && y >= 0 && y < data[x].length) {
if (data[x][y] === target) {
data[x][y] = newValue;
flow(x-1, y); // check up
flow(x+1, y); // check down
flow(x, y-1); // check left
flow(x, y+1); // check right
}
}
}
flow(x,y);
}
fill(map, 2, 2, 1);
Working demo: http://jsfiddle.net/jfriend00/C83AT/
Here's a version that doesn't use recursion and appears to work with large data sets. Your large test data set wasn't a very interesting test pattern so I wouldn't say this is tested conclusively, but it seems to work on both the small and large data set:
Large data example: http://jsfiddle.net/jfriend00/8mrhN/
Small data example: http://jsfiddle.net/jfriend00/BFTub/ (easier to see the result)
function fill(data, x, y, newValue) {
// get target value
var target = data[x][y];
// maintain list of cells to process
// put the starting cell in the queue
var queue = [{x:x, y:y}], item;
while (queue.length) {
item = queue.shift();
x = item.x;
y = item.y;
if (data[x][y] === target) {
data[x][y] = newValue;
// up
if (x > 0) {
queue.push({x:x-1, y:y})
}
// down
if (x + 1 < data.length) {
queue.push({x:x+1, y:y})
}
// left
if (y > 0) {
queue.push({x:x, y:y-1});
}
// right
if (y + 1 < data[x].length) {
queue.push({x:x, y:y+1});
}
}
}
}
This could be optimized further for performance by testing the value before putting it in the queue and by following a given direction until you find a non-matching value, if required.

This is an alternative implementation (queue-based) roughly translated, no optimisations performed. There are also others.
Javascript
var map = [
[0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 2, 2, 2, 2, 2, 2, 0, 0],
[0, 2, 0, 0, 0, 0, 2, 0, 0],
[0, 2, 0, 2, 0, 0, 2, 0, 0],
[0, 2, 0, 0, 2, 0, 2, 0, 0],
[0, 0, 2, 0, 0, 0, 2, 0, 0],
[0, 0, 0, 2, 2, 2, 2, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0]
];
/*
1. Set Q to the empty queue.
2. If the color of node is not equal to target-color, return.
3. Add node to Q.
4. For each element N of Q:
5. If the color of N is equal to target-color:
6. Set w and e equal to N.
7. Move w to the west until the color of the node to the west of w no longer matches target-color.
8. Move e to the east until the color of the node to the east of e no longer matches target-color.
9. For each node n between w and e:
10. Set the color of n to replacement-color.
11. If the color of the node to the north of n is target-color, add that node to Q.
12. If the color of the node to the south of n is target-color, add that node to Q.
13. Continue looping until Q is exhausted.
14. Return.
*/
function floodFill(data, node, targetValue, replacementValue) {
var Q;
if (data[node[0]][node[1]] === targetValue) {
Q = [node];
while (Q.length) {
var N = Q.shift(),
value,
index,
n,
e,
s,
w;
if (data.hasOwnProperty([N[0]]) && data[N[0]][N[1]] === targetValue) {
w = e = N[0];
do {
w -= 1;
} while (data.hasOwnProperty(w) && data[w][N[1]] === targetValue);
do {
e += 1;
} while (data.hasOwnProperty(e) && data[e][N[1]] === targetValue);
n = N[1] - 1;
s = N[1] + 1;
for (index = w + 1; index < e; index += 1) {
data[index][N[1]] = replacementValue;
if (data[index].hasOwnProperty(n) && data[index][n] === targetValue) {
Q.push([index, n]);
}
if (data[index].hasOwnProperty(s) && data[index][s] === targetValue) {
Q.push([index, s]);
}
}
}
}
}
}
floodFill(map, [2, 2], 0, 1);
map.forEach(function (m) {
console.log(JSON.stringify(m));
});
Output
[0,0,0,0,0,0,0,0,0]
[0,2,2,2,2,2,2,0,0]
[0,2,1,1,1,1,2,0,0]
[0,2,1,2,1,1,2,0,0]
[0,2,1,1,2,1,2,0,0]
[0,0,2,1,1,1,2,0,0]
[0,0,0,2,2,2,2,0,0]
[0,0,0,0,0,0,0,0,0]
On jsFiddle

Javascript - Loading XML into Multidimensional array

I have been creating a game in HTML5 and javascript and have came across a problem.
The game uses a tile system to load the map. Currently my map is saved within a multidimensional array and looks like this:
var map = [ [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 3, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 2, 0, 4, 1],
[1, 0, 0, 0, 0, 0, 2, 0, 4, 1],
[1, 0, 0, 0, 0, 0, 2, 0, 4, 1],
[1, 0, 0, 0, 0, 0, 2, 0, 4, 1],
[1, 0, 0, 0, 0, 0, 2, 0, 4, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1]]
I would like to add move levels by using a XML file to update the array.
My XML file currently looks like this:
<TileMaps>
<Level level="1">
<map>[ [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 3, 0, 0, 0, 0, 2, 4, 0, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1]]
</map>
</Level>
<Level level="2">
<map>[ [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 3, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 2, 0, 4, 1],
[1, 0, 0, 0, 0, 0, 2, 0, 4, 1],
[1, 0, 0, 0, 0, 0, 2, 0, 4, 1],
[1, 0, 0, 0, 0, 0, 2, 0, 4, 1],
[1, 0, 0, 0, 0, 0, 2, 0, 4, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1]]
</map>
</Level>
</TileMaps>
If anyone could help me load level="1" into my map variable that would be great.
Thanks

Don't use xml, use json. Here's a link to what its about, http://www.json.org/.
While not entirely precise, its pretty safe to think of json as a subset of javascript.
For example:
{
"levels":[
[
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 3, 0, 0, 0, 0, 2, 4, 0, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
],
[
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 3, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 2, 0, 4, 1],
[1, 0, 0, 0, 0, 0, 2, 0, 4, 1],
[1, 0, 0, 0, 0, 0, 2, 0, 4, 1],
[1, 0, 0, 0, 0, 0, 2, 0, 4, 1],
[1, 0, 0, 0, 0, 0, 2, 0, 4, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
]
]
}
Use http://jsonlint.org to validate json.

For anyone who wanted to know i fixed this by using the following code:
req=new XMLHttpRequest();
req.open("GET","my.xml",false);
req.send();
xmlDoc = req.responseXML;
map = JSON.parse(xmlDoc.getElementsByTagName('map')[0].firstChild.nodeValue);

Develop Reference

JavaScript is the programming language of the Web.

Phaser. Moving game character on 2d grid, along fixed path - javascript

See this example. It's about tween interpolations, but illustrates a tween along a path as well. Basically instead of a single value for x, you pass an array.

Related

How to write out n*n Matrix values in JavaScript?

JS and JSON - how find number of position

Animation in Visual 2D Arrays

Multidimensional array fill

Javascript - Loading XML into Multidimensional array

Categories

Resources