Make your own Print & Play card game using SVG and JavaScript

Make
your
own
Print
&
Play
card

game
using
SVG
and
JavaScript

Kevin
Hakanson

5
April
2014

Abstract

Want
to
leverage
your
creaDvity,
love
of
board
games,
and
web
plaGorm
experience
to
do

something
diﬀerent?

Turn
your
imaginaDon
into
a
Print
&
Play
card
game
using
only
a
modern

web
browser,
color
printer
and
text
editor.

This
session
will
use
the
Scalable
Vector
Graphics
(SVG)
image
format
and
JavaScript

programming
language
to
make
a
deck
of
cards
for
a
simple
game.

CreaDng
a
few
cards
in

graphics
soSware
like
Inkscape
is
one
thing,
but
what
about
50
or
100
cards?

What
happens

when
you
need
to
update
them
all?

That’s
the
value
of
generaDng
your
SVG
using
JavaScript.

We
will
start
with
a
blank
screen,
adding
color
and
graphics
elements
like
lines,
shapes,
text
and

images.

Learn
about
container
elements
and
deﬁning
content
for
re-‐use.

Understand
how
units

in
the
SVG
coordinate
system
can
transform
our
on-‐screen
creaDon
into
an
8.5
by
11
inch
printed

page
(or
PDF).

SVG
examples
will
be
both
in
their
naDve
XML
format
and
created
from
JavaScript

using
Snap.svg,
an
open
source
library
from
Adobe
designed
for
modern
web
browsers.

You
will
leave
this
session
with
a
basic
knowledge
of
SVG
concepts,
how
to
programmaDcally

generate
SVG
using
JavaScript,
and
how
to
make
your
SVG
creaDon
printer
friendly.

TL;DR

•  Print
&
Play
Card
Game

– Scalable
Vector
Graphics
(SVG)

– JavaScript

– Snap.svg

– 8.5
by
11
PrinDng

Kevin
Hakanson

@hakanson

#tccc16

kevin.hakanson@gmail.com

+KevinHakanson

hep://stackoverﬂow.com/users/22514/kevin-‐hakanson

heps://github.com/hakanson

Bio

Kevin
Hakanson
is
an
applicaDon
architect
for

Thomson
Reuters
where
he
is
focused
on
highly

scalable
web
applicaDons,
especially
the
JavaScript

and
security
aspects.
His
background
includes

both
.NET
and
Java,
but
he
is
most
nostalgic
about

Lotus
Notes.
He
has
been
developing
professionally

since
1994
and
holds
a
Master’s
degree
in
SoSware

Engineering.
When
not
staring
at
a
computer

screen,
he
is
probably
staring
at
another
screen,

either
watching
TV
or
playing
video
games
with
his

family.

Make your own Print & Play card game using SVG and JavaScript

Fluxx
Blanxx

•  Add
your
own
zany
ideas

•  Each
pack
contains
one
of
each

of
the
ﬁve
card
types

•  Cards
are
"halfway-‐blank"
with

standard-‐issue
text
and
the

stripe
of
color

•  Just
grab
your
trusty

permanent
marker
and

customize
the
fun!

hep://store.looneylabs.com/Fluxx-‐Blanxx

Print
&
Play

•  “Print
&
Play
games
are
those
which
are
oSen

free
to
any
player
who
wishes
to
print
them

oﬀ
themselves.
Many
are
available
on
the

Internet.”

–  hep://boardgamegeek.com/boardgamecategory/1120/print-‐play

•  Print
&
Play
games
Boardgamegeek
wiki
entry:

–  hep://boardgamegeek.com/wiki/page/Print_and_Play_Games

Azure
Fluxx

•  Version
of
Fluxx
based
in
the
Window
Azure

“universe”:

– SoSware
Development

– MicrosoS
Products

– Web
Technologies

Fair
Use?

•  Fluxx
Copyright
Looney
Labs

•  Same
card
types

•  Same
basic
gameplay
and
rules
wording

•  Similar,
but
not
exact,
colors
and
artwork

•  Diﬀerent
fonts

•  Diﬀerent
physical
card
size
and
deck
count

Goals
and
Keepers

•  Goals

–  Old
School

–  New
School

–  Single
Page
App

–  Polyglot

–  Web
PlaGorm

–  Tool
Master

–  .NET
PlaGorm

–  Entry
Level

–  Mistaken
IdenDty

–  Selectors

–  Transpile

–  Odd
Couple

–  Double
MVC

–  Intellisense

–  Edge.js

–  UI
Bootstrap

•  Keepers

