KOMPOOS.NL

minesweeper

home » javascripts » games » minesweeper.html

sitemap


uitleg minesweeper script

Om minesweeper op jouw pagina te "zetten", moet je ergens in jouw body-sectie (maar in ieder geval boven het javascript) de div <div id="minesweeper"></div> plaatsen. Ook het javascript zet je (zo laag als mogelijk) in de body-sectie van jouw pagina.

javascript voor minesweeper


<script>
/*global alert: false */
var de_css_code = '.minesweeper{font-family:"Monaco","Lucida Console",monospace;width:1em;padding:2px 5px 2px 5px;color:#07f;background:#444;border:1px solid #707070}',
stijl_element = document.createElement("style");
stijl_element.type = "text/css";
if (stijl_element.styleSheet) {
    stijl_element.styleSheet.cssText = de_css_code;
} else {
    stijl_element.appendChild(document.createTextNode(de_css_code));
}
document.getElementsByTagName("head")[0].appendChild(stijl_element);
var minesweep,
o,
w,
k,
v,
e,
vakje,
sweep = [],
bom = "X",
veld = "&nbsp;",
l = 225,
een_element = document.getElementById("minesweeper");
function zwiep(een_element) {
    return document.getElementById(een_element);
}
function m(een_element) {
    return een_element ? een_element.innerHTML: 0;
}
function n(een_element, d) {
    if (een_element) {
        een_element.innerHTML = d;
    }
}
function u(een_element, d) {
    een_element.style.backgroundColor = d;
}
function z(vakje, d, f) {
    e = zwiep(vakje + "#" + d);
    if (m(e) == "0") {
        o = "";
        for (v = vakje - 1; v < vakje + 2; v++) {
            for (w = d - 1; w < d + 2; w++) {
                k = zwiep(v + "#" + w);
                if (m(k) == veld) {
                    u(k, "#bbb");
                    n(k, sweep[v][w]);
                    if (k) {
                        l--;
                    }
                    if (sweep[v][w] === 0) {
                        o += o.length > 0 ? ";" + v + ";" + w: v + ";" + w;
                    }
                }
            }
        }
        vakje = 0;
        for (d = o.split(";"); d.length > 1 && vakje < d.length; vakje += 2) {
            z(parseInt(d[vakje], 10), parseInt(d[vakje + 1], 10), f + 1);
        }
    }
}
function q(vakje, d) {
    e = zwiep(vakje + "#" + d);
    if (sweep[vakje][d] == bom) {
        u(e, "#f00");
        alert("kaboem!");
        for (vakje = 0; vakje < 15; vakje++) {
            for (d = 0; d < 15; d++) {
                n(zwiep(vakje + "#" + d), sweep[vakje][d]);
            }
        }
    } else {
        u(e, "#bbb");
        n(e, sweep[vakje][d]);
        l--;
        z(vakje, d, 0);
        if (l <= 0) {
            alert("perfect gedaan!");
        }
    }
}
for (var r = 0; r < 15; r++) {
    sweep[r] = [];
    for (var c = 0; c < 15; c++) {
        sweep[r][c] = 0;
    }
    minesweep = "";
}
for (r = 0; r < 15; r++) {
    for (c = 0; c < 15; c++) {
        minesweep += "<span class='minesweeper' id='" + r + "#" + c + "' onclick='q(" + r + "," + c + ")'>&nbsp;</span>";
        if (Math.random() < 0.075) {
            sweep[r][c] = bom;
            l--;
            for (v = r - 1; v < r + 2; v++) {
                for (w = c - 1; w < c + 2; w++) {
                    if (sweep[v] && sweep[v][w] != bom) {
                        sweep[v][w] += 1;
                    }
                }
            }
        }
    }
    minesweep += "<br/>";
}
n(een_element, "<pre>" + minesweep + "</pre>");
</script>
Gebruik voor alle voorbeelden op de http://kompoos.nl een valide html5 pagina.