Untitled

<html>

<head><title>Memory Minesweeper</title></head>
<style>
  table{
    width: 100%;
    height: 100%; }
  .square{
    width: 100%;
    height: 100%;
    background-color: lightgray; }
  .square.mine{
    background-color: black; }
  .playing .square{
    background-color: black; }
  .playing .square.mine{
    background-color: black; }
  .playing .square.show{
    background-color: lightgray; }
  .playing .square.show.mine{
    background-color: red; }
  .playing.victory .square.mine{
    background-color: red; }
  body{
    margin: 0px; }
</style>


<body>
  <div id="main"></div>
</body>

<script>

// sequence is always one of three possibilities.
var SEED = Math.floor(3 * Math.random());
console.log("Random seed: "+ SEED);

function rng(seed){ //blum blum shub, I think. doesnt matter, it works.
    var p = 6473197,
        q = 9999991,
        x = seed? seed : 0;
        x += 26483638;
        m = p * q;

    function next(n){
        if(x<2){
            x=2;
            console.warn("rng state less than 2");}
        x = Math.floor((x*x)%m);
        return n? x%n : x; }
    next(); next(); next();
    next(); next(); next();
    next(); next(); next();
    return next;
}

var rand = (function(){
    var r = rng(SEED),
        max = 1000*1000;
    return function(){
        return r(max)/max; }
})();

function X(parnt, tag, props){
    if(!tag) tag = 'div';
    var elem = document.createElement(tag);
    if(parnt) parnt.appendChild(elem);
    if(props)
        for(var k in props){
             elem[k] = props[k]; }
    return elem;
}


function newboard(arr, n, p){
    if(!p) p = 0.5;
    for(var i=0; i<n; ++i){
        for(var j=0; j<n; ++j){
            arr[i + n*j] = (rand() < p)? 1 : 0; }}
    return arr;
}

function board(div, n, arr){
    console.log("board: " + n);
    div.innerHTML = "";
    var t = X(div, 'table');
    var resetdelay = 1000;
    var startdelay = 2000;
    var clicked = 0;
    var mines = 0;
    var finished = true;
    function start(){
        finished = false;
        t.className += " playing"; }
    setTimeout(start, startdelay);
    function click(){
        if(finished) return;
        if(this.className.indexOf('show') != -1){
            return; }
        this.className += " show";
        ++clicked;
        if(this.className.indexOf('mine') != -1){
            finished = true;
            setTimeout(board, resetdelay, div, n, arr); }
        else if(clicked + mines == n*n){
            finished = true;
            t.className += " victory";
            setTimeout(board, resetdelay, div, n+1, newboard(arr, n+1)); }}
    for(var i=0; i<n; ++i){
       var tr = X(t, 'tr');
       for(var j=0; j<n; ++j){
            var val = arr[i + j*n];
            if(val) ++mines;
            var td = X(tr, 'td');
            var props = {
                className: 'square' + (val? ' mine' : ''),
                onclick: click};
            X(td, 'div', props); }}
}


function init(){
    console.log("init");
    var n = 3;
    var array = newboard([], n);
    var main = document.getElementById("main");
    board(main, n, array);
}
window.addEventListener("load", init);

</script>
</html>