Draw the Board | Modern Ludo

Today we start making our Modern Ludo Game from scratch.

The first thing to do is draw the board. For this part, we’ll simply use the <Canvas> in HTML5.

The MarkUp is very simple:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>ModernLudo</title>
    <link rel="stylesheet" type="text/css" href="Styles/modernludo.css" />
</head>
<body>
    <div id="playGround" style="display:none;">
        <div id="main">
            <canvas id="gameboard"></canvas>
        </div>
    </div>
    <script type="text/javascript" src="Scripts/modernludo.js"></script>
</body>
</html>

CSS:

body {
    padding: 0;
    margin: 0 auto;
    overflow-y: hidden;
    background-color: #0D0D0D;
}
div#main {
    background-color: khaki;
    margin: 0 auto;
    padding: 0;
}

#gameboard {
    position: absolute;
    margin: 0;
    padding: 0;
    box-sizing: padding-box;
}

The important part is the JavaScript. How to actually draw the board:

  1. Placing the board in the browser window. Considering that we want to build an application that runs in web browsers, we need to make sure that our board can adjust itself to fit a browser window of any size:
    function refreshBoard() {
        canvasWidth = window.innerHeight - 10;
        canvasHeight = window.innerHeight;
        maindiv.style.width = canvasWidth + "px";
        maindiv.style.height = canvasWidth + "px";
        ctx.canvas.width = canvasWidth;
        ctx.canvas.height = canvasWidth;
    }
  2. Creating the background. Our game is Modern Ludo, so a blue sky makes for a good background:  Read more