Mancala HTML5 Game

mancala-start

Mancala is a traditional board game with many variants. For this project, I aimed to recreate the Kalah variant using JavaScript, HTML5 and CSS3. This means that the game can be run in any web browser, and can be hosted for free on the internet so it can be played from any device, anywhere.

The game can be played online at sheabunge.github.io/mancala. The game’s source code is available on GitHub.


HTML5 Powered with CSS3 / Styling, Graphics, 3D & Effects, Performance & Integration, Semantics, and Offline & Storage

How to Play

The mancala board is split into two halves. Your side is the row of six pits facing you. The larger pit to the right is your store, where you place any captured stones. At the end of the game, the player with the highest number of stones in their store is the winner.

mancala-start

To make a turn, click on one of the pits in the row facing you. The number of stones in the pit (represented by the number in the pit) are then taken out and distributed one in each pit in an anticlockwise direction. The opponent’s store is skipped, but all small pits as well as your store are included in the distribution.

mancala-turn-1

If the turn ends with the last stone falling in your store, then you immediately have another turn, and keep doing so until a turn doesn’t end in your store.

Capturing

If your turn ends in an empty pit on your side, and there are some stones in the opponent’s pit opposite, all stones are taken out of both pits and moved to your store, increasing your score.

mancala-before-capture
Before the capture has taken place

 

mancala-after-capture
After the capture has taken place

Winning the game

When a player has no stones in their row, the game ends and the all of the stones still in the other player’s pits are moved to their store. The player with the highest amount of stones in their store is the winner.

Rules Overview

Taken from https://en.wikipedia.org/wiki/Kalah#Rules

  1. At the beginning of the game, four seeds are placed in each house.
  2. Each player controls the six houses and their seeds on the player’s side of the board. The player’s score is the number of seeds in the store to their right.
  3. Players take turns sowing their seeds. On a turn, the player removes all seeds from one of the houses under their control. Moving counter-clockwise, the player drops one seed in each house in turn, including the player’s own store but not their opponent’s.
  4. If the last sown seed lands in the player’s store, the player gets an additional move. There is no limit on the number of moves a player can make in their turn.
  5. If the last sown seed lands in an empty house owned by the player, and the opposite house contains seeds, both the last seed and the opposite seeds are captured and placed into the player’s store.
  6. When one player no longer has any seeds in any of their houses, the game ends. The other player moves all remaining seeds to their store, and the player with the most seeds in their store wins.

It is possible for the game to end in a draw, with 24 seeds each.

 

Getting started with Java on EV3

leJOS is a Java virtual machine which runs on a LEGO MINDSTORMS control brick. It was originally designed for the RCX system, and later it was ported to NXT and EV3. leJOS is named after the Spanish word lejos, for “far”, and is pronounced like “le-hoss”.

Installing the leJOS software

To begin using leJOS, you need to install the software on your computer. The latest version can be obtained from SourceForge. There is an installer available for Windows (*_win32_setup.exe), but Linux and OS X users will need to download the .tar.gz archive and unpack the files in an appropriate location (for example, /opt/lejos_ev3). You also need to set the EV3_HOME environment variable to the installation directory location; this is done for you automatically when using the Windows installer.

Setting up the EV3 brick

Unlike older versions of MINDSTORMS where new firmware can be flashed directly onto the brick, EV3 requires you to load alternative operating systems onto an external microSD card. This means that in order to run Java programs on the EV3 brick, you will need a microSD card per EV3 brick. It should have at least 2 GB storage capacity, but no more than 32 GB, and not be an SDSX card.

To begin with, you need to format the SD card so there is only a single FAT32 partition. Some new SD cards might already be set up like this, but others may have hidden partitions that could mess up leJOS. For Windows, the leJOS wiki recommends this program. On Linux, I recommend using GParted.

There is no need to load an operating system image on the card, as leJOS sets everything up automatically. All you need to do is place some files in the root of the card. One is the lejosimage.zip file from inside the software installation directory; the other is a Java runtime that can be downloaded from the Oracle Java website. As of May 2015, only Java 7 is available for use with leJOS EV3, and attempting to install with Java 8 will fail. Once these two files are written to the card, simply remove the card from the computer, insert it into the slot on the side of the EV3 brick, turn the brick on, and wait for leJOS to install.

Installing the Eclipse plugin

The leJOS software includes a number of command line and standalone GUI tools for use with the EV3. While it is possible to use these tools to manually compile and download Java code to the EV3 brick, it is recommended to use a plugin for an IDE such as Eclipse. To install the Eclipse plugin, open the Help » Install New Software menu inside Eclipse, and click the Add button to add a new source. Enter leJOS EV3 as the name and the following URL for the location:

http://lejos.sourceforge.net/tools/eclipse/plugin/ev3

Once the plugin is installed, you will need to open up the preferences and select leJOS EV3 from the list. Most of the default settings are fine, but you will need to set the EV3_HOME setting to the software installation directory (see above), and you might want to turn on ‘Run program after upload’.

Writing your first program

In order to begin developing with leJOS EV3 inside Eclipse, you will need to create a new leJOS EV3 project. To do this, visit the File » New » Project… menu and select leJOS EV3 » leJOS EV3 Project. Then create a new class by right clicking on the newly created project in the package explorer and select the New » Class menu. Set the package to something appropriate (such as yourname.ev3 or yourname.ev3.someproject) and remember to select the create main method option. Now you can begin writing Java code and utilizing the EV3 APIs. Try adding this sample code to the main method:

