Getting Started with Blockly's Tic-Tac-Toe API
B
l
o
c
k
l
y
T
i
c
-
T
a
c
-
T
o
e
Getting started with Blockly's API
A
G
u
i
d
e
d
T
o
u
r
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
T
h
e
G
o
a
l
D
o
w
n
l
o
a
d
T
i
c
-
T
a
c
-
T
o
e
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.
T
i
c
-
T
a
c
-
T
o
e
D
o
w
n
l
o
a
d
B
l
o
c
k
l
y
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
B
l
o
c
k
l
y
I
n
j
e
c
t
B
l
o
c
k
l
y
i
n
t
o
t
i
c
t
a
c
t
o
e
.
h
t
m
l
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
To
e
Blockly
T
i
c
-
T
a
c
-
T
o
e
+
B
l
o
c
k
l
y
G
e
n
e
r
a
t
e
C
o
d
e
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.
G
e
n
e
r
a
t
e
J
a
v
a
S
c
r
i
p
t
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>
R
u
n
n
i
n
g
J
a
v
a
S
c
r
i
p
t
M
o
r
e
B
l
o
c
k
s
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.
C
o
r
e
B
l
o
c
k
s
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).
C
a
t
e
g
o
r
y
T
o
o
l
b
o
x
C
r
e
a
t
e
C
u
s
t
o
m
B
l
o
c
k
s
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 asquare (0-8):
The easiest way to design custom blocks is to use the
Block Factory:
blockly-demo.appspot.com/static/demos/blockfactory/index.html
B
l
o
c
k
F
a
c
t
o
r
y
(
s
e
t
)
B
l
o
c
k
F
a
c
t
o
r
y
(
g
e
t
)
I
n
s
e
r
t
C
u
s
t
o
m
B
l
o
c
k
s
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>
C
u
s
t
o
m
B
l
o
c
k
s
J
a
v
a
S
c
r
i
p
t
f
o
r
S
e
t
B
l
o
c
k
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';J
a
v
a
S
c
r
i
p
t
f
o
r
G
e
t
B
l
o
c
k
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 + ']';
M
i
n
i
m
a
l
l
y
P
l
a
y
a
b
l
e
F
u
r
t
h
e
r
S
t
e
p
s
●
Change
ttt_get
's
ORDER_NONE
to the correct
operator precedence
(
ORDER_MEMBER
).
●
Add a block to get which symbol is currently being played.
●
Add an
infinite loop check
, or go professional and use the
JS Interpreter
.
●
Use
cloud storage
on App Engine to allow users to save programs.
For additional help, or just to show off what you've built, join the
Blockly newsgroup
.
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
).
Connect Blockly with Tic-Tac-Toe game to program a computer opponent. Learn major aspects of Blockly's API. Download Tic-Tac-Toe and Blockly, inject Blockly into tictactoe.html, and generate JavaScript code. Add a button to generate and run JavaScript code from user blocks."
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
You are allowed to download the files provided on this website for personal or commercial use, subject to the condition that they are used lawfully. All files are the property of their respective owners.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.
E N D
Presentation Transcript
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
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.
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
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 To e 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>
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).
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
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>
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 + ']';
Further Steps Change ttt_get's ORDER_NONE to the correct operator precedence (ORDER_MEMBER). Add a block to get which symbol is currently being played. Add an infinite loop check, or go professional and use the JS Interpreter. Use cloud storage on App Engine to allow users to save programs. For additional help, or just to show off what you've built, join the Blockly newsgroup. 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).
