2Danke
ERLEDIGT
NEIN
NEIN
ANTWORTEN
3
3
ZUGRIFFE
234
234
EMPFEHLEN
-
Hallo,
ich suche jemanden der sich mit JS und dem neuen HTML5-Tag "canvas" gut auskennt und schon einmal damit gearbeitet hat. Ich komme bei meiner Idee einfach nicht weiter und bitte deshalb hier um Hilfe.
Mein aktueller Code sieht so aus:
...wird auch bis jetzt alles super dargestellt, nur weiss ich jetzt nicht, wie ich das ganze zum "laufen" bringe. Ich möchte mit den Pfeiltasten (bzw. Richtungstasten) meine Spielfigur bewegen können.HTML-Code:<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8" /> <title>RPGJS Game</title> <link type="text/css" rel="stylesheet" href="rsrc/css/style.css" /> <script type="text/javascript"> /** This function is called on page load. */ function loadRPG() { /** Get the canvas element. */ rpg = document.getElementById("canvasRPG"); /** * Make sure you got it. * If you have it, create a canvas user interface element. */ if(rpg.getContext) { /** Specify 2d canvas type. */ ctx = rpg.getContext("2d"); /** Paint it. */ ctx.fillStyle = '#222'; ctx.rect(0,0,rpg.width,rpg.height); ctx.fill(); /** Draw character. */ drawCharacter(); } }; function drawCharacter() { ctx.beginPath(); ctx.fillStyle = "#fff"; ctx.closePath(); ctx.rect(5,5,10,20); ctx.fill(); }; </script> </head> <body onload="loadRPG()"> <div id="canvasRPG-parent"> <canvas id="canvasRPG" width="640" height="480"></canvas> </div> </body> </html>
Danke schonmal im voraus für eure Antworten.
Gruß,
Van
-
Deine Frage hat mit dem Canvas Element gar nichts zu tun. Du brauchst erst mal eine Struktur, in der du deine Figurdaten ablegst (mindestens mal x und y Koordinate). Dein drawCharacter passt du entsprechend an, dass es diese Daten zum Zeichnen nimmt.
Via setInterval (z.B. mit 30ms Verzögerung) oder evtl. auch requestAnimationFrame, das wäre aber komplizierter, erzeugst du jetzt die Animation. Bei jedem Frame änderst du die Position deiner Figur entsprechend der gedrückten Tasten und zeichnest anschließend das gesamte Canvas neu (spätere Verbesserung: Nur den geänderten Bereich neu zeichnen).
-
Hey, danke dir!
...aber frisst das nicht extrem Ressourcen, wenn ich den Canvas immerwieder neu zeichne/bzw. den geänderten Abschnitt oder laufen alle Games so ab?
-
04.11.11 09:45 #4
- Registriert seit
- Apr 2007
- Ort
- entre dos tierras
- Beiträge
- 73
Moin,
japp, so laufen Spiele ab. Du hast den sogenannten Game-Loop, dieser wiederholt sich immer, ändert die Eigenschaften der Spielobjekte und zeichnet das Grafikobjekt (hier canvas) neu. Schau' Dir mal folgenden Thread an: http://www.tutorials.de/java/377374-...ammierung.html ...vielleicht hilft Dir die dortige Diskussion weiter.
Gruß,
OneOf6...every second is a new spark, sets the universe aflame
(Bruce Dickinson)
Got something to say? http://www.plaintalk.de
Zitieren
Ähnliche Themen
-
[Quiz#14] Chumper (Javascript + Canvas)
Von Chumper im Forum ArchivAntworten: 0Letzter Beitrag: 26.03.10, 04:56 -
Canvas
Von Underscore im Forum Javascript & AjaxAntworten: 2Letzter Beitrag: 12.09.09, 19:00 -
JavaScript: Prüfung ob canvas oder explorercanvas unterstützt wird
Von Shakie im Forum Javascript & AjaxAntworten: 4Letzter Beitrag: 20.06.09, 00:42 -
canvas
Von versuch13 im Forum Javascript & AjaxAntworten: 6Letzter Beitrag: 24.09.08, 23:13 -
3D Canvas...
Von Mailyn im Forum Sonstige Grafik-ProgrammeAntworten: 0Letzter Beitrag: 25.09.05, 18:19
Login
