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.
Wir wollen einmal Jquery vs Pur Javascript vergleichen.
Jqeury ist eine Sammlung von Funktionen die man benutzen kann um zum teil schneller und effizienter seinen Code zu gestallten.
Ein nachteil der Direkt deutlich wird ist das sich viele Jquery Nutzer mit reinen Javascript nicht auskennen. Das Problem aus meiner Sicht ist , was es in Jquery nicht gibt ist für diejenige auch nicht umsetzbar.
Fangen wir mit einfachen beispielen an.
|
1 2 3 4 5 |
//javascript var input = document.getElementById("input").value //Jquery var input = $("#input).val(); |
Die Codezeilen tun exakt das gleiche. Das value Attribute eines Inputfeldes in die Variable Input zu speichern. Was sehen wir hier JQUERY braucht deutlich weniger Text um diese Aufgabe zu erfüllen.
Dieser Aspekt wird bei nachfolgenden Beispiel noch Stärker sichtbar.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
//javascript var button = document.getElementById('button '); button .addEventListener ('click', handleClick , false); function handleClick () { alert("Klick ausgeführt"); } //JQUERY $("#button").click(function(){ alert("Klick ausgeführt"); }); |
Sie sehen das wir mit Javascript 5 Zeilen Code benötigen wofür wir bei Jqeury nur 2 Zeilen benötigen.
Ihr seht mit Javascript kann man alles machen und mit Jquery fast alles. Bei größeren Projekten lohnt sich der Einsatz von Jquery sehr. Es ist weniger Code damit übersichtlicher , nachteil das jquery Skript muss immer mit geladen werden und verbraucht Performance. Aufgrund dessen würde ich bei kleineren Projekt immer davon abraten und auf pures Javascript zurückgreifen.
Ich Persönlich benutze ausschließlich pures Javascript allerdings ist das Geschmacksache.Ich Arbeite dabei Objektorientiert und finde das es so die beste Lösung ist.
Die View Base Klasse sorgt für unser Frontend Ansicht. Da diese bereits im ersten Tutorial Teil steh stelle ich hier lediglich nochmal komplett zu Verfügung.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
class View { public function set($key, $value) { $this->values[$key] = $value; } public function render($name, $include = false){ if($include == true){ require_once 'views/' . $name . '.php'; } else{ require_once 'views/header.php' ; $output = file_get_contents('views/' . $name . '.php'); if($this->values){ foreach ($this->values as $key => $value) { $tagToReplace = "[@$key]"; $output = str_replace($tagToReplace, $value, $output); echo $output; } } else{ require_once 'views/' . $name . '.php'; } require_once 'views/footer.php'; } } } |
Sollte ihr fragen haben stellt sie in dem Kommentaren. In ersten Teil findet ihr noch nützliche Hinweise zu dem Codezeilen.
Für die Model Base-Klasse gibt es eine Besonderheit , um in jedem Model über die Datenbank gehen zu können bedienen wir uns hier einer Grund Database class die von PDO erbt und die Model class instanziiert dann aus der Database class ein Object.
Die Controller Base-Klasse benötigen wir , damit alle Controller über die Grundsätzliche Funktionalität verfügt.
Als erstes erstellen wir unseren Contructor.
|
1 2 3 4 5 6 7 8 |
class controller { public function __construct() { $this->view = new View(); } |