The tutorial can be found at http://michalbe.blogspot.com/2010/09/simple-game-with-html5-canvas-part-1.html. I’ve made only one real major change: Rather than using the mouse input (in his tutorial, onMouseMove), I’ve set it up to use keyboard events.

Play the final product: http://minalien.com/html5_jumper/
Compiled JavaScript/HTML/CoffeeScript Source: CoffeeScript Jumper Game

(Read On to get CoffeeScript Source)

state = true

# Player Class
class Player
	constructor: () ->
		@image = new Image()
		@image.src = "img/angel.png"
		@width = 65
		@height = 95
		@X = 0
		@Y = 0
		@frames = 1
		@curFrame = 0
		@interval = 0
		@jumping = false
		@falling = false
		@jumpSpeed = 0
		@fallSpeed = 0

	setPosition: (x, y) ->
		@X = x
		@Y = y

	draw: () ->
		try
			context.drawImage @image, 0, @height * @curFrame, @width, @height, @X, @Y, @width, @height
		catch e

		if @interval == 4
			if @curFrame == @frames
				@curFrame = 0
			else
				@curFrame++

			@interval = 0

		@interval++

	jump: () ->
		if !@jumping && !@falling
			@fallSpeed = 0
			@jumping = true
			@jumpSpeed = 17

	checkJump: () ->
		if @Y > height * 0.4
			@setPosition @X, @Y - @jumpSpeed
		else
			points++ if @jumpSpeed > 10

			MoveCircles @jumpSpeed * 0.5

			for platform, i in platforms
				do(platform, i) =>
					platform.Y += @jumpSpeed

					if(platform.Y > height)
						type = ~~(Math.random() * 5)
						if type is 0
							type = 1
						else
							type = 0

						platforms[i] = new Platform Math.random() * (width - platformWidth), platform.Y - height, type

		@jumpSpeed--;
		if @jumpSpeed == 0
			@jumping = false
			@falling = true
			@fallSpeed = 1

	checkFall: () ->
		if @Y < height - @height
			@setPosition @X, @Y + @fallSpeed
			@fallSpeed++
		else
			if points is 0
				@fallStop()
			else
				GameOver()

	fallStop: () ->
		@falling = false
		@fallSpeed = 0
		@jump()

	moveLeft: () ->
		if @X > 0
			@setPosition @X - 5, @Y

	moveRight: () ->
		if @X < (width - @width)
			@setPosition @X + 5, @Y

	update: () ->
		if @movingLeft
			@moveLeft()
		else if @movingRight
			@moveRight()

# Player Platform
class Platform
	constructor: (@X, @Y, @type) ->
		@X = ~~@X
		@moving = ~~(Math.random() * 2)
		@direction = if ~~(Math.random() * 2) then -1 else 1

		if @type is 1
			@firstColor = '#AADD00'
			@secondColor = '#698B22'
		else
			@firstColor = '#FF8C00'
			@secondColor = '#EEEE00'

	onCollide: () ->
		player.fallStop()

		if @type == 1
			player.jumpSpeed = 50

	draw: () ->
		context.fillStyle = 'rgba(255, 255, 255, 1)'
		gradient = context.createRadialGradient @X + (platformWidth / 2), @Y + (platformHeight / 2), 5, @X + (platformWidth / 2), @Y + (platformHeight / 2), 45
		gradient.addColorStop 0, @firstColor
		gradient.addColorStop 1, @secondColor
		context.fillStyle = gradient
		context.fillRect @X, @Y, platformWidth, platformHeight

# Keyboard Input
OnKeyDown = (evt) ->
	switch evt.keyCode
		# Left Arrow
		when 37 then player.movingLeft = true
		# Right Arrow
		when 39 then player.movingRight = true
		else break

OnKeyUp = (evt) ->
	switch evt.keyCode
		# Left Arrow
		when 37 then player.movingLeft = false
		# Right Arrow
		when 39 then player.movingRight = false
		else break

# Move the Player
window.addEventListener 'keydown', OnKeyDown, true
window.addEventListener 'keyup', OnKeyUp, true

# Generate Platforms
GeneratePlatforms = () ->
	pos = 0

	for zelda in [1..7]
		type = ~~(Math.random() * 5)

		if type is 0
			type = 1
		else
			type = 0

		platforms.push new Platform Math.random() * (width - platformWidth), pos, type

		if pos < height - platformHeight
			pos += ~~(height / numPlatforms)

# Clear the Canvas
Clear = () ->
	context.fillStyle = '#d0e7f9'
	context.beginPath()
	context.rect 0, 0, width, height
	context.closePath()
	context.fill()

# Draw "Clouds"
DrawCircles = () ->
	for circle in circles
		do(circle) =>
			context.fillStyle = 'rgba(255, 255, 255, ' + circle[3] + ')'
			context.beginPath()
			context.arc circle[0], circle[1], circle[2], 0, Math.PI * 2, true
			context.closePath()
			context.fill()

# Move "Clouds"
MoveCircles = (deltaY) ->
	for circle in circles
		do(circle) =>
			if circle[1] - circle[2] > height
				circle[0] = Math.random() * width
				circle[2] = Math.random() * 100
				circle[1] = -circle[2]
				circle[3] = Math.random() / 2
			else
				circle[1] += deltaY

# Check Collisions
CheckCollision = () ->
	for platform in platforms
		do(platform) =>
			if player.falling and (player.X < platform.X + platformWidth) and (player.X + player.width > platform.X) and (player.Y + player.height > platform.Y) and (player.Y + player.height < platform.Y + platformHeight)
				platform.onCollide()

# Game Over
GameOver = () ->
	state = false

	clearTimeout gLoop

	setTimeout GameOverLoop, 100

# Game Over Loop
GameOverLoop = () ->
	Clear()
	context.fillStyle = "Black"
	context.font = "10pt Arial"
	context.fillText "GAME OVER", width / 2 - 60, height / 2 - 50
	context.fillText "YOUR RESULT: " + points, width / 2 - 60, height / 2 - 30

# Game Loop
GameLoop = () ->
	Clear()
	DrawCircles()

	player.checkJump() if player.jumping
	player.checkFall() if player.falling

	for platform, i in platforms
		do(platform, i) =>
			if platform.moving
				if platform.X < 0
					platform.direction = 1
				else if platform.X > width - platformWidth
					platform.direction = -1

				platform.X += platform.direction * (i / 2) * ~~(points / 100)

		platform.draw()

	CheckCollision()

	player.update()
	player.draw()

	context.fillStyle = "Black";
	context.fillText "POINTS: " + points, 10, height - 10

	if state is true
		gLoop = setTimeout GameLoop, 1000 / 50

## Game Code
# Game Canvas Setup
width = 320
height = 500
canvas = document.getElementById 'gameCanvas'
context = canvas.getContext '2d'

canvas.width = width
canvas.height = height

# Game Setup
gLoop = 0
points = 0

howManyCircles = 10
circles = []

circles.push([Math.random() * width, Math.random() * height, Math.random() * 100, Math.random() / 2]) for i in [1..howManyCircles]

numPlatforms = 7
platforms = []
platformWidth = 70
platformHeight = 20

player = new Player()
player.setPosition ~~((width - player.width) / 2), ~~((height - player.height) / 2)
player.jump()

GeneratePlatforms()

# Begin
GameLoop()