php.de

Zurück   php.de > Webentwicklung > JavaScript, Ajax und mehr

JavaScript, Ajax und mehr dynamisches Scripten und Interaktion auf Clientebene

Antwort
 
LinkBack Themen-Optionen Thema bewerten
Alt 03.09.2010, 23:43  
Erfahrener Benutzer
 
Registriert seit: 23.03.2010
Beiträge: 626
PHP-Kenntnisse:
Anfänger
ByStones befindet sich auf einem aufstrebenden Ast
Standard JavaScript Minesweeper

Hallo,
ich habe heute ein kleines Minesweeper-Skript geschrieben, und wollte mal 2 Sachen fragen:
1. Was haltet Ihr von der Umsetzung, wie kann man es gegebenenfalls besser machen ?
2. Wie baue ich das Ganze in ein Objekt um, sodass man es wie jQuery benutzen kann ?

Hier der Code:
PHP-Code:
var spielfeld = new Array();

//Abmessung X
var spielfeld_x 9;
//Abmessung Y
var spielfeld_y 9;
//Anzahl der Minen
var minen 10;

//Spielfeld erzeugen
for(var 0spielfeld_y+= 1) {
    
spielfeld[y] = new Array();
    for(var 
0spielfeld_x+= 1) {
        
spielfeld[y][x] = null;
    }
}

//Aktuelle Anzahl der Minen
var counter 1;
do {
    
//Zufällige X- und Y-Kooredinate für die Mine suchen
    
Math.round(Math.random() * (spielfeld_x 1));
    
Math.round(Math.random() * (spielfeld_y 1));

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

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

//Hilfsarray um von einer Position alle umleigenden
//anzusprechen
var around = [
{
    
y: -1,
    
x1
}, {
    
y: -1,
    
x0
}, {
    
y: -1,
    
x: -1
}, {
    
y0,
    
x: -1
},
{
    
y0,
    
x1
}, {
    
y1,
    
x1
}, {
    
y1,
    
x0
}, {
    
y1,
    
x: -1
}
];

//Anzahl der umliegenden Minen der aktuellen Position
var minenAround 0;

//Jedes Feld in einer Schleife durchlaufen
$(spielfeld).each(function (i1y){
    $(
y).each(function (i2x) {

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

        
//Die umliegenden Minen auf 0 setzten
        
minenAround 0;

        
//Das Hilfsarray durchlaufen
        
$(around).each(function (kval){
            
//Wenn die Position existiert...
            
if (array_key_exists(i1 val.yspielfeld)
                && 
array_key_exists(i2 val.xspielfeld[i1 val.y])
                
//... und auf dieser Postion eine Mine liegt...
                
&& spielfeld[i1 val.y][i2 val.x] == -1) {
                
//...den Minenzähler erhöhen
                
minenAround += 1;
            }
            
        });            

        
//Die umliegenden Minen ins Array Schreiben
        
spielfeld[i1][i2] = minenAround;
        
    });
});

function 
getTdObject(i1i2) {
    
//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) + ')');
}

function 
checkClicked(i1i2) {
    
//Wurde auf das Spielfeld schoneinmal geklickt
    
return getTdObject(i1i2).data('clicked') === true;
}

function 
popupBlank(i1i2) {
    
//Das Hilfsarray durchlaufen
    
$(around).each(function (keyval){
        
//Wenn die entsprechende Position existiert ...
        
if (array_key_exists(i1 val.yspielfeld)
            && 
array_key_exists(i2 val.xspielfeld[i1 val.y])
            
//... und noch nicht darauf geklickt wurde
            //(Klick abfrage ist wichtig, sonst gibt es eine Endlosschleife) ...
            
&& !checkClicked(i1 val.yi2 val.x)) {
            
//... einen Klick darauf ausführen
            
getTdObject(i1 val.yi2 val.x).click();
        }

    });    
}

function 
renderSpielfeld() {
    
//Spielfeld erstellen
    
var playground '<table class="spielfeld">';
    for(
0spielfeld_y+= 1) {
        
playground playground '<tr>';
        for(
0spielfeld_x+= 1) {
            
playground playground '<td></td>';
        }
        
playground playground '</tr>';
    }
    
playground playground '</table>';
    
    $(
'#playground').html(playground);
}

function 
createSpielfeld() {

    
//tdObjekt initalisieren
    
var tdObject null;
    for(
0spielfeld_y+= 1) {
        for(
0spielfeld_x+= 1) {

            
//Objekt holen
            
tdObject getTdObject(yx);

            
//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'spielfeld[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 (){
                
//Wenn noch nicht auf das Feld geklickt wurde
                
if ($(this).data('clicked') !== true) {
                    
//Ein FlaggenBild setzen
                    
$(this).html('<img src="' HTTP '/image/minesweeper-flagge.png" />');
                }
            });

            
//Wenn an dieser Position eine Mine liegt, ...
            
if (spielfeld[y][x] === -1){
                
//... dann wird bei einem Klick ...
                
tdObject.click(function (){
                    
//... das Minenbild angezeigt ...
                    
$(this).html('<img src="' HTTP '/image/minesweeper-mine.png" />');
                    
//.. und ausgegben, dass man verloren hat
                    
alert('Sie haben verloren.');
                });
            } else { 
//Wenn an der Position keine Mine liegt
                
tdObject.click(function (){

                    
//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
                        
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'));
                });
            }
        }
    }


