cleaned up code

Zolmeister · Oct 10, 2013 · 9192281 · 9192281
1 parent 23264b3
commit 9192281
Show file tree

Hide file tree

Showing 21 changed files with 146 additions and 186 deletions.
diff --git a/Leckerli One.ttf → assets/Leckerli One.ttf b/Leckerli One.ttf → assets/Leckerli One.ttf
diff --git a/bg1.ogg → assets/bg1.ogg b/bg1.ogg → assets/bg1.ogg
diff --git a/drop1.ogg → assets/drop1.ogg b/drop1.ogg → assets/drop1.ogg
diff --git a/enter.png → assets/enter.png b/enter.png → assets/enter.png
diff --git a/logo.png → assets/logo.png b/logo.png → assets/logo.png
diff --git a/logo.xcf → assets/logo.xcf b/logo.xcf → assets/logo.xcf
diff --git a/sound-off.png → assets/sound-off.png b/sound-off.png → assets/sound-off.png
diff --git a/sound-off.xcf → assets/sound-off.xcf b/sound-off.xcf → assets/sound-off.xcf
diff --git a/sound-on.png → assets/sound-on.png b/sound-on.png → assets/sound-on.png
diff --git a/sound-on.xcf → assets/sound-on.xcf b/sound-on.xcf → assets/sound-on.xcf
diff --git a/bindings.js b/bindings.js
@@ -1,4 +1,4 @@
-// last
+// loaded last
 
 var keymap = {
   38: 'up',

diff --git a/fish.js b/fish.js
@@ -13,6 +13,7 @@ function Fish(AI, x, y, size, dir, frame) {
       r: 1
     }
   })
+
   this.AIDir = 1
   this.setSize(size || 20)
 
