JavaScript Minesweeper - Seite 2

ByStones · 05.09.2010, 17:21

Wenn ich das ganz nicht als jQuery-Plugin mache sondern als eigenes Objekt ?
Und man das ganze dann so aufruft:

PHP-Code:

  var mine = new Minesweeper();
mine.options({
    sizeX: 50
});

mine.render($('.spielfeld'));

Wäre das dann besser, weil dann wär das ganz ja nicht in jQuery eingebaut, sondern eigenständig ?

Edit: Während des Schreibens kam der jQuery UI Beitrag, dann hab ich dazu noch ne Frage: Wenn ich das als Widget machen will, muss man dann das jQuery UI einbinden, damit es funktionsfähig ist ?

rudygotya · 05.09.2010, 17:38

Du bräuchtest dann widget und core (evtl auch ui.mouse).

ByStones · 05.09.2010, 18:13

Sodele, ich hab das mal umgebaut:

PHP-Code:

  $.widget("ui.minesweeper", {
    // default options
    options: {
        playground: new Array(),
        sizeX: 9,
        sizeY: 9,
        mines: 10,
        lost: false,
        httpBase: '.'
    },

    positionArray: [
    {
        y: -1,
        x: 1
    }, {
        y: -1,
        x: 0
    }, {
        y: -1,
        x: -1
    }, {
        y: 0,
        x: -1
    },
    {
        y: 0,
        x: 1
    }, {
        y: 1,
        x: 1
    }, {
        y: 1,
        x: 0
    }, {
        y: 1,
        x: -1
    }
    ],

    _create: function() {        
        //Spielfeld erzeugen
        for(var y = 0; y < this.options.sizeY; y += 1) {
            this.options.playground[y] = new Array();
            for(var x = 0; x < this.options.sizeX; x += 1) {
                this.options.playground[y][x] = null;
            }
        }

        return this;
    },

    _spreadMines: function (){
        //Aktuelle Anzahl der Minen
        var counter = 1;
        do {
            //Zufällige X- und Y-Kooredinate für die Mine suchen
            x = Math.round(Math.random() * (this.options.playground[0].length - 1));
            y = Math.round(Math.random() * (this.options.playground.length - 1));

            //Wenn sich dort noch keine Mine befindet
            if (this.options.playground[y][x] !== -1) {
                //Mine setzten
                this.options.playground[y][x] = -1;

                //Minenzähler erhöhen
                counter += 1;
            }
        //Solange bis alle Minen verteilt sind
        } while (counter <= this.mines);

        return this;
    },

    _spreadNumbers: function (){
        //Anzahl der umliegenden Minen der aktuellen Position
        var minenAround = 0;

        //Jedes Feld in einer Schleife durchlaufen
        $(this.options.playground).each(function (i1, y){
            $(y).each(function (i2, x) {

                //Wenn an dieser Position eine Mine ist, dieses Feld überspringen
                //und mein nächsten Weitermachen
                if (this.options.playground[i1][i2] == -1) {
                    return;
                }

                //Die umliegenden Minen auf 0 setzten
                minesAround = 0;

                //Das Hilfsarray durchlaufen
                $(this.positionArray).each(function (k, val){
                    //Wenn die Position existiert...
                    if (array_key_exists(i1 + val.y, this.options.playground)
                        && array_key_exists(i2 + val.x, this.options.playground[i1 + val.y])
                        //... und auf dieser Postion eine Mine liegt...
                        && this.options.playground[i1 + val.y][i2 + val.x] == -1) {
                        //...den Minenzähler erhöhen
                        minesAround += 1;
                    }

                });

                //Die umliegenden Minen ins Array Schreiben
                this.options.playground[i1][i2] = minesAround;

            });
        });

        return this;
    },

    _getTdObject: function (i1, i2) {
        //Das td-Objekt der Tabelle auf Basis der Koordinaten zurückgeben
        //Die + 1 deshalb bei :nth-child nicht mit 0 anfängt, sondern mit 1
        return $('.spielfeld tr:nth-child(' + (i1 + 1) + ') td:nth-child(' + (i2 + 1) + ')');
    },

    _checkClicked: function (i1, i2) {
        //Wurde auf das Spielfeld schoneinmal geklickt
        return this._getTdObject(i1, i2).data('clicked') === true;
    },

    _popupBlank: function (i1, i2) {
        //Das Hilfsarray durchlaufen
        $(this.positionArray).each(function (key, val){
            //Wenn die entsprechende Position existiert ...
            if (array_key_exists(i1 + val.y, this.options.playground)
                && array_key_exists(i2 + val.x, this.options.playground[i1 + val.y])
                //... und noch nicht darauf geklickt wurde
                //(Klick abfrage ist wichtig, sonst gibt es eine Endlosschleife) ...
                && !this._checkClicked(i1 + val.y, i2 + val.x)) {
                //... einen Klick darauf ausführen
                this._getTdObject(i1 + val.y, i2 + val.x).click();
            }

        });
    },

    _renderPlayground: function () {
        //Spielfeld erstellen
        var playground = '<table class="spielfeld">';
        for(y = 0; y < this.options.sizeY; y += 1) {
            playground = playground + '<tr>';
            for(x = 0; x < this.options.sizeX; x += 1) {
                playground = playground + '<td></td>';
            }
            playground = playground + '</tr>';
        }
        playground = playground + '</table>';

        $('#playground').html(playground);
    },

    _uncoverPlayground: function () {
        var tdObject = null;

        //Geht alle Felder durch
        for(y = 0; y < this.options.sizeY; y += 1) {
            for(x = 0; x < this.options.sizeX; x += 1) {

                //Objekt holen
                tdObject = this._getTdObject(y, x);

                //Wenn auf dieses Feld noch nicht geklickt wurde
                if (tdObject.data('clicked') !== true) {
                    //Dann klicken
                    tdObject.click();
                }
            }
        }
    },

    _createPlayground: function () {

        //tdObjekt initalisieren
        var tdObject = null;
        for(y = 0; y < this.options.sizeY; y += 1) {
            for(x = 0; x < this.options.sizeX; x += 1) {

                //Objekt holen
                tdObject = this._getTdObject(y, x);

                //Die X-Koordinate speichern
                tdObject.data('x', x);
                //Die Y-Koordinate speichern
                tdObject.data('y', y);
                //Die Numer (Anzahl der umliegenden Minen) speichern
                tdObject.data('number', this.options.playground[y][x]);

                //Das "Verdeckt"-Bild einfügen
                tdObject.html('<img src="' + HTTP + '/image/minesweeper-verdeckt.png" />');

                //WICHTIG: Benötigt jQuery-RightClick-Plugin
                //Funktioniert nicht auf allen Browsern (Opera)
                tdObject.rightClick(function (){
                    var $this = $(this);
                    //Wenn noch nicht auf das Feld geklickt wurde
                    if ($this.data('clicked') !== true) {
                        //Ein FlaggenBild setzen
                        $this.html('<img src="' + this.options.httpBase + '/image/minesweeper-flagge.png" />');
                    }
                });

                //Wenn an dieser Position eine Mine liegt, ...
                if (this.options.playground[y][x] === -1){
                    //... dann wird bei einem Klick ...
                    tdObject.click(function (){
                        var $this = $(this);
                        //Speichern, dass hier schoneinmal geklickt wurde
                        $this.data('clicked', true);

                        //... das Minenbild angezeigt ...
                        $this.html('<img src="' + this.options.httpBase + '/image/minesweeper-mine.png" />');

                        //Falls man noch nicht verloren hat:
                        if (this.options.lost === false) {

                            //Speichern, dass man verloren hat
                            this.options.lost = true;

                            //Das gesamte Spielfeld aufdecken
                            this._uncoverPlayground();

                            //Die Verloren-Meldung ausgeben
                            alert('Sie haben verloren.');

                        }
                    });
                } else { //Wenn an der Position keine Mine liegt
                    tdObject.click(function (){
                        var $this = $(this);

                        //Speichern, dass auf dieses Feld schonmal geklickt wurde
                        $this.data('clicked', true);

                        //Wenn es eine Feld ist, wo keine Minen im Umkreis sind
                        if ($this.data('number') === 0) {
                            //Das Feld leeren
                            $this.html('');

                            //Und die umliegenden Felder aufdecken
                            this._popupBlank($this.data('y'), $this.data('x'));

                            //Zum nächsten Schleifendurchlauf springen
                            return;
                        }

                        //In das aktuelle Feld die Minen-Anzahl reinschreiben
                        $this.html($this.data('number'));
                    });
                }
            }
        }

    },
   
    destroy: function() {
        //Widget zerstören
        $.Widget.prototype.destroy.apply(this, arguments);
    }
});

