[Suwung] How to create Othello game with Angular JS

Here we go again. Actually i’ve decided to stop writing since i don’t have enough time to do that (actually too lazy to do that, lol). But after reading this post in medium link : (https://medium.com/@mazipanneh/why-writing-is-worth-for-programmer-20694b18efd#.wqv48hwpn) written by Irfan Maulana, Front-End Developer at Blibli.com, so i’ve decided to start writing again. It’s worth to write something even your writing is so basic and so simple for you. But it’s about our perspective, who knows the others need to learn what we’re already knew. I know i’m noob but let me try to share what i learn, so if you find any mistake, let me know

So, in order to use my time in efficient way, i challenged myself to contribute something at github.com at least one random mini project in every month. For those who are asking what’s the definition of “Suwung”, it’s javanese word that means something random (usually useless lol) when you got free time and you don’t know what to do. (If you have a better word please tell me :v)

For this month (January), i’ve finished my first “suwung” project named Othello game. If you haven’t knew Othello game, you can play that game first at http://www.othelloonline.org/ . It’s multiplayer game that you place your own tile (black or white) then you can turn all tiles between your 2 tiles into your own tiles horizontally, vertically, and diagonally. It’s hard to explain so you can just play the demo or play at http://www.othelloonline.org/. For technology, i use Angular JS because of its two way data-binding properties since i need to update the field simultaneously once i place my tile (you can also suggest me other framework or even plain JS). Note : all of my logic codes are written in controller (too lazy to move into service). My main focus is on the logic, not the structure. But it’s a must for you to write code with good structure if you’re developing a software.

Project’s structure

The key algorithm for this Breadth First Search. At start of your code, we need to define our black tile with 0, white with 1 and default tile with -1 (free tile). First idea is by using BFS, once you place your tile, search for 8 directions (right, bottom-right, bottom, bottom-left, left, top-left, top, and top-right). Thus we need to define our 8 different states. Later, after i search at 8 directions, i need to find my other same-coloured tile so i could capture all tiles between those 2 tiles. But once it’s out of bound (out of the field) or i find free tile, i stop searching.

So next idea is i need to save the coordinates that represent my other tiles that i’ve searched before. Thus by creating another array v, i can save my coordinates. Don’t forget to define our global variable at scope named column (for defining current tile’s status) and state ( for defining whose turn is this turn)


I have 4 methods for this program,

  • Change

For this method, i can change my tile’s size and define our first field

  • Click

For this method, once i click random tile, we can get alert informing that the chosen tile is not a free. If it’s free we update that tile and also launch “update” method. (you can ignore that comment)

Click method
  • BFS

This is the core for this program. Simple, but enough to solve. Once we get out of the field or we meet a free tile, we stop searching. If we meet our same tile, we save our another tile’s coordinate into array v. Else we keep searching with different direction. Oh yes, i forgot something, why do we need additional parameter named direction? Since when we search, we just want to search at 8 directions from our original tile that we put in our turn, if the algorithm starts moving, we want to each tile moves in same and constant direction. For example our original coordinates is on (0,0) then we move to 8 directions then let’s say we turn right into (1,0). From this tile, we haven’t found our another same-coloured tile yet so we need to keep searching. From this (1,0) actually we should move to (2,0) then (3,0) etc with direction right. If we’re not passing our parameter direction into our method, we can move to (0,0) again because from (1,0) we move in 8 directions. Doing recursively, we can get (0,0) -> (1,0) -> (0,0) and so on. This causes infinite loop. We don’t need to pass parameter state (our current tile status either black or white because it’s already defined at our Angular JS’s scope).

BFS method, as simple as that
  • Update

Our last method is update. For the first move, we need to “broadcast” to 8 directions, then after getting all coordinates in array v, for each element we capture all of tiles between our 2 coordinates. Note that the update function depends on the direction. This method is an alternative method so i could handle bug easily. You can also include this method into bfs method when you find another same-coloured tile, you directly update the tiles between 2 tiles. So you don’t have to save the coordinates into array if you don’t want to. But it could make the BFS method is long coded and maybe hard to be understood by other people (like a girl lol -said by my friend).

Sorry i couldn’t give screenshot for update method because it’s 80 lines of code method.

That’s all for explanation, if you’re looking for the source code, you can visit

You can try that by opening the index.html file.

If you find any bugs, let me know. If you find any suggestion let me know.

Learning source :

Angular JS basic :

Breadth First Search