Hallo mal wieder bei einen Tutorial von Wbedesign-Ugurcu. Wir befinden uns immer noch in der 2D RPG reihe. Heute wollen wir unsere Klasse World schreiben.
Unsere Weltkarte ist eine sogenannte 2D tilemap. diese ist in einen Raster angeordnet was ihr euch ungefähr so vorstellen könnt.
Diese Raster ist etwas unspektakulär und soll nun die Optik von Wiesen und Steinen bekommen etwa so.
Heute widmen wir uns der Character class. In dieser werden wir eine Funktion schreiben um den Spieler auf der Karte zeichnen zu lassen und eine Funktion , damit er sich bewegen kann.
Erstmal vorweg wir werden für alle Elemente Objekte erstellen und mi dehnen Arbeiten. Für die Character class erstellen wir ein player Object.
|
1 2 3 4 5 6 |
Player = { posX : 1, posY : 1, } |
Es ist sehr simple, wir haben auch direkt Variablen für die Position auf der X achse (posX) und der Position auf der Y Achse(posY) erstellt. der Spieler soll sich von links auf Feld 1 befinden und von Oben nach Unten ebenfalls.
Hier eine Grafik zur Veranschaulichung.Auf dem Bild sieht man unsere Tilemap, das grün markierte Feld ist die Startposition unserer Spielfigur.Er befindet sich auf Feld 1 der X Achse und Feld 1 der Y Achse.
Als nächstes schreiben wir in unseren Objekt eine DrawPlayer Funktion um den Player in die Weltkarte tatsächlich zu zeichnen.
In diesem Tutorial wollen wir unsere Bühne erstellen in dieser Spielt sich das ganze Spiel ab.
|
1 2 3 4 5 6 7 8 9 10 11 |
<html> <head> <title>Fighting Monk</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/style.css"> </head> <body> <canvas id="Stage" width="480" height="320"> <p>Your browser does not support HTML5!</p> </canvas> |
Was wir benötigen ist ein einfachen Canvas Element. Diesen habe ich die ID Stage zugewiesen. und eine Breite von 480px und eine Höhe von 320px.
Hallo zusammen
Heute möchte ich euch einen Einblick in die Spielentwicklung geben.
Da die meisten Tutorials in diesen Bereich mit Frameworks sind, möchte ich eins ohne machen.
Gut also müssen wir uns als ersten Gedanken machen was wir benötigen.
Das wäre es in Grunde. Beides lässt sich ohne Aufwand kostenlos downloaden.
Hallo Zusammen zu unsere Javascript Grundlagen Tutorial.
Um Javascript zu benutzen gibt es verschiedene Möglichkeiten.
-Inline
|
1 2 3 4 5 |
<script type="text/javascript"> ........ </script> |
-aus einer .js Datei
|
1 |
<script src="dateiname.js"></script> |
Das auslagern das Code in einer .js Datei ist, zur Übersichtlichkeit, sehr zu empfehlen.
Wir können Javascript, wie in den folgenden kleinen Beispielen benutzen.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<button onclick="colorChange()">red</button> <p id="para">green</p> <script type="text/javascript"> function colorChange(){ document.getElementById("para").style.color = "red"; } </script> |
in diesen einfachen Beispiel ändern wir mittels Javascript die Farbe des p-tags Inhalt auf rot.
|
1 |
<button onclick="window.location.href='/startseite'">Startseite</button> |
So können wir mittels Javascript navigieren .
Als letztes Beispiel wollen wir noch eine Fehlermeldung erzeugen.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<button onclick="checkInput()">Check Input</button> <input id="input" type="text" value="" placeholder="Geben Sie das Wort Rot ein" /> <script type="text/javascript"> function checkInput(){ var input = document.getElementById("input").value; if(input === "Rot"){ alert("Es stimmt überein"); } else { alert("Leider war Ihre Eingabe falsch"); } } </script> |
Hier wird überprüft ob der Benutzer in dem Eingabefeld das Wort „Rot“ eingibt , wenn er dies Tut bekommt er eine Bestätigung dafür. Eine falsche Eingabe erzeugt eine Fehlermeldung.
Nun noch paar Grundlegende dinge.
Einleiten von Variablen
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
global_v = "test_global"; //nicht Globale Variablen test(); zwei(); function test(){ var test = "test"; //hier können wir die Globale Variable benutzen console.log(global_v); //Die nicht Gloabale können wir hier ausgeben console.log(test); } function zwei(){ //hier können wir die Globale Variable benutzen console.log(global_v); //Die nicht Gloabale Variable aus der Funktion test können wir hier nicht ausgeben console.log(test); } |
Bei fragen scheut euch nicht in die Kommentare zu schreiben.
Heute wollen wir uns damit befassen grundlegende Aspekte bei der Verwendung von eigenen Funktion , Arrays und schleifen näher zu bringen.
Bennent eure Funktion und Arrays direkt so das Ihr bei späteren Code einsieht direkt wisst was ihr damit macht. Ein Arrays das Buchtitel speichern einfach nur mit Array zu benennen , würde keinen Rückschluss auf seine Funktion geben. Es allerdings Buchtitel oder einfach Titel zu nennen schon. Gern könnt ihr auch die Benennung in englisch machen also titles.
Ein solches Array könnte also wie folgt aussehen.
|
1 2 |
//ein Eindimensionales Array var titles = ["Herr der Ringe","Harry Potter","Dune - der Wüstenplanet"]; |
Wenn wir nun alle diese Namen in der Console ausgeben haben wollen, können wir dies mittel einer for-Schleife zum beispiel erledigen:
|
1 2 3 |
for(var x = 0;x < titles.length;x++){ console.log(titles[x]); } |
Die Ausgabe sieht wie folgt aus:
Herr der Ringe
Harry Potter
Dune – der Wüstenplanet.
Wir können dafür auch eine while-Schleife benutzen:
|
1 2 3 4 5 |
var x = 0; while(x < titles.length){ console.log(titles[x]); x++; } |
.Gibt in euren Konstruktor nur Parameter ein die ihr wirklich braucht. Viele dinge könnt ihr auch aus dem DOM mittel document.getElementById z.B holen.
Es ist nicht nötig alles zu übergeben. Auch hier achte auf die Namenswahl besonders wenn ihr mit anderen Programmieren zusammen an einen Projekt Arbeitet werden Sie es auch danken.
Nutz möglich viele Kommentare in euren Code um euch selbst und anderen einen Funktionalen hinweis zu hinterlegen. Kommentare leitet ihr mit ,,//“ für eine Zeile ein.Bei mehreren Zeilen beginnen mit ,,/*“ und enden mit ,,*/“ alles was dazwischen steht wird auskommentiert.
Bei Fragen einfach unten in die Kommentare rein schreiben.
Willkommen zurück beim PHP MVC Pattern Tutorial Teil 2.
Heute wollen wir uns mit einfachen Base-klassen beschäftigen.
Beginnen wir mit der Bootstrap klassen.
Untern einen MVC(Model-View-Controller) Pattern versteht man die Aufteilung der Programmierung. In einen Controller der die Daten an die View und den Model weitergibt.
Der Controller kennt in dem Fall das View und das Model. Das Model kennt die View und die View bekommt lediglich Daten bereitgestellt. Auf der unten abgebildeten Grafik kann man das Prinzip sehen währen der Controller Daten zum Model senden kann und dieser dann zurück von Model zum Controller kommen, ist die View lediglich Daten Empfänger.
Hier möchte ich euch ein kleines Beispiel für ein Loginsystem mit HTML und PHP geben. Wir sollten erstmal darüber nachdenken was wir dafür benötigen. Im Normalfall brauchen wir einen Benutzernamen und ein Passwort.
Wir sollten also ein HTML Formular erstellen, indem wir diese beiden Felder abfragen:
|
1 2 3 4 5 |
<form action="#" method="Post"> <label>Benutzername:</label><input type="text" name="user" value="" /> <label>Passwort:</label><input type="password" name="pw" value="" /> </form> |