对象键分配的参数返回undefined

时间：2017-07-10 15:00:46

标签： javascript

我正在开发模拟并正在研究移动功能。在更新函数中，我有两件事情：一个for循环遍历对象wolves中的每个键，两个函数move(x, y, up, down, left, right)和draw(x, y, w, h, color。我使用了wolves["wolf" + [i]]，所以当添加更多的狼时，它会逐个循环。调用move()时，通过对象键分配参数。问题是值返回undefined（如代码段所示）。非常感谢任何帮助

＆＃13;
＆＃13; 
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);
}
＆＃13; 
<body>
<canvas id="canvas" height="768px" width="1366px"/>
</body>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：3)

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>

我为你改变了。您不应该使用this语句，因为您的函数不是类。你只是传递对象的attr。你的功能参数。

答案 1 :(得分：0)

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.

答案 2 :(得分：0)

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>

相关问题
最新问题