We Keep Coding

Why is this code modifying my array without me telling it to? [closed]

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 1 year ago.
Improve this question
Hi guys so this function is part of a larger code I am writing but I isolated it to show my issue with it. So here is how it goes;
I declare an array called Movement as
var Movement =[
[1,8],[2,8],[3,8],[4,8],[5,8],[6,8],[7,8],[8,8],
[1,7],[2,7],[3,7],[4,7],[5,7],[6,7],[7,7],[8,7],
[1,6],[2,6],[3,6],[4,6],[5,6],[6,6],[7,6],[8,6],
[1,5],[2,5],[3,5],[4,5],[5,5],[6,5],[7,5],[8,5],
[1,4],[2,4],[3,4],[4,4],[5,4],[6,4],[7,4],[8,4],
[1,3],[2,3],[3,3],[4,3],[5,3],[6,3],[7,3],[8,3],
[1,2],[2,2],[3,2],[4,2],[5,2],[6,2],[7,2],[8,2],
[1,1],[2,1],[3,1],[4,1],[5,1],[6,1],[7,1],[8,1]
]
but when I enter console.log
console.log(Movement)
I get this
Movement =[
[0,8],[0,8],[0,8],[true,8],[true,8],[true,8],true,8],[true,8],
[false,7],[false,7],[3,7],[4,7],[5,7],[6,7],[7,7],[8,7],
[1,6],[2,6],[3,6],[4,6],[5,6],[6,6],[7,6],[8,6],
[1,5],[2,5],[3,5],[4,5],[5,5],[6,5],[7,5],[8,5],
[1,4],[2,4],[3,4],[4,4],[5,4],[6,4],[7,4],[8,4],
[1,3],[2,3],[3,3],[4,3],[5,3],[6,3],[7,3],[8,3],
[1,2],[2,2],[3,2],[4,2],[5,2],[6,2],[7,2],[8,2],
[1,1],[2,1],[3,1],[4,1],[5,1],[6,1],[7,1],[8,1]
]
Where is it getting all these true or false values? I don't deal with true or false at all in my code.
I run the array through a function that does not modify it NOR does the function return any true or false values so is there something I am missing?
JavaScript
let ChessMap = [
8, 3, 4, 7, 5, 4, 3, 8,
6, 6, 6, 6, 6, 6, 6, 6,
0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 8, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0,
60, 60, 60, 60, 60, 60, 60, 60,
80, 30, 40, 70, 50, 40, 30, 80,
];
var Movement = [
[1, 8],
[2, 8],
[3, 8],
[4, 8],
[5, 8],
[6, 8],
[7, 8],
[8, 8],
[1, 7],
[2, 7],
[3, 7],
[4, 7],
[5, 7],
[6, 7],
[7, 7],
[8, 7],
[1, 6],
[2, 6],
[3, 6],
[4, 6],
[5, 6],
[6, 6],
[7, 6],
[8, 6],
[1, 5],
[2, 5],
[3, 5],
[4, 5],
[5, 5],
[6, 5],
[7, 5],
[8, 5],
[1, 4],
[2, 4],
[3, 4],
[4, 4],
[5, 4],
[6, 4],
[7, 4],
[8, 4],
[1, 3],
[2, 3],
[3, 3],
[4, 3],
[5, 3],
[6, 3],
[7, 3],
[8, 3],
[1, 2],
[2, 2],
[3, 2],
[4, 2],
[5, 2],
[6, 2],
[7, 2],
[8, 2],
[1, 1],
[2, 1],
[3, 1],
[4, 1],
[5, 1],
[6, 1],
[7, 1],
[8, 1]
]
const Game = {
PlayerStatus: 1,
Grabstate: 0,
CheckU: 0,
CheckL: 0
}
CheckUpdate();
console.log(Movement)
function CheckUpdate() {
var uk = 3;
var lk = 59
for (var i = 0; i < 64; i++) {
inc = 0
if (ChessMap[i] === 70) {
lk = i
inc++;
}
if (ChessMap[i] === 7) {
uk = i
inc++
}
if (inc === 2) {
break;
}
}
var Matrix = []
Matrix = Movement;
var xu = Matrix[uk][0]
var yu = Matrix[uk][1]
var xl = Matrix[lk][0]
var yl = Matrix[lk][1]
//// upper king check list
//hotizontal uk left check
for (var j = uk; j >= 0; j--) {
var brker = 0;
if (brker === 1) {
break;
}
for (var n = xu; n >= 0; n--) {
if (Matrix[j][0] = n && Matrix[j][1] === yu) {
if (ChessMap[j] === 6 || ChessMap[j] === 8 || ChessMap[j] === 4 || ChessMap[j] === 3 || ChessMap[j] === 5) {
brker = 1;
}
if (ChessMap[j] === 80 || ChessMap[j] === 70) {
Game.CheckU = 1;
}
}
}
}
/// horizontal uk right check
for (var j = uk; j < uk + 7; j++) {
var brker = 0;
if (brker === 1) {
break;
}
for (var n = xu; n < 8; n++) {
if (Matrix[j][0] = n && Matrix[j][1] === yu) {
if (ChessMap[j] === 6 || ChessMap[j] === 8 || ChessMap[j] === 4 || ChessMap[j] === 3 || ChessMap[j] === 5) {
brker = 1;
}
if (ChessMap[j] === 80 || ChessMap[j] === 70) {
Game.CheckU = 1;
}
}
}
}
////////////////////////////////
console.log(Game.CheckU)
}