Kann mir jemand sagen wie ich das ganz testen kann (einach jQuery UI + Minesweeper und fertig ?) ?

Grüße

ByStones · 05.09.2010, 19:13

Noch eine ganz wichtig Fragen: Wenn ich in einer Funktion drin bin, z.b. $().each(function() { hier }), dann kann ich mit this ja nichtmehr auf das Objekt zugreifen, wie komme ich trotzdem dann das Objekt hin ?

nikosch · 05.09.2010, 23:32

Über das Closure-Prinzip.

Chriz · 05.09.2010, 23:42

Funktioniert die Erzeugung eines konsistenten Spielfelds denn schon?

ByStones · 15.09.2010, 20:25

Zitat:

Über das Closure-Prinzip.

Wie genau meinst du das ?

Ich hab das ganze bis jetzt auf meinem FF getestet und da hat alles funktioniert ^^

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
timing Probleme bzw Zusammenspiel PHP Javascript	thica	PHP Tipps 2009	2	19.02.2010 19:06
[Erledigt] Ersatz für Javascript	Mort1ferus	JavaScript, Ajax und mehr	6	12.10.2009 09:35
Wie lade ich ein Javascript nach einer AJAX Abfrage neu?	da.eXecutoR	JavaScript, Ajax und mehr	3	21.09.2009 11:15
[Erledigt] Ist das ok, wenn eine Webseite nur in PHP ist und komplett auf JavaScript	coffeyn	Off-Topic Diskussionen	15	21.08.2009 15:11
[Erledigt] JavaScript Weiche bei Formular?	markus228	JavaScript, Ajax und mehr	1	09.08.2009 14:16
[Erledigt] Variable von Javascript mit 1x1px-Bild an PHP übergeben	beneblack	PHP Tipps 2009	18	03.05.2009 22:40
JS: Einführung - Javascript im Schichtenmodell	nikosch	Tutorials	4	11.04.2009 17:06
[Erledigt] Javascript in PHP Aufrufen	coyboc	PHP Tipps 2009	17	10.04.2009 15:28
1101: 10x JavaScript und kein Ende ist abzusehen…	Nikolaus 2.0	Adventskalender 2008	9	13.12.2008 20:11
PHP + Javascript + MYSQL	socke	PHP Tipps 2006	4	02.04.2006 22:02
Variable wird geändert bei Übergabe an Javascript		PHP Tipps 2007	4	17.12.2005 16:53
JavaScript in JavaScript geschriebene Html-Datei einbinden.	woods	HTML, Usability und Barrierefreiheit	6	06.09.2004 18:33
Javascript		HTML, Usability und Barrierefreiheit	5	31.08.2004 18:30
php + Javascript, Variablenübergabe		PHP Tipps 2004	14	28.07.2004 15:42

