JavaScript Snakes and Ladders Multiplayer Game Source Code

In this tutorial, I will teach you how to make a simple Snakes and Ladders Board Game using JavaScript. The complete source code of the JavaScript Snakes and Ladders game is given below.

I’ve also provided links for Download and Live Demo at the end of this tutorial.

Let’s get started by having a look at the folder structure of our Snakes and Ladders game.

Folder Structure

css
- style.css
images
- Note:- All the image files will go here. You can download the complete project including all the asset files at the end of this article.
js
- gamePlay.js
- jquery.js
- saapSeedi.js
index.html

JavaScript Snakes and Ladders Game Code

index.html

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Saap Seedi - Online Snake and Ladder Game</title>
 <link href="css/style.css" rel="stylesheet">
</head>
<body>
 <div id="controls">
 <table id="diceControl"><tr>
 <td><img src="images/face4.png" id="dice"></td>
 <td><p id="diceName"></p></td>
 </tr></table>
 <input type="text" placeholder="Enter player's name" id="playerName"> <button id="addPlayer">Add Player</button>
 </div>
 <script type="text/javascript" src="js/jquery.js"></script>
 <script type="text/javascript" src="js/saapSeedi.js"></script>
 <script type="text/javascript" src="js/gamePlay.js"></script>
 
 <a href="https://github.com/vishalchawla" target="_blank"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
 <div style="position: absolute; bottom: 10px; right: 10px;">
  <a class="twitter-follow-button" href="https://twitter.com/iamvishalchawla" data-show-count="false" data-show-screen-name="false" data-size="large" data-lang="en">Follow</a>
  <script>window.twttr=(function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return;js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);t._e=[];t.ready=function(f){t._e.push(f);};return t;}(document,"script","twitter-wjs"));</script>
 </div>
</body>
</html>

css/style.css

canvas {
 border: 5px solid #ffffff;
 position: absolute;
 left: 0px;
 top: 0px;
}

#diceName {
 font-size:50px;
 font-weight: bold;
}

#diceControl {
 cursor: pointer;
}

js/gamePlay.js

saapSeedi.init();
var processing = false;

function updateDiceName() {
    var playerName = "", playerColor = "#000000";
    if (saapSeedi.players.length) {
        playerName = saapSeedi.players[saapSeedi.state.turn].name;
        playerColor = saapSeedi.players[saapSeedi.state.turn].color;
    }
    $("#diceName").attr({
        "style": "color: " + playerColor
    }).hide().html(playerName).fadeIn(2000);
}

function movePlayer() {
    processing = true;
    
    if (!saapSeedi.players.length) {
        processing = false;
        return false;
    }
    
    var player = saapSeedi.players[saapSeedi.state.turn];
    
    var random = Math.floor((Math.random() * 6) + 1);

    //Roll dice
    saapSeedi.rollDice();

    //Show dice after 1 to 3 seconds
    setTimeout(function() {
        saapSeedi.showDice(random);

        //Fire move request after 1 second so that player can shift eyes from dice to board
        setTimeout(function() {
            player.position == 1 ? player.move(player.position + random - 1, undefined, random == 6, updateDiceName) : player.move(player.position + random, undefined, random == 6, updateDiceName);
            if (random == 6) {
                //Show message after the piece reaches destination
                setTimeout(function() {
                    alert("You get another bonus chance.");
                }, saapSeedi.config.moveSpeed * 6 + 100);
            }
            
            processing = false;
        }, 1000);
    }, Math.floor((Math.random() * 3000) + 1000));
}

$("#addPlayer").on("click", function(e) {
    var playerName = $("#playerName").val();
    var player = saapSeedi.addPlayer(playerName);
    
    if (player) {
        alert("Player '" + playerName + "' successfully added.");
        $("#playerName").val("");
    }
    
    if (saapSeedi.config.maxPlayers == saapSeedi.state.playerCount) {
        $("#playerName").hide();
        $("#addPlayer").hide();
    }
    
    updateDiceName();
});

$("#diceControl").on("click", function(e) {
    if (processing) {
        return false;
    }
    movePlayer();
});

if (window.innerHeight > window.innerWidth) {
    $("#controls").css({top: window.innerWidth + 20,position: 'absolute'});
} else {
    $("#controls").css({left: window.innerHeight + 20,position: 'absolute'});
}

js/jquery.js

This file is a bit huge to add to this article. So, download this file from here.

js/saapSeedi.js

