Convert byte array to signed int64 in javascript - javascript
I know that there is no int64 data type in js. But i need to convert a byte array into a signed int64 to get same result comparing to BitConverter.ToInt64() method in .NET class library. There is an implementations of big integers in javascript (BigInt.js) which accept hex as input and gets a bigInt as output but result is not same as BitConverter.ToInt64() in BCL.
Example:
BitConverter.ToInt64() for '0x40e00a35661f92a2' will result in -6732283969128439744
I need a solution for doing this in java script, performance is not issue.
edit:
feed data in normal order into BigInt.js:
javascript: new BigInt('0x40e00a35661f92a2')// shows 4674747637673464482
feed data in reverse order into BigInt.js:
javascript: new BigInt('0xa2921f66350ae040')// shows 11714460104581111872
which neither matches the BitConverter.ToInt64() result:
C SHARP: BitConverter.ToInt64(new byte[] { 0x40, 0xe0, 0x0a, 0x35, 0x66, 0x1f, 0x92, 0xa2 }, 0); // shows -6732283969128439744
There is an implementation for converting hex string to Int64 (both signed and unsigned) here: LINK
That code returns right result:
javascript: new HexStringToInt64StringConverter(true).convert('a2921f66350ae040') // will return -6732283969128439744 same as BitConverter.ToInt64() in BCL
The functions from the link:
function HexStringToInt64StringConverter(signed) {
var hexCode = {
'0':"0000",
'1':"0001",
'2':"0010",
'3':"0011",
'4':"0100",
'5':"0101",
'6':"0110",
'7':"0111",
'8':"1000",
'9':"1001",
'a':"1010",
'b':"1011",
'c':"1100",
'd':"1101",
'e':"1110",
'f':"1111"
};
var preComputedLongMath = {
"20":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
"21":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2],
"22":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4],
"23":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 8],
"24":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 6],
"25":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 2],
"26":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 6, 4],
"27":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 2, 8],
"28":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 5, 6],
"29":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 1, 2],
"210":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 2, 4],
"211":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 4, 8],
"212":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 0, 9, 6],
"213":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 8, 1, 9, 2],
"214":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 6, 3, 8, 4],
"215":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 2, 7, 6, 8],
"216":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 6, 5, 5, 3, 6],
"217":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 3, 1, 0, 7, 2],
"218":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 6, 2, 1, 4, 4],
"219":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 2, 4, 2, 8, 8],
"220":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 4, 8, 5, 7, 6],
"221":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 9, 7, 1, 5, 2],
"222":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 1, 9, 4, 3, 0, 4],
"223":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 8, 3, 8, 8, 6, 0, 8],
"224":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 6, 7, 7, 7, 2, 1, 6],
"225":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 3, 5, 5, 4, 4, 3, 2],
"226":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 6, 7, 1, 0, 8, 8, 6, 4],
"227":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 3, 4, 2, 1, 7, 7, 2, 8],
"228":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 6, 8, 4, 3, 5, 4, 5, 6],
"229":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 3, 6, 8, 7, 0, 9, 1, 2],
"230":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 7, 3, 7, 4, 1, 8, 2, 4],
"231":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 1, 4, 7, 4, 8, 3, 6, 4, 8],
"232":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 2, 9, 4, 9, 6, 7, 2, 9, 6],
"233":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 8, 5, 8, 9, 9, 3, 4, 5, 9, 2],
"234":[0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 7, 1, 7, 9, 8, 6, 9, 1, 8, 4],
"235":[0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 4, 3, 5, 9, 7, 3, 8, 3, 6, 8],
"236":[0, 0, 0, 0, 0, 0, 0, 0, 0, 6, 8, 7, 1, 9, 4, 7, 6, 7, 3, 6],
"237":[0, 0, 0, 0, 0, 0, 0, 0, 1, 3, 7, 4, 3, 8, 9, 5, 3, 4, 7, 2],
"238":[0, 0, 0, 0, 0, 0, 0, 0, 2, 7, 4, 8, 7, 7, 9, 0, 6, 9, 4, 4],
"239":[0, 0, 0, 0, 0, 0, 0, 0, 5, 4, 9, 7, 5, 5, 8, 1, 3, 8, 8, 8],
"240":[0, 0, 0, 0, 0, 0, 0, 1, 0, 9, 9, 5, 1, 1, 6, 2, 7, 7, 7, 6],
"241":[0, 0, 0, 0, 0, 0, 0, 2, 1, 9, 9, 0, 2, 3, 2, 5, 5, 5, 5, 2],
"242":[0, 0, 0, 0, 0, 0, 0, 4, 3, 9, 8, 0, 4, 6, 5, 1, 1, 1, 0, 4],
"243":[0, 0, 0, 0, 0, 0, 0, 8, 7, 9, 6, 0, 9, 3, 0, 2, 2, 2, 0, 8],
"244":[0, 0, 0, 0, 0, 0, 1, 7, 5, 9, 2, 1, 8, 6, 0, 4, 4, 4, 1, 6],
"245":[0, 0, 0, 0, 0, 0, 3, 5, 1, 8, 4, 3, 7, 2, 0, 8, 8, 8, 3, 2],
"246":[0, 0, 0, 0, 0, 0, 7, 0, 3, 6, 8, 7, 4, 4, 1, 7, 7, 6, 6, 4],
"247":[0, 0, 0, 0, 0, 1, 4, 0, 7, 3, 7, 4, 8, 8, 3, 5, 5, 3, 2, 8],
"248":[0, 0, 0, 0, 0, 2, 8, 1, 4, 7, 4, 9, 7, 6, 7, 1, 0, 6, 5, 6],
"249":[0, 0, 0, 0, 0, 5, 6, 2, 9, 4, 9, 9, 5, 3, 4, 2, 1, 3, 1, 2],
"250":[0, 0, 0, 0, 1, 1, 2, 5, 8, 9, 9, 9, 0, 6, 8, 4, 2, 6, 2, 4],
"251":[0, 0, 0, 0, 2, 2, 5, 1, 7, 9, 9, 8, 1, 3, 6, 8, 5, 2, 4, 8],
"252":[0, 0, 0, 0, 4, 5, 0, 3, 5, 9, 9, 6, 2, 7, 3, 7, 0, 4, 9, 6],
"253":[0, 0, 0, 0, 9, 0, 0, 7, 1, 9, 9, 2, 5, 4, 7, 4, 0, 9, 9, 2],
"254":[0, 0, 0, 1, 8, 0, 1, 4, 3, 9, 8, 5, 0, 9, 4, 8, 1, 9, 8, 4],
"255":[0, 0, 0, 3, 6, 0, 2, 8, 7, 9, 7, 0, 1, 8, 9, 6, 3, 9, 6, 8],
"256":[0, 0, 0, 7, 2, 0, 5, 7, 5, 9, 4, 0, 3, 7, 9, 2, 7, 9, 3, 6],
"257":[0, 0, 1, 4, 4, 1, 1, 5, 1, 8, 8, 0, 7, 5, 8, 5, 5, 8, 7, 2],
"258":[0, 0, 2, 8, 8, 2, 3, 0, 3, 7, 6, 1, 5, 1, 7, 1, 1, 7, 4, 4],
"259":[0, 0, 5, 7, 6, 4, 6, 0, 7, 5, 2, 3, 0, 3, 4, 2, 3, 4, 8, 8],
"260":[0, 1, 1, 5, 2, 9, 2, 1, 5, 0, 4, 6, 0, 6, 8, 4, 6, 9, 7, 6],
"261":[0, 2, 3, 0, 5, 8, 4, 3, 0, 0, 9, 2, 1, 3, 6, 9, 3, 9, 5, 2],
"262":[0, 4, 6, 1, 1, 6, 8, 6, 0, 1, 8, 4, 2, 7, 3, 8, 7, 9, 0, 4],
"263":[0, 9, 2, 2, 3, 3, 7, 2, 0, 3, 6, 8, 5, 4, 7, 7, 5, 8, 0, 8],
"264":[1, 8, 4, 4, 6, 7, 4, 4, 0, 7, 3, 7, 0, 9, 5, 5, 1, 6, 1, 6],
"265":[3, 6, 8, 9, 3, 4, 8, 8, 1, 4, 7, 4, 1, 9, 1, 0, 3, 2, 3, 2]
};
if (typeof(signed) != 'boolean') signed = false;
function toBinary(hex) {
hex = hex.toLowerCase();
var binary = "";
for (var i = 0; i < hex.length; i++) {
binary += hexCode[hex[i]];
}
return binary;
}
function to1nsComplement(binary) {
var compliment = "";
for (var i = 0; i < binary.length; i++) {
compliment += (binary.charAt(i) == "1" ? "0" : "1");
}
return compliment;
}
function arrayAdd(a, b) {
var carry = 0;
var number = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
for (var i = 19; i >= 0; i--) {
number[i] = a[i] + b[i] + carry;
if (number[i].toString().length > 1) {
carry = parseInt(number[i].toString().substring(0, number[i].toString().length - 1), 10);
number[i] = parseInt(number[i].toString().substring(number[i].toString().length - 1), 10)
} else {
carry = 0;
}
}
return number;
}
function removeZeroPad(number) {
var lock = false;
var output = [];
for (var i = 0; i < number.length; i++) {
if (lock) {
output.push(number[i]);
} else {
if (number[i] != 0) {
lock = true;
output.push(number[i]);
}
}
}
return output;
}
function binaryToDec(binary) {
var negative = false;
if (signed && (binary.charAt(0) == 1)) {
negative = true;
}
if (signed) {
binary = binary.substring(1);
if (negative) {
binary = to1nsComplement(binary);
}
}
var pos = 0;
var number = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
for (var i = binary.length - 1; i >= 0; i--) {
if (binary.charAt(i) == 1) {
number = arrayAdd(number, preComputedLongMath["2" + pos])
}
pos++;
}
if (negative) {
number = removeZeroPad(arrayAdd(number, preComputedLongMath["20"]));
number.splice(0, 0, "-");
} else {
number = removeZeroPad(number);
}
return number.join("");
}
this.convert = function (hex) {
var binary = toBinary(hex);
return binaryToDec(binary);
};
}
Related
Im trying to build pacman with JS but im getting an error that says cannot read properties of undefined
I'm trying to build a simple pacman game before I start learning react but I keep getting three errors that says
if you can't see the image these are the errors:
cannot read properties of undefined (reading 'add' )
cannot read properties of undefined (reading 'classList' )
cannot read properties of undefined (reading 'remove' )
const grid = document.querySelector('.grid');
const width = 28;
let squares = [];
const layout = [
1, 1, 1, 1, 1, 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, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1,
1, 3, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 3, 1,
1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 0, 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, 1,
1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1,
1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1,
1, 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, 1,
1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1,
1, 1, 1, 1, 1, 1, 0, 1, 1, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 1, 1, 0, 1, 1, 1, 1, 1, 1,
1, 1, 1, 1, 1, 1, 0, 1, 1, 4, 1, 1, 1, 2, 2, 1, 1, 1, 4, 1, 1, 0, 1, 1, 1, 1, 1, 1,
1, 1, 1, 1, 1, 1, 0, 1, 1, 4, 1, 1, 2, 2, 2, 2, 1, 1, 4, 1, 1, 0, 1, 1, 1, 1, 1, 1,
4, 4, 4, 4, 4, 4, 0, 0, 0, 4, 1, 1, 1, 1, 1, 1, 1, 1, 4, 0, 0, 0, 4, 4, 4, 4, 4, 4,
1, 1, 1, 1, 1, 1, 0, 1, 1, 4, 1, 1, 1, 1, 1, 1, 1, 1, 4, 1, 1, 0, 1, 1, 1, 1, 1, 1,
1, 1, 1, 1, 1, 1, 0, 1, 1, 4, 1, 1, 1, 1, 1, 1, 1, 1, 4, 1, 1, 0, 1, 1, 1, 1, 1, 1,
1, 1, 1, 1, 1, 1, 0, 1, 1, 4, 1, 1, 1, 1, 1, 1, 1, 1, 4, 1, 1, 0, 1, 1, 1, 1, 1, 1,
1, 0, 0, 0, 0, 0, 0, 0, 0, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 0, 0, 0, 0, 0, 0, 0, 0, 1,
1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1,
1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1,
1, 3, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 3, 1,
1, 1, 1, 0, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 0, 1, 1, 1,
1, 1, 1, 0, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 0, 1, 1, 1,
1, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 1,
1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1,
1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 0, 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, 1,
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1
];
function createBoard() {
for (let i = 0; i < layout.length; i++) {
const square = document.createElement('div');
grid.appendChild(square);
squares.push(square);
if (layout[i] === 0) {
squares[i].classList.add('pac-dot');
} else if (layout[i] === 1) {
squares[i].classList.add('wall');
} else if (layout[i] === 2) {
squares[i].classList.add('ghost-lair');
} else if (layout[i] === 3) {
squares[i].classList.add('power-pallets');
}
}
}
createBoard();
class ghost {
constructor(name, startPosition, speed) {
this.name = name;
this.startPosition = startPosition;
this.position = startPosition;
this.speed = speed;
this.isScared = false;
}
}
const ghosts = [
new ghost('red', 348, 250),
new ghost('blue', 349, 250),
new ghost('pink', 350, 250),
new ghost('yellow', 351, 250)
]
ghosts.forEach((ghost) => {
squares[ghost.position].classList.add(ghost.name);
squares[ghost.position].classList.add('ghost');
})
function moveGhost(ghost) {
let random = Math.floor(Math.random() * 4) + 1;
const allDirections = [-1, +1, -width, +width];
let direction = allDirections[random];
//
setInterval(() => {
if (!squares[ghost.position + direction].classList.contains('wall')) {
//remove the ghost from the old position
squares[ghost.position].classList.remove(ghost.name)
squares[ghost.position].classList.remove('ghost')
//update the ghost position
squares[ghost.position] += direction;
//add the ghost to the grid
squares[ghost.position].classList.add(ghost.name);
squares[ghost.position].classList.add('ghost');
} else {
direction = allDirections[Math.floor(Math.random() * allDirections.length)]
}
}, 2500)
}
ghosts.forEach(ghost => moveGhost(ghost))
.grid {
width: 420px;
height: 420px;
border: 1px solid black;
display: flex;
flex-wrap: wrap;
}
.grid>* {
box-sizing: border-box;
width: 15px;
height: 15px;
border: 1px solid green;
/*delete or change color and opacity*/
}
.pac-dot {
border: 5px solid #fff;
background: greenyellow;
}
.wall {
background: blue;
}
.power-pallets {
background: green;
border-radius: 7.5px;
}
.ghost-lair {
background-color: #fff;
}
.ghost {
border-radius: 7.5px;
}
.red {
background: red;
}
.blue {
background-color: aqua;
}
.pink {
background-color: palevioletred;
}
.yellow {
background-color: yellow;
}
<div class="grid"></div>
There is one thing that i noticed here: squares[ghost.position] += direction; squares[ghost.position] will return HTML element and you want to sum an element and a number? So after that value of squares[ghost.position] will be "[object HTMLDivElement]1"and thats a string. Thats why you got errors.
You have to change squares[ghost.position] += direction to ghost.position += direction Also the following random value let random = Math.floor(Math.random() * 4) + 1 should instead be: let random = Math.floor(Math.random() * 4) so it does not occasionally result in an undefined direction value.
Vlookup mapping in javascript
I made is using Vlookup in Excel, Now I have do the same a webpage. <div class="age"> <label for="age" class="age"> Please Enter your age : </label> <input type="text" id="age" name="age" onkeypress='return isNumberKey(event)'> </div> <div class="bmi"> <label for="bmi" class="bmi">Please enter your Body Mass Index value : </label> <input type="text" id="bmi" name="bmi" onkeypress='return isNumberKey(event)'> </div> <div class="afc"> <label for="afc" class="afc">Please enter your antral follicle count (afc) value : </label> <input type="text" id="afc" name="afc" onkeypress='return isNumberKey(event)'> </div> <div class="amh"> <label for="amh" class="amh">Please Enter your Anti-Müllerian hormone (amh) level : </label> <input type="text" id="amh" name="amh" onkeypress='return isNumberKey(event)'> </div> There are 6 arrays var values = [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,26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 100]; var age = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 4, 4, 4, 4, 4, 3, 3, 3, 3, 3, 2, 2, 2, 2, 2, 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, 0, 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 bmi = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 3, 4, 5, 5, 5, 4, 4, 4, 3, 3, 3, 2, 2, 2, 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, 0, 0, 0, 0, 0, 0, 0, 0, 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 afc = [1, 1, 1, 2, 2, 3, 3, 3, 4, 4, 4, 5, 5, 5, 5, 5, 4, 4, 4, 4, 4, 4, 4, 3, 3, 3, 3, 3, 2, 2, 2, 2, 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, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 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 amh10 = [0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 3, 3, 3, 4, 4, 4, 4, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 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 d2fsh = [2, 3, 4, 5, 5, 4, 4, 3, 3, 2, 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, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]; I have these spans where user can get the result after performing some internal calculations. <div> Final Score: <span id="result"> </span> Percentage: <span id="percentage"> </span> result: <span id="result"> </span> </div> For each input of the values of different fields, the input value should me mapped to the corresponding value from the array for example. If the age input is 45, The value of 45th index of age array should be returned I have attached the excel file for reference: Reference Excel How should I go about it. looked up lot of examples, but none of them deal in multiple arrays/inputs from users.
It would be great if you could explain what exactly is the issue without requiring us to analyze your excel. To return the n-th element from an array you can simply do array[n] To find index of an element with value X you can call array.indexOf(X)
How to group the first value (string) and add the values of the same dates?
JAVASCRIPT - JQUERY
sum the values
How to group the first value (the date) and add the values of the same dates?
ARRAY :
0: (5) ["11-2019", 0, 20, 0, 0]
1: (5) ["11-2019", 41, 0, 0, 0]
2: (5) ["11-2019", 0, 0, 29, 0]
3: (5) ["11-2019", 0, 0, 0, 60]
4: (5) ["09-2019", 0, 1, 0, 0]
5: (5) ["09-2019", 0, 0, 1, 0]
6: (5) ["09-2019", 0, 0, 0, 1]
7: (5) ["05-2019", 2, 0, 0, 0]
OUT :
0: (5) ["11-2019", 41, 20, 29, 60]
1: (5) ["09-2019", 0, 1, 1, 1]
2: (5) ["05-2019", 2, 0, 0, 0]
result = DataAll.reduce(function(r, a) {
a.forEach(function(b, i) {
r[i] = (r[i] || 0) + b;
console.log(r[i]);
});
return r;
}, []);
I would find the array in the result set and update all values.
var data = [["11-2019", 0, 20, 0, 0], ["11-2019", 41, 0, 0, 0], ["11-2019", 0, 0, 29, 0], ["11-2019", 0, 0, 0, 60], ["09-2019", 0, 1, 0, 0], ["09-2019", 0, 0, 1, 0], ["09-2019", 0, 0, 0, 1], ["05-2019", 2, 0, 0, 0]],
result = data.reduce((r, a) => {
var temp = r.find(([date]) => date === a[0])
if (temp) {
for (var i = 1; i < a.length; i++) temp[i] += a[i];
} else {
r.push([...a]);
}
return r;
}, []);
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }
I added a filter to your script to remove the 0-values from the results. If you really want the 0 values use
acc[curr[0]]=(acc[curr[0]]||[]).concat(curr.slice(1));
instead.
var inp=[["11-2019", 0, 20, 0, 0],
["11-2019", 41, 0, 0, 0],
["11-2019", 0, 0, 29, 0],
["11-2019", 0, 0, 0, 60],
["09-2019", 0, 1, 0, 0],
["09-2019", 0, 0, 1, 0],
["09-2019", 0, 0, 0, 1],
["05-2019", 2, 0, 0, 0]];
var out=inp.reduce((acc,curr)=>{
acc[curr[0]]=(acc[curr[0]]||[]).concat(curr.slice(1).filter(v=>v>0));
return acc
}, {});
console.log(out);
// and to get it into your format:
var outarr=Object.keys(out).map(k=>[k].concat(out[k]))
console.log(outarr)
Right, if you want the sum then my version would be the following. Thanks to Nina for supplying a correct answer first. ;-)
var inp=[["11-2019", 0, 20, 0, 0],
["11-2019", 41, 0, 0, 0],
["11-2019", 0, 0, 29, 0],
["11-2019", 0, 0, 0, 60],
["09-2019", 0, 1, 0, 0],
["09-2019", 0, 0, 1, 0],
["09-2019", 0, 0, 0, 1],
["05-2019", 2, 0, 0, 0]];
let out=inp.reduce((acc,cur)=>{
if(acc[cur[0]]) acc[cur[0]].forEach((v,i,a)=>a[i]+=cur[i+1]);
else acc[cur[0]]=cur.slice(1)
return acc
}, {} );
outarr=Object.keys(out).map(k=>[k].concat(out[k]))
console.log(outarr)
Displaying an 11x11 Matrix on a Canvas
I've been trying to create a canvas that displays an 11x11 matrix.
const canvas = document.getElementById('canvasGame');
const context = canvas.getContext('2d');
context.scale(10, 10);
context.fillstyle = '#000';
context.fillstyle(0,0, canvas.width, canvas.height);
const matrix = [
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
];
Depending on the number inside the matrix it will create a rectangle of a certain colour.
I've created a basic function that goes through every entry.
if = 0, white rectangle.
else, black rectangle.
function drawMatrix(matrix){
matrix.forEach((row, y) =>{
row.forEach((value, x) => {
if(value === 0) {
context.fillStyle = 'white';
context.fillRect(x, y, 1, 1);
}
else
{
context.fillStyle = 'black';
context.fillRect(x, y, 1, 1);
}
});
});
}
drawMatrix(matrix);
However when I load my html file with my .js file and my canvas set-up it doesnt load anything apart from the styling I've applied to my canvas.
Screenshot: What it loads.
My HTML, if that matters.
<html>
<head>
<title>Testing Grounds</title>
<style>
body {
background: #345;
color: #fff;
font-family: sans-serif;
font-size: 2em;
text-align: center;
}
canvas {
border: dashed .2em #fff;
height: 90vh;
}
</style>
</head>
<body>
<h1>Test Zone</h1>
<p>Using a canvas to display 11x11 matrix</p>
<canvas id="canvasGame" width="350" height="350"/>
<script src="app.js"></script>
</body>
</html>
Here is also another way...
const canvas1 = document.getElementById('canvas1');
const context1 = canvas1.getContext('2d');
const canvas2 = document.getElementById('canvas2');
const context2 = canvas2.getContext('2d');
//context.scale(canvas.height / 16, canvas.height / 16);
matrix = [
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 1],
[1, 0, 1, 0, 0, 0, 0, 0, 0, 1, 0, 1],
[1, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1],
[1, 0, 1, 0, 0, 0, 0, 0, 0, 1, 0, 1],
[1, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1],
[1, 0, 1, 0, 0, 1, 1, 0, 0, 1, 0, 1],
[1, 0, 1, 0, 0, 0, 0, 0, 0, 1, 0, 1],
[1, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
];
function drawMatrix(matrix) {
z = matrix.map((c) => c.map((c) => c == 0 ? [255, 255, 255, 255] : [0, 0, 0, 255]));
i = new ImageData(Uint8ClampedArray.from(z.flat(2)), 12)
context1.putImageData(i, 0, 0);
context2.scale(16, 16);
context2.webkitImageSmoothingEnabled = false;
context2.mozImageSmoothingEnabled = false;
context2.imageSmoothingEnabled = false;
context2.drawImage(canvas1, 0, 0);
}
drawMatrix(matrix);
<center><canvas hidden id="canvas1" width=12 height=12></canvas></center>
<center><canvas id="canvas2" width=192 height=192></canvas></center>
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
// every drawn pixel will be 16 times bigger
context.scale(canvas.height / 16, canvas.height / 16);
const matrix = [
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 1],
[1, 0, 1, 0, 0, 0, 0, 0, 0, 1, 0, 1],
[1, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1],
[1, 0, 1, 0, 0, 0, 0, 0, 0, 1, 0, 1],
[1, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1],
[1, 0, 1, 0, 0, 1, 1, 0, 0, 1, 0, 1],
[1, 0, 1, 0, 0, 0, 0, 0, 0, 1, 0, 1],
[1, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
];
function drawMatrix(matrix) {
// write all pixels cycling thru rows and columns
matrix.forEach((row, y) => {
row.forEach((value, x) => {
context.fillStyle = value && "black" || "white";
context.fillRect(x, y, 1, 1);
});
});
}
drawMatrix(matrix); // draw the matrix
<center><canvas id="canvas" width=192 height=192></canvas></center>
The rectangles you're creating are 1 by 1 pixel and always in the upper-left. You should calculate the width/height of the rectangle (width / 11, height / 11). Then translate the x and width using those values. Something like the following should work:
function drawMatrix(matrix){
var cellWidth = canvas.width / 11.0;
var cellHeight = vanvas.height / 11.0;
matrix.forEach((row, y) =>{
row.forEach((value, x) => {
context.fillStyle = cellColor(value);
context.fillRect(x * cellWidth, y * cellHeight, cellWidth, cellHeight);
});
});
}
function cellColor(val) {
if(value == 0)
{
return 'white';
}
return 'black';
}
drawMatrix(matrix);
This will calculate the width and height of the cell, loop through each element, and draw the rectangle with either white or black depending on the value.
You should also make sure that the drawMatrix function is called after the body is loaded.
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);