cleaned up code, removed menu opacity temporarily for mobile testing

Zolmeister · Oct 8, 2013 · da9f2f2 · da9f2f2
1 parent 521eb87
commit da9f2f2
Show file tree

Hide file tree

Showing 8 changed files with 264 additions and 69 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules/
diff --git a/bindings.js b/bindings.js
@@ -29,31 +29,37 @@ window.onresize = function() {
   }
 }
 
-$canv.onmousedown = function(e){
-  if(GAME.state === 'playing') {
-    GAME.player.updateInput([e.clientX - $canv.width/2, e.clientY - $canv.height/2], true)
-    mouseDown = true
-  } else if (GAME.state === 'menu' && GAME.MENU.button) {
-    var pos = {
+$canv.addEventListener('mousedown', touchDown)
+$canv.addEventListener('touchstart', touchDown)
+function touchDown(e){
+  for(var k in e){ console.log('TOUCH', k, e[k])}
+  var pos = {
       x: e.clientX,
       y: e.clientY,
       width: 1,
       height: 1
     }
+  if(GAME.state === 'playing') {
+    GAME.player.updateInput([e.clientX - $canv.width/2, e.clientY - $canv.height/2], true)
+    mouseDown = true
+  } else if (GAME.state === 'menu' && GAME.MENU.button) {
     if(collideBox(pos, GAME.MENU.button)) {
       drawMenuButton(true)
-    } else if (collideBox(pos, {
-      x: $canv.width - 25,
-      y: 10,
-      width: 16,
-      height: 22
-    })){
-      toggleMute()
     }
   }
+  if (collideBox(pos, {
+    x: $canv.width - 25,
+    y: 10,
+    width: 16,
+    height: 22
+  })){
+    toggleMute()
+  }
 }
 
-$canv.onmouseup = function(e) {
+$canv.addEventListener('mouseup', touchUp)
+$canv.addEventListener('touchend', touchUp)
+function touchUp(e) {
   if(GAME.state === 'playing') {
     GAME.player.updateInput([], true)
     mouseDown = false
@@ -71,7 +77,9 @@ $canv.onmouseup = function(e) {
   }
 }
 
-$canv.onmousemove = function(e) {
+$canv.addEventListener('mousemove', touchMove)
+$canv.addEventListener('touchmove', touchMove)
+function touchMove(e) {
   if(GAME.state === 'playing') {
     if(mouseDown) {
       GAME.player.updateInput([e.clientX - $canv.width/2, e.clientY - $canv.height/2], true)

diff --git a/enter.png b/enter.png
diff --git a/index.html b/index.html
@@ -2,26 +2,16 @@
 <html>
     <head><title>Pond</title></head>
     <style>
-        @font-face {
-            font-family: Leckerli One;
-            src: url('Leckerli One.ttf');
-        }
         body {
             margin: 0;
             background-color: #111
         }
-        #canv {
-            width: 100%;
-            height: 100%;
-            position:absolute;
+        canvas {
+            position: absolute;
         }
     </style>
     <body>
-        <!-- force browser to download font -->
-        <span style='font-family: Leckerli One'></span>
-        <canvas id='canv'></canvas>
-        <script src='http://code.jquery.com/jquery-2.0.3.min.js'></script>
-        <script src='http://cdnjs.cloudflare.com/ajax/libs/stats.js/r11/Stats.js'></script>
+        <script src='stats.js'></script>
 
         <script src='util.js'></script>
         <script src='sound.js'></script>
@@ -33,5 +23,23 @@
         <script src='color.js'></script>
         <script src='main.js'></script>
         <script src='bindings.js'></script>
+        <!--<script>
+            canv = document.createElement('canvas')
+            canv.width = window.innerWidth
+            canv.height = window.innerHeight
+            ctx = canv.getContext('2d')
+            ctx.fillStyle='#666'
+            ctx.fillRect(0, 0, 100, 100)
+            document.body.appendChild(canv)
+            canv.addEventListener('touchstart', function(e){
+                for(var k in e){ console.log('TOUCH', k, e[k])}
+            })
+            canv.addEventListener('touchmove', function(e){
+                for(var k in e){ console.log('TOUCH', k, e[k])}
+            })
+            canv.addEventListener('touchend', function(e){
+                for(var k in e){ console.log('TOUCH', k, e[k])}
+            })
+        </script>-->
     </body>
 </html
diff --git a/main.js b/main.js
@@ -1,25 +1,35 @@
-var $canv = $('#canv')[0]
-$canv.width = window.innerWidth
-$canv.height = window.innerHeight
-var ctx = $canv.getContext('2d')
-ctx.lineJoin = 'round'
-var debug =  false //true
-// color pallet // blue        l blue        l green         orange         d orange
-var pallet = [[105,210,231], [167,219,216], [224,228,204], [243,134,48], [250,105,0]]
-var lastColor = new Color()
-var GAME = {
-  MENU: {
-    opacity: 0
-  },
-  state: 'menu'
-}
-var ASSETS = {}
+function setGlobals() {
+  $canv = document.createElement('canvas')
+  $canv.width = window.innerWidth
+  $canv.height = window.innerHeight
+  document.body.appendChild($canv)
+  ctx = $canv.getContext('2d')
+  ctx.lineJoin = 'round'
+  debug =  false //true
+  // color pallet // blue        l blue        l green         orange         d orange
+  pallet = [[105,210,231], [167,219,216], [224,228,204], [243,134,48], [250,105,0]]
+  lastColor = new Color()
+  GAME = {
+    MENU: {
+      opacity: 1
+    },
+    state: 'menu'
+  }
+  ASSETS = {}
 
-if(debug){
-  var stats = new Stats()
-  document.body.appendChild(stats.domElement)
+  if(debug){
+    stats = new Stats()
+    document.body.appendChild(stats.domElement)
+  }
+  // game loop
+  MS_PER_UPDATE = 16
+  previousTime = 0.0
+  lag = 0.0
 }
 
+setGlobals()
+loadAssets(fadeInMenu)
+
 function init() {
   GAME.state = 'playing'
   GAME.player = new Fish(false)
@@ -33,10 +43,6 @@ function init() {
   requestAnimFrame(draw)
 }
 
-// game loop
-var MS_PER_UPDATE = 16
-var previousTime = 0.0
-var lag = 0.0
 function draw(time) {
   var i, l, j, dist, nextStage, fish, fish2
   lag += time - previousTime
@@ -271,7 +277,8 @@ function loadAssets(cb) {
   var imgs = [
     { name: 'logo', src: 'logo.png' },
     { name: 'soundOn', src: 'sound-on.png' },
-    { name: 'soundOff', src: 'sound-off.png' }
+    { name: 'soundOff', src: 'sound-off.png' },
+    {name: 'enter', src: 'enter.png'}
   ]
 
   function process() {
@@ -291,10 +298,6 @@ function loadAssets(cb) {
   process()
 }
 
-window.onload = function() {
-  loadAssets(fadeInMenu)
-}
-
 function sizeMenu() {
   var title = {
     width : ASSETS.logo.width,
@@ -340,15 +343,17 @@ function drawMenuButton(hitting) {
   ctx.fillStyle= hitting ? '#222' : '#1a1a1a'
   ctx.fill()
   ctx.stroke()
-  var fontSize = Math.min($canv.width / 12, $canv.height/12)
-  var text = 'Enter'
-  ctx.font = fontSize + 'px Leckerli One, cursive'
-  ctx.textAlign = 'center'
-  ctx.strokeStyle=new Color(pallet[2]).rgb()
-  var x = button.x + ctx.lineWidth + button.width/2
-  var y = button.y + button.height/2 - ctx.lineWidth*2 + fontSize/2
-  ctx.strokeText(text, x, y)
-  ctx.fillText(text, x, y)
+  /*if(ASSETS.enter.width > button.width - 10) {
+    var scale = (button.width - 10) / ASSETS.enter.width
+    button.width *= scale
+    button.height *= scale
+  }
+  if(ASSETS.enter.height > button.height - 10) {
+    var scale = (button.height - 10) / ASSETS.enter.height
+    ASSETS.enter.height *= scale
+    ASSETS.enter.width *= scale
+  }*/
+  ctx.drawImage(ASSETS.enter, button.x + button.width/2 - ASSETS.enter.width/2, button.y + button.height/2 - ASSETS.enter.height/2)
 }
 
 function drawMenuLogo() {
@@ -358,8 +363,9 @@ function drawMenuLogo() {
 
 function fadeInMenu() {
   GAME.state = 'menu'
-  GAME.MENU.opacity = 0
-  requestAnimFrame(menuFade)
+  //GAME.MENU.opacity = 0
+  //requestAnimFrame(menuFade)
+  drawMenu()
 }
 
 function menuFade() {

diff --git a/sound.js b/sound.js
@@ -1,7 +1,7 @@
 var muted = false
 popSound = document.createElement('audio')
 popSound.src='drop1.ogg'
-popSound.volume = 0.8
+popSound.volume = 0.6
 bgRainSound = document.createElement('audio')
 bgRainSound.src='bg1.ogg'
 bgRainSound.loop = true
@@ -16,7 +16,7 @@ function toggleMute(){
     localStorage.muted = 'true'
     drawSoundControl()
   } else {
-    popSound.volume = 0.8
+    popSound.volume = 0.6
     bgRainSound.volume = 1
     muted = false
     localStorage.muted = 'false'