WebAssembly has been there for quite some time. While I understand the overall idea, I never had a chance to build anything production-ready so far. I had a chance to play around with WebAssembly during our company hackathon and one of the engineers explained in detail how WebAssembly works.
I wanted to build something with WebAssembly and wanted that to be a real-world program instead of a simple hello world. While doing something with image processing might have been useful, I wanted something small to start with. Two-player games with computer AI seemed like a good idea and tic tac toe is felt easier to build.
A quick search in Github for tic tac toe gave this result – https://github.com/ryancesiel/tictactoe-minimax/. While the code wasn’t the best (especially the way char board[3][3] is handled across all the functions), it was short, easy to understand & modify and didn’t give me any nightmares about compiling the code. As you can see, I have had nightmares with simple code compilation.
In the first version, I thought I had to export Game::minimax function and I had no clue how to expose a function under a class. So, ended up creating a simple function which called this function and had a simple name – get_next_move()
The whole thing works like a charm. You can try to play it here https://sp2hari.com/work/tic-tac-toe/. As always, the entire code is published in my Github here at https://github.com/sp2hari/tic-tac-toe
In short, this was a fun experiment to work on instead of the usual hello world or the Fibonacci. The next step is to build something to do with image processing or code auto-completion using WebAssembly. Super excited about both the ideas.
Useful Links
https://webassembly.org/
https://marcoselvatici.github.io/WASM_tutorial/
https://programmer.ink/think/webassembly-array-passing-input.html
Hacks/Pending issues with the script
Issue #1 – Passing the integer array and using it in C++
For some reason, the code to send the data from javascript and reading in C++ is ugly. For example, I’m passing values in the array like 88 (ASCII value of ‘X’) and 79(ASCII value of ‘O’), but in the C++ code, I’m receiving these values as 1118830592 and 1117650944. I’m guessing it is something to do with this line
Module.HEAPF32.set(typed_gameboard, buffer >> 2)
But for some reason, I wasn’t able to get it right for no value. With most of the example on the internet for float arrays, I didn’t have too much time to mess with this.
Issue #2 – Passing a 2D array of N rows and M columns, instead of a 1D array of N*M size
Again, I didn’t want to fight with this. So many examples from the internet were built mainly to see pass 1d array and 1 didn’t have too much time to figure this out. Especially, copy pasting a working code is more enticing instead of wrestling with unknown C++ and Javascript code.
Issue #3 – Calling functions from a class.
Again, for the lack of documentation, I didn’t know how to call the functions of a class directly from Javascript. For example, if we have a function called “get_move”, we can use that in the EXPORTED_FUNCTIONS=[“_get_move”] and things worked. But if I have a function inside a class like “Game::get_move”, I had no clue how to use this function in the exported functions.
If you have any solutions for any one of the above issues, please respond in the comments below. I’ll be forever thankful!