e }

co d
s to
app
g
iguin
t r
0 in
{2
15.11
VOLUME
 How to Bitsbox
With Bitsbox, you can code real apps that work
on gadgets like phones and tablets. All you need
is a computer with internet and a working brain.

1 Find a computer with a physical keyboard.

The coding part of Bitsbox isn’t meant to be done on tablets just yet.

2 Open a web browser and go to bitsbox.com

We recommend Chrome, Firefox, Safari, or Internet Explorer 11.
A lot of peo
secret langu
ple think th
at coding is
a
age, that on
top security ly th o s e with
3 Click Get Started.
Have fun! how it all w
clearance ca
orks. At Bit
n ever know
that idea. C sbox, we re
oding is for ject
ever y one!
In this book
How can I run my apps you'll find a
pps about
spies, detec
on a phone or a tablet? tives, hacke
rs, drones,
mysteries, a
nd even arc
Before you do these steps, install a QR reader app
hope you'll haeologists!
help us sha We
on your gadget. Go here for a couple of suggestions: r
coding" wit e th e "secret of
bitsbox.com/QRapps h everyone
you know.
Se e you back a
1 On a computer, open the Bitsbox app you built. t HQ,
2 Click the sharing icon in the corner of the screen.
Aidan, Scot
t, Anastasia
3 Scan the on-screen QR code with your gadget.
Alexandra + , Jeff,
Emma
this!
s like
It look

When you change the code on your computer,

the app on your gadget changes, too!
2
mini apps to
get you prepared
1 5 1 3

7 9 8 1 Grab Your Badge

Plan Your
1 stamp('wallet')
Next Mission
It's your city. Make sure you're protecting all the important sites.
2 text('Special Agentface')

Can you put your name instead? Start by typing in this code:

1 fill('city4')
5 9 5 8 Get Your Orders
That gives us a map of the city.
1 fill('spy phone') Now let's draw a set of lines for where you want to drive. x
2 stamp('hologram') Start a line command like so... 485
|
Can you change the 'hologram' to a 'monkey'? 1 fill('city4')
2 line( y
340-
1 8 1 7 Hit the Road Now move your cursor across the tablet on your screen.
Do you see the little numbers?
They represent an exact location on the screen.
1 car = stamp('car7')
2 car.tap = sing Put your cursor near the location "2" on the map
and look at the numbers.

What happens if you change sing to explode? Type the "x" number first, then a comma.
Type the "y" number second, then a comma.
Type a third number for the thickness of the line.

6 7 6 1 Save the World! 1 fill('city4')

2 line(485,340,10)
1 function make() {
2 bot = stamp('bot').move()
Boom! You drew a line on the map.
3 bot.tap = explode
4 }
5 repeat(make,9) Can you add more lines to draw a path
between all of the map's locations?
How would you make more than 9 bots?
3
 The power of
1 4 9 3 8 9 3 0 programming,
right at your
fingertips.

Fingerprint
WANTED: Detective
MR.X 1 fill('desk')
Make your own wanted 2 clue = stamp('print',30)
poster for the evil Mr. X.
3 mag = stamp('mag',550,800)
Or maybe for your
annoying little brother. 4
5 function touching() {
6 mag.move(x,y)
7 if (mag.hits(clue)) {
1 fill('poster') 8 clue.size(200)
2 stamp('mr x') 9 }
3 10 }
4 crimes = 10
5 reward = 1000
6 answer = crimes * reward A TOUCHING TALE
7 words = 'WANTED $' + answer The magnifying glass moves to where
8 text(words,100,850,80,'impact') you're touching the screen.
Line 7 uses an if statement and
the .hits() command to test if
you've found the fingerprint.

A MOST CALCULATING VILLAIN Can you

make the clue
Computers are masters when it comes to math.
*
appear in a different
In programming, we use the character for multiplication. spot on the screen?
Line 6 calculates an answer equal to crimes times reward.
HINT:
Can you change the numbers to increase clue.move()
the reward for Mr. X?
4
 Mr. X is
8 9 "xtra" sneaky.
3 3

re in th e Worl d i s Mr.
W h e
You found his fingerprint, but can you find the man?
Place pins on the globe to track his movements.

Can you change the

1 fill('north sea')
code to make the line 2 stamp('pin',200)
a different color? 3
4 function tap() {
5 line(x,y,6,'red')
6 stamp('pin',x,y,200)
7 }

GET IN LINE
Line 5 draws a line from the center of the screen to the
location (x,y). Using x and y inside a tap() function always
refers to the point on the screen where you just tapped.

Line 6 uses x and y in precisely the same way!

5
 Hack Attack!
2 5 3 6

HACKER DEFENSE
Hackers are sending viruses to
take down your server. Zap 'em
before they reach the center.

1 fill('black')
2 bg = stamp('cyber')
3 me = stamp('server',100)
4
5 function spawn() {
6 it = stamp('virus',50)
7 it.move().aim(me)
8 it.move(DOWN,300)
9 time = random(7000,15000)
10 it.move(375,512,time)
11 it.tap = pop
12 }
13 repeat(spawn,20)
14
15 function loop() {
16 bg.rotate(RIGHT,.1) MULTIPLE MOVES
17 if (me.hits('virus')) { The spawn() function is neat. Every
18 me.explode() time you call it, it creates a new virus.
To position the virus, it calls .move() twice:
19 }
first to position it randomly, and again to
20 } move it away from the center.

Can you make more viruses?

6 Hint: Change the repeat() command.
 Seriously, though.
Don't panic.

Panic 8 4 7 7
BUTTON

Hold down the big red button until the alarm goes off. Grownups will love you.

RED ALERT!
1 stamp('alarm')
If you use the fill() command with three
2 count = 0
numbers, you can make any color you like.
3
Can you make a totally 4 function touching() { The numbers can be anything from 0 to 255,
different sound? 5 count = count + 5 and they describe how much red, green, and
blue you want to mix.
Hint: sound('rooster') 6 fill(count,0,0)
7 if (count == 250) { All the colors on your screen are made from
a combination of red, green, and blue light.
8 song('klaxon')
9 }
10 }
7
 1 fill('parchment')
6 0 1 9 2 fire = stamp('flame',668,925,100)
3 quill = stamp('quill2',100,886,400)
4
Careful Drag the quill pen to draw with 5 function select() {
not to burn invisible ink. Then drag the flame 6 brush.size(100)
yourself! 7 brush = this
to reveal your secret message. 8 brush.size(400)
9 }
10

Invisible
11 quill.tap = select
12 fire.tap = select

Ink
13 brush = quill
14
15 function drag() {
16 brush.move(x,y)
17 if (brush == quill) {
18 spot = stamp('crater',x,y,1)
19 } else {
20 find('crater').forEach(check)
21 }
22 }
23
24 function check(spot) {
25 if (fire.hits(spot)) {
26 spot.size(50,500)
27 }
28 }

SMALL = INVISIBLE
The ink that you draw with in this game isn't actually invisible.
Can you change the "ink" It's just very, very small. Line 18 stamps a mark at size 1, which is
to another stamp? so tiny you can't easily see it until the flame makes it grow.
8
 2-PLAYER
3 5 1 6 APP!

MESSAGE IN A BOTTLE
You're alone on a desert island.
1 fill('beach') Good thing you have so many bottles!
2 time = 2000
3
4 function tap() {
5 send(prompt('say what?'))
6 a = stamp('bottle3',375,1200,400)
7 a.move(575,600,time)
8 a.size(0,time)
9 }
10
11 function get(data) {
12 b = stamp('bottle3',100,600,1)
13 b.move(375,1200,time) SEND AND GET
14 b.size(300,time) Bitsbox's send() and get()
15 words = data commands are this app's
16 delay(read,time) bottled lightning. Here,
17 } we use send() to mail a
virtual letter to any gadgets
18
running the app, and
19 function read() { get() to read what
20 stamp('scroll',380,300) they send back.
21 text(words,100,300,'hand')
22 }

Visit bitsbox.com/howtoshare to learn

how to play this app with another person.
9
 3 confounding ges
code-free challen

GAME 1
Can you find all 5 fish?
(Hint: whales aren't fish.)

GAME 2
Find 2 campfires, a boat, a
red motorcycle, 2 hot air balloons,
and 2 lightbulb factories.

GAME 3
Challenge your friend! "I spy with
my little eye something…red!"

10
11
 3 2 6 6 ACT 1: Lasers.
Why is it always lasers?

Gem Heist
Tap the screen to drop
down and get the gem.
Watch out for those lasers!

1 fill('gallery')
2 spy = stamp('kat',390,200)
3 gem = stamp('gem',390,740,150)
4 dir = DOWN
5
6 stamp('laser2',100,700,5,5)
7 stamp('laser2',600,650,5,10)
8 stamp('laser2',200,800,5,-5)
9 stamp('laser2',700,350,5,0)
10 23
11 function tap() { THE 4TH
NUMBER 24 function loop() {
12 spy.move(dir,100,200) IN THESE
COMMANDS 25 find('laser2').forEach(transform)
13 } ROTATES THE
LASERS. 26 if (spy.hits(gem)) {
14 27 dir = UP
15 function transform(laser) { 28 gem.move(spy.x,spy.y)
16 if (laser.width < 10) { 29 }
FOLLOW ME! 17 laser.size(900,random(1000,2000)) 30 if (spy.hits('laser2')) {
18 } 31 spy.pop()
Line 28 shows how you can
19 if (laser.width > 800) { 32 loop = null
make one stamp follow another. 20 laser.size(0,random(1000,2000)) 33 sound('alarm')
When the spy .hits() the gem, 21 } 34 }
the gem moves to the spy's 22 } 35 }
x and y position.

Can you add a victory message once you make it off the screen?

12
 :
ACT 2

yc le
6

c
0 9

r
2

Moto
1 fill('night')
2 cone = stamp('cone3',760,535,100)

e
3 bike = stamp('bike',150,500,150)

a p
4 speed = 10

c
5

Es
6 function tap() {
7 bike.move(NORTH,150).rotate(-30)
8 bike.move(150,500,1200).rotate(0,1000)
9 speed = speed + 1
10 }
11
12 function loop() {
13 cone.move(LEFT,speed)
14 cone.wrap()
15 if (bike.hits(cone)) {
16 bike.explode()
17 }
18 }

THAT'S A WRAP
It may seem like there are an infinite number of
obstacles in this game, but there's really only one
cone that moves LEFT constantly. The wrap()

fect
command detects when it's moved off the screen

th e p e r !
Tap at ke your jump
and automatically "wraps" it to the opposite side.

e t o ma
tim

13
 1 2 6 8

MUMMY MEMORY
A game that's as old as the
pyramids. Flip the tiles 1 fill('sandstone')
to match the pictures. 2 choice = null
3
4 function flip(it) {
5 it.size(1)
6 if (choice == null) {
7 choice = it
8 } else {
9 if (it.picture == choice.picture) {
10 it.hide()
11 choice.hide()
12 }
13 it.size(150,1000)
14 choice.size(150,1000)
t-think 15 choice = null
Can you ou
keeps 16 }
a guy who
a jar? 17 }
his brain in
18
19 function place(name) {
20 s = stamp(name,150).move()
21 block = stamp('block2',150)
22 block.move(s.x,s.y)
23 block.picture = s.name
24 block.tap = flip
You can 25 }
add other 26 tiles = ['pic','pic','pic2',
pictures to 27 'pic2','pic3','pic3']
the game 28
by typing 29 tiles.forEach(place)
more stamp
names into the
array on lines 26
and 27. Try 'pic4',
MOVING RANDOMLY
'pic5', 'pic6', and Do you notice how every time you run this program,
so on. Be sure to add the tiles scatter across the screen? If you call the
each one twice! move() command without any numbers in it, your
stamp jumps to a random spot on the screen.
14
 Fo
rt
glo une a
3 6 5 8 1 fill('sandbox') Fo ry, k nd
rtu i
ne d.
2
glo a
ry. nd
3 function place(name) {

Desert
4 stamp(name).move().size()
5 }
6 place('pot2')
7 place('coin2')
8 place('knife2')
9

Dig
10 function sand() {
Sweep the sand to 11
12 }
place('sand2')

find the treasures. 13 repeat(sand,250)

14
15 function sweep(item) {
16 if (item.hits(x,y)) {
17 item.size(0,200)
18 }
19 }
20
21 function touching() {
22 find('sand2').forEach(sweep)
23 }

Can you add more

treasures to uncover?
TINY HIDING
There are two ways to hide a stamp.
One is to use the .hide() command.

Another is to make it size 0, which is

what's happening on line 17.
The number 200 tells the command
to animate the resizing over 200
milliseconds (1/5th of a second).

15
 2
5 7 4

0
15 = 30
l ane 1 5 00
16 m e =
t i
AD! 17 = 0
2 RO 18
c ount
s w erve
() {
}
{ }
19 ion ()
f unct n danger }
20 io () {
unct n drones
st.
f
21 io ne

iv e fa 22
f unct
{ n t ) * la

Dr
u
op() h.sin(co k()
n lo
es.
23 i o M a t .bac )
v c t e )
r u n + i m
u
f 5 t (
= 37 300, back
c
Hug bots. 'ony
x' )
7',3
7 5 , 9 0 0,15
0) 24
25
mid
m i d - la
ne
e
x1 = id + lan 1,0).mo (DOWN,13 0,time)
ve ( D O WN,1 0,time). ack()
0 .b
ill( amp('car

las t ro 1 f
e =
st 26 m
x2 = 'pillar ' , x
0).m
o
,x2, ).move(D
v e
OWN,
1 3 0

B
{
2 m ng() 27 t a m p( l a r '
t o uchi 00) 28
s
p('p
il ,mid
,0
3
unct
ion ,900
,3 stam 'circle'
4 f e.move(x 29 stam ()
p(
R! m ,y)
1 CA 5
me.a
im(x 30
31
swer ()
ve
er
6 dang ()
7 } e.y) 32 es
p ( ) { , m e .x,m dro n
ta 6 ' 33
8 ion cket
f unct tamp('ro ation) 34
}
9
r =
s .rot
10 t a t e(me 0,2000)
r.ro (UP,160
11 ve ,20)
r.mo 'rocket'
12 d(
soun
13
}
14

CODING ONWARD
Can you add a
second type of enemy?
16
 35 = 0
c urve
36 () { ve / 100
w erve r
ion
s + cu
RVES!
37 unt
f unct c o ) {
== 1 + count/
10
3 CU 38 co u n t =
om( 1 0 )
0) 10)
39 rand om(1 -12,
if ( e = rand random( 0)
40 curv +
lane ax(lane,
10
=
41 lane th.m
42 n e = Ma
l a
43 }
44
}
45 r')
,'s ilve
0,50
2
ct',
46 0 s ,' impa
= t
pts xt(p
47 r e = te
sco
48 () { )) {
nger ne2'
NGER! n d a ' d r o
49 tio 10 its(
4 DA 50
func = pts +
( p t s) | | me.h
pt s ange illar')
51 e.ch
scor .hits('p
52 me me)
if ( = nu )
ll
0 0,ti
53 lo o p N , 5
de( ugh'
) DOW
xplo ove(
54 me.e 'evil la 75,0).m
d( ,3
55 soun 'skull6'
p(
56 stam
57 { {
} one) '))
58 z a p(dr 'rocket6
} 60 tion ts(
59 1 func drone.hi e()
6 if ( e.explod
! 62 dron 'nuke')
N E S d( 00
5 DRO 63 soun pts + 10
=
64 pts
65 }
66
} zap)
67 () {
d r ones forEach( ,0)
68 ion ). 768)
f unct 'drone2' == 1) { ,random(
69 (
find ndom(30) 'drone2 000)
'
70 ( r a a m p ( 0 , 10
if = st N ,150
71 m y O W
ene ve(D
72 n e m y.mo id')
e ro
d('d
73 soun
74 }
75 )
ble'
76
}
( ' u nsta
song 17
77
 8 9 2 8 Can you land your toy on a floating platform?

Drone Pilot 1 fill('park3')

2 pad = stamp('pad',375,random(600,950))
3 bot = stamp('drone',380,0)
4 fall = 0
5 gravity = 1
6 thrust = 2
Watch out 7
8 function touching() {
below! 9 fall = fall - thrust
10 }
11
12 function loop() { THE NUMBER
ON THIS LINE
CODING ONWARD
13 fall = fall + gravity CONTROLS THE
SPEED OF THE See if you can make your
14 bot.move(DOWN,fall) PLATFORM
drone explode if it falls off
15 pad.move(LEFT,10) the screen.
16 pad.wrap()
17 if (bot.hits(pad)) {
18 loop = null
19 if (fall < 15) {
20 text('win!')
21 } else {
22 bot.explode()
23 }
24 }
25 }

BIG GRAVITY
This app shows how gravity works! Every loop, the speed of the
drone increases downward by a set amount. If you don't have
your engines on, you'll fall faster and faster—forever.
18
CREATIVE CODING CHALLENGES
Try coding these apps yourself!

CREATE A NEW APP WITH THIS NUMBER: CREATE A NEW APP WITH THIS NUMBER:

1 1 7 1 5 2 5 6

DRONE PROGRAMMER LAUNCH CONTROL

CHALLENGE Draw a park with a few trees CHALLENGE Make an app with a big button
and a small drone in its center. on the screen. When you push the button, a
rocket appears at the bottom of the screen.
BONUS 1 As you tap, draw blue lines that are
a path for the drone. BONUS 1 If you tap a second time, some text
Hint: Where in the World is Mr. X? appears that says: "READY!"

BONUS 2 Make the drone fly along the line to BONUS 2 Tap a third time, and the rocket
the spot where you tap. launches upward with an appropriate sound.

SOUNDS:
'drone' SOUND:
'park4' 'drone' 'tree5' 'bird' 'button wall' 'rocket4' 'rocket'

LAUNCH CONTROL: 1039

DRONE PROGRAMMER: 4275

these numbers to get some ideas!

Need a helping hand? Create new apps with

19
 …(& sounds & fills & songs) to make any app

e t h e s e your own! Just don’t forget to put single

Us ps…
quotes around them in your code, like this:

stam stamp('gear') sound('howl') fill('dirt') song('duet')

Songs
angelo
alarm badge bike block2 bot bottle3 car7 coin2
anger
china snow
country waltz
march
mercury
cone3 drone flag2 gem gull kat2 mag mummy polka
rock party
royal
skies

pic4 pin pot2 print rocket6 scroll virus

Fills
D S beach big ben city3 egypt gallery

UN spy inal
SO m
t e r s e c re t
to p
s
bot a viru ing
g rn
co n b o t w a
a n o
n
l i ce
po er
tt
ski north sea park3 rooftops sandstone spy phone

© 2015 Bitsbox. All rights reserved. Designed and printed in the U.S.A.
More stuff online
bitsbox.com
Look for more when you’re coding at bitsbox.com!