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 y = 0; y < spielfeld_y; y += 1) {
spielfeld[y] = new Array();
for(var x = 0; x < spielfeld_x; 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
x = Math.round(Math.random() * (spielfeld_x - 1));
y = 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,
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
}
];
//Anzahl der umliegenden Minen der aktuellen Position
var minenAround = 0;
//Jedes Feld in einer Schleife durchlaufen
$(spielfeld).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 (spielfeld[i1][i2] == -1) {
return;
}
//Die umliegenden Minen auf 0 setzten
minenAround = 0;
//Das Hilfsarray durchlaufen
$(around).each(function (k, val){
//Wenn die Position existiert...
if (array_key_exists(i1 + val.y, spielfeld)
&& array_key_exists(i2 + val.x, spielfeld[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(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) + ')');
}
function checkClicked(i1, i2) {
//Wurde auf das Spielfeld schoneinmal geklickt
return getTdObject(i1, i2).data('clicked') === true;
}
function popupBlank(i1, i2) {
//Das Hilfsarray durchlaufen
$(around).each(function (key, val){
//Wenn die entsprechende Position existiert ...
if (array_key_exists(i1 + val.y, spielfeld)
&& array_key_exists(i2 + val.x, spielfeld[i1 + val.y])
//... und noch nicht darauf geklickt wurde
//(Klick abfrage ist wichtig, sonst gibt es eine Endlosschleife) ...
&& !checkClicked(i1 + val.y, i2 + val.x)) {
//... einen Klick darauf ausführen
getTdObject(i1 + val.y, i2 + val.x).click();
}
});
}
function renderSpielfeld() {
//Spielfeld erstellen
var playground = '<table class="spielfeld">';
for(y = 0; y < spielfeld_y; y += 1) {
playground = playground + '<tr>';
for(x = 0; x < spielfeld_x; x += 1) {
playground = playground + '<td></td>';
}
playground = playground + '</tr>';
}
playground = playground + '</table>';
$('#playground').html(playground);
}
function createSpielfeld() {
//tdObjekt initalisieren
var tdObject = null;
for(y = 0; y < spielfeld_y; y += 1) {
for(x = 0; x < spielfeld_x; x += 1) {
//Objekt holen
tdObject = 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', 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'));
});
}
}
}
}
Einen Kommentar schreiben: