Related
Im writing a Tomb of the Mask game clone in Canvas for an assignment, and I wanted to create a small animation so that when my character "Snaps" to the next wall, it doesnt just "teleport" like it does now.
See here for a live review: https://codepen.io/SkylerSpark/pen/GRpdzBZ
Currently I have a big keydown event and a switch case that detects for any of the 4 arrow keys, this is an example of one of the case statements:
case "ArrowLeft":
if (map[playerCoords[1]][playerCoords[0] - 1] != 1) {
while (map[playerCoords[1]][playerCoords[0] - 1] != 1) {
playerCoords[0]--;
}
}
Ill split up those map statements for a better understanding:
map[playerCoords[1]][playerCoords[0] - 1] != 1
map[] - Main Map Data (1s and 0s that determine the game layout)
playerCoords[0 / 1] - Location of the Player
map[ pc[1] ] (going to get the sub array of map[playerCoords[1]]) > [pc[0] - 1] (-1 to look for the block to the left of the player)
then Im selecting all of that into one statement and detecting if its equal to 1 (1 is a brick block) to see if the player should MOVE or NOT MOVE.
Anyways, I have an animationFrame running on my player location at ALL TIMES so that if any adjustments are made, it will show them.
The while loops I use to send the player to the opposite wall (rather than just moving 1 block to the left or right, it needs to work JUST like TotM) are just immediately sending the results. I want it to quickly move all those blocks 1 by 1 but barely noticable...
Is it possible I can add some kind of "delay" inside the while loops so it can move 1 block, then wait 10 milliseconds, and then the next, so on so fourth?
Full Game and Code:
View in FULL PAGE or it wont work correctly..
const cvs = document.querySelector(".bastione"),
ctx = cvs.getContext("2d");
const cvs2 = document.querySelector(".basPlayer"),
ctx2 = cvs2.getContext("2d");
ctx.imageSmoothingEnabled = ctx.mozImageSmoothingEnabled = ctx.webkitImageSmoothingEnabled = false;
ctx2.imageSmoothingEnabled = ctx2.mozImageSmoothingEnabled = ctx2.webkitImageSmoothingEnabled = false;
function loadImage(src, callback) {
var img = new Image();
img.onload = callback;
img.setAttribute("crossorigin", "anonymous");
img.src = src;
return img;
}
function ran(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
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, 2, 0, 0, 0, 0, 0, 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, 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, 1, 1, 1, 1, 1, 1, 1, 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, 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, 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, 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, 1, 1],
[1, 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, 0, 0, 0, 0, 0, 0, 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, 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, 1, 1, 1, 1, 1, 1, 1, 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, 3, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
];
const drawEnvironment = {
init: () => {
drawEnvironment.renderBack();
},
renderBack: () => {
let cx = 0, cy = 0;
map.forEach(e => {
for (var i = 0; i < e.length; i++) {
if (e[i] == 1) {
let v = ran(0, 10);
if (v > 0 && v < 8) {
ctx.drawImage(spriteImage, 0, 0, 32, 32, cx, cy, 32, 32);
} else {
ctx.drawImage(spriteImage, 32, 0, 32, 32, cx, cy, 32, 32);
}
cx += 32;
} else if (e[i] == 2 || e[i] == 3) {
ctx.drawImage(spriteImage, 64, 64, 32, 32, cx, cy, 32, 32);
cx += 32;
} else {
let v = ran(0, 10);
if (v > 0 && v < 5) {
ctx.drawImage(spriteImage, 128, 64, 32, 32, cx, cy, 32, 32);
if (v == 10) {
ctx.drawImage(spriteImage, 128, 32, 32, 32, cx, cy, 32, 32);
}
} else {
ctx.drawImage(spriteImage, 128, 32, 32, 32, cx, cy, 32, 32);
}
cx += 32;
}
}
cx = 0;
cy += 32;
});
ctx.drawImage(spriteImage, 0, 0, 32, 32, 0, 0, 32, 32);
}
};
let playerCoords = [1, 1];
const drawPlayer = {
init: () => {
drawPlayer.playerLoc();
drawPlayer.playerMove();
},
playerLoc: () => {
ctx2.drawImage(spriteImage, 0, 64, 32, 32, playerCoords[0] * 32, playerCoords[1] * 32, 32, 32);
window.requestAnimationFrame(drawPlayer.playerLoc);
},
playerMove: () => {
document.addEventListener("keydown", function(event) {
ctx2.clearRect(0, 0, cvs2.width, cvs2.height);
event.preventDefault();
const key = event.key;
switch (key) {
case "ArrowLeft":
if (map[playerCoords[1]][playerCoords[0] - 1] != 1) {
while (map[playerCoords[1]][playerCoords[0] - 1] != 1) {
playerCoords[0]--;
}
}
break;
case "ArrowRight":
if (map[playerCoords[1]][playerCoords[0] + 1] != 1) {
while (map[playerCoords[1]][playerCoords[0] + 1] != 1) {
playerCoords[0]++;
}
}
break;
case "ArrowUp":
if (map[playerCoords[1] - 1][playerCoords[0]] != 1) {
while (map[playerCoords[1] - 1][playerCoords[0]] != 1) {
playerCoords[1]--;
}
}
break;
case "ArrowDown":
if (map[playerCoords[1] + 1][playerCoords[0]] != 1) {
while (map[playerCoords[1] + 1][playerCoords[0]] != 1) {
playerCoords[1]++;
}
}
break;
}
});
}
}
const spriteImage = loadImage(
"https://cdn.jsdelivr.net/gh/FunctFlow/Bastione-Game#1d0514c968a737061916ae5e160b20eaf3a6b8b4/Sprites/Bastione_Sprites.png",
() => {
drawEnvironment.init();
drawPlayer.init();
}
);
* {
box-sizing: border-box;
overflow: hidden;
}
body {
text-align: center;
background: black;
}
canvas {
display: inline-block;
}
.basPlayer {
position: absolute;
margin-left: -1024px;
}
<canvas class=bastione width=1024 height=512></canvas>
<canvas class=basPlayer width=1024 height=512></canvas>
View in FULL PAGE or it wont work correctly..
You can use setInterval to create a loop which runs at a specific frequency.
case "ArrowLeft":
if (map[playerCoords[1]][playerCoords[0] - 1] != 1) {
let interval = setInterval(() => {
if (map[playerCoords[1]][playerCoords[0] - 1] != 1) {
// Stop the interval, and do nothing.
clearInterval(interval)
return
}
playerCoords[0]--;
}, 100) // <- 100 here is delay in milliseconds
}
This code is now running asynchronously. This means that while we are waiting for the delay, other code can run. If we are not careful, this can introduce bugs. For example: You need to think about what would happen if the player presses arrowRight while the arrowLeft is still being processed. If you do not fix that case, the character will move both left and right at the same time, which would mean that he would never hit a wall and you would be stuck in an endless loop.
This is BIG TOPIC
The normal thing to do would be for each thing (player, monster, etc..) to give them some kind of update function
const allTheThings = [];
function loop() {
for (const thing of things) {
thing.update();
}
requestAnimationFrame(loop);
}
In each of those update functions you would do whatever is appropriate for that thing doing only what is need at this moment. So for example the player might have a update function like this
class Player() {
constructor() {
this.coords = [1, 1];
this.delta = [0, 0];
}
update() {
if (this.waiting) {
this.waiting -= 1;
} else if (this.moving) {
this.coords[0] = this.delta[0];
this.coords[1] = this.delta[1];
this.waiting = 10;
} else {
// check the keys
// and set this.delta and moving appropriately
}
}
}
Then you can make a player and add it to this array of allTheThings
const player = new Player();
allTheThings.push(player);
Note that is way over simplified. Most games don't directly update in an object like that. Instead, just like allTheThings calls update for each thing, a thing itself might have a list of subthings (components) each of which also has an update function. A thing, or a GameThing, is a collection of these components.
Further, there are all kinds of ways to help organize what those update functions do. In the example above there were 2 flags moving and waiting but as the game gets more and more complicated there get to be too many flags so people have come up with things like Finite State Machines and Coroutines and may other techniques to help make that stuff simpler.
Maybe not useful but here is an article that uses some of these techniques.
Thanks to ViktorW, gman and VLAZ for the help and answers, I came up with a solution though:
so if you put a "run object" into the project, and have 4 sub variables with true/false, and change them depending on which key you press, you can make it work perfectly.
I followed ViktorW's answer and applied this idea, plus I just made a simple interval instead of the logic Viktor used:
so outside of my movement function, I have the run variable
let run = {
l: true,
r: true,
u: true,
d: true
}
theres variables for the 4 directions (Left Right Up Down)
Then just add the logic into the movement function + the interval and ITS logic:
case "ArrowLeft":
if (map[playerCoords[1]][playerCoords[0] - 1] != 1) {
if (run.l == true) { // Detect for direction
var lInterval = setInterval(() => {
if (map[playerCoords[1]][playerCoords[0] - 1] != 1) {
playerCoords[0]--;
run.r = run.u = run.d = false; // Set all other directions false
} else {
clearInterval(lInterval);
run.r = run.u = run.d = true; // Set all other directions true when done moving
}
}, 10);
}
}
break;
This PERFECTLY prevents the opposing movement of of the block if you use an interval to achieve the animation.
Check it out live here, use arrow keys to control: Tomb of the Mask Clone
I have one dimension array like this:
0, 0, 0, 0, 0, 0, 0,
0, 1, 1, 1, 1, 1, 0,
0, 0, 0, 0, 0, 1, 1,
0, 0, 0, 0, 0, 0, 0,
1, 0, 0, 0, 0, 1, 1,
0, 1, 0, 1, 1, 1, 0,
0, 1, 0, 1, 0, 0, 0,
Legend: 0 = empty floor, 1 = wall that blocks the way, 2 = starting point, 3 = floor that is possible to reach from starting point.
Movement is possible horizontally, vertically, and diagonally, if value is 0.
Example map array is 7x7 and example movement range is 3, but these parameters might be even 15x9 with 6.
What I am trying to do is getting one dimension array that shows possible movement range from chosen point like this (example range is 3 steps, and diagonal can pass between walls if position has 0 as you can see in bottom left corner):
0, 0, 0, 0, 0, 0, 0,
3, 1, 1, 1, 1, 1, 0,
3, 3, 3, 3, 3, 1, 1,
3, 3, 3, 2, 3, 3, 3,
1, 3, 3, 3, 3, 1, 1,
3, 1, 3, 1, 1, 1, 0,
0, 1, 3, 1, 0, 0, 0,
That was easier version, because it would be good if range can be limited to specified shape that can be different in one dimension mask array like this example (0 = outside range):
0, 0, 0, 1, 0, 0, 0,
0, 0, 1, 1, 1, 0, 0,
0, 1, 1, 1, 1, 1, 0,
1, 1, 1, 1, 1, 1, 1,
0, 1, 1, 1, 1, 1, 0,
0, 0, 1, 1, 1, 0, 0,
0, 0, 0, 1, 0, 0, 0,
In this case, result would be like this:
0, 0, 0, 0, 0, 0, 0,
0, 1, 1, 1, 1, 1, 0,
0, 3, 3, 3, 3, 1, 1,
3, 3, 3, 2, 3, 3, 3,
1, 3, 3, 3, 3, 1, 1,
0, 1, 3, 1, 1, 1, 0,
0, 1, 0, 1, 0, 0, 0,
Code:
<div id="results" style="font-family: monospace; font-weight: bold; font-size: 24pt; background-color: #000000; color: #FFFFFF;">
</div>
<script>
var map=[0,0,0,0,0,0,0,0,1,1,1,1,1,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,1,0,0,0,0,1,1,0,1,0,1,1,1,0,0,1,0,1,0,0,0,];
var mask=[0,0,0,1,0,0,0,0,0,1,1,1,0,0,0,1,1,1,1,1,0,1,1,1,1,1,1,1,0,1,1,1,1,1,0,0,0,1,1,1,0,0,0,0,0,1,0,0,0,];
function path_create(map,width,height,point,range,mask)
{
// map = pure map with 0 as floor and 1 as wall
// width, height = size of map
// point = starting point to calculate movement range
// range = number of moves from starting point to each direction of horizontal, vertical, and diagonal
// mask = (optional) if possible to do, array mask (0 is not in range) can change range for diagonal moves with special shapes like circle or rhombus
var matrix=[];
return matrix;
// one dimension array where 0 is no range, and 1 is ok
}
function path_show(matrix,width,height)
{
var v="";
for(var i=0; i<matrix.length; i++)
{
if(i!=0 && i%7==0){v=v+"<br>";}
v=v+matrix[i]+" ";
}
document.getElementById('results').innerHTML=v;
}
path_show(path_create(map,7,7,25,3,mask));
//path_show(path_create(map,7,7,16,3,mask));
</script>
Basically you could integrate the mask array and exit early if a cell is found which should not be used.
This proposal uses matrices instead of linear arrays, because the check for adjacent cells is easier to address.
Then it takes an array for the possible directions and a check for early exit with
if (!mask[i][j] || array[i][j] === 1 || !steps || reach[i][j] >= steps) {
return;
}
where
!mask[i][j] checks the mask,
array[i][j] === 1 checks a wall,
!steps checks the leftover steps to go or
reach[i][j] >= steps where a cell's steps is greater than the leftover steps, this prevents to check already checked steps and prevents to take shorter leftover steps as posssible.
In all above cases the further processing stops.
function check(i, j, steps) {
var directions = [{ x: 0, y: -1 }, { x: -1, y: -1 }, { x: -1, y: 0 }, { x: -1, y: 1 }, { x: 0, y: 1 }, { x: 1, y: 1 }, { x: 1, y: 0 }, { x: 1, y: -1 }];
if (!mask[i][j] || array[i][j] === 1 || !steps || reach[i][j] >= steps) {
return;
}
reach[i][j] = steps;
directions.forEach(({ x, y }) => {
x += i;
y += j;
if (x < 0 || x >= width || y < 0 || y >= height) {
return;
}
check(x, y, steps - 1);
});
}
function out(array) {
document.getElementById('out').innerHTML += array.map(a => a.join(' ')).join('\n') + '\n\n';
}
function getMatrix(raw, width) {
var array = [],
i = 0;
while (i < raw.length) {
array.push(raw.slice(i, i += width));
}
return array;
}
var width = 7,
height = 7,
rawData = [0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 1, 0, 1, 0, 1, 1, 1, 0, 0, 1, 0, 1, 0, 0, 0],
rawMask = [0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0],
array = getMatrix(rawData, width),
mask = getMatrix(rawMask, width),
reach = Array.from({ length: height }, _ => Array.from({ length: width }).fill(0)),
max = 3,
result;
array[3][3] = 2;
check(3, 3, max + 1);
result = reach.map((a, i) => a.map((b, j) => b === max + 1 ? 2 : b ? 3 : array[i][j]));
out(array);
out(reach);
out(result);
<pre id="out"></pre>
I know this has been asked multiple times but none of the answers I've seen help. So here's my problem.
I have an array that get's dynamically populated depending on what is selected from a list. At times, the array values that are pushed will have multiple values that are the same. I want to take the values of that array, find if that value already exists in the array, and push it to a new array. I have two global arrays that are defaulted to empty.
//Global arrays
var water_pipes_size_array = [];
var new_water_pipes_size_array = [];
An example of what the water_pipes_size_array would look like is this:
[0, 0, 0, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 12, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 10, 10, 8, 4, 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, 8, 8, 8, 8, 8, 8, 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]
What I'm trying to do is search through this array and find any duplicate values and push them into the new_water_pipes_size_array. However, what I have is not working. I am still getting an empty array.
for(var j = 0; j < water_pipes_size_array - 1; j++){
if(water_pipes_size_array[j + 1] == water_pipes_size_array[j]){
new_water_pipes_size_array.push(water_pipes_size_array[j]);
}
}
console.log(new_water_pipes_size_array);
Can anyone show me what I'm doing wrong and provide some feedback on how to fix it?
I think you mean to put water_pipes_size_array.length in your for loop instead of water_pipes_size_array. Also, since you're starting at 0 you don't need to subtract 1:
for(var j = 0; j < water_pipes_size_array.length; j++){
if(water_pipes_size_array[j + 1] == water_pipes_size_array[j]){
new_water_pipes_size_array.push(water_pipes_size_array[j]);
}
}
The logic is all wrong though. If you just want to eliminate duplicates, try this:
for (var j = 0; j < water_pipes_size_array.length; j++) {
if (new_water_pipes_size_array.indexOf(water_pipes_size_array[j]) == -1) {
new_water_pipes_size_array.push(water_pipes_size_array[j]);
}
}
If you can use jQuery there is nice way to achieve that
var water_pipes_size_array = [0, 0, 0, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 12, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 10, 10, 8, 4, 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, 8, 8, 8, 8, 8, 8, 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];
var new_water_pipes_size_array = [];
new_water_pipes_size_array=$.map( water_pipes_size_array, function( value,index ) {
return water_pipes_size_array[index+1]==value ? value : null;
});
console.log(new_water_pipes_size_array);
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
Actual data :
var x =" [{ name: 'Chintan test', data: [3, 0, 0, 0, 0, 0, 2, 2, 0, 0, 0, 0, 0, 0] },
{ name: 'Lara Black &White', data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] },
{ name: 'kamlesh ', data: [1, 2, 0, 0, 0, 0, 3, 0, 0, 0, 0, 0, 0, 0] }, { name: 'Gopala lalalala', data: [1, 2, 0, 0, 0, 0, 3, 0, 0, 0, 0, 0, 0, 0] },
{ name: 'Saurin Test ', data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] }]";
how to convert so i can get below result :
var y = [{ name: 'Chintan test', data: [3, 0, 0, 0, 0, 0, 2, 2, 0, 0, 0, 0, 0, 0] },
{ name: 'Lara Black &White', data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] },
{ name: 'kamlesh ', data: [1, 2, 0, 0, 0, 0, 3, 0, 0, 0, 0, 0, 0, 0] }, { name: 'Gopala lalalala', data: [1, 2, 0, 0, 0, 0, 3, 0, 0, 0, 0, 0, 0, 0] },
{ name: 'Saurin Test ', data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] }]
What I had Done :
try 1 :
y=x.substring(1,x.length-1); // not helpfull
try 2 :
y = JSON.parse(x); // SyntaxError: JSON.parse: expected property name or '}' at line 1 column 5 of the JSON data
The string is not valid JSON (you can check it here http://jsonlint.com/), so in order to parse it you first need to transform it in a valid JSON.
To make it a valid JSON the attribute names should be encapsulated by double quotes (name: => "name":) and the same goes for the strings ('Chintan test' => "Chintan test"). You can do this with a few string replace:
var x =" [{ name: 'Chintan test', data: [3, 0, 0, 0, 0, 0, 2, 2, 0, 0, 0, 0, 0, 0] }, { name: 'Lara Black &White', data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] }, { name: 'kamlesh ', data: [1, 2, 0, 0, 0, 0, 3, 0, 0, 0, 0, 0, 0, 0] }, { name:'Gopala lalalala', data: [1, 2, 0, 0, 0, 0, 3, 0, 0, 0, 0, 0, 0, 0] }, { name: 'Saurin Test ', data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] }]";
x = x.replace(/data:/g, '"data":'); //name attribute data to "data"
x = x.replace(/name:/g, '"name":'); //name attribute name to "name"
x = x.replace(/:\s*'(.+?)'/g, ':"$1"'); // :'string' to :"string"
var y = JSON.parse(x);
Note that the string inside x should not contain new lines.
The jsfiddle working example: http://jsfiddle.net/jx3opp8g/
This is not valid JSON mostly because JSON requires that the property names be surrounded by quotes. Once you add quotes around the property names, then it looks like it should be parse able.
I've got this code from a javascript file that looks like some object but Im not sure.
How can I use this data?
DataStore.prime('standings', { stageId: 36 },
[
[36,13,'Arsenal',1,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,,,]
,[36,24,'Aston Villa',2,0,0,0,0,0,0,0,0,2,0,0,0,0,0,0,0,0,2,0,0,0,0,0,0,0,0,,,]
,[36,184,'Burnley',3,0,0,0,0,0,0,0,0,3,0,0,0,0,0,0,0,0,3,0,0,0,0,0,0,0,0,,,]
]);
What you see here is an array (not an object), which elements are 3 other arrays, which elements are numbers and Strings.
Here it is in a more conventional form :
var myArray = [
[36, 13, 'Arsenal', 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, , , ],
[36, 24, 'Aston Villa', 2, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, , , ],
[36, 184, 'Burnley', 3, 0, 0, 0, 0, 0, 0, 0, 0, 3, 0, 0, 0, 0, 0, 0, 0, 0, 3, 0, 0, 0, 0, 0, 0, 0, 0, , , ]
];
myArray[0][1]; // 13
myArray[1][2]; // 'Aston Villa'
myArray[2][31]; // undefined
From the script I reckon this is data about some football clubs.
DataStore //some class
.prime //probably the function
(
'standings', //argument 1 which is a string calling a string event
{ stageId: 36 }, //argument 2 an object, must be referencing to a stage event
[
[36,13,'Arsenal',1,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,,,]
,[36,24,'Aston Villa',2,0,0,0,0,0,0,0,0,2,0,0,0,0,0,0,0,0,2,0,0,0,0,0,0,0,0,,,]
,[36,184,'Burnley',3,0,0,0,0,0,0,0,0,3,0,0,0,0,0,0,0,0,3,0,0,0,0,0,0,0,0,,,]
] //Argument 3 Multidimensional Array which looks like some stats for a certain team
);
Is this some highscore table for a game?