05.09.2010, 17:21
ByStones Erfahrener Benutzer Registriert seit: 23.03.2010 Beiträge: 626 PHP-Kenntnisse: Anfänger	Wenn ich das ganz nicht als jQuery-Plugin mache sondern als eigenes Objekt ? Und man das ganze dann so aufruft: PHP-Code: `var mine = new Minesweeper(); mine.options({ sizeX: 50 }); mine.render($('.spielfeld'));` Wäre das dann besser, weil dann wär das ganz ja nicht in jQuery eingebaut, sondern eigenständig ? Edit: Während des Schreibens kam der jQuery UI Beitrag, dann hab ich dazu noch ne Frage: Wenn ich das als Widget machen will, muss man dann das jQuery UI einbinden, damit es funktionsfähig ist ? __________________ Signatur: PHP-Code: `$s = '0048656c6c6f20576f726c64'; while($i=substr($s=substr($s,2),0,2))echo"&#x00$i;";` Geändert von ByStones (05.09.2010 um 17:25 Uhr).


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

05.09.2010, 17:38
rudygotya Erfahrener Benutzer Registriert seit: 28.05.2008 Beiträge: 2.094 PHP-Kenntnisse: Fortgeschritten	Du bräuchtest dann widget und core (evtl auch ui.mouse). __________________ ++++ Wieder einer ins Netz gegangen: Phishers Fritz zufrieden ++++ Blog