Scalable
Vector
Graphics
(SVG)

•  Text-‐based
graphics
language
that
describes

images
with
vector
shapes,
text,
and

embedded
raster
graphics.

•  SVG
ﬁles
provide
resoluDon
independent,
high

resoluDon
dots
per
inch
(HiDPI)
graphics
on

the
web,
in
print,
and
on
mobile
devices
in
a

compact
format.

hep://www.adobe.com/devnet/svg.html

SVG
EssenDals

“This
insighGul
book
takes
you
through
the

ins
and
outs
of
SVG,
from
the
basics
to

more
complicated
features.”

hep://commons.oreilly.com/wiki/index.php/SVG_EssenDals

SVG
Primer

“The
book
aeempts
to
discuss
SVG
in

broader
terms,
but
at
the
same
Dme
to

illustrate
how
one
can
write
JavaScript

programs
that
use
and
manipulate
SVG.”

hep://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html

Snap.svg

“the
JavaScript
SVG
library
for
the
modern
web”

“makes
working
with
your
SVG
assets
as
easy
as

jQuery
makes
working
with
the
DOM”

hep://snapsvg.io/

The
svg
Element

•  <svg>
is
both
root
element
and
used
to
nest

standalone
SVG
fragments

•  Each
standalone
fragment
has
its
own

viewPort
and
coordinate
system

Grouping
and
Reusing

“The
<use>
(reuse)
and
<g>
(or
group)

tags
bear
similarity
to
the
variables
and

objects
encountered
in
programming

languages.”

hep://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#operaDons

The
g
Element

•  Gathers
child
elements
into
a
group

•  Uses
id
aeribute
to
give
a
unique
name

•  Can
have
<title>
and
<desc>

•  Styles
apply
to
child
elements

•  Can
nest
groups
within
one
another

<g>
XML
Example

<g
id="plus"

opacity=".4"

stroke="black"

stroke-‐width="0.1">

<path
d="M
-‐3
0
H
3
M
0
-‐3
V
3"
/>

</g>

The
defs
Element

•  Puxng
grouped
objects
inside
of
<defs>
tells

SVG
to
deﬁne
them
without
displaying
them

•  SVG
recommendaDon
is
to
put
all
objects

intended
for
re-‐use
inside
<defs>

<defs>
JavaScript
Example

