maze-generation.js

function maze_node(txt,ki,kj){
    return {
        name: txt,
        succ: [],
        vis: false,
        ki: ki,
        kj: kj,
        // unVisSucc: 0,
        unVisSucc: function(){
            let r=0;
            for(let i=0;i<this.succ.length;i++){
                if( this.succ[i].to(this).vis==false )
                    r++;
            }
            return r;
        },
        add: function(e){
            this.succ.push(e);
        },
        randT: function(){
            let unvissucc = this.unVisSucc();
            let i=Math.floor(Math.random()*(unvissucc));
            let k=0, vk=-1;
            while(k<this.succ.length && vk!=i){
                if( this.succ[k].to(this).vis==false )
                    vk++
                k++;
            }
            this.succ[k-1].broke = true;
            return this.succ[k-1];
        },
        has: function(i,j){
            let k=0;
            while(k<this.succ.length){
                let n = this.succ[k].to(this);
                if( n.ki==i && n.kj==j && this.succ[k].broke==true )
                    return true
                k++;
            }
            return false;
        },
        get: function(i,j) {
            let k=0;
            while(k<this.succ.length){
                let n = this.succ[k].to(this);
                if( n.ki==i && n.kj==j && this.succ[k].broke==true )
                    return n;
                k++;
            }
            return null;
        }
    }
}

function maze_edge(a, b){
    // undirected
    return {
        n1: a,
        n2: b,
        broke: false,
        to: function(n){
            if( n==this.n1 )
                return this.n2;
            else
                return this.n1;
        }
    }
}

let maze_gen = {
    generate: function(n, m){
        let start= maze_node("start",0,-1), end=maze_node("end",n,m-1);
        let ns = [];
        for(let i=0;i<n;i++){
            ns.push([]);
            for(let j=0;j<m;j++){
                ns[i].push( maze_node("("+i+","+j+")",i,j) );
            }
        }
        //
        let es = [];
        let ie = maze_edge(start, ns[0][0]);
        es.push(ie);
        start.add(ie);
        for(let i=0;i<n;i++){
            for(let j=0;j<m;j++){
                if(j+1<m){
                    let e = maze_edge(ns[i][j], ns[i][j+1]);
                    es.push(e);
                    ns[i][j].add(e);
                    ns[i][j+1].add(e);
                }
                if( i+1<n ){
                    let e = maze_edge(ns[i][j], ns[i+1][j]);
                    es.push(e);
                    ns[i][j].add(e);
                    ns[i+1][j].add(e);
                }
            }
        }
        let ee = maze_edge(ns[n-1][m-1], end);
        es.push(ee);
        ns[n-1][m-1].add(ee);
        //
        let unvisited = n*m+2;
        let stack = [];
        let curr = start;
        curr.vis = true; //unvisited--;
        stack.push(start);
        while(/*unvisited>0*/ stack.length>0){
            if( curr.unVisSucc()>0 ){
                let rt = curr.randT(); // random unvisited transition
                let rn = rt.to(curr);
                stack.push(curr);
                curr=rn;
                curr.vis=true;
                // console.log(curr)
                //unvisited--;
            }else if( stack.length>0 ){
                curr = stack.pop();
                // console.log("pop curr")
                // console.log(curr)
            }
        }
        // console.log("nodes:")
        // console.log(ns)
        // console.log("edges:")
        // console.log(es)
        return es;
    }
}

////////////// MAZE GAME  ///////////////