Your Movement array is being modified by this code:
if (Matrix[j][0]=n && Matrix[j][1]===yu)
You may have accidentally used an assignment operator (=) instead of an equality operator (===).

Complete missing sequence in array with zeros in javascript

I have the following array:
const arr = [
[5, 0.2],
[7, 0.6],
[8, 0.3],
[10, 0.4]
];
console.log(arr)
I need to ensure that the first element of the array is a sequence from 5 to 10:
[5, 6, 7, 8, 9, 10]
In the above example, these numbers within the sequence are missing:
[6, 9]
If they are missing, I need to include them with zeros:
const expectedResult = [
[5, 0.2],
[6, 0],
[7, 0.6],
[8, 0.3],
[9, 0],
[10, 0.4]
];
console.log(expectedResult)
Any ideas on how to achieve this?

You could map the missing parts with a closure over the actual index of the given array.
const
array = [[5, 0.2], [7, 0.6], [8, 0.3], [10, 0.4]],
result = Array.from(
{ length: 6 },
(i => (_, j) => array[i]?.[0] === j + 5 ? array[i++] : [j + 5, 0])(0)
);
console.log(result);

color system for tile base game

I have started a project to teach myself the mechanics behind tile-base game engines. So far I have a pretty good little demo working but I can't figure out how to implement colors for each tile. I would like for any tile to be any color but this proves to be complicated for me.
the entire game uses 2d arrays for every object/component on the screen. There is a central 2d array that stores all of the walls and floor tiles and anything that's not a separate moving object.
my idea was to have a parallel array that stores color values. Then to iterate and change the color of each tile accordingly.
The base part of my code where I do the actual drawing is in a class called font
class Font{
constructor(src, tilesizeX, tilesizeY){
this.fontImage = new Image();
this.imageBuffer = new Image();
// this.fontImage.setAttribute('crossOrigin', '')
this.fontImage.src = src;
this.colors = ["#00F","#09f","#fff", "#999"]
//this.fontImage.onload = this.drawChar();
}
drawChar(charCode, posX, posY, color){
var charmap = [
[' ','a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x','y', 'z', '☺', '☻','♡','♦','♣','♤', '•', '◘', '○', '◙','♂','♀','♪','♫','☼','►','◄','↕','‼','¶','§','▬','↨','↑','↓','→','←','∟','↔','▲','▼',
'░','▒','▓','│','┤','╡','╢','╖','╕','╣','║','╗','╝','╜','╛','┐',
'└','┴','┬','├','─','┼','╞','╟','╚','╔','╩','╦','╠','═','╬','╧',
'╨','╤','╥','╙','╘','╒','╓','╫','╪','┘','┌','█','▄','▌','▐','▀',
'space', '!','"','#','$','%','&',"'",'(',')','*','+',',','-','.','/',
'0','1','2','3','4','5','6','7','8','9',':',';','<','=','>','?',
'#','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O',
'P','Q','R','S','T','U','V','W','X','Y','Z','[','/',']','^','_',
],
[
[0,0],[6, 1], [6, 2], [6, 3], [6, 4], [6, 5], [6, 6], [6, 7], [6, 8], [6, 9], [6, 10], [6, 11], [6, 12],[6, 13],[6, 14], [6, 15],[7,0],
[7, 1],[7, 2], [7, 3], [7, 4], [7, 5], [7, 6], [7, 7], [7, 8],[7, 9],[7, 10],
[0, 1], [0, 2],[0,3], [0,4],[0,5],[0,6],[0,7],[0,8],[0,9],[0,10],[0,11],[0,12],[0,13],[0,14],[0,15],
[1,0],[1,1], [1, 2], [1, 3], [1, 4], [1, 5], [1, 6], [1, 7], [1, 8], [1, 9], [1, 10], [1, 11], [1, 12], [1, 13], [1, 14], [1, 15],
[11,0],[11,1],[11,2],[11,3],[11,4], [11, 5], [11, 6], [11, 7], [11, 8], [11, 9], [11, 10], [11, 11], [11, 12], [11, 13], [11, 14], [11, 15],
[12,0],[12,1],[12,2],[12,3],[12,4], [12, 5], [12, 6], [12, 7], [12, 8], [12, 9], [12, 10], [12, 11], [12, 12], [12, 13], [12, 14], [12, 15],
[13,0],[13,1],[13,2],[13,3],[13,4], [13, 5], [13, 6], [13, 7], [13, 8], [13, 9], [13, 10], [13, 11], [13, 12], [13, 13], [13, 14], [13, 15],
[2,0],[2,1], [2, 2], [2, 3], [2, 4], [2, 5], [2, 6], [2, 7], [2, 8], [2, 9], [2, 10], [2, 11], [2, 12], [2, 13], [2, 14], [2, 15],
[3,0],[3,1], [3, 2], [3, 3], [3, 4], [3, 5], [3, 6], [3, 7], [3, 8], [3, 9], [3, 10], [3, 11], [3, 12], [3, 13], [3, 14], [3, 15],
[4,0],[4,1], [4, 2], [4, 3], [4, 4], [4, 5], [4, 6], [4, 7], [4, 8], [4, 9], [4, 10], [4, 11], [4, 12], [4, 13], [4, 14], [4, 15],
[5,0],[5,1], [5, 2], [5, 3], [5, 4], [5, 5], [5, 6], [5, 7], [5, 8], [5, 9], [5, 10], [5, 11], [5, 12], [5, 13], [5, 14], [5, 15],
]
]
var scopeX = charmap[1][charmap[0].indexOf(charCode)][1] * 8;
var scopeY = charmap[1][charmap[0].indexOf(charCode)][0] * 16
game.ctx.drawImage(this.fontImage, scopeX, scopeY, 7 , 15 , posX, posY, 16, 32);
}
}
if I use this code at the end of my drawChar() function
game.ctx.drawImage(this.fontImage, scopeX, scopeY, 7, 15, posX, posY, 16, 32);
game.ctx.globalCompositeOperation = "source-out"
game.ctx.fillStyle = this.colors[getRandomInt(0, 3)];
game.ctx.fillRect(0, 0, 16, 32);
game.ctx.globalCompositeOperation = "source-over"
the first tile is colored as desired but none of the other tiles display. I am still new to all the intricacies of game development and do not know how I should go about adding colors