var
plus
=
svg.g(

svg.path("M
-‐3
0
H
3
M
0
-‐3
V
3")

);

plus.attr({id:"plus",

opacity:"0.4",

stroke:"black",

"stroke-‐width":"0.1"});

plus.toDefs();

The
symbol
Element

•  <symbol>
element
provides
another
way
of

grouping
elements

•  Never
displayed,
so
don't
have
to
enclose
it
in

<defs>
but
customary
to
do
so

•  <symbol>
can
specify
viewBox
and

preserveAspectRatio
aeributes

The
use
Element

•  “copy-‐and-‐paste”
of
a
deﬁned
group

•  Specify
with
an
xlink:href
aeribute

•  Specify
the
x
and
y
locaDon
for
the

group's
(0,
0)
point

<use>
XML
Example

<g
id="pluscolumn">

<use
xlink:href="#plus"
y="7.7"
/>

<use
xlink:href="#plus"
y="95.7"
/>

<use
xlink:href="#plus"
y="183.7"
/>

<use
xlink:href="#plus"
y="271.7"
/>

</g>

<g
id="pluses">

<use
xlink:href="#pluscolumn"
x="12.7"
/>

<use
x="76.2"
/>

<use
x="139.7"
/>

<use
x="203.2"
/>

</g>

<use>
JavaScript
Example

//
width:
63.5,
height:
88

var
xstops
=
[12.7,
76.2,
139.7,
203.2];

var
ystops
=
[7.7,
95.7,
183.7,
271.7];

pages.forEach(function
(page)
{

ystops.forEach(function
(y)
{

xstops.forEach(function
(x)
{

var
p
=
plus.use().attr({
x:
x,
y:
y
});

page.append(p);

});

});

});

The
rect
Element

•  Specify
x-‐
and
y-‐coordinates
of
the
upper
leS

corner,
width,
and
height

– 
x,
y,
width
and
height
aeributes

•  Interior
is
ﬁlled
with
a
ﬁll
color
(default
black)

•  Outline
is
drawn
with
strokes
(default
none)

<rect
x="0"
y="0"

width="10"
height="10"
fill="black"/>

The
circle
Element

•  Specify
center
x-‐coordinate,
center
y-‐
coordinate,
and
radius

– 
cx,
cy,
and
r
aeributes

•  Interior
is
ﬁlled
with
a
ﬁll
color
(default
black)

•  Outline
is
drawn
with
strokes
(default
none)

<circle
cx="5"
cy="5"
r="3.5"

fill="white"
stroke-‐width="0"
/>

The
ellipse
Element

•  Like
<circle>,
specify
center
x-‐coordinate,

center
y-‐coordinate

•  Also
needs
an
x-‐radius
and
a
y-‐radius

– aeributes
for
these
radii
are
named
rx
and
ry

<ellipse
cx="4"
cy="4"

rx="0.25"
ry="0.5"
/>

The
line
Element

•  Specify
the
x-‐
and
y-‐coordinates
of
the
line's

endpoints

– 
x1,
y1,
x2
and
x2
aeributes

The
path
Element

•  Draws
the
outline
of
any
arbitrary
shape
by

specifying
a
series
of
connected
lines,
arcs,
and

curves

•  Must
begin
with
a
moveto
command

•  Followed
by
one
or
more
lineto
commands

•  Arc
draws
a
secDon
of
an
ellipse
that
connects

two
points

<path
fill="none"
stroke-‐linecap="round"

d="M
3.5
6.75
a
1.5,1.5
0
1
1
3
0"
/>

svg.rect(0,
0,
10,
10);

var
frown
=
svg.g()

.attr({
id:
"frown",
stroke:
"black",

fill:
"black",
"stroke-‐width":
0.5
});

frown.append(svg.circle(5,
5,
3.5)

.attr({
fill:
"white",
"stroke-‐width":
0
}));

frown.append(svg.ellipse(4,
4,
0.25,
0.5));

frown.append(svg.ellipse(6,
4,
0.25,
0.5));

frown.append(svg.path("M
3.5
6.75
C
4
5
6
6
6.5
7")

.attr({
fill:
"none",

"stroke-‐linecap":
"round"
}));

The
transform
Aeribute

•  matrix(<a>
<b>
<c>
<d>
<e>
<f>)

•  translate(<x>
[<y>])

•  scale(<x>
[<y>])

•  rotate(<a>
[<x>
<y>])

•  skewX(<a>)

•  skewY(<a>)

heps://developer.mozilla.org/en-‐US/docs/Web/SVG/Aeribute/transform

How-‐To
Make
a
Keeper

<symbol>

How-‐To
Make
a
Keeper

<symbol>

<text>

How-‐To
Make
a
Keeper

<symbol>

<text>

<rect>

How-‐To
Make
a
Keeper

<symbol>

<text>

<rect>

<image>

The
text
Element

•  <text>
requires
only
two
aeributes,
x
and
y

•  Default
style
is
to
have
a
ﬁll
color
of
black
and

no
outline

•  font-‐family,
font-‐size,
font-‐weight,
font-‐style,

text-‐decoraDon,
word-‐spacing,
leeer-‐spacing

•  “SVG
performs
no
automaDc
line
breaking
or

word
wrapping”

hep://www.w3.org/TR/SVG11/text.html#IntroducDon

<text>
XML
Example

<g
text-‐anchor="start"

font-‐size="3.5"

letter-‐spacing="-‐0.05">

<text
x="15"
y="18">To
play
this
card,
place
it
face</text>

<text
x="15"
y="22.375">up
on
the
table
in
front
of
you.</text>

</g>

The
image
Element

•  <image>
element
includes
an
enDre
SVG
or

raster
ﬁle
(JPEG
or
PNG)

•  x,
y,
width,
and
height
aeributes

<image
xlink:href="images/JavaScript-‐logo.png"

preserveAspectRatio="meet"
x="22"
y="48"
width="30"

height="30"
/>

<image>
XML
Example

<image


x="22"

y="48"

width="30"

height="30"

preserveAspectRatio
="meet"
/>

<image>
JavaScript
Example

s.image(

"images/JavaScript-‐logo.png",

22,

48,

30,

30)

.attr({
"preserveAspectRatio":"meet"
})

SVG
1.1
Text

Each
<text>
element
causes
a
single
string
of

text
to
be
rendered.
SVG
performs
no
automaDc

line
breaking
or
word
wrapping

hep://www.w3.org/TR/SVG11/text.html#IntroducDon

SVG
Tiny
1.2

•  The
<textArea>
element
allows
simplisDc

wrapping
of
text
content

•  The
<tbreak>
element
is
an
empty
element

that
forcibly
breaks
the
current
line
of
text

•  The
line-‐increment
property
provides

limited
control
over
the
size
of
each
line

SVG
1.2

•  Scalable
Vector
Graphics
(SVG)
Full
1.2

SpeciﬁcaDon

– W3C
Working
DraS
13
April
2005

hep://www.w3.org/TR/SVG12/

•  “The
next
draS
of
SVG
1.2
Full
will
structured

as
a
superset
of
the
SVG
1.2
Tiny
language”

•  “At
this
Dme
the
refactored
SVG
1.2
Full

speciﬁcaDon
is
not
ready
for
publicaDon.”

snapdeck.textArea
=
function
(s,
x,
y,
width,
textToWrap,
attr)
{

if
(!textToWrap)
return;

attr
=
SnapDeck.defaultAttr(attr,
{
"text-‐anchor":
"start",
"font-‐size":
3.5,
"letter-‐spacing":
-‐.05,
"line-‐spacing":
0,
"paragraph-‐
spacing":
0
});

var
fontSize
=
attr["font-‐size"];

width
=
width
*
(fontSize
/
3);

var
yDelta
=
(fontSize
*
1.25)
+
attr["line-‐spacing"];

var
tmpSvg,
tmpRoot
=
deck.svg.g().attr(attr).toDefs();

var
g
=
s.g().attr(attr);

var
line
=
"",
tmpLine
=
"",
linecount
=
0;

var
texts
=
textToWrap.split("n");

texts.forEach(function
(text)
{

var
words
=
text.split("
");

words.forEach(function
(word)
{

if
(line)
{

tmpLine
=
line
+
"
"
+
word;

tmpSvg
=
tmpRoot.text(0,
0,
tmpLine);

if
(tmpSvg.node.getBoundingClientRect().width
>
width)
{

g.text(x,
y,
line);

y
=
y
+
yDelta;

linecount++;

line
=
tmpLine
=
word;

}
else
{

line
=
line
+
"
"
+
word;

}

tmpSvg.remove();

}
else
{

line
=
word;

}

});

g.text(x,
y,
line);

y
=
y
+
yDelta
+
attr["paragraph-‐spacing"];

linecount++;

line
=
tmpLine
=
"";

});

tmpRoot.remove();

return
g;

};

Chrome
Zoom

100%
150%
200%

snap.deck.js

(function(window)
{

function
Deck(cardCount)
{

//
...

this.svg
=
Snap("8.5in",
(pageCount
*
11)
+
"in")

.attr({
id:
"SnapDeck",
style:
"display:
block;"
});

this.pages
=
[];

this.cards
=
[];

//
...

}

snapdeck.deck
=
function
(cards)
{

return
new
Deck(cards);

};

window.SnapDeck
=
snapdeck;

})(window);

Len
Peralta’s
Geek
A
Week

@hakanson
Card

•  Mimic
look
from
the

Geek
A
Week
series

•  InformaDon
and
images

from
Twieer
biography

•  “More
cool”
than
a

business
card

var
s
=
Snap("460",
"640")

.attr({
"viewBox":
"0
0
63.5
88",

"font-‐family":"sans-‐serif"
});

SnapDeck.pinwheel(s,
31.75,
44,
55,
120,

"firebrick",
"maroon");

Pinwheel

•  120
rays

•  ﬁrebrick

•  maroon

snapdeck.pinwheel
=
function
(s,
cx,
cy,
cr,
count,
background,
foreground)

{

var
c
=
s.circle(cx,
cy,
cr);

c.attr({
"stroke-‐width":
0,
"fill":
background
});

var
deg
=
360
/
count;

var
offset
=
-‐deg
/
2;

for
(var
i
=
0;
i
<
count
/
2;
i++)
{

var
start
=
"M
"
+
cx
+
"
"
+
cy;

var
rad
=
(2
*
i
*
deg
+
offset)
*
(Math.PI
/
180);

var
x
=
cx
+
(Math.cos(rad)
*
cr);

var
y
=
cy
+
(Math.sin(rad)
*
cr);

var
first
=
"
L
"
+
x
+
"
"
+
y;

rad
=
(2
*
i
*
deg
+
deg
+
offset)
*
(Math.PI
/
180);

x
=
cx
+
(Math.cos(rad)
*
cr);

y
=
cy
+
(Math.sin(rad)
*
cr);

var
second
=
"
A
"
+
cx
+
"
"
+
cy
+
"
0
0
1
"
+
x
+
"
"
+
y;

s.path(start
+
first
+
second
+
"
Z").attr({
"fill":
foreground
});

}

return
s;

};

var
s
=
Snap("460",
"640")

.attr({
"viewBox":
"0
0
63.5
88",

});

31.75,
44,
55,
120,

"firebrick",
"maroon");

s.rect(3,
3,
57.5,
75,
0.5,
0.5)

.attr({
"fill":
"red"
});

s.rect(56,
1.25,
6,
5.5,
0.5,
0.5)

.attr({
"fill":
"red"
});

s.rect(56.5,
2,
5,
4.25,
0.25,
0.25)

.attr({
"fill":
"black",
"opacity":
0.85
});

s.rect(56.5,
1.75,
4.75,
4.25,
0.25,
0.25)

.attr({
"fill":
"yellow",
"opacity":
0.9
});

s.text(59,
5,
"#1").attr({
"text-‐anchor":
"middle",
"font-‐size":

3.5,
"fill":
"black",
"font-‐weight":
"bold"
});

s.rect(56,
1.25,
6,
5.5,
0.5,
0.5)

.attr({
"fill":
"red"
});

s.rect(56.5,
2,
5,
4.25,
0.25,
0.25)

.attr({
"fill":
"black",
"opacity":
0.85
});

s.rect(56.5,
1.75,
4.75,
4.25,
0.25,
0.25)

.attr({
"fill":
"yellow",
"opacity":
0.9
});

s.text(59,
5,
"#1").attr({
"text-‐anchor":
"middle",
"font-‐size":

3.5,
"fill":
"black",
"font-‐weight":
"bold"
});

s.image("images/Twitter_logo_blue.png",
6,
71,
14,
14);

s.rect(56,
1.25,
6,
5.5,
0.5,
0.5)

.attr({
"fill":
"red"
});

s.rect(56.5,
2,
5,
4.25,
0.25,
0.25)

.attr({
"fill":
"black",
"opacity":
0.85
});

s.rect(56.5,
1.75,
4.75,
4.25,
0.25,
0.25)

.attr({
"fill":
"yellow",
"opacity":
0.9
});

s.text(59,
5,
"#1").attr({
"text-‐anchor":
"middle",
"font-‐size":

3.5,
"fill":
"black",
"font-‐weight":
"bold"
});

6,
71,
14,
14);

