Today we start making our Modern Ludo Game from scratch.
Ludo Game Java Phoneky
Android & Java Projects for ₹12500 - ₹37500. I need a ludo game with socket connection and admin panel with all the major features which ludo star have. Let me know if you have a ready made game or if you will build from scratch with time estima. Dice Game in Javascript. It is a web implementation of Ludo. I have used simple HTML, CSS and Javascript and ECMAScript for developing this game. The layout is made using a div element with google fonts.
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:
CSS:
More Ludo Game Java Videos
The important part is the JavaScript. How to actually draw the board:
- 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:
- Creating the background. Our game is Modern Ludo, so a blue sky makes for a good background: Let’s see what we’ve done so far in the web browser window:
- Deciding on the layout of the board. A typical Modern Ludo game board has 52 tiles which is normally laid out like this: In our project, all the tiles are squares so they should resize together with the board, which is why we put the following code in the function refreshBoard():
- First, let’s see how we can place a red tile of size tileWidth*tileWidth on the canvas:The above function creates a tile of a certain color and width using the method createImageData. Then we can place this tile in a certain location with the method putImageData. Let’s see how the following line works:You can see a purple tile with a white circle inside is drawn on the screen.
- Now how do we go about placing all these tiles? As shown above, now we can draw a square easily on the board, to place 52 tiles, we need to let the computer know all the coordinates and the color to be used for each and every tile. Thinking of the canvas as a grid, we can provide a map to draw stuff:As the comment shows, 1 is purple, 2 is green, 3 is red, and 4 is yellow. So with the following code, we can draw all the tiles:Let’s take a look:
- Still we need to work on some special shapes. For example, 4 tiles should have two colors and the center tile should have 4 colors:Now following the same logic, we just put different values for these tiles:And the code to draw:Now take a look at the board:
- Then there are also express ways that need to be drawn. Same logic just some math involved:And:Updated map:Now the tiles are all done: