Happy Fun Coding

Home
Tutorials
Code
Help
Art

Welcome to Happy Fun Coding!

... a site to learn to program games in Javascript.

No software to install.
Lots of video tutorals.
Community programming -- easy to learn from and help others.
Embed your creations on your own web pages.

NEW VERSION 2.0 as of 23 Sep 2011!

I have fully re-implemented HFC with a new interface, new server, etc.
There's probably bugs to be found. Please email them to me zack -AT- mine-control.com
New Features:

All new organization to the UI
Syntax highlighting!
New size() function lets you change the size of the canvas
Cut and paste URL to share programs

Featured

Flinky by zack
Red flashlight by rcorell
Spinner by kdemarest
Bouncing balls by zack
Mandlebrot by zack
Stars by zack
Flinky 2 by zack
Orbits by zack
1D Cellulat Automata by dan
Swarm by zack
Mouse effect by jasonmgrigsby

Video Tutorials

Note, these videos were taken with a previous version of Happy Fun Coding. The screen layout has changed somewhat. The main content of the videos is unchanged.

I suggest switching youtube into "480p" mode by clicking on the bottom where it says "360p" and then going into full screen mode.

Tutorial #1: Hello world	Tutorial #2: Variables and animation
Tutorial #3: Function calls	Tutorial #4: Twiddlers
Tutorial #5: If statements	Tutorial #6: While loops
Tutorial #7: Operators	Tutorial #8: For loops
Tutorial #9: Arrays	Tutorial #10: Array example
Tutorial #11: Manipulating Strings	Tutorial #12: Strokes and fills
Tutorial #13: An example putting it all together

Current program: Un-named by Login to save How to embed

Start code editor

Loop code editor

Canvas pause snapshot svg FPS:

Twiddlers Move this panel to side of canvas

Basic drawing

align(align="left",baseline="top")	set text alignment left\|right\|center and baseline top\|hanging\|middle\|alphabetic\|bottom
arc(x,y,r,a0,a1,c=false)	arc center (x,y) with (r)adius from angle a0-a1 with anticlockwise spin c (boolean)
box(x,y,w,h)	draw a box outline from x, y with (w)idth and (h)eight
cenX()	horizontal center od canvas (width / 2)
cenY()	vertical center of canvas (height / 2)
circle(x,y,r)	draw circle centered at x, y with radius r using stroke
clear(r=1,g=1,b=1)	clear the canvas
disc(x,y,r)	draw circle centered at x, y with radius r using fill
fill(r=0,g=0,b=0,a=1)	draw with a fill of (r)ed, (g)reen, (b)lue, and (a)lpha
font(size=20,name="Calibri")	set font and size
gradient(x0,y0,x1,y1)	linear gradient from (x0,y0) to (x1,y1)
gradientRadial(x0,y0,r0,x1,y1,r1)	radial gradient from (x0,y0) radius r0 to (x1,y1) radius r1
gradientAddColor(p,r,g,b)	add a color p percent along the gradient with color (r,g,b)
height()	height of the play area
image(url,x,y)	draw image loaded from url at x, y
image(url,x,y,w,h)	draw image loaded from url at x, y with (w)idth and (h)eight
image(url,x,y,w,h,sx,sy,sw,sh)	draw image loaded from url at x, y with (w)idth and (h)eight sampling from sx,sy with width sw and height sh
imageWidth(url)	width of image
imageHeight(url)	height of image
line(x0,y0,x1,y1)	draw a line from (x0,y0) to (x1,y1)
rect(x,y,w,h)	draw a filled rect from x, y with (w)idth and (h)eight
shadow(x,y,blur=2,r=0,g=0,b=0)	draw shadows at offset x,y with blur and color r,g,b
size(w,h)	size the canvas to (w)idth and (h)eight
stroke(w=1, r=0, g=0, b=0, a=1, cap="butt", join="miter")	set line stroke to (w)idth, (r)ed, (g)reen, (b)lue, and (a)lpha with cap=butt\|square\|round and join=round\|bevel\|miter
strokeText(s,x=0,y=0)	outline text string s at (x,y)
text(s,x=0,y=0)	print text string s at (x,y)
width()	width of the play area

Paths

pathArc(x,y,r,a0,a1,antiClock=false)	arc center (x,y) with (r)adius from angle a0 to a1 with antiClock flag
pathBegin()	begin path
pathBezierTo(cx0,cy0,cx1,cy1,x,y)	bezier using control points cx0,cy0 and cx1,cy1 to x,y
pathClose()	close a path (forms a closed polygon)
pathCurveTo(cx,cy,x,y)	quadratic curve using control point cx, cy to x, y
pathFill()	fill a closed polygon using current fill() options
pathLineTo(x,y)	draw line from current vertex to x, y
pathMoveTo(x,y)	move the path pen to x, y
pathStroke()	stroke along the path using current stroke() options

Transforms

identity()	reset the transform
popState()	pop the transform state
pushState()	push the transform state
project(x,y)	project from world to screen space
rotate(a)	rotate by a radians
scale(x)	uniform scale drawing by x
scale(x,y)	scale drawing by x, y
translate(x,y)	move drawing center by x,y
unproject(x,y)	unproject from screen to world space
window(x0,y0,x1,y1)	set the viewport to upper-left (x0,y0) and lower-right (x1,y1). Note, scales stroke appropriately.

Matricies sylvester.js

$M([[],[]])	create matrix from nested arrays
$V([])	create vector from array
Much more, see Sylvester docs

Math

abs(x)	absolute value of x
acos(x)	arc cosine of x
asin(x)	arc sine of x
atan(x)	arc tangent of x
atan2(y,x)	arc tangent of y by x triangle
ceil(x)	x rounded to next integer
cos(x)	cosine of x
distance(x0,y0,x1,y1)	distance between points (x0,y0) and (x1,y1)
e()	constant e
exp(x)	e ^ x
floor(x)	x rounded down to the next integer
log(x)	natural log of x
max(a,b,...)	maximum value of a list
min(a,b,...)	minimum value of a list
pi()	constant pi
pi2()	constant 2 * pi
pow(x,y)	x ^ y
rand(n=1)	random real between 0 - n
rand(m=0,n=1)	random real between m - n
randi(n=2)	random integer between 0 - n-1
randi(m=0,n=2)	random integer between m - n-1
round(x)	rounds x to nearest integer
sin(x)	sine of x
sqrt(x)	square root of x
tan(x)	tangent of x

Events & I/O

delay(n)	delay n milliseconds
keyDown()	returns down key or null. (Note, only one key can be down at a time)
mouseDown()	true if mouse is down
mouseX()	x position of mouse (top left = 0,0)
mouseY()	y position of mouse (top left = 0,0)
time()	milliseconds since Jan 1, 1970

This panel lets you browse and add art that may be used by your programs.
For example, you might upload a picture call it "ball" and then use the image("ball") call on the code panel.