charge + attack anim

src/main.js

@@ -27,6 +27,8 @@ const PLAYER_ANIM_SPEED_STILL_2 = .1
 const resources = PIXI.loader.resources
 
 var player, state, objects, maxX, lastKey, PTS_WATER, PTS_COWS, END_TXT
+var playerCharging
+var attackAnims
 var lanterns
 var moos
 var shader, quad
@@ -41,6 +43,16 @@ PIXI.loader
   .add("assets/grass.png")
   .add("assets/lantern1.png")
   .add("assets/lantern2.png")
+  .add("assets/attack1.png")
+  .add("assets/attack2.png")
+  .add("assets/charging1.png")
+  .add("assets/charging2.png")
+  .add("assets/charging3.png")
+  .add("assets/charging4.png")
+  .add("assets/charging5.png")
+  .add("assets/charging6.png")
+  .add("assets/charging7.png")
+  .add("assets/charging8.png")
   .load(setup);
 
 
@@ -48,6 +60,23 @@ function now () {
   return new Date().getTime()
 }
 
+function createAttackAnim (player, size) {
+  const attackAnim = new PIXI.AnimatedSprite([
+    resources['assets/attack1.png'].texture,
+    resources['assets/attack2.png'].texture,
+  ])
+  attackAnim.width = 40
+  attackAnim.height = 40
+  attackAnim.expandSpeed = size / 25
+
+  attackAnim.targetSize = size
+  attackAnim.anchor.set(.5, .5)
+  attackAnim.x = player.x
+  attackAnim.y = player.y
+  attackAnim.play()
+  return attackAnim
+}
+
 function setup () {
   const cowTexture = resources['assets/cow.png'].texture
   const waterTexture = resources['assets/water.png'].texture
@@ -60,6 +89,20 @@ function setup () {
   END_TXT = new PIXI.Text('YOU WIN!!!', {fontFamily : 'Arial', fontSize: 24, fill : 0xffff00, align : 'center'});
   END_TXT.visible = false
 
+  attackAnims = []
+
+  playerCharging = new PIXI.AnimatedSprite([
+    resources['assets/charging1.png'].texture,
+    resources['assets/charging2.png'].texture,
+    resources['assets/charging3.png'].texture,
+    resources['assets/charging4.png'].texture,
+    resources['assets/charging5.png'].texture,
+    resources['assets/charging6.png'].texture,
+    resources['assets/charging7.png'].texture,
+    resources['assets/charging8.png'].texture,
+  ])
+  playerCharging.anchor.set(.5,.5)
+  playerCharging.play()
 
   PTS_WATER.y = 20
   PTS_WATER.x = 50
@@ -164,8 +207,12 @@ function setup () {
     lastKey = now()
   }
 
+  space.press = () => {
+    player.taps.push({start: now(), end: 0})
+    lastKey = now()
+  }
   space.release = () => {
-    player.taps.push(true)
+    player.taps[player.taps.length - 1].end = now()
     lastKey = now()
   }
 
@@ -404,7 +451,96 @@ function setPlayerMode(mode) {
   }
 }
 
+
+function attack(name, ...args) {
+  if (name === 'push') {
+    for (const obj of objects) {
+      if (hitTestRectangle(player, obj)) {
+        const dir = player.x > obj.x ? 1 : -1
+        obj.vrot = .1 * dir
+        obj.ticks += 10
+
+        if (player.x === obj.x) {
+          obj.vx = Math.random() >= 0.5 ? -1 : 1
+        } else {
+          obj.vx = player.x > obj.x ? -1 : 1
+        }
+        if (player.y === obj.y) {
+          obj.vy = Math.random() >= 0.5 ? -1 : 1
+        } else {
+          obj.vy = player.y > obj.y ? -1 : 1
+        }
+      }
+    }
+    const anim = createAttackAnim(player, 50 * 1.25)
+    attackAnims.push(anim)
+    container.addChild(anim)
+  }
+  if (name === 'chargedpush') {
+    // 3 seconds charge is max
+    const chargeLen = Math.min(args[0], 3000)
+    const extraRadius = 50
+    const playerRect = {
+      x: player.x - extraRadius,
+      y: player.y - extraRadius,
+      width: player.width + extraRadius + extraRadius,
+      height: player.height + extraRadius + extraRadius,
+    }
+
+    for (const obj of objects) {
+      if (hitTestRectangle(playerRect, obj)) {
+        const dir = player.x > obj.x ? 1 : -1
+        obj.vrot = .1 * dir
+        obj.ticks += 10 + Math.round(chargeLen / 500) * 5
+
+        if (player.x === obj.x) {
+          obj.vx = Math.random() >= 0.5 ? -1 : 1
+        } else {
+          obj.vx = player.x > obj.x ? -1 : 1
+        }
+        if (player.y === obj.y) {
+          obj.vy = Math.random() >= 0.5 ? -1 : 1
+        } else {
+          obj.vy = player.y > obj.y ? -1 : 1
+        }
+      }
+    }
+    const anim = createAttackAnim(player, (50 + extraRadius + extraRadius) * 1.25 )
+    attackAnims.push(anim)
+    container.addChild(anim)
+  }
+}
 function play(delta) {
+  const _now = now()
+  // check if any tap was ended
+  let chargeLen = 0
+  if (player.taps.length > 0) {
+    do {
+      const tap = player.taps[0]
+      if (!tap) {
+        break
+      }
+      if (tap.end > 0) {
+        const len = tap.end - tap.start
+        if (len > 500) {
+          attack('chargedpush', len)
+        } else {
+          attack('push', len)
+        }
+        player.taps.pop()
+      } else {
+        // taps longer than 100ms count as tapping
+        if ((_now - tap.start) > 500) {
+          chargeLen = Math.min(_now - tap.start, 3000)
+        }
+
+        break
+      }
+    } while (player.taps.length > 0)
+  }
+
+  // move only allowed when not tapping
+  // if (!tapping) {
   player.x += player.vx
   player.y += player.vy
 
@@ -429,8 +565,15 @@ function play(delta) {
   } else {
     setPlayerMode('moving')
   }
+  if (chargeLen) {
+    const charges = Math.round(chargeLen / 500)
+    playerCharging.animationSpeed = Math.sqrt(charges * charges) / 5
+    player.addChild(playerCharging)
+  } else {
+    player.removeChild(playerCharging)
+  }
+  // }
 
-  const _now = now()
 
   container.x = -(player.x + player.width/2 - WIDTH/2)
 
@@ -477,27 +620,6 @@ function play(delta) {
     }
   }
 
-  while (player.taps.pop()){
-    for (const obj of objects) {
-      if (hitTestRectangle(player, obj)) {
-        const dir = player.x > obj.x ? 1 : -1
-        obj.vrot = .1 * dir
-        obj.ticks += 10
-
-        if (player.x === obj.x) {
-          obj.vx = Math.random() >= 0.5 ? -1 : 1
-        } else {
-          obj.vx = player.x > obj.x ? -1 : 1
-        }
-        if (player.y === obj.y) {
-          obj.vy = Math.random() >= 0.5 ? -1 : 1
-        } else {
-          obj.vy = player.y > obj.y ? -1 : 1
-        }
-      }
-    }
-  }
-
   for (const c of objects) {
     if (c.type === 'cow') {
       if (c.vrot > 0 && c.ticks > 0) {
@@ -604,6 +726,17 @@ function play(delta) {
     state = end
   }
 
+  for (let a of attackAnims) {
+    a.width += a.expandSpeed
+    a.height += a.expandSpeed
+    if (a.width >= a.targetSize) {
+      container.removeChild(a)
+    }
+  }
+  attackAnims = attackAnims.filter(a => {
+    return a.width < a.targetSize
+  })
+
   time += 1 / 60;
   quad.shader.uniforms.time = time;
   quad.shader.uniforms.playerPos = [