Grüße
__________________
Signatur:
PHP-Code:
$s '0048656c6c6f20576f726c64';
while(
$i=substr($s=substr($s,2),0,2))echo"&#x00$i;"
ByStones ist offline   Mit Zitat antworten
Sponsor Mitteilung
PHP Code Flüsterer

Registriert seit: 21.08.2005
Beiträge: 4682
PHP-Kenntnisse:
Fortgeschritten

Alt 05.09.2010, 01:54  
Erfahrener Benutzer
 
Registriert seit: 28.05.2008
Beiträge: 2.094
PHP-Kenntnisse:
Fortgeschritten
rudygotya ist einfach richtig nettrudygotya ist einfach richtig nettrudygotya ist einfach richtig nettrudygotya ist einfach richtig nettrudygotya ist einfach richtig nett
Standard

Hi,

hab heute morgen länger hin und herüberlegt, was ich antworten soll. Hast du dir mal die howtos von jquery hinsichtlich Extension-Entwicklung durchgelesen? Da gibt es super tutorials. Alles von Grund auf zu erklären fällt ein wenig schwer, da einfach zu viele Wege nach Rom führen.

Toll finde ich, dass du so viel kommentierst. Super wäre es, wenn du bei so was evtl einen kurzen Beispiellink mit posten könntest, dass man den Code auch mal in Action sieht.

Paar kurze Tipps:
Referenzier einmal am Anfang auf $(this), so erstellst du nicht jedes mal ein neues Objekt. Am Anfang jeder Funktion, die öfter darauf zugreift, dazu z.b. var $this = $(this); schreiben. Schau dir mal "for" .. "in" an. Das Incrementieren der Zählervariable mit i+=1 habe ich so noch nie bei jemandem gesehen. Aber das sind ja nur Kleinigkeiten
Eigentlich vermisse nur die Möglichkeit, dem Ganzen ein Options-Object geben zu können. jQuery.extend ist da sehr praktisch.

Wenns mit dem Plugin entwickeln hakt, helf ich dir gern im Detail weiter.


grüße
__________________
++++ Wieder einer ins Netz gegangen: Phishers Fritz zufrieden ++++
Blog
rudygotya ist offline   Mit Zitat antworten
Alt 05.09.2010, 15:28  
moderatives Dielektrikum
 
Benutzerbild von nikosch
 
Registriert seit: 21.05.2008
Beiträge: 35.987
PHP-Kenntnisse:
Fortgeschritten
nikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunft
Standard

Naja, aber ist eine Anwendung eine Extension? Einen jQuery Namensraum zu benutzen finde ich gerechtfertigt, nicht aber eine Extension draus zu machen.
__________________
--
One pixel is still too big. Please make it smaller. ASAP.

Initiative Mittelstand.
Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers.
--
nikosch ist offline   Mit Zitat antworten
Alt 05.09.2010, 15:40  
Erfahrener Benutzer
 
Registriert seit: 28.05.2008
Beiträge: 2.094
PHP-Kenntnisse:
Fortgeschritten
rudygotya ist einfach richtig nettrudygotya ist einfach richtig nettrudygotya ist einfach richtig nettrudygotya ist einfach richtig nettrudygotya ist einfach richtig nett
Standard

Was spricht denn gegen ein Widget / eine Extension?
__________________
++++ Wieder einer ins Netz gegangen: Phishers Fritz zufrieden ++++
Blog
rudygotya ist offline   Mit Zitat antworten
Alt 05.09.2010, 15:46  
moderatives Dielektrikum
 
Benutzerbild von nikosch
 