I use 2d arrays, like so:
var map = [
[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,1],
[1,0,0,2,0,0,0,3,0,0,0,0,0,4,0,0,0,2,0,1],
[1,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,1],
[1,0,0,3,0,0,0,4,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,3,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,0,1],
[1,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],
]
An then i loop through all of the values in the map and set the fill style depending on the value.
for (y = 0; y < map.length; y++) {
for (x = 0; x < map[y].length; x++) {
ctx.fillStyle = ["green", "red", "yellow", "blue"][map[y][x]];
ctx.fillRect(x * tilesize, y * tilesize, tilesize, tilesize);
}
}
And you can also use images instead of colors,
switch(map[x][y]){
case 1:
img = stone;
break;
case 2:
img = grass;
break;
}
ctx.fillImage(img,0,0,300,300,x*tilesize,y*tilesize,tilesize,tilesize);
Look up ctx.fillImage() for more info on those parameters.
Then the final program would look like this
<canvas id="c" width=800 height=800></canvas>
<script>
const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d');
var tilesize = 10
var map = [
[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,1],
[1,0,0,2,0,0,0,3,0,0,0,0,0,4,0,0,0,2,0,1],
[1,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,1],
[1,0,0,3,0,0,0,4,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,3,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,0,1],
[1,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],
]
function drawmap() {
for (y = 0; y < map.length; y++) {
for (x = 0; x < map[y].length; x++) {
ctx.fillStyle = ["red", "blue", "cyan", "yellow"][map[y][x]]
ctx.fillRect(x * tilesize, y * tilesize, tilesize, tilesize)
}
}
}
drawmap()
</script>
OR
<img id="stone" src="https://encrypted-tbn0.gstatic.com/images?
q=tbn:ANd9GcTFYnQ2tB7R4YVGtOquPzZxc2fq_taDOYryug&usqp=CAU" style="display:none;">
<img id="grass" src="https://encrypted-tbn0.gstatic.com/images?
q=tbn:ANd9GcTFYnQ2tB7R4YVGtOquPzZxc2fq_taDOYryug&usqp=CAU" style="display:none;">
<canvas id="c" width=800 height=800></canvas>
<script>
const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d');
var grass = document.getElementById("grass")
var stone = document.getElementById("stone")
var tilesize = 10
var map = [
[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,1],
[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,0,1],
[1,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,1],
[1,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,1],
[1,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,1],
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
]
function drawmap() {
for (y = 0; y < map.length; y++) {
for (x = 0; x < map[y].length; x++) {
switch(map[y][x]){
case 1:
img = stone;
break;
case 2:
img = grass;
break;
}
ctx.drawImage(img,0,0,300,300,x*tilesize,y*tilesize,tilesize,tilesize);
}
}
}
I know this is not exactly what you asked for,
but it is a very good and fast way to do this.

