Browsergame programmieren

[MuffyMuffy]

Hi,
ich würde gerne ein Browsergame programmieren in der Art eines alten Atari Spiels.
Für den Anfang werde ich es mit Snake versuchen. Es sollte ein Multiplayer Spiel sein, das ich mit einem Freund übers Internet spielen kann.

Das Projekt soll einfach zum Lernen dienen.
Bisher kann ich nur HTML, etwas CSS und etwas C++ (musste an der UNI "Einführung in die Programmierung C++" besuchen).

Nun meine Fragen:
- Wie stelle ich das am besten an? Was muss ich dafür noch lernen?
- Mit welcher Sprache sollte ich am besten programmieren? Html5 + JavaScript? (Flash schließe ich mal aus)

Ich hoffe mein Ziel ist für den Anfang nicht zu hoch gesetzt.

 

[FranzvonAssisi]

Flash?! Oh nein, gut, dass du es ausgeschlossen hast

Javascript müsste eigentlich ausreichen. Am besten ließe es sich wahrscheinlich über eine Canvas realisieren, die dann durch javascript die Bilder erzeugt. (ja, jedes Bild einzeln)

Das erfordert etwas Übung. Eine Seite, die mir sehr geholfen hat mit canvas und passenden Ideen zum Einsteigen ist: http://www.html5canvastutorials.com/tutorials/html5-canvas-element/

Ansonsten: Tolle Idee, wenn du noch Fragen hast, will ich gerne probieren dir zu helfen.

Lg, Franz

 

[thecain]

Es gibt einige Javascript Libraries die viel Arbeit abnehmen im Bezug auf Games.

Mit CraftyJS habe ich mal was gemacht, aber obs die Beste/eine der besseren ist, kann ich nicht beurteilen, kenne die Anderen nicht.

 

[fz21z]

Javascript, dazu HTML5 Canvas für's Spiel und als MultiPlayer mit WebSocket. Webstorage eignet sich super zum Speichern von Spielständen.
Mit den Sachen habe ich damals mein erstes Game im dritten Semester, Webtechnologie gemacht.

 

[IKäsebrot]

Wie das von "thecain" vorgeschlagene CraftyJS ist auch CreateJS eine JavaScript-Bibliothek die es erlaubt auf einem HTML-Canvas Spiele bzw. grafische Anwendungen zu entwickeln. Ich fand sie war leicht zu verstehen und anzuwenden.

Gruß und viel Erfolg!

 

[Finalspace]

Also um nen Browserspiel zu machen brauchst du nur folgendes:

- JavaScript (ECMAScript 5.1 Standard)
- Verständnis von Anonymen Funktionen / Callbacks
- Chrome (Hat Javascript-Debugger und Profiling Tools und ist angenehm schnell)
- HTML5 Canvas (Bietet einem die Möglichkeit auf ne Oberfläche zu zeichnen)
- Request Animation Frame (Benutze kein setTimeout()!)

- WebSockets oder nodejs für Netzwerkkommunikation (starte zuerst ohne Netzwerk - damit du nen Gefühl für bekommst)
- WebAudio API (nicht Audio tag verwenden!)

Du brauchst dafür keine Fremdbibliotheken - selbst für den Asset-Preloader, den bastelt man sich selbst zusammen, ist nicht sonderlich schwer.

 

[IKäsebrot]

@Finalspace du hast schon recht theoretisch braucht man keine Fremdbiliothek. Ich denke aber so eine Bibliothek würde jedem Anfänger den Einstieg extrem erleichtern!

 

[ice-breaker]

Das aktuelle Steckenpferd, wenn es um Canvas-Rendering geht, ist pixi.js - bis die nächste Library kommt und den Markt einnimmt (so wie es Crafte, CreateJs und vielen davor schon passiert ist). Darauf aufbauend kann man dann auch gleich PhaserJs als Game-Engine nutzen, das einem vieles abnehmen würde.


Aber seien wir mal ehrlich, der TE hat kaum Programmiererfahrung, da ist ein Spiel entwickeln (selbst ein kleines Multiplayer-Snake) schon eine Mammut-Aufgabe.

 

[Finalspace]

@Finalspace du hast schon recht theoretisch braucht man keine Fremdbiliothek. Ich denke aber so eine Bibliothek würde jedem Anfänger den Einstieg extrem erleichtern!

Ja es ist Einfacher, aber man lernt dabei deutlich weniger, weil viele Teile davon die im Hintergrund passieren nicht versteht und bei Problemen meist im Dunkeln steht und dann einfach ne andere Bibliothek nimmt.

Dazu bringen viele Bibliotheken Balast mit der nicht nötig ist, sei es tonnenweise unnütze Features oder blöde Abhängigkeiten wie z.b. einem Modulsystem oder Logging-Frameworks.

Nein, wenn Bibliothek dann eine ohne jegliche Abhängigkeiten, die nur eine oder ein Subset von Aufgaben erfüllt und in einer einzigen Datei verpackt ist.

Und wenn Engine, dann bitte gleich Unreal Engine 4 oder sowas - unterstützt auch HTML5 als Zielplatform und kann Netzwerk out-of-the-box.

Ergänzung (19. August 2015)

Um mal nen Einblick zu geben wie einfach HTML5 und Javascript Programmierung ist, habe ich mal nen kleines JSFiddle für euch gebaut.

- Verwendet keine Bibliotheken
- Hat nen einfachen Asset-Preloader
- Nutzt eine "Fixed Game Loop" (ohne Render-Interpolation)
- Sehr einfache Entity-Struktur
- Hat einfache Kollisionserkennung

https://jsfiddle.net/jcm0f5as/

Sowas kann man als Grundgerüst für nen Browser-Spiel nehmen und drauf aufbauen.