Minesweeper

[keul3]

Hi,

ich habe jetzt endlich mein erstes JS geschrieben. Da ich mich erstmal mit der Sprache vertraut machen wollte, ist etwas kleineres geworden, eine Adaption von meiner FlashVersion

Es ist soweit spielbar, aber Luxusfunktionen wie Schwierigkeitsgrad oder ein HUD fehlen. Auch ist das ganze nicht wirklich fancy

zum Spiel

Da das für mich alles noch neu ist, hätte ich eine Bitte und zwar: könntet ihr bitte den Code einmal überfliegen und mir grundlegende Fehler (Peformancefresser) aufzeigen?

Auf anonyme Funktionen habe ich komplett verzichtet. Ich habe jede Variable innerhalb von Funktionen und Schleifen declariert, was afaik nicht unbedingt nötig ist, aber da ich mit einer rekursiven Funktion inkl. nicht deklarierter Variabel ziemlich aufs Maul geflogen bin, bin ich danach auf Nummer sicher gegangen
das JS hab ich erstmal als ganzes gelassen, würde es aber normalerweise aufteilen, so das z.B. alle drawFunktionen ausgelagert werden.

Danke schonmal für eure Hilfe

// JavaScript Document
//Minesweeper

var xCount = 30;
var yCount = 15;
var cellSize = 30;
var mineRatio = .2;
var canvasRect;
var canvas;
var cells;
var oldCell;
var markerKeyDown;
var gameOver;
var cellsToClear;

function init()
{
    createCanvas();
    window.addEventListener("keydown", keyDownHandler);
    window.addEventListener("keyup", keyUpHandler);
    window.addEventListener("resize", resizeHandler);
    createField()
}


function createField()
{
    markerKeyDown = false;
    gameOver = false;

    cells = createCells(xCount, yCount); //[x][y]

    if (mineRatio > 1) mineRatio = 1;
    if (mineRatio < 0) mineRatio = 0;
    var cellCount = xCount * yCount;
    var mineCount = Math.ceil(cellCount * mineRatio);
    cellsToClear = cellCount - mineCount;
    var mines = getMines(cellCount, mineCount);
    assignMinesToCells(mines, cells);
    countSurroundingMines(cells);

    for (var i = 0; i < cells.length; i++)
    {
        for (var j = 0; j < cells[i].length; j++) drawCover(cells[i][j]);
    }
}

function createCells(xC, yC)
{
    var cells = new Array();

    for (var i = 0; i < xCount; i++)
    {
        var temp = new Array();

        for (j = 0; j < yCount; j++)
        {
            var cell = new Object();
            cell.idX = i;
            cell.idY = j;
            cell.x = i * cellSize;
            cell.y = j * cellSize;
            cell.revealed = false;
            cell.revealedSurroundings = false;
            cell.marked = false;
    
            temp.push(cell);
        }
        cells.push(temp);
    }

    return cells;
}


function getMines(cellCount, mineCount)
{
    var numbers = new Array();
    var mines = new Array();
    for (var i = 0; i < cellCount; i++)
    {
        numbers.push(i);
        mines.push(false);
    }
    
    for (var j = 0; j < mineCount; j++)
    {
        var rn = Math.floor( Math.random() * numbers.length ); //randomNumber
        mines[ numbers[rn] ] = true;
        numbers.splice(rn, 1);
    }
    
    return mines;
}

function assignMinesToCells(m, c)
{
    var a = 0;
    
    for (var i = 0; i < c.length; i++)
    {
        for (var j = 0; j < c[i].length; j++)
        {
            c[i][j].mine = m[a];
            a++;
        }
    }
}

function countSurroundingMines(c)
{
    for (var i = 0; i < c.length; i++)
    {
        for (var j = 0; j < c[i].length; j++)
        {
            var a = 0;
            var sCells =     [
                                [i - 1, j - 1], //top-left
                                [i    , j - 1], //top
                                [i + 1, j - 1], //top-right
                                [i - 1, j    ], //left
                                [i + 1, j    ], //right
                                [i - 1, j + 1], //bottom-left
                                [i    , j + 1], //bottom
                                [i + 1, j + 1]  //bottom-right
                            ];
            
            for (var k = 0; k < sCells.length; k++)
            {
                if ( hasMine(sCells[k][0], sCells[k][1], c) ) a++;
            }
            c[i][j].minesAround = a;
        }
    }
}

function hasMine(x, y, c)
{
    var b = false;
    
    if (x >= 0 && x < xCount && y >= 0 && y < yCount) b = c[x][y].mine;
    
    return b;
}