jquery multidimensional array shuffle random

I want to minimize my code from:
myArrayA = [1, 2, 3, 4, 5];
fisherYates(myArrayA);
myArrayB = [6, 7, 8, 9, 10];
fisherYates(myArrayB);
myArrayC = [11, 12, 13, 14, 15];
fisherYates(myArrayC);
myArrayD = [16, 17, 18, 19, 20];
fisherYates(myArrayD);
myArrayE = [21, 22, 23, 24, 25];
fisherYates(myArrayE);
To:
var multArr = [[1, 2, 3, 4, 5], [6, 7, 8, 9, 10], [11, 12, 13, 14, 15], [16, 17, 18, 19, 20], [21, 22, 23, 24, 25]];
fisherYates(multArr);
The output I want is like this:
[4,2,3,5,1],[7,10,6,9,8],[11,15,12,14,13],[18,17,16,20,19],[22,21,25,23,24]
I tried this code:
http://jsfiddle.net/arrow/yFn8U/
function fisherYates(myArray) {
var i = myArray.length, j, tempi, tempj;
if (i === 0) return false;
while (--i) {
j = Math.floor(Math.random() * (i + 1));
tempi = myArray[i];
tempj = myArray[j];
myArray[i] = tempj;
myArray[j] = tempi;
}
}
var multArr = [[1, 2, 3, 4, 5], [6, 7, 8, 9, 10], [11, 12, 13, 14, 15], [16, 17, 18, 19, 20], [21, 22, 23, 24, 25]];
fisherYates(multArr);
But my code only randomizes the order of the chunks not the values in each chunk.
The output I want is like this:
[4,2,3,5,1],[7,10,6,9,8],[11,15,12,14,13],[18,17,16,20,19],[22,21,25,23,24]
I want each chunk inside the array to be in the same order but each chunk must be randomized.
Is there a way to do this with jQuery?
I also wonder how to get values from the shuffled/randomized array?
At the moment I get the values like this:
myArrayA[i]
myArrayB[i]
myArrayC[i]
myArrayD[i]
myArrayE[i]
I would guess I will get them with something like:
multArr [[0][i]];
multArr [[1][i]];
multArr [[2][i]];
multArr [[3][i]];
multArr [[4][i]];
Finally I wonder if minimizing the code will give better performance?

If you simply want to run an operation over all the elements in an array, then you should use map or forEach. I'm sure jquery provides shims for these methods in older browsers. So if we assume you're using your original fisherYates function unaltered, we might have something like this:
var multArr = [[1, 2, 3, 4, 5], [6, 7, 8, 9, 10], [11, 12, 13, 14, 15], [16, 17, 18, 19, 20], [21, 22, 23, 24, 25]];
multArr.forEach(fisherYates);
On accessing the elements, you're almost right, but you have one set too many of brackets :
multArr[1]; // == [6, 7, 8, 9, 10]
multArr[1][3]; // == 9
I wouldn't speculate about the performance, if you're really worried you should put together a jsperf test case.

All you need is jQuery's .each() method, like so:
$.each(multArr, function(i) { fisherYates(this) });
See console on this working example
Fiddle Code
function fisherYates(myArray) {
var i = myArray.length, j, tempi, tempj;
if (i === 0) return false;
while (--i) {
j = Math.floor(Math.random() * (i + 1));
tempi = myArray[i];
tempj = myArray[j];
myArray[i] = tempj;
myArray[j] = tempi;
}
}
$(function() {
$("button").on("click", function(e) {
multArr = [[1, 2, 3, 4, 5], [6, 7, 8, 9, 10], [11, 12, 13, 14, 15], [16, 17, 18, 19, 20], [21, 22, 23, 24, 25]];
$.each(multArr, function(i) { fisherYates(this) });
console.log(multArr)
})
})

Check out my code here. Basically just looped over the elements of the multidimensional array and run the fisherYates on them like so:
function fisherYates(myArray) {
for(var i = 0; i< myArray.length; i++) {
k = myArray[i].length;
while(k--){
j = Math.floor(Math.random() * (myArray.length - 1));
tempk = myArray[i][k];
tempj = myArray[i][j];
myArray[i][k] = tempj;
myArray[i][j] = tempk;
}
}
}
Now if you wanted to do this for an n-dimensional array you're going to have to do it recursively, which would be fun, but I think that is more than you were asking for. If not I can update it later.

Help with JSON raw format in javascript

I have a JSON array of data which is
[ [[2, 5], [6, 10], [10, 7], [11, 15]],
[[0, 9], [1, 16], [3, 19], [4, 15]],
[[0, 7], [5, 16], [8, 17], [12, 19]] ]
but when I try to get the first array of [[2, 5], [6, 10], [10, 7], [11, 15]] using jsonData[0] I get the data as 2,5,6,10,10,7,11,15.
I would like to get the data in the JSON format and not the plain text format. Any ideas?

You should get the data as an array. Did you alert jsonData[0] because that will display the results as a flattened string.
Instead console.log(jsonData[0]) to see the actual array.
Here's the output I see when using your array.
var a = [[[2, 5], [6, 10], [10, 7], [11, 15]],[[0, 9], [1, 16], [3, 19], [4, 15]],[[0, 7], [5, 16], [8, 17], [12, 19]]];
alert(a[0]); // 2,5,6,10,10,7,11,15
console.log(a[0]); // [[2, 5], [6, 10], [10, 7], [11, 15]]
See an example.
Also, "JSON raw format" is misleading. What you have is a plain JavaScript array.

Are you asking how to convert it to a JSON string rather than simply getting the default toString behaviour of an array? If so you should just do:
JSON.stringify(jsonData[0])
Or whatever it is you want to stringify