PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact

JavaScript object inheritance

Door Roel - op 07-11-2013 19:06
1.139 views
Hallo allemaal,

Ik ben sinds kort bezig met het maken van een kleine game. Hierin heb ik een aantal objecten, zoals bijvoorbeeld deze twee:

function Player(x, y, speed, image)
{
	this.x = x;
	this.y = y;
	this.image = image;
	this.speed = speed;
	this.direction = 0;
	this.lifes = INIT_LIFES;
}

function Enemy(x, y, speed, image)
{
	this.x = x;
	this.y = y;
	this.speed = speed;
	this.isAlive = false;
	this.image = image;
	this.direction = 0;
	this.attacks = false;
}

Ik heb er nog meer, maar het gaat om het principe. Je ziet dat ze beide x, y, speed en image hebben. Nu is het zo dat ik in PHP gewoon kan erven van bijvoorbeeld Sprite. Ik heb al een aantal uur zitten zoeken op Google, maar ik kom er gewoon maar niet aan uit wat ik kan gebruiken.

Wat ik dus wil is dat ik niet bij elk object x, y, image en speed hoef in te stellen.
Hoe kan ik dit bereiken?

Alvast bedankt.

Roel
Wouter J
07-11-2013 22:14
Het eerste wat je moet bedenken is dat JavaScript geen support heeft voor objecten zoals PHP of Java dat hebben. JavaScript is prototypal.

In JavaScript ken je ook niet echt inheritance, je kent alleen prototypal inheritance, waarbij je de eigenschappen kan laten overnemen. Dat wil jij hier echter niet.

Ik raad je aan om MooTools of Base.js (mootools is based on base.js) te bekijken. Beide hebben een erg mooie versie om PHP stijl OO in JavaScript te gebruiken.
[code lang=js]
// mootools
var Sprite = new Class({
initialize: function (x, y, image, speed) {
this.x = x;
this.y = y;
this.image = image;
this.speed = speed;
}
});

var Player = new Class({
Extends: Sprite,
initialize: function (x, y, image, speed) {
this.parent(x, y, image, speed);
this.direction = 0;
this.lifes = INIT_LIFES; // oei, wat is dit, een global var?
}
});

var Enemy = new Class({
Extends: Sprite,
initialize: function (x, y, image, speed) {
this.parent(x, y, image, speed);
this.direction = 0;
this.isAlive = false;
this.attacks = false;
}
});

// Base.js
var Sprite = Base.extend({
constructor: function (x, y, image, speed) {
this.x = x;
this.y = y;
this.image = image;
this.speed = speed;
}
});

var Player = Sprite.extend({
constructor: function (x, y, image, speed) {
this.base(x, y, image, speed);
this.direction = 0;
this.lifes = INIT_LIFES; // oei, wat is dit, een global var?
}
});

var Enemy = Sprite.extend({
constructor: function (x, y, image, speed) {
this.base(x, y, image, speed);
this.direction = 0;
this.isAlive = false;
this.attacks = false;
}
});[/code]

Toevoeging op 07/11/2013 22:15:58:

En als laatst wil ik je nog deze site meegeven, zeker een must-read voor als je JavaScript wat advanced gaat gebruiken: http://bonsaiden.github.io/JavaScript-Garden
Roel -
08-11-2013 17:46
Bedankt voor je reactie Wouter. Waarom mag ik geen constante gebruiken in m'n script?
Laat me raden: omdat ik die als attributen mee moet geven in de constructor van de objecten?

Ik gebruik liever geen framework voor dit spel, ik wil gewoon puur JavaScript en HTML5. Ook heb ik daarom bewust gekozen om geen jQuery te gebruiken.

Kun je me misschien wel een andere manier aanraden om toch inheritance te kunnen gebruiken?
Wouter J
08-11-2013 17:50
Mootools, jquery en base.ja zijn alle 3 geen frameworks. Jquery en mootools zijn slechts libraries en base.js is slechts 1 klasse die zorgt dat je mooi OO kunt gebruiken in javascript.

Als je geen base.js wilt gebruiken, jouw keuze maar dan moet je zelf een base klasse maken als je inheritance wilt gebruiken.

Reageren

Inloggen om te reageren