var maze_game = {
    canvas : document.getElementById('mazeGame'),
    context: null,
    edges: null,
    startx: null,
    starty: null,
    egdeLen: null,
    edgeH: null,
    draw : function(rows, lines) {
        if( this.gel!=null ){
            this.canvas.removeEventListener('keydown', this.gel);
            this.gel = null;
        }
        this.context = this.canvas.getContext("2d")
        ctx = this.context;
        ctx.fillStyle = "white";
        ctx.clearRect(0,0,this.canvas.width,this.canvas.height);
        let startx = 30, starty = 20;
        let egdeLen = 30, edgeH = 10;
        let edges = maze_gen.generate(rows,lines);
        this.edges = edges;
        this.startx = startx; this.starty = starty;
        this.egdeLen = egdeLen; this.edgeH = edgeH;
        for(let k=0;k<edges.length;k++){
            let e = edges[k];
            if( e.broke ){
                let sx,sy,wid,hei;
                sx = startx+(e.n1.kj)*egdeLen;
                sy = starty+(e.n1.ki)*egdeLen;
                if( e.n1.ki == e.n2.ki ){
                    wid = egdeLen+edgeH;
                    hei = edgeH;
                }else{
                    wid = edgeH;
                    hei = egdeLen+edgeH;
                }
                // console.log(sx, sy, wid, hei)
                ctx.fillRect(sx, sy, wid, hei);
                // console.log(ctx.fillRect(sx, sy, wid, hei))
            }
        }
    },
    gel: null,
    play: function(){
        // start
        let startx = this.startx, starty = this.starty;
        let egdeLen = this.egdeLen, edgeH = this.edgeH;
        let edges = this.edges;
        let ctx = this.context;

        let curr = edges[0].n1;
        this.curr = curr;
        // console.log(curr)
        ctx.fillStyle = "red";
        ctx.fillRect(startx+(curr.kj)*egdeLen,starty+(curr.ki)*egdeLen,edgeH,edgeH);

        this.canvas.addEventListener('keydown', this.gel = function(event){
            // Left
            if( event.keyCode == 37 ){
                // console.log( curr.has(curr.ki, curr.kj-1) )
                // console.log( curr.get(curr.ki, curr.kj-1) )
                if( curr.has(curr.ki, curr.kj-1) ){
                    let sx,sy;
                    ctx.fillStyle = "white";
                    sx = startx+(curr.kj)*egdeLen;
                    sy = starty+(curr.ki)*egdeLen;
                    ctx.fillRect(sx,sy,edgeH,edgeH);
                    ctx.fillStyle = "red";
                    curr = curr.get(curr.ki, curr.kj-1);
                    sx = startx+(curr.kj)*egdeLen;
                    sy = starty+(curr.ki)*egdeLen;
                    ctx.fillRect(sx,sy,edgeH,edgeH);
                }
            }
            // Up
            if( event.keyCode == 38 ){
                // console.log( curr.has(curr.ki-1, curr.kj) )
                // console.log( curr.get(curr.ki-1, curr.kj) )
                if( curr.has(curr.ki-1, curr.kj) ){
                    let sx,sy;
                    ctx.fillStyle = "white";
                    sx = startx+(curr.kj)*egdeLen;
                    sy = starty+(curr.ki)*egdeLen;
                    ctx.fillRect(sx,sy,edgeH,edgeH);
                    ctx.fillStyle = "red";
                    curr = curr.get(curr.ki-1, curr.kj);
                    sx = startx+(curr.kj)*egdeLen;
                    sy = starty+(curr.ki)*egdeLen;
                    ctx.fillRect(sx,sy,edgeH,edgeH);
                }
            }
            // Right
            if( event.keyCode == 39 ){
                // console.log( curr.has(curr.ki, curr.kj+1) )
                // console.log( curr.get(curr.ki, curr.kj+1) )
                if( curr.has(curr.ki, curr.kj+1) ){
                    let sx,sy;
                    ctx.fillStyle = "white";
                    sx = startx+(curr.kj)*egdeLen;
                    sy = starty+(curr.ki)*egdeLen;
                    ctx.fillRect(sx,sy,edgeH,edgeH);
                    ctx.fillStyle = "red";
                    curr = curr.get(curr.ki, curr.kj+1);
                    sx = startx+(curr.kj)*egdeLen;
                    sy = starty+(curr.ki)*egdeLen;
                    ctx.fillRect(sx,sy,edgeH,edgeH);
                }
            }
            // Down
            if( event.keyCode == 40 ){
                // console.log( curr.has(curr.ki+1, curr.kj) )
                // console.log( curr.get(curr.ki+1, curr.kj) )
                if( curr.has(curr.ki+1, curr.kj) ){
                    let sx,sy;
                    ctx.fillStyle = "white";
                    sx = startx+(curr.kj)*egdeLen;
                    sy = starty+(curr.ki)*egdeLen;
                    ctx.fillRect(sx,sy,edgeH,edgeH);
                    ctx.fillStyle = "red";
                    curr = curr.get(curr.ki+1, curr.kj);
                    sx = startx+(curr.kj)*egdeLen;
                    sy = starty+(curr.ki)*egdeLen;
                    ctx.fillRect(sx,sy,edgeH,edgeH);
                }
            }

        });
        this.canvas.focus();
        // console.log("play")
    }
}

maze_game.draw(17, 17);

document.getElementById('generate_btn').addEventListener('click', function(event) {
    let r = parseInt(document.getElementById('rows').value);
    let c = parseInt(document.getElementById('cols').value);
    if( isNaN(r) ){
        r = 17;
    }
    if( isNaN(c) ){
        c = 17;
    }
    maze_game.draw(r, c);
});

document.getElementById('play_btn').addEventListener('click', function(event) {
    maze_game.play();
});