Objecten en instanties
Zoals ik al eens eerder heb vermeldt ben ik bezig met een browsergame, maar ik loop een beetje vast.
Ik snap nog niet helemaal hoe ik in JavaScript op een goede manier kan werken met objecten en instanties.
De manier waarop ik het nu doe is:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// De array met alle objecten
Object = {};
// Een object
Object.player = function()
{
this.x = 0;
this.y = 0;
this.draw = function()
{
// Hier alles dat moet worden getekent.
}
}
// De array met alle instanties
Instance = {};
// Instanties van het object player
Instance.player = [];
Instance.player[0] = new Object.player();
Instance.player[1] = new Object.player();
Object = {};
// Een object
Object.player = function()
{
this.x = 0;
this.y = 0;
this.draw = function()
{
// Hier alles dat moet worden getekent.
}
}
// De array met alle instanties
Instance = {};
// Instanties van het object player
Instance.player = [];
Instance.player[0] = new Object.player();
Instance.player[1] = new Object.player();
Maar deze manier werkt niet echt heel prettig, heeft iemand misschien een idee van hoe ik dit wel kan doen? (En dan vooral hoe ik tijdens het spelen van de game instanties kan maken en verwijderen)
Alvast bedankt!
Gewijzigd op 10/03/2013 12:28:23 door Lord Gaga
Eerste vraag die bij me opkomt is wat er dan niet helemaal prettig werkt?
Anders dan dat zie ik wel wat vreemde dingen in je code. Ten eerste zeg je 'De array met alle objecten', maar je definieert het als een object literal (dus niet als een array). Daarna maak je van een element in dat object literal feitelijk al een object door het te definieren als een function, terwijl je volgens mij daar alleen maar een class wilt aanmaken, dus nog geen instantie.
Ik zou het iets anders doen:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//maak de class (dus nog geen object)
function Player()
{
this.x = 0;
this.y = 0;
this.draw = function()
{
// Hier alles dat moet worden getekent.
}
}
//initialiseer een object van class Player
var players = [];
players[0] = new Player();
players[1] = new Player();
function Player()
{
this.x = 0;
this.y = 0;
this.draw = function()
{
// Hier alles dat moet worden getekent.
}
}
//initialiseer een object van class Player
var players = [];
players[0] = new Player();
players[1] = new Player();
Maar ik zie graag ook andere voorstellen, want mijn javascript OOP kennis mag ook nog wel wat uitgebreid worden.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
setInterval(function()
{
// Step
jQuery.each(Instance, function(indexOne, itemOne)
{
jQuery.each(itemOne, function(indexTwo, itemTwo)
{
if (jQuery.isFunction(itemTwo.step))
{
itemTwo.step();
}
});
});
// Clear canvas
System.context.clearRect(0, 0, System.canvas.width(), System.canvas.height());
// Draw
jQuery.each(Instance, function(indexOne, itemOne)
{
jQuery.each(itemOne, function(indexTwo, itemTwo)
{
if (jQuery.isFunction(itemTwo.draw))
{
itemTwo.draw();
}
});
});
},
1000 / System.FPS);
{
// Step
jQuery.each(Instance, function(indexOne, itemOne)
{
jQuery.each(itemOne, function(indexTwo, itemTwo)
{
if (jQuery.isFunction(itemTwo.step))
{
itemTwo.step();
}
});
});
// Clear canvas
System.context.clearRect(0, 0, System.canvas.width(), System.canvas.height());
// Draw
jQuery.each(Instance, function(indexOne, itemOne)
{
jQuery.each(itemOne, function(indexTwo, itemTwo)
{
if (jQuery.isFunction(itemTwo.draw))
{
itemTwo.draw();
}
});
});
},
1000 / System.FPS);
Als ik alle instanties dus niet in 1 array heb staan, kan ik ze niet allemaal doorlopen.
Edit:
Volgens mij gebruiken wij allebei een andere definitie voor 'object'.
Bij mij is een 'object' wat jij een class noemt en 'instantie' noem jij dus object.
Gewijzigd op 10/03/2013 12:50:40 door Lord Gaga
Dat je alle instanties (objecten) in een array wilt hebben begrijp ik. Alleen alle classes (jouw objecten) in een array lijkt me niet nodig. Puur een class kan je niets mee, dat is alleen blauwdruk voor een object en daar kan je pas iets mee als je het hebt geinstantieerd (als je er een object van hebt gemaakt).
Waar ik dus var players = [] doe, kan je dat inderdaad prima nog in een object literal stoppen zodat je een referentie naar al je objecten hebt.
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<?php
class Foo{}
$a = new Foo(); // $a bevat nu een instance van de klasse Foo
$b = new Foo(); // $b bevat nu een andere instance van de klasse Foo
$c = $b; // $c bevat nu dezelfde instance als $b
?>
class Foo{}
$a = new Foo(); // $a bevat nu een instance van de klasse Foo
$b = new Foo(); // $b bevat nu een andere instance van de klasse Foo
$c = $b; // $c bevat nu dezelfde instance als $b
?>
Wat ik zeer aanraad om te lezen is de site JavaScript Garden. Die legt heel veel dingen uit, ik vind het de beste resource die ik ooit over elke taal heb gelezen. Mocht je engels moeilijk vinden: Ik ben bezig aan een vertaling, het is nog lang niet helemaal vertaald en bevat nog lang geen vloeiende zinnen, maar het is vast wel een beetje te begrijpen: https://github.com/WouterJ/JavaScript-Garden/tree/translate_nl/doc/nl
Hoe ik het overigens zou doen is gelijk aan die van Erwin, behalve dat ik een andere syntax zou gebruiken:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var Player = function() {
};
Player.prototype = {
x: 0,
y: 0,
draw: function () {
// ... doe wat leuks met x en y
}
};
var players = [];
players.push(new Player());
players.push(new Player());
};
Player.prototype = {
x: 0,
y: 0,
draw: function () {
// ... doe wat leuks met x en y
}
};
var players = [];
players.push(new Player());
players.push(new Player());
Gewijzigd op 10/03/2013 13:03:11 door Wouter J
Hoe verwijder je een instantie op een goede manier?
Wat ik op google las is dat je gewoon de variabel moet legen (of het stukje uit de array), maar hoe doe je dit bijvoorbeeld vanuit een object, want die variabel zit buiten dat object.
Edit:
@Wouter: ik ga dat even doorlezen
Edit 2:
Misschien wel handig om even te vermelden nog:
Ik baseer mijn scripts een beetje op Game Maker en daar wil ik het dus eigenlijk een beetje op laten lijken. Het liefst heb ik dus dat alle objecten een create, destroy, step, draw (etc.) event hebben en ik daar alle 'game code' in kan stoppen.
Het probleem waar ik tegenaan loop is dan ook vooral het benoemen en aanroepen van instanties en het verwijderen ervan, het is naar mijn weten bijvoorbeeld niet goed mogelijk om 'instance_destroy(instance)' goed na te maken.
Gewijzigd op 10/03/2013 13:02:08 door Lord Gaga
Wouter J op 10/03/2013 13:01:49:
Je kan het object niet zichzelf verwijderen. Gewoon delete players[1]; doet de truc, alleen dat moet dan wel van buiten uit.
Ja, dat kan dus niet in een functie en dat heb ik liever wel, omdat ik dan het destroy event kan aanroepen (een soort destructor zeg maar)
Wouter J op 10/03/2013 13:04:32:
Dan moet je dus een nieuw object aanmaken, bijv. een PlayerBag. Die kan het dan doen, maar het lijkt me een enorme omweg...
Hmm.. is er echt geen manier om een destructor in JavaScript te krijgen?
Erwin H op 10/03/2013 13:10:36:
Die parameterbag heeft hij in principe al als hij alle objecten in een array stopt en al die arrays weer in een object literal. Kleine moeite om dat object literal iets uit te breiden naar een object met methods.
Hoe bedoel je?
Edit:
Dit is het uiteindelijk scenario (voorbeeld) van hoe ik het het liefst zou hebben:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
// Object player
... = function()
{
// Create event (wordt uitgevoerd wanneer de instantie wordt aangemaakt)
this.create = function()
{
this.x = 0;
this.y = 0;
this.velocityX = 0;
this.velocityY = 0;
this.gravity = 0.8;
this.width = 32;
this.height = 32;
}
// Destroy event (wordt uitgevoerd wanneer de instantie wordt verwijderd)
this.destroy = function()
{
alert('Instantie verwijderd!');
}
// Step event (Wordt 60x per seconde uitgevoerd, afhankelijk van de FPS)
this.step = function()
{
this.velocityY += this.gravity;
}
// Collision event with object Wall (Wordt uitgevoerd wanneer een instantie van dit object in aanraking komt met een instantie van het object Wall)
this.collision = function(object)
{
if (object == 'Wall')
{
// Botsen tegen de muur ofzo
}
}
// Key Press event for <left> key (Wordt uitgevoerd wanneer de pijltjestoets naar links wordt ingedrukt)
this.keyPress = function(key)
{
if (key == 'left')
{
this.x -= 1;
}
}
// Key Release event for <left> key (Wordt uitgevoerd wanneer de pijltjestoets naar links wordt losgelaten)
this.keyRelease = function(key)
{
if (key == 'left')
{
// Whatever je hier ook wilt doen
}
}
// Draw event (Wordt 60x per seconde getekend, afhakelijk van de FPS)
this.draw = function()
{
System.context.fillStyle = '#FF0000';
System.context.fillRect(this.x, this.y, this.width, this.height);
}
}
... = function()
{
// Create event (wordt uitgevoerd wanneer de instantie wordt aangemaakt)
this.create = function()
{
this.x = 0;
this.y = 0;
this.velocityX = 0;
this.velocityY = 0;
this.gravity = 0.8;
this.width = 32;
this.height = 32;
}
// Destroy event (wordt uitgevoerd wanneer de instantie wordt verwijderd)
this.destroy = function()
{
alert('Instantie verwijderd!');
}
// Step event (Wordt 60x per seconde uitgevoerd, afhankelijk van de FPS)
this.step = function()
{
this.velocityY += this.gravity;
}
// Collision event with object Wall (Wordt uitgevoerd wanneer een instantie van dit object in aanraking komt met een instantie van het object Wall)
this.collision = function(object)
{
if (object == 'Wall')
{
// Botsen tegen de muur ofzo
}
}
// Key Press event for <left> key (Wordt uitgevoerd wanneer de pijltjestoets naar links wordt ingedrukt)
this.keyPress = function(key)
{
if (key == 'left')
{
this.x -= 1;
}
}
// Key Release event for <left> key (Wordt uitgevoerd wanneer de pijltjestoets naar links wordt losgelaten)
this.keyRelease = function(key)
{
if (key == 'left')
{
// Whatever je hier ook wilt doen
}
}
// Draw event (Wordt 60x per seconde getekend, afhakelijk van de FPS)
this.draw = function()
{
System.context.fillStyle = '#FF0000';
System.context.fillRect(this.x, this.y, this.width, this.height);
}
}
Gewijzigd op 10/03/2013 13:46:19 door Lord Gaga