Objektschlüssel zugewiesene Parameter zurück undefined

Ich entwickle eine Simulation und arbeite an der beweglichen Funktion. In der Update-Funktion habe ich zwei Dinge vor: eine for-Schleife, die durch jede Taste im Objekt wolves und zwei Funktionen move(x, y, up, down, left, right) und draw(x, y, w, h, color geht. Ich habe verwendet, also wenn mehr Wölfe hinzugefügt werden, wird es durch jedes einzeln durchlaufen. Wenn move() aufgerufen wird, werden die Parameter über den Objektschlüssel zugewiesen. Das Problem ist, dass die Werte undefined (wie im Snippet gezeigt) zurückgegeben werden. Jede Hilfe ist sehrObjektschlüssel zugewiesene Parameter zurück undefined

geschätzt

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){ 
 
\t var ran = Math.floor(Math.random() * 4) + 0; 
 
\t up = this.up; 
 
\t down = this.down; 
 
\t left = this.left; 
 
\t right = this.right; 
 
\t x = this.x; 
 
\t y = this.y; 
 
\t up = false; 
 
\t down = false; 
 
\t left = false; 
 
\t right = false; 
 
\t switch(movement[ran]){ 
 
\t \t case "up": 
 
\t \t \t up = true; 
 
\t \t \t console.log("going up"); 
 
\t \t break; 
 
\t \t case "down": 
 
\t \t \t down = true; 
 
\t \t \t console.log("going down"); 
 
\t \t break; 
 
\t \t case "left": 
 
\t \t \t left = true; 
 
\t \t \t console.log("going left"); 
 
\t \t break; 
 
\t \t case "right": 
 
\t \t \t right = true; 
 
\t \t \t console.log("going right"); 
 
\t \t break; 
 
\t \t default: 
 
\t \t \t console.log("movement hasn't happend, the ran number is: " + ran); 
 
\t \t break; 
 
\t } 
 
\t if(up){ 
 
\t \t y--; 
 
\t \t console.log("y--;"); 
 
\t } 
 
\t if(down){ 
 
\t \t y++; 
 
\t \t console.log("y++;"); 
 
\t } 
 
\t if(left){ 
 
\t \t x--; 
 
\t \t console.log("x--;"); 
 
\t } 
 
\t if(right){ 
 
\t \t x++; 
 
\t \t console.log("x++;"); 
 
\t } 
 
\t console.log("x " + this.x); 
 
\t console.log("y " + this.y); 
 
}

<body> 
 
<canvas id="canvas" height="768px" width="1366px"/> 
 
</body>

Quelle

2017-07-10 Liam Sperry

'Wölfe [ "Wolf" + [i]]' sollte nicht die [] in ihm. – epascarello

Ich lege das später dort auf, wenn mehr und mehr Wölfe erscheinen, wird es durch jeden hindurchgehen ... oder gibt es einen besseren Weg, dies zu tun? –

Es sollte '" Wolf "+ i' – epascarello

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){ 
 
\t var ran = Math.floor(Math.random() * 4) + 0; 
 
\t up = up; 
 
\t down = down; 
 
\t left = left; 
 
\t right = right; 
 
\t x = x; 
 
\t y = y; 
 
\t up = false; 
 
\t down = false; 
 
\t left = false; 
 
\t right = false; 
 
\t switch(movement[ran]){ 
 
\t \t case "up": 
 
\t \t \t up = true; 
 
\t \t \t console.log("going up"); 
 
\t \t break; 
 
\t \t case "down": 
 
\t \t \t down = true; 
 
\t \t \t console.log("going down"); 
 
\t \t break; 
 
\t \t case "left": 
 
\t \t \t left = true; 
 
\t \t \t console.log("going left"); 
 
\t \t break; 
 
\t \t case "right": 
 
\t \t \t right = true; 
 
\t \t \t console.log("going right"); 
 
\t \t break; 
 
\t \t default: 
 
\t \t \t console.log("movement hasn't happend, the ran number is: " + ran); 
 
\t \t break; 
 
\t } 
 
\t if(up){ 
 
\t \t y--; 
 
\t \t console.log("y--;"); 
 
\t } 
 
\t if(down){ 
 
\t \t y++; 
 
\t \t console.log("y++;"); 
 
\t } 
 
\t if(left){ 
 
\t \t x--; 
 
\t \t console.log("x--;"); 
 
\t } 
 
\t if(right){ 
 
\t \t x++; 
 
\t \t console.log("x++;"); 
 
\t } 
 
\t console.log("x " + x); 
 
\t console.log("y " + y); 
 
}