function createCanvas()
{
    var w = xCount * cellSize;
    var h = yCount * cellSize;

    canvas = document.createElement("CANVAS");

    var attWidth = document.createAttribute("width");
    attWidth.value = w.toString();
    canvas.setAttributeNode(attWidth);

    var attHeight = document.createAttribute("height");
    attHeight.value = h.toString();
    canvas.setAttributeNode(attHeight);
    document.body.appendChild(canvas);

    canvas.addEventListener("click", clickHandler);
    canvas.addEventListener("mousemove", mouseMoveHandler);

    elementToCenterOfWindow(canvas);
    canvasRect = canvas.getBoundingClientRect();
}

function elementToCenterOfWindow(element)
{
    element.style.position = "absolute"
    element.style.left = (window.innerWidth - element.width)/2 + "px";
    element.style.top = (window.innerHeight - element.height)/2 + "px";
}


function drawCover(cell)
{
    var lineWidth = 2;

    var ctx = canvas.getContext("2d");
    ctx.beginPath();
    ctx.rect(cell.x + lineWidth/2, cell.y + lineWidth/2, cellSize - lineWidth, cellSize - lineWidth);
    ctx.fillStyle = "#009900";
    ctx.fill();
    ctx.lineWidth = lineWidth;
    ctx.strokeStyle = "#006600";
    ctx.stroke();
    ctx.closePath();
}

function drawCoverHighlight(cell)
{
    var lineWidth = 2;

    var ctx = canvas.getContext("2d");
    ctx.beginPath();
    ctx.rect(cell.x + lineWidth/2, cell.y + lineWidth/2, cellSize - lineWidth, cellSize - lineWidth);
    ctx.fillStyle = "#00bb00";
    ctx.fill();
    ctx.lineWidth = lineWidth;
    ctx.strokeStyle = "#009900";
    ctx.stroke();
    ctx.closePath();
}


function drawCell(cell)
{
    var lineWidth = 2;

    var ctx = canvas.getContext("2d");
    ctx.beginPath();
    ctx.rect(cell.x + lineWidth/2, cell.y + lineWidth/2, cellSize - lineWidth, cellSize - lineWidth);
    ctx.fillStyle = "#ffff00";
    ctx.fill();
    ctx.lineWidth = lineWidth;
    ctx.strokeStyle = "#aaaa00";
    ctx.stroke();
    ctx.closePath();

    if (cell.mine)
    {
        var xCenter = cell.x + cellSize/2;
        var yCenter = cell.y + cellSize/2;
        var radius = cellSize/2 * .6;
        ctx.beginPath();
        ctx.arc(xCenter, yCenter, radius, 0, 2 * Math.PI, false);
        ctx.fillStyle = "#000000";
        ctx.fill();
        ctx.closePath();
    }
    else if (cell.minesAround)
    {
        var fontSize = cellSize * .4;
        var text = cell.minesAround.toString();
        ctx.font = fontSize.toString() + "pt Calibri";
        ctx.textAlign = "center";
        ctx.fillStyle = "#000000";
          textWidth = ctx.measureText(text).width;
        var d = (cellSize - fontSize)/2;
        var x = cell.x + cellSize/2;
        var y = cell.y + cellSize - d;
          ctx.fillText(text, x, y);
    }
}


function drawMarker(cell)
{
    var ctx = canvas.getContext("2d");
    var xCenter = cell.x + cellSize/2;
    var yCenter = cell.y + cellSize/2;
    var radius = cellSize/2 * .8;
    ctx.beginPath();
    ctx.arc(xCenter, yCenter, radius, 0, 2 * Math.PI, false);
    ctx.fillStyle = "#ff0000";
    ctx.fill();
    ctx.closePath();
}


function clickHandler(event)
{
    if (!gameOver)
    {
        var cell = getCellByMouse(event);
        if (!cell.revealed)
        {
            if (markerKeyDown) markCell(cell)
            else revealCell(cell);
        }
    }
    else restart();
}

function markCell(cell)
{
    if (cell.marked)
    {
        drawCover(cell);
        cell.marked = false;
    }
    else
    {
        drawCover(cell);
        drawMarker(cell);
        cell.marked = true;
    }
}

function getCellByMouse(e)
{
    var x = e.clientX - canvasRect.left;
    var y = e.clientY - canvasRect.top;

    x = Math.floor(x / cellSize);
    y = Math.floor(y / cellSize);

    var cell = cells[x][y];

    return cell;
}

function revealCell(cell)
{
    if (!cell.marked)
    {
        cell.revealed = true;
        drawCell(cell);
        cellsToClear --;
        if (!cellsToClear) won();
        if (!cell.minesAround) revealZeroSurroundings( cell );
        if (cell.mine) boom();
    }

}

function revealZeroSurroundings(c)
{
    var sCells =     [
                            [c.idX - 1, c.idY - 1], //top-left
                            [c.idX    , c.idY - 1], //top
                            [c.idX + 1, c.idY - 1], //top-right
                            [c.idX - 1, c.idY    ], //left
                            [c.idX + 1, c.idY    ], //right
                            [c.idX - 1, c.idY + 1], //bottom-left
                            [c.idX    , c.idY + 1], //bottom
                            [c.idX + 1, c.idY + 1]  //bottom-right
                        ];


    for (var i = 0; i < sCells.length; i++)
    {
        var x = sCells[i][0];
        var y = sCells[i][1];
        
        if (x >= 0 && x < xCount && y >= 0 && y < yCount)
        {
            if (!cells[x][y].revealed) revealCell(cells[x][y])
            
            if (!cells[x][y].minesAround && !cells[x][y].revealedSurroundings)
            {
                cells[x][y].revealedSurroundings = true;//um einen Stapelüberlauf zu verhindern
                revealZeroSurroundings( cells[x][y] )
            }
        }
    }
}

function mouseMoveHandler(event)
{
    if (!gameOver)
    {
        var cell = getCellByMouse(event);
        if (cell)
        {
            if (!cell.revealed)
            {
                if (cell != oldCell)
                {
                    if (oldCell)//am Anfang ist oldCell null
                    {
                        if (!oldCell.revealed && !oldCell.marked) drawCover(oldCell);
                    }
                    if (!cell.marked) drawCoverHighlight(cell);
                    oldCell = cell;
                }
            }
        }
    }
}

function boom()
{
    gameOver = true;
    drawBanner("BOOOOOOOM");
}

function won()
{
    gameOver = true;
    drawBanner("TOTAL CLEARANCE");
}


function drawBanner(txt)
{
    var ctx = canvas.getContext("2d");

    var bannerWidth = .9;
    var bannerHeight = .6;
    var w = canvas.width * bannerWidth;
    var h = canvas.height * bannerHeight;

    ctx.beginPath();
    ctx.rect( (canvas.width - w)/2, (canvas.height - h)/2, w, h );
    ctx.fillStyle = "#ffffff";
    ctx.fill();
    ctx.lineWidth = 2;
    ctx.strokeStyle = "#550000";
    ctx.stroke();
    ctx.closePath();

    var fontSize = h * .2;

    var text = txt;
    ctx.font = fontSize.toString() + "pt Calibri";
    ctx.textAlign = "center";
    var textWidth = ctx.measureText(text).width;
    if (textWidth > w) //textwidth reduzieren auf bannerwidth
    {
        var ratio = w/textWidth;
        fontSize *= ratio;
        ctx.font = fontSize.toString() + "pt Calibri";
    }
    var textHeight = fontSize;
    ctx.fillStyle = "#550000";
    var d = (cellSize - fontSize)/2;
    var x = canvas.width/2;
    var y = canvas.height/2 + fontSize/2;
    ctx.fillText(text, x, y);

    fontSize *= .5;
    text = "click on canvas to restart";
    ctx.font = fontSize.toString() + "pt Calibri";
    ctx.textAlign = "center";
    ctx.fillStyle = "#550000";
    x = canvas.width/2;
    y = canvas.height/2 + fontSize/2 + textHeight;
    ctx.fillText(text, x, y);
}

function restart()
{
    canvas.getContext("2d").clearRect(0, 0, canvas.width, canvas.height);
    createField();
}

function keyDownHandler(event) { if (event.ctrlKey) markerKeyDown = true; }
function keyUpHandler(event) { if (!event.ctrlKey && markerKeyDown) markerKeyDown = false; }
function resizeHandler(event) { elementToCenterOfWindow(canvas); canvasRect = canvas.getBoundingClientRect();}

 

[cebito]

Ich habe jede Variable innerhalb von Funktionen und Schleifen declariert

Haste nicht (Zeile 4-14)

...aber da ich mit einer rekursiven Funktion inkl. nicht deklarierter Variabel ziemlich aufs Maul geflogen bin, bin ich danach auf Nummer sicher gegangen

Was hattest denn da gemacht?

ctx in jeder Function wieder neu zu setzen find ich übertrieben, das gehört in createCanvas. Um die dann öffentlich zu machen, lässt das "var" vor dem Variablennamen weg oder declarierst sie schon oben und weist ihr nur noch den Wert zu.

