script.js
tick = 0
show_text = true
timerVar = {}
obj = ->
self.rocket_fuel = 4000
self.thrust = 30
self.thrust_direction = 0.00
self.jet_fuel = 4000
self.jet_duration = 8
self.jet_left_tick = 0
self.jet_right_tick = 0
self.x = 210
self.y = 100
self.top = 0
self.bottom = 0
self.update = ->
self.x += 0.1 # wind
self.y += 2 # gravity
if self.jet_left_tick > 0
self.jet_left_tick -= 1
if self.jet_right_tick > 0
self.jet_right_tick -= 1
self.reset = ->
self.x = 210
self.y = 100
self.thrust_direction = 0.00
# will optimize this bullshit.
self.update_thrust_direction = (dir) ->
ext = 6.9
if -ext <= self.thrust_direction <= ext
self.thrust_direction += (dir * 0.7)
else
self.thrust_direction = ext if self.thrust_direction > ext
self.thrust_direction = -ext if self.thrust_direction < -ext
self.update_jet_direction = (dir) ->
if dir == -1
self.jet_left_tick = self.jet_duration
else
self.jet_right_tick = self.jet_duration
self
rocket = obj()
color = (r,g,b) -> 'rgb(' + [r, g, b].toString() + ')'
colorA = (r,g,b,a) -> 'rgba(' + [r, g, b, a].toString() + ')'
drawPolygonStroke = (ctx, loc, coords, col, lw) ->
ctx.strokeStyle = col
ctx.beginPath()
ctx.lineWidth = lw
ctx.moveTo(coords[0].x + loc.x, coords[0].y + loc.y)
for i in [1...coords.length]
ctx.lineTo(coords[i].x + loc.x, coords[i].y + loc.y)
ctx.stroke()
drawPolygonFill = (ctx, loc, coords, col) ->
ctx.fillStyle = col
ctx.beginPath()
ctx.moveTo(coords[0].x + loc.x, coords[0].y + loc.y)
for i in [1...coords.length]
ctx.lineTo(coords[i].x + loc.x, coords[i].y + loc.y)
ctx.fill()
DrawRocket = (ctx, obj) ->
# bg...tricolor
sections = [
{ start: 2, end: 32, col: color(115, 115, 115)}
,
{ start: 32, end: 52, col: color(175, 175, 175)}
,
{ start: 52, end: 82, col: color(105, 105, 105)}
]
ctx.lineWidth = 6
for s in sections
ctx.strokeStyle = s.col
ctx.beginPath()
ctx.moveTo(obj.x, obj.y + s.start)
ctx.lineTo(obj.x, obj.y + s.end)
ctx.stroke()
w = 3
# draw gradient
grd = ctx.createLinearGradient(obj.x - w, 0, obj.x + w,0)
grd.addColorStop(0, colorA(47, 47, 47, 0.5))
grd.addColorStop(1, colorA(147, 147, 147, 0.8))
ctx.fillStyle = grd
ctx.fillRect(obj.x - w, obj.y, 2*w, 80)
ctx.strokeStyle = color(155, 155, 155)
ctx.beginPath()
ctx.lineWidth = 1
# start bottom left, up, over, down, bottom
ctx.moveTo(obj.x - w, obj.y + 80)
ctx.lineTo(obj.x - w, obj.y + 10)
ctx.lineTo(obj.x - (w - 1), obj.y + 1)
ctx.lineTo(obj.x, obj.y)
ctx.lineTo(obj.x + (w - 1), obj.y + 1)
ctx.lineTo(obj.x + w, obj.y + 10)
ctx.lineTo(obj.x + w, obj.y + 80)
ctx.moveTo(obj.x - 12, obj.y + 93)
ctx.lineTo(obj.x - w, obj.y + 80)
ctx.lineTo(obj.x + w, obj.y + 80)
ctx.lineTo(obj.x + 12, obj.y + 93)
ctx.moveTo(obj.x - 12, obj.y + 93)
ctx.lineTo(obj.x - w, obj.y + 70)
ctx.moveTo(obj.x + 12, obj.y + 93)
ctx.lineTo(obj.x + w, obj.y + 70)
ctx.stroke()
# thrust
coords = [{x: -w, y: 80}, {x:obj.thrust_direction,y:110}, {x:w,y:80}]
drawPolygonFill(ctx, {x: obj.x, y: obj.y}, coords, color(255, 188, 92))
draw_angled = (x_start, y_start, theta, jet_tick) ->
col = color(225,225,225)
x_dest = Math.cos(theta) * jet_tick * 1.3
y_dest = Math.sin(theta) * jet_tick * 1.3
coords = [{x:0, y:0}, {x:x_dest, y:y_dest}]
drawPolygonStroke(ctx, {x: x_start, y: y_start}, coords, col, 2)
draw_angled(obj.x - w, obj.y + 7, Math.PI + 0.4, rocket.jet_left_tick)
draw_angled(obj.x + w, obj.y + 7, -0.4, rocket.jet_right_tick)
ctx.lineWidth = 1
# left darkest Stroke
ctx.strokeStyle = color(30,30,30)
ctx.beginPath()
ctx.moveTo(obj.x - w, obj.y + 80)
ctx.lineTo(obj.x - w, obj.y + 10)
ctx.lineTo(obj.x - (w-1), obj.y + 1)
ctx.stroke()
drawBg = (ctx) ->
grd = ctx.createLinearGradient(0,0,0,600)
grd.addColorStop(0, color(117, 122, 142))
grd.addColorStop(0.41, color(110, 122, 145))
grd.addColorStop(0.45, color(90, 102, 135))
grd.addColorStop(1, color(28, 43, 98))
ctx.fillStyle = grd
ctx.fillRect(0,0,600,600)
DrawComedyGold = (ctx, location, msg) ->
textColor = '#efefef'
textSize = "32"
fontFace = "Open Sans"
ctx.textAlign = 'center'
ctx.fillStyle = textColor
ctx.font = textSize + "px " + fontFace
ctx.fillText(msg, location.x, location.y)
DrawBarge = (ctx) ->
gamma = Math.PI*2/300 * tick
x = 250 + Math.sin(gamma) * 2
y = 510 + Math.sin(gamma) * 3
w = 39
ctx.fillStyle = color(42, 42, 42)
ctx.beginPath()
ctx.moveTo(x - w, y)
ctx.lineTo(x - (w+4), y + 18)
ctx.lineTo(x + (w+4), y + 18)
ctx.lineTo(x + w, y)
ctx.fill()
ctx.fillStyle = color(22, 22, 72)
ctx.beginPath()
ctx.moveTo(x - w, y + 18)
ctx.lineTo(x - (w-4), y + 23)
ctx.lineTo(x + (w-4), y + 23)
ctx.lineTo(x + w, y + 18)
ctx.fill()
coords = []
theta = Math.PI * 2 / 23
for j in [0..23]
coords.push({x: Math.sin(theta*j) * 26, y: Math.cos(theta*j) * 6})
drawPolygonStroke(ctx, {x: x+0, y: y+9}, coords, color(150, 150, 60), 1)
Draw = (ctx) ->
drawBg(ctx)
DrawBarge(ctx)
DrawRocket(ctx, rocket)
rocket.update()
tick += 1
if tick > 300
tick = 0
if tick > 23
show_text = false
if show_text
DrawComedyGold(ctx, {x:300, y:60}, 'R T F M!')
removeTimer = ->
rocket.reset()
window.clearInterval timerVar
addTimer = (ctx) ->
removeTimer() # remove any existing timer
tick = 0
show_text = true
timerVar = setInterval((->
Draw(ctx)
return
), 50)
$(document).ready( ->
ctx = $("canvas")[0].getContext('2d');
$('.start').click( -> addTimer(ctx) )
$('.end').click( -> removeTimer() )
$( "body" ).keypress( (event) ->
if (event.which == 97 ) # A
rocket.update_thrust_direction(-1)
else if (event.which == 100) # D
rocket.update_thrust_direction(1)
else if (event.which == 119) # W
rocket.update_jet_direction(-1)
else if (event.which == 115) # S
rocket.update_jet_direction(1)
)
)
style.css
@import url(http://fonts.googleapis.com/css?family=Pacifico|Open+Sans:300)
@link-font: "Open Sans"
body
font-family: Open Sans
.kb
border: 1px solid #dddddd
background-color: #666666
color: #363636
padding: 2px 8px 3px 8px
background: #ffffff
background: -moz-linear-gradient(left, #ffffff 0%, #f6f6f6 47%, #ededed 100%)
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #ffffff), color-stop(47%, #f6f6f6), color-stop(100%, #ededed))
background: -webkit-linear-gradient(left, #ffffff 0%, #f6f6f6 47%, #ededed 100%)
background: -o-linear-gradient(left, #ffffff 0%, #f6f6f6 47%, #ededed 100%)
background: -ms-linear-gradient(left, #ffffff 0%, #f6f6f6 47%, #ededed 100%)
background: linear-gradient(to right, #ffffff 0%, #f6f6f6 47%, #ededed 100%)
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=1 )
ul
margin: 0
padding-left: 0
li
margin: 6px 0 11px 0
list-style-type: none
body
background-color: #dedede
.instructions
width: 600px
padding: 0px
margin-top: 10px
background-color: #fefefe
.inner
padding: 10px