/*********************************************************************************

Looks like you have good hands in Javascript, We are hiring Javascript Hackers at 
AdPushup (New Delhi, India Office). Check out http://careers.adpushup.com

*********************************************************************************/
(function(w, d) {
    function board(width, height) {
        this.boardBg = null;
        this.boardFg = null;
        this.width = width;
        this.height = height;
        this.config = {
            maxPlayers: 4,
            moveSpeed: 150,
            runSpeed: 15,
            colors: ["red", "blue", "green", "black"],
            snakeLadderLayer: "images/snake_ladder_layer.gif",
            snakes: [{s: 36,e: 2}, {s: 46,e: 29}, {s: 79,e: 42}, {s: 93,e: 53}],
            ladders: [{s: 8,e: 49}, {s: 22,e: 57}, {s: 54,e: 85}, {s: 61,e: 98}]
        };
        this.state = {
            playerCount: 0,
            turn: 0
        };
        this.blocks = [];
        this.players = [];
    }
    
    var player = function(board, id, name, color) {
        this.board = board;
        this.id = id;
        this.name = name;
        this.color = color;
        this.position = 1;
    }
    
    var b = board.prototype;
    var p = player.prototype;
    
    p.placeGoti = function(position) {
        var playerId = this.id;
        var board = this.board;
        var blockX = board.blocks[position].x;
        var blockY = board.blocks[position].y;
        var blockW = board.width / 10;
        var blockH = board.height / 10;
        var gotiR = board.height / 60;
        var gotiX = blockX + (blockW / 10) + gotiR + (playerId * gotiR);
        var gotiY = blockY + (0.9 * blockH) - gotiR;
        var boardFg = board.boardFg;
        boardFg.beginPath();
        boardFg.arc(gotiX, gotiY, gotiR, 0, 2 * Math.PI, false);
        boardFg.fillStyle = this.color;
        boardFg.fill();
        boardFg.lineWidth = gotiR / 3;
        boardFg.strokeStyle = '#ffffff';
        boardFg.stroke();
    }
    
    p.removeGoti = function() {
        var board = this.board;
        var players = board.players;
        var playerId = this.id;
        var position = this.position;
        
        var blockX = board.blocks[position].x;
        var blockY = board.blocks[position].y;
        var blockW = board.width / 10;
        var blockH = board.height / 10;
        var boardFg = board.boardFg;
        boardFg.clearRect(blockX, blockY, blockW, blockH);
        
        var player_id;
        for (player_id in players) {
            if (players[player_id]['position'] == position && player_id != playerId) {
                players[player_id].placeGoti(position);
            }
        }
    }
    
    p.move = function(position, speed, isSpecial, callback) {
        var player = this;
        var board = player.board;
        var players = board.players;
        
        if (typeof isSpecial == "undefined" && player.id !== board.state.turn) {
            board.log("It's " + players[board.state.turn].name + "'s turn.");
            return false;
        }
        
        if (position < 1) {
            board.log("Invalid move.");
            return false;
        }
        
        if (position > 100) {
            if (!isSpecial) {
                board.nextPlayer();
            }
            
            if (typeof callback == 'function') {
                callback.call(w);
            }
            
            return true;
        }
        
        if (player.position < position) {
            player.removeGoti();
            player.position++;
            player.placeGoti(player.position);
        } else if (player.position > position) {
            player.removeGoti();
            player.position--;
            player.placeGoti(player.position);
        } else {
            player.removeGoti();
            player.placeGoti(player.position);
        }
        
        speed = typeof speed !== 'undefined' ? speed : board.config.moveSpeed;
        
        if (player.position != position) {
            window.setTimeout(function() {
                player.move(position, speed, isSpecial, callback);
            }, speed);
        } else {
            //Check snake or ladder
            var check = board.isClear(player.position);
            if (check) {
                setTimeout(function() {
                    player.move(check, board.config.runSpeed, isSpecial, callback);
                }, 1000);
            } else {
                //Check kill
                if (player.position != 1) {
                    var players_id;
                    for (players_id in players) {
                        if (players[players_id]['position'] == player.position && players_id != player.id) {
                            board.log(player.name + " killed " + players[players_id]['name'] + ".");
                            setTimeout(function() {
                                players[players_id].move(1, board.config.runSpeed, true, callback);
                            }, 1000);
                            break;
                        }
                    }
                }
                
                if (!isSpecial) {
                    board.nextPlayer();
                }
                //Check win
                if (player.position == 100) {
                    board.log("Congrats " + player.name + ", You just won the game.");
                    players.splice(player.id, 1);
                    board.state.playerCount--;
                    isSpecial = false;
                }
                
                if (typeof callback == 'function') {
                    callback.call(w);
                }
                
                return true;
            }
        }
    }
    
    b.init = function() {
        if (window.innerHeight > window.innerWidth) {
            this.width = this.height = window.innerWidth - 10;
        }
        this.createBoard();
        
        var img = new Image('images/face0.gif');
        img = new Image('images/face1.png');
        img = new Image('images/face2.png');
        img = new Image('images/face3.png');
        img = new Image('images/face4.png');
        img = new Image('images/face5.png');
        img = new Image('images/face6.png');
    }
    
    b.createBoard = function() {
        var canvas = document.createElement('canvas');
        canvas.height = this.height;
        canvas.width = this.width;
        canvas.style.zIndex = 1;
        document.body.appendChild(canvas);
        var boardBg = this.boardBg = canvas.getContext('2d');
        
        canvas = document.createElement('canvas');
        canvas.height = this.height;
        canvas.width = this.width;
        canvas.style.zIndex = 2;
        document.body.appendChild(canvas);
        var boardFg = this.boardFg = canvas.getContext('2d');
        
        canvas = document.createElement('canvas');
        canvas.height = this.height;
        canvas.width = this.width;
        canvas.style.zIndex = 3;
        var snakeLadderLayer = new Image();
        snakeLadderLayer.src = this.config.snakeLadderLayer;
        snakeLadderLayer.onload = function() {
            canvas.getContext('2d').drawImage(snakeLadderLayer, 0, 0, canvas.width, canvas.height);
            document.body.appendChild(canvas);
        }
        
        var a = 100, b = 91, w = this.width / 10, h = this.height / 10, y = -h, x, color, i;
        boardBg.font = w / 4 + 'px Georgia';
        while (a > 0) {
            x = 0;
            y += h;
            for (i = a; i >= b; i--) {
                color = '#' + (Math.random() * 0xFFFFFF << 0).toString(16);
                boardBg.fillStyle = color
                boardBg.fillRect(x, y, w, h);
                boardBg.fillStyle = '#ffffff';
                boardBg.fillText(i, x + (w / 10), y + (h / 5));
                this.blocks[i] = {
                    x: x,
                    y: y,
                    color: color
                };
                x += w;
            }
            x = 0;
            y += h;
            for (i = b - 10; i <= a - 10; i++) {
                color = '#' + (Math.random() * 0xFFFFFF << 0).toString(16);
                boardBg.fillStyle = color
                boardBg.fillRect(x, y, w, h);
                boardBg.fillStyle = '#ffffff';
                boardBg.fillText(i, x + (w / 10), y + (h / 5));
                this.blocks[i] = {
                    x: x,
                    y: y,
                    color: color
                };
                x += w;
            }
            a = a - 20;
            b = b - 20;
        }
    }
    
    b.addPlayer = function(name) {
        if (!name) {
            this.log('Please specify name of the player.');
            return false;
        }
        
        var players = this.players, player_id;
        for (player_id in players) {
            if (players[player_id]['name'] == name) {
                this.log(name + " is already playing, Can't you specify some other name  :/");
                return false;
            }
        }
        
        var id = players.length;
        if (id >= this.config.maxPlayers) {
            this.log("Maximum players limit reached, Can't add more players");
            return false;
        }
        
        var player = new this.player(this, id, name, this.config.colors[id]);
        player.placeGoti(1);
        players.push(player);
        this.state.playerCount++;
        return player;
    }
    
    b.nextPlayer = function() {
        if (this.state.turn + 1 == this.state.playerCount) {
            this.state.turn = 0;
        } else {
            this.state.turn++;
        }
    }
    
    b.isClear = function(position) {
        var snakes = this.config.snakes;
        for (var key in snakes) {
            if (snakes[key].s == position) {
                return snakes[key].e;
            }
        }
        
        var ladders = this.config.ladders;
        for (var key in ladders) {
            if (ladders[key].s == position) {
                return ladders[key].e;
            }
        
        }
        return false;
    }
    
    b.rollDice = function() {
        var dice = document.getElementById('dice');
        dice.src = 'images/face0.gif';
    }
    
    b.showDice = function(value) {
        value = parseInt(value);
        if (isNaN(value) || value < 1 || value > 6) {
            this.log("Invalid value.");
            return false;
        }
        var dice = document.getElementById('dice');
        dice.src = 'images/face' + value + '.png';
    }
    
    b.log = function(message) {
        alert(message);
    //console.log(message);
    }
    
    b.player = player;
    w.saapSeedi = new board(w.innerHeight - 10, w.innerHeight - 10);
})(window, document);

How to Play?

First of all, add players. You can play in single-player or multiplayer modes. Just add the names of players who want to play.
Now, click the dice to roll it.

JavaScript Snakes and Ladders Game Screenshot

Download JavaScript Snakes and Ladders Game

Download Live Demo

Furqan

Well. I've been working for the past three years as a web designer and developer. I have successfully created websites for small to medium sized companies as part of my freelance career. During that time I've also completed my bachelor's in Information Technology.