LCD.drawString("Hello world!", 0, 4);
Button.waitForAnyPress();

Remember to import the leJOS packages by hovering over the red lines and selecting the import option. To download the program to the EV3 brick, ensure the brick is turned on with the SD card inserted and connected to the computer, and press the green run button or right click on the class name and select Run as » leJOS EV3 Program. The message should display on the LCD screen until you press one of the EV3 buttons, and then the program should exit.

References

Rock Paper Scissors Game

rpsThis robot is designed to play a game of rock paper scissors with one person. It uses one EV3 control brick, three NXT touch sensors, and three legacy RCX lamps. The program is written in leJOS EV3 code.

Playing the Game

When the program begins, the words “Rock”, “Paper”, “Scissors”, and “GO!” are flashed onto the screen, after which the user must choose a move be pressing one of the three touch sensors on the front of the robot. After the user has made a move, the robot will turn on the lamp corresponding to its move, which is decided randomly.

The LED lights on the EV3 brick will light up to indicate the result of the round. Green light means that the user has one the round, red light means that the user lost and the robot one, and orange light indicates a draw (i.e. the robot and the user choose the same move). The result is decided based on the traditional rules of rock paper scissors, with rock beating scissors, but losing to paper; paper beating rock, but losing to scissors; and scissors beating paper, but losing to rock.

During rounds a scoreboard is displayed on the LCD screen.  The top part displays the amount of moves made by each user, with the robot’s moves count in the top row, and the user count in the bottom. Below this on a single line is the count of wins, losses and draws attributed to the user. Here is a basic representation of how the scoreboard might look during a game:

  
     3   8   6
     R   P   S
     5   7   3

  W: 6  L: 5  D: 4

When the scoreboard is displayed after a round, a box is drawn around the most recently made moves, as well as the result of the round.

Program

The program is written in leJOS EV3 code, and consists of three Java classes. The main class is called RockPaperScissors. It starts the program, manges sensor and hardware operations, handles the exit button, and manages threads. The second class RPS manages all functionality to do with the rock paper scissors game. The last class Scoreboard is used by the RPS class to store a log of moves, wins and draws for both the robot and the user, and then draws the scoreboard onto the screen.

The entire program code can be found on GitHub.

Issues and Improvements

Drawing centered text

One of the limitations I discovered in the leJOS programming language is that you cannot draw text on the LCD screen in real X and Y positions as you would shapes or pixels. Instead, the screen is divided into a grid based on the text height and width. While this may seem convenient, it makes it difficult to draw text in exactly the center of the screen, as I could with NXC.

The only way I could overcome this limitation was to fork the lejos.hardware.lcd.LCD.drawString() method and remove the grid code. This was a bit confusing at first because that method deals with drawing on the LCD at a very low-level, but I managed to figure it out. I made the code into a utility class that can be used across different programs.

Confusing messages

In the original version of the game, when the user one the message “You won” was displayed in the LCD screen, and when the robot one the message “I won” was displayed. This was confusing to people playing the game, so I changed the game’s messages to be more focused on the user, displaying whether they one or lost rather than who won.

Legacy lights

I’m pretty new to leJOS EV3, so I’m still discovering how to use different sensors and outputs with the leJOS API. For most sensors, I know how to look through the API docs or the source code to determine how to set up and use the sensor, but I couldn’t find how to use the legacy LEDs that were part of the RCX system. As it turns out, it is as simple as plugging them into an output port, and treating them as a motor.

Robot Design

The design is based around a square frame. On the front are three touch sensors in a line, corresponding to the three moves. This is where the user enters their move. Each button has a brick-built representation of their move attached to the front. To the rear of the frame are three lamps, lining up with the buttons, and corresponding to the same moves. This is where the robot indicates its move to the user. Attached to the side of the frame is the EV3 brick.

Pong Game (leJOS EV3)

Photo of robotA simple two-player pong game, written in leJOS EV3.

Robot Design

The robot is simply a base EV3 brick with two NXT motors attached to the sides, and a wheel on each motor for a control.

The NXT motors could be exchanged for EV3 motors with only a minor change in the code. An alternative design to make two-player games easier would be to detach the motors from the brick and connect them with a longer cable.

Issues and Improvements

The large issue I came across with this program was the screen refresh. When the game was running, the screen was flickering a lot, making the game virtually unplayable. I experimented around with changing the screen refresh rate, even splitting the game into separate processes with their own delay, but nothing seemed to resolve the issue. I eventually sorted out the issue by removing all code that was clearing the LCD screen, and instead drew the objects in white to erase the previous position before calculating their new positions and redrawing them in black.

Program

The program was written in leJOS EV3. It consists of three classes:

  • Pong is the main class which is run when the program is started. It manages the game loop and ties the other classes together
  • The Ball class represents the ball. It has fields for the X and Y positions, as well as the delta X and delta Y, as well as methods for updating the position and drawing it on the screen and checking if it has bounced
  • The Paddle class is designed to control a single paddle, and so is initialized twice with different parameters for each paddle.

The entire program code can be found at GitHub.

 

pong-lcd