diff --git a/src/assets/attack1.png b/src/assets/attack1.png new file mode 100644 index 0000000..6af2575 Binary files /dev/null and b/src/assets/attack1.png differ diff --git a/src/assets/attack2.png b/src/assets/attack2.png new file mode 100644 index 0000000..9b678d4 Binary files /dev/null and b/src/assets/attack2.png differ diff --git a/src/assets/charging1.png b/src/assets/charging1.png new file mode 100644 index 0000000..bc1fd55 Binary files /dev/null and b/src/assets/charging1.png differ diff --git a/src/assets/charging2.png b/src/assets/charging2.png new file mode 100644 index 0000000..2d78f8f Binary files /dev/null and b/src/assets/charging2.png differ diff --git a/src/assets/charging3.png b/src/assets/charging3.png new file mode 100644 index 0000000..1cc20f9 Binary files /dev/null and b/src/assets/charging3.png differ diff --git a/src/assets/charging4.png b/src/assets/charging4.png new file mode 100644 index 0000000..8a1fb6b Binary files /dev/null and b/src/assets/charging4.png differ diff --git a/src/assets/charging5.png b/src/assets/charging5.png new file mode 100644 index 0000000..5dddfc2 Binary files /dev/null and b/src/assets/charging5.png differ diff --git a/src/assets/charging6.png b/src/assets/charging6.png new file mode 100644 index 0000000..5200f68 Binary files /dev/null and b/src/assets/charging6.png differ diff --git a/src/assets/charging7.png b/src/assets/charging7.png new file mode 100644 index 0000000..8c3db9e Binary files /dev/null and b/src/assets/charging7.png differ diff --git a/src/assets/charging8.png b/src/assets/charging8.png new file mode 100644 index 0000000..50cbaa6 Binary files /dev/null and b/src/assets/charging8.png differ diff --git a/src/main.js b/src/main.js index f04b769..76d9f08 100644 --- a/src/main.js +++ b/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 = [