More notes on Zap

• Note in ui.js
  • timer and cooldown control the game.
    • One timer setting for regular action
    • Another for the explosion
    • Another for the delay after the explosion
• Note in mover.js I build a hierarchy
  • Mover is the base class.
    • This provides the common user interface.
    • And constructor
    • It is important that the getters be named after the variable.
    • It is nice that all objects have the getters and the move and draw functions later.
  • AimPoint, Target and Gun are all derived from this class.
  • In AimPoint
    • I limit the ability to set the height to the top part of the canvas.
    • This is so I don't have to deal with the "shot" line being horizontal.
  • Target has a constructor
    • So it must call super(params)
      • this and the parent's variables do not exist until this returns.
      • IE Don't do anything but validate super parameters before the call to super.
    • I have a bug in the target movement.
      • They can get stuck on the edges.
      • My limit parameters are off somewhere, but I am out of time, ...
      • I Might have fixed this making notes.
    • Notice I can draw different things each iterations
      • For example, If I had an array of sprites for the mover.
      • Draw sprite[phase%NUMBER_OF_SPRITES] and they would move.
      • a search
    • By the way, notice that the images seem to "blur".
    • We will discuss that later.
• In game.js
  • Fire()
    • Draws a line from the gun to the aim point.
    • This is a brute force line drawer

    • y = gun_y_position
      for x = gun_x_poisition to aim_x_position
         plot(x,y)
         y += m
                

    • Why?

    • y = mx+b 
      m = (y1 - y0) / (x1-x0)
      
      y0 = mx+b
      y1 = m(x+1) + b
      y1-y0 = m(x+1) + b - (mx + b)
            = mx + m + b -mx -b
            = m
      y1 = y0 + m

    • But it is not satisfying!
    • What is wrong with this line?
    • Boy do I wish I could call the line routine!
  • Find Hit is worse!
    • I have a point that represents the target
    • Look at how I draw the target, (xpos, ypos) are the center of the object.
    • I could check to see if the ray hits the object anywhere, but that is tough.
    • Clipping and we will do it later.
    • But an easy check is a bounding circle.
    • If the ray passes through a circle, centered on the object, with a given radius, we will call it a hit.
    • In my case I made the radius quite large, so I can debug the game.
    • We could have a shrinking radius every time you hit an object to make it more challenging
    • The distance from a point to a line is going to be on a perpendicular to the line through the point.
    • We can do great things with point slope form here.

      
      m = (y1-y0)/(x1-x0)
      m(x1-x0) = y1-y0
      y1 = m(x1-x0)-y0
      y = m(x-x0)-y0
      
      If a line is perpendicular to y=mx+b, then the slope is -1/m
      
      The original line is 
      y = slope1(x - gun.xpos) - gun.ypos
      
      slope2 = -1/slope1
      
      The perpendicular line is
      y = slope2(x - target.xpos) - target.ypos
      
      Setting these two equal we get
      
      slope1(x - gun.xpos) - gun.ypos = slope2(x - target.xpos) - target.ypos
      slope1*x -slope2*x = slope1 * gun.xpos - slope2* target.xpos + target.ypos -target.ypos
      x = (that mess above)/(slope1 - slope2)