Steuerbares Spielfeld anlegen

violentviper · 1. Oktober 2015

Hallo,

ich möchte gerne folgendes Grundzenario möglichst einfach realisieren. Und zwar soll es eine Webanwendung werden, also auf einer Internetseite, mittels JavaScript oder what ever.

Ich habe ein 3x3 großes Feld mal zur Verständnis in Paint zusammengeklatscht, hier zu sehen.

Und ein Steuerkreuz, mit dem ich den grünen Kreis in dem Feld hin und her bewegen möchte.

Wenn ich den oberen Pfeil drücke, soll das dann so aussehen:

Also, ich möchte sozusagen den grünen Kreis oder was auch immer, in dem Feld hin und her bewegen möchten. Jedoch nur horizontal und vertikal - nicht diagonal.

Dazu habe ich mir überlegt, das ich ein Array in ein Array packe mittels Javascript, um mehrdimensional zu werden. Somit könnte ich dann die einzelnen Felder ansprechen. Jedoch weiß ich nicht, wie ich hier den Kreis am besten reinpacke, der sich dann auch noch in dem Array bewegen kann. Zumal man ja jedesmal die vorherige Position aus dem Array wieder rauslöschen muss, da sich der Kreis immer nur an einer Stelle befinden kann.

Ich will keine vorgekaute Lösung, ich möchte nur einen Ansatz wissen, wie man das am leichtesten Programmiert. Gerne auch mit anderen Programmiersprachen oder Frameworks die sich hierfür besser eigenen als JS und Jquery.

wirelessy · 1. Oktober 2015

Zweidimensionales Array aus boolschen Werten. Wenn True, male Kreis. Wenn nicht, nicht.

ClashHexmen · 1. Oktober 2015

Du kannst doch auch einfach die Position des Kreises in zwei Variablen speichern. posx und posy. Mit dem Klick auf die Steuerung verändern sich dann die Werte um +1 oder -1. Zustzlich ne Abfrage was an den Rändern geschehen soll. Wenn das dann gezeichnet wird musst du halt nur noch die Werte in Koordinaten übertragen. Also Offset(halber Kasten) + posx*Kastenbreite.

violentviper · 3. Oktober 2015

Also ich hab jetzt mal ein mehrdimensionales Array angelegt, welches zunächst alle Felder mit false initialisiert.

Code:

var spacesize = generateSpace(3);
    function generateSpace(x) {

        var  space = [];

        for (var i = 0; i < x; i++) {
            space[i] = [];

           for (var j = 0; j < x; j++) {
                space[i][j] = false;
            }
        }
        return space;
    }

Das Problem ist eher das anzeigen der einzelnen Felder ( Kachlen). Ein einzelnes Feld ist bei mir eine 50x50 Jpg Grafik. Diese soll ja wie oben im Bild angeordnet werden. Das mach ich natürlich nicht alles mit starren Pixelwerten. Dazu muss ich mir noch für jede Reihe eine Schleife bauen, welche 3 Felder anordnet.

Ich weiß leider nur nicht, wie man geschickt <img src> tags vernünftig in eine for schleife einbaut.

Im Kopf hab ich sowas:

Code:

drawSpace(3);		
function drawSpace(x) {
                   for ( var j = 0; j<x; j++) {
			$(x).append('<img src="Weltall_Feld.jpg" alt="WeltallFeld">');
		}
	}

Bloß der Code ist quatsch, und selbst wenn es geprintet werden würde, würden ja alle Bilder übereinander liegen. Ich muss irgendwie noch elegant pro Iteration eine Koordinatenverschiebung mit reinbasteln. Dazu werde ich die Iterationsvariable i mit verwenden. So der Gedankengang.

Ist das richtig so, oder stehen da euch schon die Haare zu Kopf ? Macht man das so ?

Suche

Steuerbares Spielfeld anlegen

violentviper

Lt. Commander

wirelessy

Captain

ClashHexmen

Lt. Commander

violentviper

Lt. Commander

Ähnliche Themen