s.text(60,
82,
"Kevin
Hakanson").attr({
"text-‐anchor":
"end",

"font-‐size":
4.5,
"fill":
"white",
"font-‐weight":
"bold"
});

s.text(60,
86,
"@hakanson")

.attr({
"text-‐anchor":
"end",

"font-‐size":
3.5,
"fill":
"white"
});

s.rect(11.5,
7.5,
40,
40,
0.5,
0.5)

.attr({
"fill":
"white"
});

s.image("images/hakanson.png",
12,
8,
39,
39);

s.rect(11.5,
7.5,
40,
40,
0.5,
0.5)

.attr({
"fill":
"white"
});

12,
8,
39,
39);

var
bioAttr
=
{
"text-‐anchor":
"middle",

"font-‐size":
2.75,
"fill":
"white"
};

s.text(31.75,
52,

"Software
Architect
at
Thomson
Reuters.")

.attr(bioAttr);

s.text(31.75,
56,

"WestlawNext.
Web
Platform.
JavaScript.")

.attr(bioAttr);

s.text(31.75,
60,

"Agile
Software
Development.").attr(bioAttr);

s.text(31.75,
64,

"Information
Security.
Speaker.").attr(bioAttr);

s.text(31.75,
68,
"Creator
@LicPlateZone").attr(bioAttr);

s.rect(11.5,
7.5,
40,
40,
0.5,
0.5)

.attr({
"fill":
"white"
});

12,
8,
39,
39);

var
bioAttr
=
{
"text-‐anchor":
"middle",

"font-‐size":
2.75,
"fill":
"white"
};

s.text(31.75,
52,

"Software
Architect
at
Thomson
Reuters.")

.attr(bioAttr);

s.text(31.75,
56,

"WestlawNext.
Web
Platform.
JavaScript.")

.attr(bioAttr);

s.text(31.75,
60,

"Agile
Software

s.text(31.75,
64,

"Information
Security.

s.text(31.75,
68,
"Creator

s.text(56,
74,
"http://about.me/kevin.hakanson")

.attr({
"font-‐size":
2.5,
"text-‐anchor":
"end",

"fill":
"lightskyblue"
});

Make your own Print & Play card game using SVG and JavaScript

Recommended

More Related Content

What's hot (14)

Similar to Make your own Print & Play card game using SVG and JavaScript (20)

More from Kevin Hakanson (11)

Recently uploaded (20)

Make your own Print & Play card game using SVG and JavaScript