@@ -22,18 +23,22 @@ function Fish(AI, x, y, size, dir, frame) {
 
   // loaded percent is used for new colors that have been added and need to grow
   this.colors = [
-    {col: randColor().rgb(), thick: 4, loaded: 1},
-    //{col: randColor().rgb(), thick: 5, loaded: 1},
+    {col: randColor().rgb(), thick: 4, loaded: 1}
   ]
+
   this.x = x || 0
   this.y = y || 0
   this.dying = false // death animation
   this.dead = false // remove this entity
   this.deathParticles = []
   this.bodyColor = randCol.rgb()
-  this.bodyOutline = randCol.rgb() //shadeColor(randCol, -20).rgb()
-  this.isInput = AI ? true : false // is the user currently pressing a button to move?
-  this.targetPos = null // defined if user input is touch
+  this.bodyOutline = randCol.rgb()
+
+  // is the user currently pressing a button to move?
+  this.isInput = AI ? true : false
+
+  // defined if user input is touch
+  this.targetPos = null
 
   this.velocity = [0, 0]
   this.accel = [0, 0]
@@ -330,11 +335,6 @@ Fish.prototype.physics = function(){
 
     // movement
 
-    var root2 = Math.sqrt(2)
-    //var velocity = this.velocity
-
-    // move dir to face towards target direction
-
     // mouse/touch input has a target location
     if(this.targetPos) {
         this.targetDir = directionTowards(this.targetPos, this)
@@ -377,8 +377,6 @@ Fish.prototype.physics = function(){
       this.accel = [0, 0]
     } else {
       this.accel = [
-        //Math.pow(Math.cos(this.dir),2) * sign(Math.cos(this.dir)),
-        //Math.pow(Math.sin(this.dir),2)* sign(Math.sin(this.dir))
         Math.cos(this.dir),
         Math.sin(this.dir)
       ]

diff --git a/index.html b/index.html
@@ -10,17 +10,24 @@
         }
     </style>
     <body>
-        <script src='stats.js'></script>
+
+        <!-- load order does not matter -->
+        <script src='libs/stats.js'></script>
 
         <script src='util.js'></script>
+        <script src='menu.js'></script>
         <script src='sound.js'></script>
         <script src='levelbar.js'></script>
         <script src='spawner.js'></script>
         <script src='levelballs.js'></script>
         <script src='fish.js'></script>
         <script src='particle.js'></script>
         <script src='color.js'></script>
+
+        <!-- main comes last except for bindings -->
         <script src='main.js'></script>
+
+        <!-- bindings come last -->
         <script src='bindings.js'></script>
     </body>
 </html
diff --git a/levelbar.js b/levelbar.js
@@ -1,5 +1,4 @@
 function LevelBar(width) {
-  // [{col: new Color(100, 20, 100), loaded: 1}, {col: new Color(10,20, 100), loaded: 0.5}]
   this.colors = []
   this.height = 6
   this.width = width

diff --git a/stats.js → libs/stats.js b/stats.js → libs/stats.js
diff --git a/main.js b/main.js
@@ -32,25 +32,19 @@ setGlobals()
 loadAssets(fadeInMenu)
 
 function init() {
-  log('state')
   GAME.state = 'playing'
-  log('player')
   GAME.player = new Fish(false)
-  log('fishes')
   GAME.fishes = [GAME.player]
-  log('spawner')
   GAME.spawner = new Spawner($canv.width, $canv.height, GAME.player, GAME.fishes)
-  log('bar')
   GAME.levelParticles = []
   GAME.levelBar = new LevelBar($canv.width)
-  log('balls')
   GAME.levelBalls = new LevelBalls($canv.width, $canv.height)
   GAME.levelBallParticles = []
   GAME.endGameParticles = []
-  log('draw')
   requestAnimFrame(draw)
 }
 
+// main game loop
 function draw(time) {
   var i, l, j, dist, nextStage, fish, fish2
   lag += time - previousTime
@@ -222,7 +216,6 @@ function draw(time) {
       }
 
       // if far enough away from player, remove
-
       if(distance(fish, player) > Math.max($canv.width, $canv.height) * 2) {
         fish.dead = true
       }
@@ -281,19 +274,12 @@ function draw(time) {
 
 }
 
-window.requestAnimFrame = (function(){
-  return  window.requestAnimationFrame       ||
-    window.webkitRequestAnimationFrame ||
-    window.mozRequestAnimationFrame
-})();
-
-
 function loadAssets(cb) {
   var imgs = [
-    { name: 'logo', src: 'logo.png' },
-    { name: 'soundOn', src: 'sound-on.png' },
-    { name: 'soundOff', src: 'sound-off.png' },
-    {name: 'enter', src: 'enter.png'}
+    { name: 'logo', src: 'assets/logo.png' },
+    { name: 'soundOn', src: 'assets/sound-on.png' },
+    { name: 'soundOff', src: 'assets/sound-off.png' },
+    {name: 'enter', src: 'assets/enter.png'}
   ]
 
   function process() {
@@ -313,122 +299,7 @@ function loadAssets(cb) {
   process()
 }
 
-function sizeMenu() {
-  var title = {
-    width : ASSETS.logo.width,
-    height : ASSETS.logo.height,
-    minPaddingX : 100,
-    minPaddingY : 30,
-    x: null,
-    y: null
-  }
-
-  var button = {
-    x : null,
-    y : $canv.height / 1.8,
-    width : $canv.width * .5,
-    height : $canv.height / 6
-  }
-  button.x = $canv.width / 2 - button.width/2
-
-  // title
-  var scale = scaleSize(title.width, title.height, $canv.width - title.minPaddingX, $canv.height - button.y - title.minPaddingY*2)
-  title.width *= scale
-  title.height *= scale
-  title.x = $canv.width/2 - title.width/2
-  title.y = button.y - title.height - title.minPaddingY
-
-  GAME.MENU.title = title
-  GAME.MENU.button = button
-}
-
-function drawMenuButton(hitting) {
-  var button = GAME.MENU.button
-  // button
-  ctx.lineWidth = 4
-  ctx.strokeStyle = '#444'
-  roundRect(ctx, button.x, button.y, button.width, button.height, 20)
-  ctx.fillStyle= hitting ? '#222' : '#1a1a1a'
-  ctx.fill()
-  ctx.stroke()
-  var width = ASSETS.enter.width
-  var height = ASSETS.enter.height
-  var scale = scaleSize(width, height, button.width - 5, button.height - 5)
-  width *= scale
-  height *= scale
-  var x = button.x + button.width/2 - width/2
-  var y = button.y + button.height/2 - height/2
-  ctx.drawImage(ASSETS.enter, x, y, width, height)
-}
-
-// scale down w1 and h1 to fit inside w2 and h2 retaining aspect ratio
-function scaleSize(w1, h1, w2, h2) {
-  function scale(v1, v2) {
-    if(v1 > v2) {
-      return v2/v1
-    }
-    return 1
-  }
-  return Math.min(scale(w1, w2), scale(h1, h2))
-}
-
-function drawMenuLogo() {
-  var title = GAME.MENU.title
-  ctx.drawImage(ASSETS.logo, title.x, title.y, title.width, title.height)
-}
-
-function fadeInMenu() {
-
-  GAME.state = 'menu'
-  GAME.MENU.opacity = 0
-  requestAnimFrame(menuFade)
-  //drawMenu()
-}
-
-function menuFade() {
-  GAME.MENU.opacity+=0.02
-  drawMenu()
-  var alpha = 1-GAME.MENU.opacity
-  ctx.fillStyle = 'rgba(17,17,17,'+(alpha > 0 ? alpha : 0)+')'
-  ctx.fillRect(0, 0, $canv.width, $canv.height)
-  if(GAME.MENU.opacity < 1 && GAME.state === 'menu'){
-    requestAnimFrame(menuFade)
-  }
-}
-
-function drawMenu() {
-
-  sizeMenu()
-
-  // background
-  ctx.fillStyle = '#111'
-  ctx.fillRect(0, 0, $canv.width, $canv.height)
-
-  // set opacity
-  //ctx.globalAlpha = GAME.MENU.opacity
-
-  drawMenuLogo()
-
-  drawMenuButton()
-
-
-  drawSoundControl()
-}
-
-function roundRect (ctx, x, y, w, h, r) {
-  if (w < 2 * r) r = w / 2;
-  if (h < 2 * r) r = h / 2;
-  ctx.beginPath();
-  ctx.moveTo(x+r, y);
-  ctx.arcTo(x+w, y,   x+w, y+h, r);
-  ctx.arcTo(x+w, y+h, x,   y+h, r);
-  ctx.arcTo(x,   y+h, x,   y,   r);
-  ctx.arcTo(x,   y,   x+w, y,   r);
-  ctx.closePath();
-}
-
 // level debug
-//levelBalls.addBall()
 function levelUp(){
   var levelBar = GAME.levelBar
   for(var i=0;i<9;i++)

diff --git a/menu.js b/menu.js
@@ -0,0 +1,82 @@
+function drawMenu() {
+  sizeMenu()
+
+  // background
+  ctx.fillStyle = '#111'
+  ctx.fillRect(0, 0, $canv.width, $canv.height)
+  drawMenuLogo()
+  drawMenuButton()
+  drawSoundControl()
+}
+
+function drawMenuLogo() {
+  var title = GAME.MENU.title
+  ctx.drawImage(ASSETS.logo, title.x, title.y, title.width, title.height)
+}
+
+function fadeInMenu() {
+
+  GAME.state = 'menu'
+  GAME.MENU.opacity = 0
+  requestAnimFrame(menuFade)
+  //drawMenu()
+}
+
+function menuFade() {
+  GAME.MENU.opacity+=0.02
+  drawMenu()
+  var alpha = 1-GAME.MENU.opacity
+  ctx.fillStyle = 'rgba(17,17,17,'+(alpha > 0 ? alpha : 0)+')'
+  ctx.fillRect(0, 0, $canv.width, $canv.height)
+  if(GAME.MENU.opacity < 1 && GAME.state === 'menu'){
+    requestAnimFrame(menuFade)
+  }
+}
+
+function drawMenuButton(hitting) {
+  var button = GAME.MENU.button
+  // button
+  ctx.lineWidth = 4
+  ctx.strokeStyle = '#444'
+  roundRect(ctx, button.x, button.y, button.width, button.height, 20)
+  ctx.fillStyle= hitting ? '#222' : '#1a1a1a'
+  ctx.fill()
+  ctx.stroke()
+  var width = ASSETS.enter.width
+  var height = ASSETS.enter.height
+  var scale = scaleSize(width, height, button.width - 5, button.height - 5)
+  width *= scale
+  height *= scale
+  var x = button.x + button.width/2 - width/2
+  var y = button.y + button.height/2 - height/2
+  ctx.drawImage(ASSETS.enter, x, y, width, height)
+}
+
+function sizeMenu() {
+  var title = {
+    width : ASSETS.logo.width,
+    height : ASSETS.logo.height,
+    minPaddingX : 100,
+    minPaddingY : 30,
+    x: null,
+    y: null
+  }
+
+  var button = {
+    x : null,
+    y : $canv.height / 1.8,
+    width : $canv.width * .5,
+    height : $canv.height / 6
+  }
+  button.x = $canv.width / 2 - button.width/2
+
+  // title
+  var scale = scaleSize(title.width, title.height, $canv.width - title.minPaddingX, $canv.height - button.y - title.minPaddingY*2)
+  title.width *= scale
+  title.height *= scale
+  title.x = $canv.width/2 - title.width/2
+  title.y = button.y - title.height - title.minPaddingY
+
+  GAME.MENU.title = title
+  GAME.MENU.button = button
+}
diff --git a/particle.js b/particle.js
@@ -9,12 +9,10 @@ function Particle(x, y, color, targetFish, dir, r, speed, arcSpeed) {
   this.arcSpeed = arcSpeed || 0.2
 }
 Particle.prototype.draw = function(ctx) {
-    //ctx.strokeStyle = 'rgba(0, 0, 0, 0.2)'
     ctx.lineWidth = 2
     ctx.beginPath()
     ctx.strokeStyle = this.color.rgb()
     ctx.arc(this.x, this.y, this.r*3, 0, 2 * Math.PI, false)
-    //ctx.fill()
     ctx.stroke()
 }
 Particle.prototype.physics = function() {

diff --git a/sound.js b/sound.js
@@ -1,23 +1,18 @@
 var muted = false
 popSound = document.createElement('audio')
-popSound.src='drop1.ogg'
+popSound.src='assets/drop1.ogg'
 popSound.volume = 0.6
-//bgRainSound = document.createElement('audio')
-//bgRainSound.src='bg1.ogg'
-//bgRainSound.loop = true
-//bgRainSound.play()
+
 if(localStorage.muted === 'true') toggleMute()
-//$('.sound').bind('click', toggleMute)
+
 function toggleMute(){
   if(!muted) {
     popSound.volume = 0
-    //bgRainSound.volume = 0
     muted = true
     localStorage.muted = 'true'
     drawSoundControl()
   } else {
     popSound.volume = 0.6
-    //bgRainSound.volume = 1
     muted = false
     localStorage.muted = 'false'
     drawSoundControl()