Blockly Tic-Tac-Toe
Getting started with Blockly's API
A Guided Tour
This workshop will connect Blockly with a Tic-Tac-Toe game so that users can program a computer opponent. In the process we will explore the major aspects of Blockly's API.
Estimated time: 1 hour
The Goal
Download Tic-Tac-Toe
First, download the Tic-Tac-Toe game:
drive.google.com/file/d/0B_5TNOBUDB1yMm14WkY2WXNDTUE/view
Test it in a browser: tictactoe.html
It is not an example of great code, you can improve it later if you like.
Tic-Tac-Toe
Download Blockly
Second, download Blockly:
https://github.com/google/blockly
Blockly can be downloaded with Git, Subversion, or as a zip file.
Test it in a browser: demos/fixed/index.html
Blockly
Inject Blockly into tictactoe.html
Modify tictactoe.html to add Blockly:
developers.google.com/blockly/guides/configure/web/fixed-size
Optional: Place the Tic-Tac-Toe game and Blockly in a one-row, two-column table so that they are next to each other:
Tic
Tac
Toe
Blockly
Tic-Tac-Toe + Blockly
Generate Code
Blockly is not a programming language. It is a visual editor that generates code. Generators have been written for JavaScript, Python, PHP, Lua, Dart and more.
Let's add a button that takes the user's blocks and generates JavaScript.
Generate JavaScript
Import this script file:
<script src="javascript_compressed.js"></script>
Add a button to the page with this onclick function:
<button onclick="runJS()">Run Code</button>
<script>
function runJS() {
Blockly.JavaScript.addReservedWords('code');
var code = Blockly.JavaScript.workspaceToCode();
alert(code);
try {
eval(code);
} catch (e) {
alert(e);
}
}
</script>
Running JavaScript
More Blocks
Every use of Blockly needs a different set of blocks.
Blockly comes with more than 50 sample blocks, but you will need to chose which (if any) are relevant.
You also need to create API blocks that are custom to your project.
Core Blocks
Replace the toolbox in tictactoe.html with this monster:
docs.google.com/file/d/0B_5TNOBUDB1yZWVpLWdyT3YzcUE/view
Reload tictactoe.html in a browser to see (nearly) every sample block that comes with Blockly.
Next, prune out those blocks that are irrelevant to Tic-Tac-Toe (such as colours and trigonometry).
Category Toolbox
Create Custom Blocks
API blocks for your application need to be custom built. In the case of Tic Tac Toe we need a block to play in a square (0-8):
We also need a block to get the symbol ("X", "O", or "") in a square (0-8):
The easiest way to design custom blocks is to use the Block Factory:
blockly-demo.appspot.com/static/demos/blockfactory/index.html
Block Factory (set)
Block Factory (get)
Insert Custom Blocks
For each of the new blocks, copy the "Language code" and "Generator stub" from the Block Factory and paste it into a script your tictactoe.html
Then add a new category to the toolbar's XML:
<category name="Tic-Tac-Toe">
<block type="ttt_set"></block>
<block type="ttt_get"></block>
</category>
Custom Blocks
JavaScript for Set Block
The Block Factory can only write a stub for the JavaScript generators. You need to fill in the details. In the case of ttt_set, replace these lines:
// TODO: Assemble JavaScript into code variable.
var code = '...';
With this line:
var code = 'canvasClicked(' + value_square + ');\n';
JavaScript for Get Block
In the case of ttt_get, replace these lines:
// TODO: Assemble JavaScript into code variable.
var code = '...';
With this line:
var code = 'content[' + value_square + ']';
Minimally Playable
Further Steps
For additional help, or just to show off what you've built, join the
Blockly is free and open source. Go integrate Blockly into your projects as a friendly UI. It is also more than just for programming UIs (e.g. Blockly Puzzle).