Registriert seit: 21.05.2008
Beiträge: 35.987
PHP-Kenntnisse:
Fortgeschritten
nikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunft
Standard

Extensions erweitern in meinen Augen den Funktionsraum von jQuery. Sie sind hinreichend abstrakt oder konfigurierbar gestaltet, dass man sie für Individualanwendungen kombiniert einsetzen kann. Ein Spiel ist in sich komplett und gehört da IMHO nicht rein.
__________________
--
One pixel is still too big. Please make it smaller. ASAP.

Initiative Mittelstand.
Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers.
--
nikosch ist offline   Mit Zitat antworten
Alt 05.09.2010, 17:08  
Erfahrener Benutzer
 
Registriert seit: 28.05.2008
Beiträge: 2.094
PHP-Kenntnisse:
Fortgeschritten
rudygotya ist einfach richtig nettrudygotya ist einfach richtig nettrudygotya ist einfach richtig nettrudygotya ist einfach richtig nettrudygotya ist einfach richtig nett
Standard

Ist die Frage, wo man die Grenze zieht. Für ein (Ui-)Widget spricht, dass er eine klar definierte Aufgabe hat, aber das ganze in den Ausmessungen/Spieloptionen variieren möchte. Die Erzeugung des Spielfelds sowie das zur Verfügung stellen von Callbacks und Events würde da schon sehr gut in ein Widget passen.
Was das Auswerten des Spielergebnisses betrifft, bin ich dann wieder deiner Meinung, das hat im Widget nichts/nur sehr bedingt was zu suchen.
__________________
++++ Wieder einer ins Netz gegangen: Phishers Fritz zufrieden ++++
Blog
rudygotya ist offline   Mit Zitat antworten
Alt 05.09.2010, 17:08  
Erfahrener Benutzer
 
Registriert seit: 23.03.2010
Beiträge: 626
PHP-Kenntnisse:
Anfänger
ByStones befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von rudygotya Beitrag anzeigen
Toll finde ich, dass du so viel kommentierst. Super wäre es, wenn du bei so was evtl einen kurzen Beispiellink mit posten könntest, dass man den Code auch mal in Action sieht.
Naja, zugegeben, normalerweise kommentiere ich nicht so viel, aber das man es schnell versteht, wenn es jemand hier liest hab ich einfach alles kommentiert.

Zitat:
Zitat von rudygotya Beitrag anzeigen
Paar kurze Tipps:
Referenzier einmal am Anfang auf $(this), so erstellst du nicht jedes mal ein neues Objekt. Am Anfang jeder Funktion, die öfter darauf zugreift, dazu z.b. var $this = $(this); schreiben.
Ok danke für den Tipp, das hab ich mal soweit umgebaut (wo man $(this) mehr als einmal benutzt).

Zitat:
Zitat von rudygotya Beitrag anzeigen
Eigentlich vermisse nur die Möglichkeit, dem Ganzen ein Options-Object geben zu können. jQuery.extend ist da sehr praktisch.
PHP-Code:
$.fn.extend({
Minesweeper: {
render: function(){ .... }
}
});

$().
Minesweeper.render() 
Wäre das dso richtig ?

Zitat:
Extensions erweitern in meinen Augen den Funktionsraum von jQuery. Sie sind hinreichend abstrakt oder konfigurierbar gestaltet, dass man sie für Individualanwendungen kombiniert einsetzen kann. Ein Spiel ist in sich komplett und gehört da IMHO nicht rein.
Wie könnte man es dann machen ?

Grüße
__________________
Signatur:
PHP-Code:
$s '0048656c6c6f20576f726c64';
while(
$i=substr($s=substr($s,2),0,2))echo"&#x00$i;"
ByStones ist offline   Mit Zitat antworten
Alt 05.09.2010, 17:12  
Erfahrener Benutzer
 
Registriert seit: 28.05.2008
Beiträge: 2.094
PHP-Kenntnisse:
Fortgeschritten
rudygotya ist einfach richtig nettrudygotya ist einfach richtig nettrudygotya ist einfach richtig nettrudygotya ist einfach richtig nettrudygotya ist einfach richtig nett
Standard

