Rocket_lander rdx

index.html

<canvas width="600px" height="600px"></canvas>
<br>
<button class='start'>Start!!!</button>
<button class='end'>End!!!</button>
<br>
<div class='instructions'><div class='inner'>
  <ul>
    <li> 
      <span class='kb'>W</span>, <span class='kb'>S</span> for upper jet bursts
    </li>
    <li> 
      <span class='kb'>A</span>, <span class='kb'>D</span> for lower rocket direction
    </li>
    <li> 
      <span class='kb'>Space</span> cut engines, 
      <span class='kb'>Up</span> throttle up,
      <span class='kb'>Down</span> throttle down
    </li>    
  </ul>
  </div>
</div>

Rocket_lander rdx.markdown

Rocket_lander rdx

A Pen by Dealga McArdle on CodePen.

License.

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)
  )
  

)
               

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

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