CODEWITHSUNDEEP
javascript
Liam Sperry
Liam Sperry

Reputation: 318

object key assigned parameters return undefined

I'm developing a simulation and am working on the moving function. In the update function I have two things going on: a for loop that goes through each 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 move() is invoked the parameters are assigned via the object key. The problem is the values return undefined (as shown in the snippet). Any help is very 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>

Upvotes: 3

Views: 87

Answers (3)

Dij
Dij

Reputation: 9808

you can send wolf + i to move(wolf) and as it passes by reference you can get updated values stored in wolf + i, which helps you in drawing the simulation. Also you don't need to use this inside 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>

Upvotes: 0

Damon
Damon

Reputation: 4336

There are numerous problems in this code. See the below example of minimal changes to get it working (the movement is subtle since you are only moving it 1 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 are passing in arguments x, y, up, down, left, right only to immediately reassign them. This indicates something very wrong. You are also not updating wolf or maintaining any reference to the wolf's new position. If you instead pass wolf into move you can update the object, and then draw it in the interval.

Upvotes: 0

Zaphiel
Zaphiel

Reputation: 293

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 this statement because of your function not a class. You just passing your object's attr. to your function params.

Upvotes: 3

Related Questions