Menu
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>
351
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.
131
answered Aug 24 '26 07:08
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With