Placing the Airports and Planes | Modern Ludo

Compared with the regular tiles or ‘stations’ we talked about, the airport is not a regular shape. So a lot of math is involved in the creation of the airport. First of all, we want the airport to appear as a rounded rectangle. So we add a method to the canvas object. Reference: http://stackoverflow.com/questions/1255512/how-to-draw-a-rounded-rectangle-on-html-canvas.

CanvasRenderingContext2D.prototype.roundRect = function (x, y, w, h, r) {
    if (w < 2 * r) r = w / 2;
    if (h < 2 * r) r = h / 2;
    this.beginPath();
    this.moveTo(x + r, y);
    this.arcTo(x + w, y, x + w, y + h, r);
    this.arcTo(x + w, y + h, x, y + h, r);
    this.arcTo(x, y + h, x, y, r);
    this.arcTo(x, y, x + w, y, r);
    this.closePath();
    return this;
}

Then we draw our first airport stroke by stroke. It’s quite some work but that’s the beauty of the Canvas element! You can draw on it just like a real canvas and it’s done in a millisecond. Read more

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