The game on JavaScript "Corners"

Introduction

This implementation of the game "Corners" in JavaScript, created for educational purposes. Gameplay is to move your chips from one corner of the playing field to another (according to certain rules) faster than the opponent. In this implementation, four modes: playing computer players, playing with a computer player, multiplayer on one computer and multiplayer over the network.

Game Description

The interface consists of three parts: a message box, a settings panel and a game field. On the field of the game, besides the substrate itself (a div with a background) there are two more layers of elements: a layer of chip elements and a layer of cell elements that form an 8 * 8 grid and are needed for interaction with the game process. The message window displays information about the current progress and at the end of the game its result. On the settings panel, you can select game modes and options.

In the “AI game against himself” mode, the computer, according to the algorithm that I developed, plays against itself. Since there are no random elements, the result is always the same. Created to demonstrate the game itself and the operation of the algorithm AI. Play against the AI ​​mode allows you to play against the computer. You can choose the color of the chips. It is worth remembering that whites go first. “Game in multiplayer mode” - here you can play together on one computer. The “Game on the network” mode allows you to play over the network. You can create a game or connect to an already created one. When a new game is generated, a number by which another player can make a connection by entering an identifier in the field that appears when you click on "Connect to the game". Another worth noting is that one move is limited to 20 minutes.

Gameplay, as noted earlier, is to move chips from one corner of the playing field to another. Chips that can make a move, when you move the mouse pointer over them, are marked with a green frame. Red frame stand out active chips. Available moves are marked blue. To remove the active mode from the chip, you need to click on it. The game will end when one of the players takes the whole opposite corner with his chips.
')

Description of the algorithm that is used to calculate the moves of one chip

Possible moves:

• One small step (vertically or horizontally) on the next free cell;
• The chain of jumps. One jump can be carried out “through” another chip on a free cell (horizontally or vertically), but you cannot go back, that is, “jump” to the cell left in the previous jump. The chain ends when the cells for the "jumps" does not remain.

That is, the task is to search for all variants of moves ("small steps" and "jumps") for one chip.
The playing field is defined as:

This algorithm works on it. It begins with a call to a function that accepts (i, j) chip coordinates. Also, this function uses a global array (CORNERS.chips, in a block diagram simply CHIPS), containing information about the position of the chips on the playing field. For example, a record of the type CORNERS.chips [5] [1] = 1 means that there is a white chip in position i = 5 and j = 1. If the value were -1, it would mean that there is a black chip there. A value of 0 means free cell space. That is, the elements of this array have the following meanings:

• 1 - in this position is a white chip;
• (-1) - here is black;
• 0 - there is a free cell.

So, this algorithm, using this data, should form an array that contains information about all the moves (list of cell coordinates of the field). The structure of this array: result [m] [k] = x, where m is the number of a pair of coordinates, k - 0 is the coordinate i or 1 is the coordinate j, x is the value of the corresponding coordinate.

In the process, two more auxiliary arrays are used: traveled and patch. They are needed for the calculation of chains of jumps. The coordinates of counted cells, that is, those cells that no longer need to be entered into the result array, are entered in traveled. The patch array contains the coordinates of the field cells that need to be examined to find new moves.

Well, the search itself consists in successively traversing the directions of the possible move of this chip, finding the cells of the field for “short steps” and “jumps”, and then examining all the cells for “jumping” for new moves.

Conclusion

This was my project implemented for the purpose of learning JavaScript. There are a lot of mistakes and shortcomings, but it somehow works. It would be possible to describe another algorithm that the computer player uses, but maybe next time.
The code for this application is available on the GitHub repository.