05.09.2010, 18:13
ByStones Erfahrener Benutzer Registriert seit: 23.03.2010 Beiträge: 626 PHP-Kenntnisse: Anfänger	Sodele, ich hab das mal umgebaut: PHP-Code: $.widget("ui.minesweeper", { // default options options: { playground: new Array(), sizeX: 9, sizeY: 9, mines: 10, lost: false, httpBase: '.' }, positionArray: [ { y: -1, x: 1 }, { y: -1, x: 0 }, { y: -1, x: -1 }, { y: 0, x: -1 }, { y: 0, x: 1 }, { y: 1, x: 1 }, { y: 1, x: 0 }, { y: 1, x: -1 } ], _create: function() { //Spielfeld erzeugen for(var y = 0; y < this.options.sizeY; y += 1) { this.options.playground[y] = new Array(); for(var x = 0; x < this.options.sizeX; x += 1) { this.options.playground[y][x] = null; } } return this; }, _spreadMines: function (){ //Aktuelle Anzahl der Minen var counter = 1; do { //Zufällige X- und Y-Kooredinate für die Mine suchen x = Math.round(Math.random() * (this.options.playground[0].length - 1)); y = Math.round(Math.random() * (this.options.playground.length - 1)); //Wenn sich dort noch keine Mine befindet if (this.options.playground[y][x] !== -1) { //Mine setzten this.options.playground[y][x] = -1; //Minenzähler erhöhen counter += 1; } //Solange bis alle Minen verteilt sind } while (counter <= this.mines); return this; }, _spreadNumbers: function (){ //Anzahl der umliegenden Minen der aktuellen Position var minenAround = 0; //Jedes Feld in einer Schleife durchlaufen $(this.options.playground).each(function (i1, y){ $(y).each(function (i2, x) { //Wenn an dieser Position eine Mine ist, dieses Feld überspringen //und mein nächsten Weitermachen if (this.options.playground[i1][i2] == -1) { return; } //Die umliegenden Minen auf 0 setzten minesAround = 0; //Das Hilfsarray durchlaufen $(this.positionArray).each(function (k, val){ //Wenn die Position existiert... if (array_key_exists(i1 + val.y, this.options.playground) && array_key_exists(i2 + val.x, this.options.playground[i1 + val.y]) //... und auf dieser Postion eine Mine liegt... && this.options.playground[i1 + val.y][i2 + val.x] == -1) { //...den Minenzähler erhöhen minesAround += 1; } }); //Die umliegenden Minen ins Array Schreiben this.options.playground[i1][i2] = minesAround; }); }); return this; }, _getTdObject: function (i1, i2) { //Das td-Objekt der Tabelle auf Basis der Koordinaten zurückgeben //Die + 1 deshalb bei :nth-child nicht mit 0 anfängt, sondern mit 1 return $('.spielfeld tr:nth-child(' + (i1 + 1) + ') td:nth-child(' + (i2 + 1) + ')'); }, _checkClicked: function (i1, i2) { //Wurde auf das Spielfeld schoneinmal geklickt return this._getTdObject(i1, i2).data('clicked') === true; }, _popupBlank: function (i1, i2) { //Das Hilfsarray durchlaufen $(this.positionArray).each(function (key, val){ //Wenn die entsprechende Position existiert ... if (array_key_exists(i1 + val.y, this.options.playground) && array_key_exists(i2 + val.x, this.options.playground[i1 + val.y]) //... und noch nicht darauf geklickt wurde //(Klick abfrage ist wichtig, sonst gibt es eine Endlosschleife) ... && !this._checkClicked(i1 + val.y, i2 + val.x)) { //... einen Klick darauf ausführen this._getTdObject(i1 + val.y, i2 + val.x).click(); } }); }, _renderPlayground: function () { //Spielfeld erstellen var playground = '<table class="spielfeld">'; for(y = 0; y < this.options.sizeY; y += 1) { playground = playground + '<tr>'; for(x = 0; x < this.options.sizeX; x += 1) { playground = playground + '<td></td>'; } playground = playground + '</tr>'; } playground = playground + '</table>'; $('#playground').html(playground); }, _uncoverPlayground: function () { var tdObject = null; //Geht alle Felder durch for(y = 0; y < this.options.sizeY; y += 1) { for(x = 0; x < this.options.sizeX; x += 1) { //Objekt holen tdObject = this._getTdObject(y, x); //Wenn auf dieses Feld noch nicht geklickt wurde if (tdObject.data('clicked') !== true) { //Dann klicken tdObject.click(); } } } }, _createPlayground: function () { //tdObjekt initalisieren var tdObject = null; for(y = 0; y < this.options.sizeY; y += 1) { for(x = 0; x < this.options.sizeX; x += 1) { //Objekt holen tdObject = this._getTdObject(y, x); //Die X-Koordinate speichern tdObject.data('x', x); //Die Y-Koordinate speichern tdObject.data('y', y); //Die Numer (Anzahl der umliegenden Minen) speichern tdObject.data('number', this.options.playground[y][x]); //Das "Verdeckt"-Bild einfügen tdObject.html('<img src="' + HTTP + '/image/minesweeper-verdeckt.png" />'); //WICHTIG: Benötigt jQuery-RightClick-Plugin //Funktioniert nicht auf allen Browsern (Opera) tdObject.rightClick(function (){ var $this = $(this); //Wenn noch nicht auf das Feld geklickt wurde if ($this.data('clicked') !== true) { //Ein FlaggenBild setzen $this.html('<img src="' + this.options.httpBase + '/image/minesweeper-flagge.png" />'); } }); //Wenn an dieser Position eine Mine liegt, ... if (this.options.playground[y][x] === -1){ //... dann wird bei einem Klick ... tdObject.click(function (){ var $this = $(this); //Speichern, dass hier schoneinmal geklickt wurde $this.data('clicked', true); //... das Minenbild angezeigt ... $this.html('<img src="' + this.options.httpBase + '/image/minesweeper-mine.png" />'); //Falls man noch nicht verloren hat: if (this.options.lost === false) { //Speichern, dass man verloren hat this.options.lost = true; //Das gesamte Spielfeld aufdecken this._uncoverPlayground(); //Die Verloren-Meldung ausgeben alert('Sie haben verloren.'); } }); } else { //Wenn an der Position keine Mine liegt tdObject.click(function (){ var $this = $(this); //Speichern, dass auf dieses Feld schonmal geklickt wurde $this.data('clicked', true); //Wenn es eine Feld ist, wo keine Minen im Umkreis sind if ($this.data('number') === 0) { //Das Feld leeren $this.html(''); //Und die umliegenden Felder aufdecken this._popupBlank($this.data('y'), $this.data('x')); //Zum nächsten Schleifendurchlauf springen return; } //In das aktuelle Feld die Minen-Anzahl reinschreiben $this.html($this.data('number')); }); } } } }, destroy: function() { //Widget zerstören $.Widget.prototype.destroy.apply(this, arguments); } }); Kann mir jemand sagen wie ich das ganz testen kann (einach jQuery UI + Minesweeper und fertig ?) ? Grüße __________________ Signatur: PHP-Code: `$s = '0048656c6c6f20576f726c64'; while($i=substr($s=substr($s,2),0,2))echo"&#x00$i;";` Geändert von ByStones (05.09.2010 um 19:13 Uhr).

05.09.2010, 19:13
ByStones Erfahrener Benutzer Registriert seit: 23.03.2010 Beiträge: 626 PHP-Kenntnisse: Anfänger	Noch eine ganz wichtig Fragen: Wenn ich in einer Funktion drin bin, z.b. $().each(function() { hier }), dann kann ich mit this ja nichtmehr auf das Objekt zugreifen, wie komme ich trotzdem dann das Objekt hin ? __________________ Signatur: PHP-Code: `$s = '0048656c6c6f20576f726c64'; while($i=substr($s=substr($s,2),0,2))echo"&#x00$i;";`

05.09.2010, 23:32
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Über das Closure-Prinzip. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

05.09.2010, 23:42
Chriz Moderator Registriert seit: 11.05.2008 Beiträge: 6.266	Funktioniert die Erzeugung eines konsistenten Spielfelds denn schon? __________________ "Nuschel ich?" - "Was?"