'drawing characters on the canvas using string declared object names

I'm trying to create an ecology game and am working on the spawning aspect of it. One of my attempts includes creating multiple independent objects to control different squares or "wolves" as the simulation goes on. The reason I am using strings as names for objects is so each newly created wolf has their own seperate values from the rest (which helps keep things moving on their own instead of in unison). When the object is created it calls the setupWolf function to be drawn. When the object is printed to the console it shows up with no x, y, w, or h values. Heres my code

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var body = document.getElementById("body");

var wolfPop = 2;
var bornWolves = 0;

var wolves = {

};

function setupWolf(x, y, w, h){
    context.fillStyle = "blue";
    context.fillRect(this.x, this.y, this.w, this.h);
    context.fill();
}

body.style.overflow = "hidden";
body.style.margin = "0px";
canvas.style.backgroundColor = "black";

setInterval(function(){
    if(wolfPop != bornWolves){
        spawnWolf();
        bornWolves++;
    }
}, 1);

function spawnWolf(x, y, w, h){
    name = "w" + bornWolves;
    this.x = 10;
    this.y = 10;
    this.h = 10;
    this.w = 10;
    wolves[name] = Object.create({}, {x: {value: this.x}, y: {value: this.y}, h: {value: this.h}, w: {value: this.w}});
    wolves[name] = new setupWolf(name.x, name.y, name.w, name.h);
    console.log(wolves);
}
<!DOCTYPE html>
<html>
<head>
<title>AI spawn test</title>
</head>
<body id="body">
<canvas id="canvas" width="1366px" height="768px"/>
</body>
</html>

Firstly, I had declared my object then reassigned it as a function, and upon calling it giving the wrong output value to the console. Heres what I should have done

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var body = document.getElementById("body");

var wolfPop = 2;
var bornWolves = 0;

var wolves = {

};

var name;

function setupWolf(x, y, w, h){
    context.fillStyle = "blue";
    context.fillRect(wolves[name].x, wolves[name].y, wolves[name].w, wolves[name].h);
    context.fill();
    console.log(wolves[name].x);
}

body.style.overflow = "hidden";
body.style.margin = "0px";
canvas.style.backgroundColor = "black";

setInterval(function(){
    if(wolfPop != bornWolves){
        spawnWolf();
        bornWolves++;
    }
}, 1);

function spawnWolf(){
    name = "w" + bornWolves;
    rand = Math.floor(Math.random() * 100) + 1;
    wolves[name] = Object.create({}, {x: {value: Math.floor(Math.random() * 100) + 1}, y: {value: Math.floor(Math.random() * 100) + 1}, h: {value: 10}, w: {value: 10}});
    setupWolf();
    console.log(wolves[name]);
}
<!DOCTYPE html>
<html>
<head>
<title>AI spawn test</title>
</head>
<body id="body">
<canvas id="canvas" width="1366px" height="768px"/>
</body>
</html>

Now all I need help with is the independent movement of the objects. Thank you for the help

javascripthtml


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions