JavaScript Energiebalken verkleinern mit Jquery

[HelloSpencer]

Hallo,

ich möchte für mein kleines HTML/Javascript Spiel einen Energiebalken implementieren. Zudem verwende ich noch Pixijs und Jquery. Es sollen 10 Energie zur Verfügung stehen, mit diesen 10 Energie kann ich 10 Felder fahren.

Ich habe momentan den Balken als Grafik 100x5 Pixel geladen und dieser eine Klasse zugewiesen, damit ich per CSS darauf zugreifen kann (class="energie"). Mir schwebt vor, mittels Jquery nun irgendwie die width property im CSS zu ändern, solange, bis diese 0 ist, also die Energie aufgebracht ist. Ich müsste also irgendwie iterativ jedesmal 10Pixel von der width abziehen. Allerdings ist mir in jquery nur folgende Notation bekannt:

$(".energie").css("width", "100px");

Damit kann ich die width aber nicht subtrahieren und zum durchiterieren ist das auch nicht geeignet.

Gibt es hierfür eine andere Syntax oder Methode um das Vorhaben zu bewerkstelligen?

 

[Defender1st]

Naja, du könntest eine Variable benutzen ... so z.B.

var width = 100;
$(".energie").css("width", width+"px");

 

[mastaqz]

Naja, du könntest eine Variable benutzen ... so z.B.

var width = 100;
$(".energie").css("width", width+"px");

Klar, mit einer Variable.

Abgesehen davon gibt es ein HTML Element dafür:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress

 

[HelloSpencer]

Interessant, dass mit der Variablen hatte ich schon versucht, das ging nicht. Aber vielleicht war der Fehler dann auch an einer anderen Stelle.

 

[mastaqz]

Interessant, dass mit der Variablen hatte ich schon versucht, das ging nicht. Aber vielleicht war der Fehler dann auch an einer anderen Stelle.

Pseudo Code:
Setze Lebensenergie auf 100.
Wenn getroffen,
dann ziehe 20 Lebenspunkte von Lebensenergie ab.
Setze Breite des Html-Elements auf Wert Lebensenergie.