Zitat:
Wäre das dso richtig ?
Nein, du gibst default Options vor und extendest dann mit den Optionen, die das widget dann bekäme. Hier mal ein einfaches Beispiel:
PHP-Code:
(function($) {
    
/**
     * @desc: hide element elegant by using opacity;
     */
    
$.fn.animOut = function (options) {
        var 
opts = $.extend({}, $.fn.animOut.defaultsoptions);
        return 
this.each(function(options) {
            var 
$this = $(this),
                
= $.metadata ? $.extend({}, opts$this.metadata()) : opts;
            
o.init.call(this);
            if($.
browser.msie) {
                
$this.fadeOut(o.duration);
            } else {
                
$this.animate({
                    
height'hide',
                    
opacityo.opacity
                
}, o.duration);
            }
            if(
o.hide) {
                
$this.hide();
            }
            
o.callback.call(this);
        });
    };
    $.
fn.animOut.defaults = {
        
init : function(){},
        
callback : function(){},
        
opacity70,
        
duration250,
        
hidefalse
    
};
})(
jQuery); 
Edit: dem $ selector solltes tdu dann noch den Selector mitgeben, wohin denn gerendert werden soll.
__________________
++++ Wieder einer ins Netz gegangen: Phishers Fritz zufrieden ++++
Blog
rudygotya ist offline   Mit Zitat antworten
Alt 05.09.2010, 17:12  
Supermoderator HD
 
Benutzerbild von Manko10
 
Registriert seit: 16.03.2008
Beiträge: 8.706
PHP-Kenntnisse:
Fortgeschritten
Manko10 hat eine strahlende ZukunftManko10 hat eine strahlende ZukunftManko10 hat eine strahlende ZukunftManko10 hat eine strahlende ZukunftManko10 hat eine strahlende ZukunftManko10 hat eine strahlende ZukunftManko10 hat eine strahlende ZukunftManko10 hat eine strahlende ZukunftManko10 hat eine strahlende ZukunftManko10 hat eine strahlende ZukunftManko10 hat eine strahlende Zukunft
Standard

Ich würde generell keine eigenen Anwendungen als Plugins organisieren. Programme, die eigenständig Aufgaben erledigen und für einen bestimmten Zweck gemacht sind, sind eben eigenständige Anwendungen und keine Plugin-ins. Das Framework ist der Anwendung unterzuordnen, nicht umgekehrt. Ein Plugin ist jedoch dem Framework untergeordnet.
__________________
Refining Linux Advent Calendar series “24 Outstanding ZSH Gems
Manko10 ist offline   Mit Zitat antworten
Alt 05.09.2010, 17:19  
Erfahrener Benutzer
 
Registriert seit: 28.05.2008
Beiträge: 2.094
PHP-Kenntnisse:
Fortgeschritten
rudygotya ist einfach richtig nettrudygotya ist einfach richtig nettrudygotya ist einfach richtig nettrudygotya ist einfach richtig nettrudygotya ist einfach richtig nett
Standard

Die Erzeugung des Spielfeldes ist mMn. dennoch ein super Anwendungsfall für ein Widget. Das hat aber nichts mit der Anwendung als Ganzes zu tun.

Siehe auch jqueryui developer guide. Wenn man in dem hier besprochenen Fall das Spiel in verschiedenen Schwierigkeitsstufen anbieten möchte, ist das doch eine super Lösung.
__________________
++++ Wieder einer ins Netz gegangen: Phishers Fritz zufrieden ++++
Blog
rudygotya ist offline   Mit Zitat antworten
Antwort


Themen-Optionen
Thema bewerten
Thema bewerten:

Forumregeln
Es ist dir nicht erlaubt, neue Themen zu verfassen.
Es ist dir nicht erlaubt, auf Beiträge zu antworten.
Es ist dir nicht erlaubt, Anhänge hochzuladen.
Es ist dir nicht erlaubt, deine Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are an
Gehe zu

Ä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

Besucher kamen über folgende Suchanfragen bei Google auf diese Seite
minesweeper php, php minesweeper, minesweeper javascript, minesweeper php code, minesweeper erstellen, minesweeper skript, spielfeld javascript, anwendungsfalldiagramm minesweeper, javascript spielbrett erstellen, minisweeper in php, minesweeper in php, minesweeper phph, javascript jquery spielfeld, javascript minesweeper erklärt, spielfeld erzeugen jquery, java minesweeper spielbrett, minesweeper-spielfeld mit java, javascript minesweeper tutorial, minesweeper 0 felder finden, kleines minesweeper

Alle Zeitangaben in WEZ +2. Es ist jetzt 09:52 Uhr.




Powered by vBulletin® Version 3.7.2 (Deutsch)
Copyright ©2000 - 2012, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.2.0
Aprilia-Forum, Aquaristik-Forum, Liebeskummer-Forum, Zierfisch-Forum, Geizkragen-Forum