From 2897b71c4465b6d0083c201469233fa7abdb6b4b Mon Sep 17 00:00:00 2001 From: Zutatensuppe Date: Sun, 18 Jul 2021 17:45:57 +0200 Subject: [PATCH] charge + attack anim --- src/assets/attack1.png | Bin 0 -> 372 bytes src/assets/attack2.png | Bin 0 -> 359 bytes src/assets/charging1.png | Bin 0 -> 474 bytes src/assets/charging2.png | Bin 0 -> 482 bytes src/assets/charging3.png | Bin 0 -> 484 bytes src/assets/charging4.png | Bin 0 -> 434 bytes src/assets/charging5.png | Bin 0 -> 421 bytes src/assets/charging6.png | Bin 0 -> 413 bytes src/assets/charging7.png | Bin 0 -> 398 bytes src/assets/charging8.png | Bin 0 -> 315 bytes src/main.js | 179 ++++++++++++++++++++++++++++++++++----- 11 files changed, 156 insertions(+), 23 deletions(-) create mode 100644 src/assets/attack1.png create mode 100644 src/assets/attack2.png create mode 100644 src/assets/charging1.png create mode 100644 src/assets/charging2.png create mode 100644 src/assets/charging3.png create mode 100644 src/assets/charging4.png create mode 100644 src/assets/charging5.png create mode 100644 src/assets/charging6.png create mode 100644 src/assets/charging7.png create mode 100644 src/assets/charging8.png diff --git a/src/assets/attack1.png b/src/assets/attack1.png new file mode 100644 index 0000000000000000000000000000000000000000..6af2575f68a916ab2f2ce09a996a877bab31fb0e GIT binary patch literal 372 zcmV-)0gL{LP)ac$0LTT=BA*d$d`7hK8PUc(+jxr$ zVagh#pKoYc=VrvxJV~`K&e_~B0-$}GbFI0z@tUiGX?s*b^J!yA+g#^b7@CF{rDg7m zo|XWkVPC!F0#U&v5xorU4a#N6^)xrZTk-$%2?v$DR)mU2H7VwwIbr&<*l_g=BYJWfVe~V6j*ie1F$fGVb?TOnaLYlZxlC zFr_Y#6JHY6GM7U&i4vj}U{$MXLfX_i=PmWc1ACij?IRkrFW$>QYtQ0mUO+HWqvcg9a<>Vo2GU6DO5GDq+sP?Xq*8L)*l3}d2qCYj_>6erUVes|f~KGq<{Ld! zVQFyrl-EjX%x7&`91YMrZ&4002ovPDHLk FV1m;Wne6}o literal 0 HcmV?d00001 diff --git a/src/assets/charging1.png b/src/assets/charging1.png new file mode 100644 index 0000000000000000000000000000000000000000..bc1fd55c67039d3e4e36bb99116aca06b11bdc35 GIT binary patch literal 474 zcmV<00VV#4P);Jw%l3>>SA4tP)FCrI&yT-two$rRWhu zB7khMYk5S5mH`m}gvl;_j`si+DMhzg6cJGqLxz?o9Ev=6BckM$XL-bvHzIPch|72j zNUDw>Q8#>BbiuOCA##6Ij)dg5E2NP$?gg1U5x_%Vh#w)=@DXASj}hX!L;-%w6!${j zHufGZ-J- zYX*As+0_pWXc^sxn5J#b;3!}Q4+#^n`U0TF)xxe1^Z Qw*UYD07*qoM6N<$f|WGUpa1{> literal 0 HcmV?d00001 diff --git a/src/assets/charging2.png b/src/assets/charging2.png new file mode 100644 index 0000000000000000000000000000000000000000..2d78f8fc0b04e5aab74188837f0d8737f2a250d1 GIT binary patch literal 482 zcmV<80UiE{P)^!bndc*}IBCICcw%ISc z71ijhx%F^f+;hV&rFi6*ZQ2i`WXG-z)*TyITn47i>QSJW$Mq#0$^)EeG>4;wjEEHn zd{VlCCUe*5B;`t1w2xSF0^nND$q}nf%7@ZPM#Ne)kd&^kBfUfe@%07~u^J5|rtf{X zkP;jz{|WBQZi;1_qKmg?`IHuawjYj%;^nC|x@=k$e@CqGcf=Zxaiq(c9Uz?DyG`T$ zxo-gYC1O+#V;MJr9Gr(;&+hJe1b9e1por@yP zZxdt7HidXSk1J?|U|5J6N+)9S1~_)HR8)}=NrXfuH-FitP$K5kgdBm2@L+T5j7{}G zPJ~s`*4o#G)|V6OQzzO>2nwKBaB)C1j87wL5f(mACFMM>;v7SK{_%Xf*5(V;StgcxOQM%svrXV zmx+{^%LxJata(usEqb)rxGIW?ZwLp!feZvPuqiQ1TrSx;h_AX{p1CAmx7m@~2uX&G zxA4;NVF`K>qvdg%&|-y9!~k|d%vRj&Ln))H+m2P zd01<*Go=ww-3)EnLu}FvwRGCTR`F_Py099%CM{`<;ukCIkcv|LP{7(MMVFsye%w@j a&;@V%QRl;&lV=V90000OF5v3`1_lOdm^6&~;I`WD%e;#F z6*CxvU*;8jaOiPTq&~d{d~jQ;fDaCqd8L@xS_)$D_WJqC(=tR(IVLkrcH^aaM5np!gwot-UL$tUo&@O8Y(rVLnP{MwtZL zXY&IK5***%3*udXCUUhJRG(EM%H4^CRxBt*EY!$-xAt$3s1eMLx;E3PlxB(m;JVkT zB0jh{3#KFhaH;)>)WTp8xf=$NyMcXXzZ$Pt5CQ&{gCeR#h}Syz1@*XT8OLK%tA*DP zX~H_au>N182%3n6Dx&vVmZw9N7z}Df{iac!%sy$P1(|#uw4a~V$Yi$BDaFaXE$(@w z>!;^dlhb|=2a?M4Ud^&+RO-P;%1(D`6as15m3+F3=ssA*0J4|e)0E3QkyM?%<_`k{ c0|RyZ0Ch{>eVK;di~s-t07*qoM6N<$g4qMV00000 literal 0 HcmV?d00001 diff --git a/src/assets/charging5.png b/src/assets/charging5.png new file mode 100644 index 0000000000000000000000000000000000000000..5dddfc286d3dfd47183ec8d00ec1861a7150171d GIT binary patch literal 421 zcmV;W0b2fvP)jf~DBPnb^Xmn1lNR7bOa%ln=EpG4Y4=_0dvm1rP`Xf;(a1HfXGNtJ=U= zefi9)Hg?`GhY@47qdw0is!B+yfEYe<&fixFA`8igSXQ+at@9~K7DHNi<_yINE;|6U zh#bgkb}_7t1UYC>gbpxPJ5L%eR@(sJb{s|c6cPn2z`ScdI)9s`Vo=VsD3{!P*@)DZ z*jixu(WwQ{CmK|q8B4jo^MhMF{duw2-<}D&(tWHj405U@SPTafuUDdW=cA^(v(=?)ljQY4L z;mw_qq3uZk#t-W7p*dvukV5Yi3opQCywu^@Y#e_g@Do99yEP)Jhu9q9=dee1BHlTU zX?*wJ3RjMJXL5GkS=%%0N6(%-7L>~KxFzSROfAaW>5c~=A|?4%P)fMs`zN!|BV< zyr}zCGZ@#9_UF&Mz?G1)omLEQsew`eg+gq~zeR#XLM}v1xwp~(iEBs_F%ls^0bzqU zv^$DQU^j37iEBu?XA^g5o!R2rBdb45YLjHau}x}hC8B1Z>I2=-T13qc#n;Owoc^HH z_WBw%e^{TS^xH#3;fIvH#FgEOa*1&JNif5vUw|#iV8smmMF2K2m~C_Oi`-d1D3I1#y_P7YPpseJhZdH{2qAB*dN1S6 zHdfNZ1_UhoXdyi(I>#sb6vguJfpe6~4JPHPYjt)^w#yDgYacH?&)O07s8o!W2mpm$ zUoDF@0;=AfNQbHV7;oK;9N%lrGn15hRckaacO1uYoZI;VQuV*2@^lNk00000NkvXX Hu0mjfg|4`~ literal 0 HcmV?d00001 diff --git a/src/assets/charging7.png b/src/assets/charging7.png new file mode 100644 index 0000000000000000000000000000000000000000..8c3db9e677de28c89cacc9feb54a01d77a481e2f GIT binary patch literal 398 zcmV;90df9`P)iqmi4pcTV`Q&xRQ?8!FfM5pWaC zv=QN^;BG@^Pr<$E^nLaIMhfPpUZT#3aI5SuV4o3%v!J zI!DFM908ItU)WWqw29<=o>0|4WqrbLDd8k-R-i@(h6DQ-q+5KwsFvRJ>0;g9Vl|)6 zpVNw-EcTu29qbukq`7VJB!}2W^~S}os}n6(tacDQymh^zw0GwOpEi-22eWTHD^5Q! zWxlEp_qH`!+Dw7Td(t{?G74GpZWMFnN@qIxZb#RTjQrVW<9Spc`DoZ)+VXmOmUWb% z@6EM=8f&?JW}M9kwD@+o^U7}3kIiSky*W1V?$&8Lofh<_zf_Fhe~u-V`(^HNd95Ak za++IOV$;7}VPFuG|1xRbA(iOcM?nIf Lu6{1-oD!M<00xCP literal 0 HcmV?d00001 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 = [