Home ยป JavaScript ยป JavaScript - Add to 15 Game Example

JavaScript - Add to 15 Game Example

Here is an example of a JavaScript game add to 15. You will play with the computer and first to have a set of 3 adding to 15 wins.

JavaScript Game - Add to 15

<html>
    <head>
        <title>
            Add to 15
        </title>
        <meta charset="UTF-8">
        <style>
            span {
                position:absolute;
                top:180px;
                border-style: solid;
                color: red;
                border-radius: 25px;
                background-color: yellow;
                padding: 5px;
                cursor: pointer;
            }
            #status {
                color: red;
                font-size: x-large;
            }
        </style>
        <script language="Javascript">
            var statusref;
            var numbers = [];
            var game = true;
            var player = [];
            var computer = [];
            var board = [1,2,3,4,5,6,7,8,9];
            var wedge = 50;
            var startx = 15;
            var groups = [
                "  ",               
                "3 4 8",
                "1 5 9",
                "2 6 7",
                "1 6 8",
                "3 5 7",
                "2 4 9",
                "2 5 8",
                "4 5 6"
            ];
            var occupied = [  
                [2, 4],
                [3, 6, 7],
                [1, 5],
                [1, 6, 8],
                [2, 5, 7, 8],
                [3, 4, 8],
                [3, 5],
                [1, 4, 7],
                [2, 6]
            ];
            var pgroupcount = [0,0,0,0,0,0,0,0,0];
            var cgroupcount = [0,0,0,0,0,0,0,0,0];
            function init() {
                setUpBoard();
                statusref=document.getElementById("status");
            }
            function smartChoice() {
                var boardl = board.length;
                for (var i=0;i<boardl;i++) {
                    var possible = board[i];
                    for (var j=0;j<occupied[possible-1].length;j++) {
                        if (cgroupcount[occupied[possible-1][j]]==2) {
                            return (i);
                        }
                    }
                }
                for (var i=0;i<boardl;i++) {
                    var blocker = board[i];
                    for (var j=0;j<occupied[blocker-1].length;j++) {
                        if (pgroupcount[occupied[blocker-1][j]]==2) {
                            return(i);
                        }
                    }
                }
                for (var i=0;i<boardl;i++) {
                    var possible = board[i];
                    for (var j=0;j<occupied[possible-1].length;j++) {
                        var whatgroup = occupied[possible-1][j];
                        if ((cgroupcount[whatgroup]==1)&&(pgroupcount[whatgroup]==0 )){
                            return (i);
                        }
                    }
                }
                for (var i = 0;i<boardl;i++) {
                    if (board[i]==5) {
                        return (i);
                    }
                }
                for (var i = 0;i<boardl;i++) {
                    if (0==board[i]%2) {
                        return (i);
                    }
                }
                var ch = Math.floor(Math.random(0,boardl));
                return (ch);
            }
            function computerMove() {
                if (board.length<1) {
                    statusref.innerHTML="Cat wins!";
                    return;
                }
                var which = smartChoice();
                var n = board[which];
                take(n);
                numbers[n-1].style.top = "150px";
                numbers[n-1].removeEventListener("click",addToPlayer);
                computer.push(n);
                var holder = occupied[n-1];
                for (var i=0;i<holder.length;i++) {
                    cgroupcount[holder[i]]++;
                    if (cgroupcount[holder[i]]==3) {
                        statusref.innerHTML ="Computer wins "+groups[holder[i]];
                        game = false;
                        return;
                    }
                }
                if (board.length<1) {
                    statusref.innerHTML="Cat wins!";
                }
                else {
                    game = true;
                }
            }
            function setUpBoard() {
                var dv;
                var xpos;
                for (var i=1; i<10; i++) {
                    dv = document.createElement("span");
                    dv.addEventListener("click",addToPlayer);
                    dv.innerHTML = i.toString();
                    xpos = startx + i*wedge;
                    dv.style.left=xpos.toString()+"px";
                    dv.style.top ="240px";
                    document.body.appendChild(dv);
                    dv.n = i;
                    numbers.push(dv);
                }
            }
            function take(n) {
                var nAt = board.indexOf(n);
                if (nAt>-1) {
                    board.splice(nAt,1);
                }
            }
            function addToPlayer(ev) {
                if (game) {
                    var nn = ev.target.n;
                    ev.target.removeEventListener("click",addToPlayer);
                    player.push(nn);
                    numbers[nn-1].style.top = "350px";
                    take(nn);
                    var holder = occupied[nn-1];
                    for (i=0;i<holder.length;i++) {
                        pgroupcount[holder[i]]++;
                        if (pgroupcount[holder[i]]==3) {
                            statusref.innerHTML="Player wins "+groups[holder[i]];
                            game = false;
                            return ;
                        }
                    }
                    game = false;
                    setTimeout(computerMove,1000);
                }
                else {
                    statusref.innerHTML="Reload for new game.";
                }
            }
        </script>
        <body onLoad="init();">
            <h1>
                Player against Computer
            </h1>
            <br>
            Player goes first: click on number. First to have a set of 3 adding to 15 wins. Reload for new game.
            <p>
                Computer
                <br>
                <br>
                <br>
            </p>
            <hr/>
            Board
            <br>
            <br>
            <br>
            <br>
            <hr/>
            Player
            <br>
            <br>
            <br>
            <br>
            <br>
            <hr/>
            <div id="status">
            </div>
        </body>
    </html>

Output

As shown in the featured image of this article.

See also: