Du bist nicht angemeldet.

Stilllegung des Forums
Das Forum wurde am 05.06.2023 nach über 20 Jahren stillgelegt (weitere Informationen und ein kleiner Rückblick).
Registrierungen, Anmeldungen und Postings sind nicht mehr möglich. Öffentliche Inhalte sind weiterhin zugänglich.
Das Team von spieleprogrammierer.de bedankt sich bei der Community für die vielen schönen Jahre.
Wenn du eine deutschsprachige Spieleentwickler-Community suchst, schau doch mal im Discord und auf ZFX vorbei!

Wie kompliziert kann das schon sein? Javascript

  • 1
  • 2

Werbeanzeige

Unrockstar

Frischling

  • »Unrockstar« ist der Autor dieses Themas

Beiträge: 21

  • Private Nachricht senden

1

02.08.2016, 08:34

Wie kompliziert kann das schon sein? Javascript

Guten Tag,
Ich habe folgendes vor:
Ich würde ganz gerne ein Spiel programmieren, wo sich nichts bewegt quasi. Es wird ein kleines Rollenspiel, wo ein Spieler durch eine Map navigiert (das wäre dann das einzige was sich effektiv bewegt). Und auf gewissen Feldern spawnen Monster in Form von Bildern, welche man anklickt und ihnen Schaden zufügt bis sie tot sind.

Um das ganze umzusetzen und es nicht u kompliziert u gestalten weil ich gerade erst mit Javascript anfange, habe ich das Problem in ein kleines Teilproblem zerlegt:
Es soll in HTML ein kleines Haus erscheinen (auf einem kleinen HIntergrund), welches man anklickt und in eine Art Arena gelangt. Dort soll dann durch drücken der Leertaste, immer ein Monster spawnen, welches man durch anklicken töten kann. Um die ganze dynamik dahiner zu verstehen macht jeder klick 5 Schaden und das Monster hat erstmal 100 Lebenspunkte.
Meine Frage:
Wie genau realisiert man das Monster?
Meine Überlegung: Objekt Monster mit Variable Lebenspunkte, Schadenspunkte usw.
Kann man diesem Objekt ein Bild zuordnen? Und wie genau verknüpft man das Objekt Monster mit dem Spieler, so dass auch der Spieler Schaden vom Monster bekommt?
Ich will hier keinen Code haben versteht mich nicht falsch. Ich möchte nur wissen wie schwer und kompliiert es ist , so etwas zu realisieren.

TrommlBomml

Community-Fossil

Beiträge: 2 117

Wohnort: Berlin

Beruf: Software-Entwickler

  • Private Nachricht senden

2

02.08.2016, 09:26

Javascript ist jetzt nicht meine Lieblingssprache, prinzipiell gelten aber die meisten Regel sprachübergreifend. Du hast dein Problem schon ganz gut in Teilprobleme zerlegt. Es fehlt ja nur noch, das ganze in Code umzusetzen. Dafür musst du eigentlich nur deinen selbst formulierten Text hier nochmal lesen und in Programmcode übertragen.

Wie man es technisch genau implementiert, ist natürlich auch irgendwie Stil und kann man einfach ausprobieren. Gerade wenn man unerfahren ist, hilft da erstmal bauen und ausprobieren was passiert - völlig legitim. Trotzdem zu deinen Fragen:

Zitat

Wie genau realisiert man das Monster?


Ich würde dafür ein "Objekt" erstellen, das geht in Javascript mit Funktionen, die mit dann mit new instanziieren kann. Dafür solltest du dir mal einfach ein paar Javascript Tutorials heraussuchen.

Zitat

Meine Überlegung: Objekt Monster mit Variable Lebenspunkte, Schadenspunkte usw


Dann hat dein Objekt Properties, die genau diese Eigenschaften festhält.

Zitat

Kann man diesem Objekt ein Bild zuordnen?


Ja kann man. Allerdings wie man das genau implementiert, hängt davon ab, was du für eine Technik benutzt. Gibt ja ein paar nette Javascript Frameworks wie impact.js, wo dir viel Hilfestellung gegeben wird und du nicht so viel selbst implementieren musst. Dann merkt sich dein Monster-Objekt einen Verweis auf ein Bild kann sich selbst zeichnen.

Zitat

Und wie genau verknüpft man das Objekt Monster mit dem Spieler, so dass auch der Spieler Schaden vom Monster bekommt?


Jetzt geht es in Richtung Stil und Implementierungsdetails. Es gibt verschiedene Wege, die jeweils alle ihre Vor- und Nachteile haben. Wichtigste Grundregel die ich dir auf den Weg geben kann: Gehe immer von einem Objekt aus, was es tun soll und was man mit ihm machen können soll. Dadurch verringerst du typische Anfängerfehler, dass Code in den falschen Stellen liegt, was dich später dazu neigen lässt, alles unheimlich kompliziert zu machen, weil du irgendwie nicht an das rankommst, was du brauchst.

Der einfachste weg ist, dass jeweils Monster und Spieler ein objekt sind (Javascript lernen!). Diese beiden Objekte haben dann z.B. eine Methode damage(amount), die bei dem objekt Schaden hinzufügt, in dem es die properties für lebenspunkte dem Wert amount verringert. Weiterhin könnte das Monster eine Methode update(player) haben. Hierbei wird also dem Monster der Spieler mitgegeben. Dann kann das Monster z.B. prüfen, ob der Spieler in der Nähe ist und ggf. player.damage() mit den Schadenspunkten, die das Monster austeilt, vergeben.

Es gibt aber auch andere Wege, allerdings denke ich dass du mit diesem Ansatz einen ganz guten Weg hast.

Jar

Treue Seele

Beiträge: 197

Wohnort: Lübeck

Beruf: Softwareentwickler

  • Private Nachricht senden

3

02.08.2016, 11:26

Zitat von »TrommlBomml«

Weiterhin könnte das Monster eine Methode update(player) haben.

Mit dieser Methode wäre das Monster sehr abhängig vom Spieler, es kann vielleicht auch mal passieren das Monster andere Dinge angreifen wollen, wie z.B Katzen^^

Du könntest auch eine Liste von Creatures haben, dabei ist ein Monster und auch der Spieler eine Creature.
Diese Liste könntest du in jedem Frame durchgehen und prüfen ob ein Monster sich in der Nähe eines Spieler befindet.
Wenn das der Fall ist, kann das Monster darauf reagieren und z.B die Function attack(Creature) ausführen, was wiederum beim Creature damage(amount, Creature) aufruft.

Jede Creature hat dabei eine damage(amount, Creature) Function.
In der attack(Creature) Function kann dann die Angriffsanimation abgespielt werden und der Schaden des Monsters berechnet und an damage(amount, Creature) übergeben werden.

In der damage(amount, Creature) können wiederum Rüstung und Resistenzen berechnet werden.

Beste Grüße,
Jar

TrommlBomml

Community-Fossil

Beiträge: 2 117

Wohnort: Berlin

Beruf: Software-Entwickler

  • Private Nachricht senden

4

02.08.2016, 11:46

Zitat von »Jar«

Mit dieser Methode wäre das Monster sehr abhängig vom Spieler, es kann vielleicht auch mal passieren das Monster andere Dinge angreifen wollen, wie z.B Katzen


Das ist richtig, daher steht auch, das das der einfachste Weg ist ;) Vielleicht sind abstraktere Konzepte noch nicht im Fokus, er scheint ja Anfänger zu sein.

Schorsch

Supermoderator

Beiträge: 5 145

Wohnort: Wickede

Beruf: Softwareentwickler

  • Private Nachricht senden

5

02.08.2016, 12:57

Mittlerweile gibt es Klassen in JavaScript. Man muss also nicht mehr komisch über Funktionen Objekte nachbilden. Ich würde mir an deiner Stelle eine Klasse für einen Gegner machen. Was relativ einfach wäre wäre wenn du der Klasse eine Funktion gibst um Schaden zu kassieren. Diese bekommt als Parameter den Schadenswert übergeben. Soll ein Angriff immer 5 Schaden verursachen kannst du dir den Parameter auch sparen und den Wert fest in die Funktion einbauen. Mal ganz einfach als Pseudocode könnte das alles so aussehen.

Quellcode

 
1
2
3
4
5
6
7
8
9
10
11
12
13

class Gegner {
  constructor() {
    this.leben = 100; // den aktuellen Lebenswert für den Gegner im Gegner selbst speichern
  }

  nimmSchaden() {
    this.leben -= 5; // schaden abziehen
  }

  istAmLeben() {
    return this.leben > 0;
  }
}


Dann könnte ein Angriff in etwa so aussehen

Quellcode

 
1
2
3
4
5