<body> 
 
<canvas id="canvas" height="768px" width="1366px"/> 
 
</body>

Ich habe für dich verändert. Sie sollten nicht this Anweisung wegen Ihrer Funktion keine Klasse verwenden. Du passierst einfach die Attraktivität deines Objekts. zu deiner Funktion params.

Quelle

2017-07-10 15:13:42 Zaphiel

Vielen Dank, sowohl für die Lösung des Problems als auch für die Verwendung dieser 'Aussagen', die mich immer vermasseln! –

Kein Problem. Viel Glück bei Ihrem Projekt! :) – Zaphiel

In diesem Code gibt es zahlreiche Probleme. Siehe unten stehende Beispiel für minimale Veränderungen, die sie zum Laufen zu bringen (die Bewegung ist subtil, da Sie nur bewegen sie 1 Einheit zu einer Zeit):

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){ 
 
\t var ran = Math.floor(Math.random() * 4) + 0; 
 

 
\t switch(movement[ran]){ 
 
\t \t case "up": 
 
\t \t \t wolf.y-- 
 
\t \t \t console.log("going up"); 
 
\t \t break; 
 
\t \t case "down": 
 
\t \t \t wolf.y++ 
 
\t \t \t console.log("going down"); 
 
\t \t break; 
 
\t \t case "left": 
 
\t \t \t wolf.x-- 
 
\t \t \t console.log("going left"); 
 
\t \t break; 
 
\t \t case "right": 
 
\t \t \t wolf.x++ 
 
\t \t \t console.log("going right"); 
 
\t \t break; 
 
\t \t default: 
 
\t \t \t console.log("movement hasn't happend, the ran number is: " + ran); 
 
\t \t break; 
 
\t } 
 
}

<body> 
 
<canvas id="canvas" height="768px" width="1366px"/> 
 
</body>

Sie sind Argumente zu übergeben x, y, up, down, left, right nur zu weisen Sie sie sofort neu zu. Dies deutet auf etwas sehr falsch hin. Du aktualisierst auch nicht wolf oder behalte irgendeinen Hinweis auf die neue Position des Wolfes. Wenn Sie stattdessen wolf in move übergeben, können Sie das Objekt aktualisieren und es dann im Intervall zeichnen.

Quelle

2017-07-10 15:19:19 Damon

können Sie senden wolf + i zu move(wolf) und wie es durch Verweis passiert können Sie aktualisierte Werte in wolf + i, die Sie beim Zeichnen der Simulation gespeichert erhalten. Außerdem müssen Sie this innerhalb move() nicht verwenden.

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){ 
 
\t var ran = Math.floor(Math.random() * 4) + 0; 
 
\t up = wolf.up; 
 
\t down = wolf.down; 
 
\t left = wolf.left; 
 
\t right = wolf.right; 
 
\t x = wolf.x; 
 
\t y = wolf.y; 
 
\t up = false; 
 
\t down = false; 
 
\t left = false; 
 
\t right = false; 
 
\t switch(movement[ran]){ 
 
\t \t case "up": 
 
\t \t \t up = true; 
 
\t \t \t console.log("going up"); 
 
\t \t break; 
 
\t \t case "down": 
 
\t \t \t down = true; 
 
\t \t \t console.log("going down"); 
 
\t \t break; 
 
\t \t case "left": 
 
\t \t \t left = true; 
 
\t \t \t console.log("going left"); 
 
\t \t break; 
 
\t \t case "right": 
 
\t \t \t right = true; 
 
\t \t \t console.log("going right"); 
 
\t \t break; 
 
\t \t default: 
 
\t \t \t console.log("movement hasn't happend, the ran number is: " + ran); 
 
\t \t break; 
 
\t } 
 
\t if(up){ 
 
\t \t y--; 
 
\t \t console.log("y--;"); 
 
\t } 
 
\t if(down){ 
 
\t \t y++; 
 
\t \t console.log("y++;"); 
 
\t } 
 
\t if(left){ 
 
\t \t x--; 
 
\t \t console.log("x--;"); 
 
\t } 
 
\t if(right){ 
 
\t \t x++; 
 
\t \t console.log("x++;"); 
 
\t } 
 
\t console.log("x " + x); 
 
\t console.log("y " + y); 
 
    wolf.x = x; 
 
    wolf.y = y; 
 
}

<body> 
 
<canvas id="canvas" height="768px" width="1366px"/> 
 
</body>

Quelle

2017-07-10 15:19:25 Dij

Objektschlüssel zugewiesene Parameter zurück undefined

Antwort

Verwandte Themen