Kannst ja noch mal bei mir reinschauen, wie ich das anno dazumal gemacht hab...

btw. würd ich die Bomben erst nach dem ersten Klick platzieren, ein "Boooooom" schon beim ersten Anlauf sollte nicht sein

 

[virra]

Och. Menno. Hättest da nicht was Schönes produzieren können? Dieses Spiel ist soooo doof …

 

[keul3]

Haste nicht (Zeile 4-14)

k, ich hätte schrieben sollen, ich hab JEDE Variable auch als solche deklariert

Was hattest denn da gemacht?

bei der revealZeroSurroundings()-Funktion hatte ich die Schleifenvariable nicht deklariert und so wurde bei einer Rekursion nicht der Ausgangszustand i = 0 hergestellt, sondern einfach weitergezählt. Wobei ich gar nicht weiß wieso das ging, weil dann ja die Bedingung false ist ...

ctx in jeder Function wieder neu zu setzen find ich übertrieben

ist nicht in jeder Funktion, nur in denen gezeichnet wird
aber trotzdem ein berechtigter Einwand

Um die dann öffentlich zu machen, lässt das "var" vor dem Variablennamen weg oder declarierst sie schon oben und weist ihr nur noch den Wert zu.

ach so wie ich das in Zeile 4-14 gemacht hab ...

btw. würd ich die Bomben erst nach dem ersten Klick platzieren, ein "Boooooom" schon beim ersten Anlauf sollte nicht sein

Aber das ist doch unrealistisch, wo belibt denn da der Thrill?
Aber ein guter Tipp, weiß gar nicht wie das bei der MS-Version ist...

Och. Menno. Hättest da nicht was Schönes produzieren können? Dieses Spiel ist soooo doof …

warum denn?

 

[virra]

Weil es nicht mit Nachdenken zu knacken ist und ich nach ein paar Klicks regelmäßig explodiere. Ist in meinen Augen hat eher so ein Zufallsding.

 

[cebito]

Weil es nicht mit Nachdenken zu knacken ist

Doch, ist es!

und ich nach ein paar Klicks regelmäßig explodiere.

Ist in meinen Augen hat eher so ein Zufallsding.

Naja, ein Zufallsding ist eher, dass du bis heut überlebt hast

 

[virra]

Menno! Dann verrate mir doch mal, wie man nicht nach ca. 3-5 Klicks explodiert. Also die Spielregeln hab ich auch gelesen, aber mir erschließt sich das nicht. Oft explodiere ich schon nach dem 2. oder 3. Klick, wahrscheinlich bin ich ein verkapptes Mienenräumgerät …

 

[Hannu]

Zitat von virra:

Weil es nicht mit Nachdenken zu knacken ist
Klicke in dieses Feld, um es in vollständiger Größe anzuzeigen.​

Doch, ist es!

Nein, ist es nicht (wie auch im Original nicht)! Jedenfalls nicht immer.
Guck:

 

[keul3]

Habs jetzt so umgeschrieben, dass beim Start garantiert keine Mine erwischt wird, ist bei der MS-Version tatsächlich auch so. Und noch so ein wenig am Code rumgedoktort, was aber keine weiteren Auswirkungen aufs Spiel selbst hat



Code poste ich jetzt nicht, den kann sich ja jeder in Ruhe im Browser anschauen wenn er möchte

 

[cebito]

Nein, ist es nicht (wie auch im Original nicht)! Jedenfalls nicht immer.

Kommt aber eher selten vor, dann muss man halt mal den einen Zufallsklick wagen um weiterzukommen, die Chancen stehn auf jeden Fall besser als 50/50

Code poste ich jetzt nicht, den kann sich ja jeder in Ruhe im Browser anschauen wenn er möchte

Am WE, falls ich Zeit hab btw. wäre ein klein wenig Dokumentation in Form von Kommentaren hilfreich, so muss man sich nicht alles selbst zusammenreimen

 

[keul3]

btw. wäre ein klein wenig Dokumentation in Form von Kommentaren hilfreich, so muss man sich nicht alles selbst zusammenreimen

ich geb zu, da bin ich etwas faul ich schreib eigentlich nur für mich was hin, wenn ich der Meinung bin, dass ich bei einer späteren Sichtung meinerseits, Probleme haben könnte zu verstehen, warum ich dieses oder jenes so gemacht hab.
Ich denke die Funktionsnamen sind schon recht aussagekräftig. Das blöde, zumindest für mich, dass ich, dank fehlender Typisierung, nicht auf dem ersten sehen kann, ob und was mir diese Funktion rausschmeißt.