var monster = new Gegner();
monster.nimmSchaden();
if(!monster.istAmLebel() { // wenn Monster gestorben
  // mach was auch immer du vor hast.
}


Die Grafik für das Monster kannst du theoretisch in der Gegnerklasse ablegen. Da gibt es jetzt aber viele verschiedene Möglichkeiten die auch davon abhängen wie und womit du dein Spiel baust. Nutzt du nur HTML5, CSS und JavaScript ohne Canvas dann könntest du wenn ein Monster erstellt wird im DOM Baum eine Grafik für das Monster einhängen. Dem Element kannst du eine ID verpassen welche du im Monster selbst abspeicherst. Sobald das Monster stirbt wird das Element wieder aus dem Baum entfernt. Einfach mal nur als simples Beispiel. Mit Canvas würdest du wieder anders vorgehen und falls du irgendein Framework nutzt vermutlich wieder anders.
„Es ist doch so. Zwei und zwei macht irgendwas, und vier und vier macht irgendwas. Leider nicht dasselbe, dann wär's leicht.
Das ist aber auch schon höhere Mathematik.“

Unrockstar

Frischling

  • »Unrockstar« ist der Autor dieses Themas

Beiträge: 21

  • Private Nachricht senden

6

02.08.2016, 18:27

danke für die Antworten :)
Ich werd mich mal ans lernen machen :)

DeKugelschieber

Community-Fossil

Beiträge: 2 641

Wohnort: Rheda-Wiedenbrück

Beruf: Software-Entwickler

  • Private Nachricht senden

7

02.08.2016, 19:54

Kleiner Tipp wenn du JS lernst: guck dir an wie Googles V8 Engine das Prototyping umsetzt (dazu findet man Grafiken), das hilft massiv beim Verständnis. Viele kommen mit dem Objektmodel von JS erstmal nicht klar, bzw. verstehen nicht, dass in JS wirklich alles ein Objekt ist. Und natürlich gleich ES6 lernen, also den 2015er Standard.
Grüße, Kugel

GitHub Meine Firma Pirsch Analytics

TrommlBomml

Community-Fossil

Beiträge: 2 117

Wohnort: Berlin

Beruf: Software-Entwickler

  • Private Nachricht senden

8

03.08.2016, 09:34

Zitat von »Schorsch«

Mittlerweile gibt es Klassen in JavaScript.


Ach, so richtig jetzt von der Sprache Javascript selbst? Ich bin begeistert!

Schorsch

Supermoderator

Beiträge: 5 145

Wohnort: Wickede

Beruf: Softwareentwickler

  • Private Nachricht senden

9

03.08.2016, 15:23

Zitat von »TrommlBomml«

Ach, so richtig jetzt von der Sprache Javascript selbst? Ich bin begeistert!

Na aber hallo :)
http://www.2ality.com/2015/02/es6-classes-final.html
https://developer.mozilla.org/de/docs/We…ference/Klassen
http://exploringjs.com/es6/ch_classes.html
Man könnte fast meinen so langsam ließe sich EcmaScript gebrauchen ohne die ganze Zeit mit dem Kopf zu schütteln :)
„Es ist doch so. Zwei und zwei macht irgendwas, und vier und vier macht irgendwas. Leider nicht dasselbe, dann wär's leicht.
Das ist aber auch schon höhere Mathematik.“

Sacaldur

Community-Fossil

Beiträge: 2 301

Wohnort: Berlin

Beruf: FIAE

  • Private Nachricht senden

10

04.08.2016, 01:40

Zu der Aussage, JavaScript würde Klassen beinhalten: das ist ein wenig irreführend. JavaScript funktioniert intern noch genauso wie vorher, nur vereinfachen die neuen Schlüsselwörter (streng genommen sind sie nicht neu, nur besitzen sie erst seit kurzem eine Funktion) die Definition der Funktionen (bzw. Konstruktoren), wie es auch auf der verlinkten MDN-Seite beschrieben wird. Ersichtlich wird das bspw. wenn man sich ausgeben lässt, was eine solche "Klasse" ist: eine function

Bedenken muss man auch, dass das ein relativ neues Feature ist, welches in älteren Browsern wohl nicht unterstützt werden kann, es sei denn, man übersetzt den Code in JavaScript-Code, der das neue Feature nicht verwendet.
Spieleentwickler in Berlin? (Thema in diesem Forum)
---

Zitat von »Jonathan_Klein«

Es ist ja keine Schande etwas falsch zu machen, als Programmierer tu ich das täglich, [...].

Werbeanzeige

  • 1
  • 2

Ähnliche Themen