Object key assigned parameters return undefined
I am developing a simulation and working on a moving function. In the update function, I have two things: a for loop going through every key in the object, wolves
and two functions move(x, y, up, down, left, right)
and draw(x, y, w, h, color
. I used wolves["wolf" + [i]]
, so when more wolves are added, it will cycle through each one individually. When called move()
, the parameters are assigned via the object key. The problem lies in the return values undefined (as shown in the snippet). Any help is greatly appreciated
var wolves = {
wolf0: {
x: 10,
y: 10,
w: 10,
h: 10,
up: false,
down: false,
left: false,
right: false
}
};
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var body = document.getElementsByTagName("body");
var movement = ["up", "down", "left", "right"];
//styles
canvas.style.backgroundColor = "black";
body[0].style.overflow = "hidden";
body[0].style.margin = "0px";
//update
var update = setInterval(function(){
//clear anything left over from the last frame;
context.clearRect(0, 0, canvas.width, canvas.height);
//loop through wolves object and update each key
for(i = 0; i < Object.keys(wolves).length; i++){
var wolf = wolves["wolf" + i];
move(wolf.x, wolf.y, wolf.up, wolf.down, wolf.left, wolf.right);
//then draw to the canvas
draw(wolf.x, wolf.y, wolf.w, wolf.h, "blue");
}
}, 1000);
function draw(x, y, w, h, color){
context.fillStyle = color;
context.fillRect(x, y, w, h);
context.fill();
}
function move(x, y, up, down, left, right){
var ran = Math.floor(Math.random() * 4) + 0;
up = this.up;
down = this.down;
left = this.left;
right = this.right;
x = this.x;
y = this.y;
up = false;
down = false;
left = false;
right = false;
switch(movement[ran]){
case "up":
up = true;
console.log("going up");
break;
case "down":
down = true;
console.log("going down");
break;
case "left":
left = true;
console.log("going left");
break;
case "right":
right = true;
console.log("going right");
break;
default:
console.log("movement hasn't happend, the ran number is: " + ran);
break;
}
if(up){
y--;
console.log("y--;");
}
if(down){
y++;
console.log("y++;");
}
if(left){
x--;
console.log("x--;");
}
if(right){
x++;
console.log("x++;");
}
console.log("x " + this.x);
console.log("y " + this.y);
}
<body>
<canvas id="canvas" height="768px" width="1366px"/>
</body>
source to share
var wolves = {
wolf0: {
x: 10,
y: 10,
w: 10,
h: 10,
up: false,
down: false,
left: false,
right: false
}
};
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var body = document.getElementsByTagName("body");
var movement = ["up", "down", "left", "right"];
//styles
canvas.style.backgroundColor = "black";
body[0].style.overflow = "hidden";
body[0].style.margin = "0px";
//update
var update = setInterval(function(){
//clear anything left over from the last frame;
context.clearRect(0, 0, canvas.width, canvas.height);
//loop through wolves object and update each key
for(i = 0; i < Object.keys(wolves).length; i++){
var wolf = wolves["wolf" + [i]];
move(wolf.x, wolf.y, wolf.up, wolf.down, wolf.left, wolf.right);
//then draw to the canvas
draw(wolf.x, wolf.y, wolf.w, wolf.h, "blue");
}
}, 1000);
function draw(x, y, w, h, color){
context.fillStyle = color;
context.fillRect(x, y, w, h);
context.fill();
}
function move(x, y, up, down, left, right){
var ran = Math.floor(Math.random() * 4) + 0;
up = up;
down = down;
left = left;
right = right;
x = x;
y = y;
up = false;
down = false;
left = false;
right = false;
switch(movement[ran]){
case "up":
up = true;
console.log("going up");
break;
case "down":
down = true;
console.log("going down");
break;
case "left":
left = true;
console.log("going left");
break;
case "right":
right = true;
console.log("going right");
break;
default:
console.log("movement hasn't happend, the ran number is: " + ran);
break;
}
if(up){
y--;
console.log("y--;");
}
if(down){
y++;
console.log("y++;");
}
if(left){
x--;
console.log("x--;");
}
if(right){
x++;
console.log("x++;");
}
console.log("x " + x);
console.log("y " + y);
}
<body>
<canvas id="canvas" height="768px" width="1366px"/>
</body>
I have changed for you. You shouldn't use a statement this
because your function is not a class. You are just passing your attr object. to your function parameters.
source to share
There are many problems with this code. Below is an example of minimal changes to make it work (movement is subtle since you only move it 1
one unit at a time):
var wolves = {
wolf0: {
x: 10,
y: 10,
w: 10,
h: 10,
up: false,
down: false,
left: false,
right: false
}
};
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var body = document.getElementsByTagName("body");
var movement = ["up", "down", "left", "right"];
//styles
canvas.style.backgroundColor = "black";
body[0].style.overflow = "hidden";
body[0].style.margin = "0px";
//update
var update = setInterval(function(){
//clear anything left over from the last frame;
context.clearRect(0, 0, canvas.width, canvas.height);
//loop through wolves object and update each key
for(i = 0; i < Object.keys(wolves).length; i++){
var wolf = wolves["wolf" + i];
move(wolf);
//then draw to the canvas
draw(wolf.x, wolf.y, wolf.w, wolf.h, "blue");
}
}, 1000);
function draw(x, y, w, h, color){
context.fillStyle = color;
context.fillRect(x, y, w, h);
context.fill();
}
function move(wolf){
var ran = Math.floor(Math.random() * 4) + 0;
switch(movement[ran]){
case "up":
wolf.y--
console.log("going up");
break;
case "down":
wolf.y++
console.log("going down");
break;
case "left":
wolf.x--
console.log("going left");
break;
case "right":
wolf.x++
console.log("going right");
break;
default:
console.log("movement hasn't happend, the ran number is: " + ran);
break;
}
}
<body>
<canvas id="canvas" height="768px" width="1366px"/>
</body>
You x, y, up, down, left, right
only pass arguments to reassign them immediately. This indicates something very wrong. You also don't update wolf
or save any reference to the new wolf position. If you go wolf
to move
, you can update the object and then draw it in the interval.
source to share
you can send wolf + i
in move(wolf)
and as you go through the link you can get updated values stored in wolf + i
, which will help you in drawing simulation. Also you don't need to use this
internally move()
.
var wolves = {
wolf0: {
x: 10,
y: 10,
w: 10,
h: 10,
up: false,
down: false,
left: false,
right: false
}
};
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var body = document.getElementsByTagName("body");
var movement = ["up", "down", "left", "right"];
//styles
canvas.style.backgroundColor = "black";
body[0].style.overflow = "hidden";
body[0].style.margin = "0px";
//update
var update = setInterval(function(){
//clear anything left over from the last frame;
context.clearRect(0, 0, canvas.width, canvas.height);
//loop through wolves object and update each key
for(i = 0; i < Object.keys(wolves).length; i++){
var wolf = wolves["wolf" + i];
move(wolf)
//then draw to the canvas
draw(wolf.x, wolf.y, wolf.w, wolf.h, "blue");
}
}, 1000);
function draw(x, y, w, h, color){
context.fillStyle = color;
context.fillRect(x, y, w, h);
context.fill();
}
function move(wolf){
var ran = Math.floor(Math.random() * 4) + 0;
up = wolf.up;
down = wolf.down;
left = wolf.left;
right = wolf.right;
x = wolf.x;
y = wolf.y;
up = false;
down = false;
left = false;
right = false;
switch(movement[ran]){
case "up":
up = true;
console.log("going up");
break;
case "down":
down = true;
console.log("going down");
break;
case "left":
left = true;
console.log("going left");
break;
case "right":
right = true;
console.log("going right");
break;
default:
console.log("movement hasn't happend, the ran number is: " + ran);
break;
}
if(up){
y--;
console.log("y--;");
}
if(down){
y++;
console.log("y++;");
}
if(left){
x--;
console.log("x--;");
}
if(right){
x++;
console.log("x++;");
}
console.log("x " + x);
console.log("y " + y);
wolf.x = x;
wolf.y = y;
}
<body>
<canvas id="canvas" height="768px" width="1366px"/>
</body>
source to share