From c5adee8209027b4cf208ae5edb326bfedc1c1869 Mon Sep 17 00:00:00 2001 From: Nic Makomva Date: Sun, 14 Apr 2024 23:38:07 +0200 Subject: [PATCH] Updates --- assets/{index-B1569Gyw.css => index-CqXj5vyd.css} | 2 +- assets/index-Dre7EbrV.js | 1 - assets/index-gz120MLu.js | 1 + index.html | 14 +++++++------- 4 files changed, 9 insertions(+), 9 deletions(-) rename assets/{index-B1569Gyw.css => index-CqXj5vyd.css} (72%) delete mode 100644 assets/index-Dre7EbrV.js create mode 100644 assets/index-gz120MLu.js diff --git a/assets/index-B1569Gyw.css b/assets/index-CqXj5vyd.css similarity index 72% rename from assets/index-B1569Gyw.css rename to assets/index-CqXj5vyd.css index 3073167..9cfb5ba 100644 --- a/assets/index-B1569Gyw.css +++ b/assets/index-CqXj5vyd.css @@ -1 +1 @@ -@import"https://fonts.googleapis.com/css2?family=DotGothic16&family=Press+Start+2P&display=swap";@keyframes sceneMovement{0%{background-position:0% 0%}10%{background-position:10% 0%}20%{background-position:20% 0%}30%{background-position:30% 0%}40%{background-position:40% 0%}50%{background-position:50% 0%}60%{background-position:60% 0%}70%{background-position:70% 0%}80%{background-position:80% 0%}90%{background-position:90% 0%}to{background-position:100% 0%}}.game__instructions-button{margin-top:20px;font-size:18px;font-family:DotGothic16;padding:10px 30px;border-radius:12px;letter-spacing:2px;color:beige}.game__instructions-button:hover{color:#ff4d00;box-shadow:5px 5px 2px;background-color:#f0f8ff;cursor:pointer}.game__instructions-button:active{box-shadow:2px 2px 2px;font-size:16px;color:#08c501}.game__start-button{margin-top:20px;padding:8px 10px;font-family:"Press Start 2P";font-size:10px;letter-spacing:2px;font-weight:500;border-radius:12px;color:#f0f8ff}.game__start-button:hover{color:#ff4d00;box-shadow:5px 5px 2px;background-color:#f0f8ff;cursor:pointer}.game__start-button:active{box-shadow:2px 2px 2px;font-size:8px;color:#08c501}.game__end-screen-button{margin:10px 10px 25px;padding:8px 10px;font-family:"Press Start 2P";font-size:10px;letter-spacing:2px;font-weight:500;border-radius:12px;color:#f0f8ff}.game__end-screen-button:hover{color:#ff4d00;box-shadow:5px 5px 2px;background-color:#f0f8ff;cursor:pointer}.game__end-screen-button:active{box-shadow:2px 2px 2px;font-size:8px;color:#08c501}.game__instructions{width:600px;height:500px;display:flex;flex-direction:column;justify-content:center;align-items:center;position:absolute;z-index:2;top:0;left:5%;padding-top:50px;color:#f0f8ff;background-color:#000;border-radius:5px}.game__instructions .game__title{color:beige;font-family:"Press Start 2P";font-size:20px;letter-spacing:2px;line-height:35px;text-align:center}.game__instructions .game__instructions-content{margin-top:20px;font-size:20px;font-family:DotGothic16;padding:5px 30px;letter-spacing:2px;line-height:25px;color:beige}.game__start-screen{display:flex;flex-direction:column;justify-content:center;align-items:center;position:absolute;z-index:1;top:14%;left:30%;width:263px;height:200px;color:#000;background-image:url(/assets/game-screen-W1AYL95Y.jpeg);background-repeat:no-repeat;border-radius:25px;box-shadow:5px 5px 2px}.game__start-screen p{font-family:"Press Start 2P";font-size:12px;letter-spacing:2px;background:linear-gradient(to bottom,#ff4d00,#ffbf00);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.game__end-screen{display:flex;flex-direction:column;justify-content:center;align-items:center;position:absolute;z-index:1;top:20%;left:30%;width:363px;height:400px;background-color:#639;color:#fe0303;border-radius:25px;box-shadow:5px 5px 2px}.game__end-screen .game__end-screen-title{color:beige;font-family:"Press Start 2P";padding-top:20px;font-size:20px;letter-spacing:2px;line-height:35px;text-align:center}.game__end-screen p{margin-top:20px;font-size:16px;font-family:DotGothic16;padding:5px 30px;letter-spacing:2px;line-height:25px;color:beige}*{margin:0;padding:0;box-sizing:border-box}body{background-color:#000}.game__container{margin:100px auto 50px;display:flex;align-items:flex-start;flex-direction:column;background-color:#000;width:100%;border-bottom:2px dashed gray}.game__background{display:flex;align-items:flex-end;width:100%;padding-top:240px;background-image:url("src/resources/environment/office(2).png");filter:brightness(140%);background-size:2500px;background-repeat:repeat}#hero{background-size:cover;background-repeat:no-repeat;position:relative}.score-counter{display:none;border:solid 1px black;font-family:"Press Start 2P";border-radius:5px;padding:3px 10px;background-color:#f0f8ff;position:relative;top:-250px;left:40%}.game__lives-container{position:absolute;display:flex;top:0;left:5%}.game__lives-container .game__lives{width:30px;padding:0;margin:0}.game__lives-container .game__life-remove,.hide{display:none}.show{display:block}.show-flex{display:flex} +@import"https://fonts.googleapis.com/css2?family=DotGothic16&family=Press+Start+2P&display=swap";@keyframes sceneMovement{0%{background-position:0% 0%}10%{background-position:10% 0%}20%{background-position:20% 0%}30%{background-position:30% 0%}40%{background-position:40% 0%}50%{background-position:50% 0%}60%{background-position:60% 0%}70%{background-position:70% 0%}80%{background-position:80% 0%}90%{background-position:90% 0%}to{background-position:100% 0%}}.game__instructions-button{margin-top:20px;font-size:18px;font-family:DotGothic16;padding:10px 30px;border-radius:12px;letter-spacing:2px;color:beige}.game__instructions-button:hover{color:#ff4d00;box-shadow:5px 5px 2px;background-color:#f0f8ff;cursor:pointer}.game__instructions-button:active{box-shadow:2px 2px 2px;font-size:16px;color:#08c501}.game__start-button{margin-top:20px;padding:8px 10px;font-family:"Press Start 2P";font-size:10px;letter-spacing:2px;font-weight:500;border-radius:12px;color:#f0f8ff}.game__start-button:hover{color:#ff4d00;box-shadow:5px 5px 2px;background-color:#f0f8ff;cursor:pointer}.game__start-button:active{box-shadow:2px 2px 2px;font-size:8px;color:#08c501}.game__end-screen-button{margin:10px 10px 25px;padding:8px 10px;font-family:"Press Start 2P";font-size:10px;letter-spacing:2px;font-weight:500;border-radius:12px;color:#f0f8ff}.game__end-screen-button:hover{color:#ff4d00;box-shadow:5px 5px 2px;background-color:#f0f8ff;cursor:pointer}.game__end-screen-button:active{box-shadow:2px 2px 2px;font-size:8px;color:#08c501}.game__instructions{width:600px;height:500px;display:flex;flex-direction:column;justify-content:center;align-items:center;position:absolute;z-index:2;top:0;left:5%;padding-top:50px;color:#f0f8ff;background-color:#000;border-radius:5px}.game__instructions .game__title{color:beige;font-family:"Press Start 2P";font-size:20px;letter-spacing:2px;line-height:35px;text-align:center}.game__instructions .game__instructions-content{margin-top:20px;font-size:20px;font-family:DotGothic16;padding:5px 30px;letter-spacing:2px;line-height:25px;color:beige}.game__start-screen{display:flex;flex-direction:column;justify-content:center;align-items:center;position:absolute;z-index:1;top:14%;left:30%;width:263px;height:200px;color:#000;background-image:url(/assets/game-screen-W1AYL95Y.jpeg);background-repeat:no-repeat;border-radius:25px;box-shadow:5px 5px 2px}.game__start-screen p{font-family:"Press Start 2P";font-size:12px;letter-spacing:2px;background:linear-gradient(to bottom,#ff4d00,#ffbf00);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.game__end-screen{display:flex;flex-direction:column;justify-content:center;align-items:center;position:absolute;z-index:1;top:20%;left:30%;width:363px;height:400px;background-color:#639;color:#fe0303;border-radius:25px;box-shadow:5px 5px 2px}.game__end-screen .game__end-screen-title{color:beige;font-family:"Press Start 2P";padding-top:20px;font-size:20px;letter-spacing:2px;line-height:35px;text-align:center}.game__end-screen p{margin-top:20px;font-size:16px;font-family:DotGothic16;padding:5px 30px;letter-spacing:2px;line-height:25px;color:beige}@media screen and (min-width: 850px){.game__instructions{width:800px;height:500px;display:flex;flex-direction:column;justify-content:center;align-items:center;position:absolute;z-index:2;top:0;left:5%}.game__start-screen{left:40%}}*{margin:0;padding:0;box-sizing:border-box}body{background-color:#000}.game__container{margin:100px auto 50px;display:flex;align-items:flex-start;flex-direction:column;background-color:#000;width:100%;border-bottom:2px dashed gray}.game__background{display:flex;align-items:flex-end;width:100%;padding-top:240px;background-image:url("src/resources/environment/office(2).png");filter:brightness(140%);background-size:2500px;background-repeat:repeat}#hero{background-size:cover;background-repeat:no-repeat;position:relative}.score-counter{display:none;border:solid 1px black;font-family:"Press Start 2P";border-radius:5px;padding:3px 10px;background-color:#f0f8ff;position:relative;top:-250px;left:40%}.game__lives-container{position:absolute;display:flex;top:0;left:5%}.game__lives-container .game__lives{width:30px;padding:0;margin:0}.game__lives-container .game__life-remove,.hide{display:none}.show{display:block}.show-flex{display:flex} diff --git a/assets/index-Dre7EbrV.js b/assets/index-Dre7EbrV.js deleted file mode 100644 index fb2f7fb..0000000 --- a/assets/index-Dre7EbrV.js +++ /dev/null @@ -1 +0,0 @@ -(function(){const o=document.createElement("link").relList;if(o&&o.supports&&o.supports("modulepreload"))return;for(const r of document.querySelectorAll('link[rel="modulepreload"]'))R(r);new MutationObserver(r=>{for(const n of r)if(n.type==="childList")for(const v of n.addedNodes)v.tagName==="LINK"&&v.rel==="modulepreload"&&R(v)}).observe(document,{childList:!0,subtree:!0});function F(r){const n={};return r.integrity&&(n.integrity=r.integrity),r.referrerPolicy&&(n.referrerPolicy=r.referrerPolicy),r.crossOrigin==="use-credentials"?n.credentials="include":r.crossOrigin==="anonymous"?n.credentials="omit":n.credentials="same-origin",n}function R(r){if(r.ep)return;r.ep=!0;const n=F(r);fetch(r.href,n)}})();const c=document.querySelector("#hero"),t=document.querySelector(".npc-12"),A=document.querySelector(".npc__collision-box"),g=document.querySelector(".hero__collision-box"),y=document.querySelector(".score-counter"),w=document.querySelector(".game__start-screen"),m=document.querySelector(".game__end-screen"),C=document.querySelector(".game__start-button"),M=document.querySelector(".game__instructions-button"),B=document.querySelector(".game__instructions"),l=document.querySelector(".game__background"),T=document.querySelector(".one"),$=document.querySelector(".two"),b=document.querySelector(".three");if(!c||!t||!A||!g||!y||!w||!m||!C||!l||!M||!B||!T||!$||!b)throw new Error("Issues with selector");const G=10,N=8;let O,E,f,p,a=3,d=0,h=0,x=!1,H=100,W=15,L=4,S=5,D=0,J=25;const u=["src/resources/character-sprites/npc-0.png","src/resources/character-sprites/npc-2.png","src/resources/character-sprites/npc-4.png","src/resources/character-sprites/npc-6.png","src/resources/character-sprites/npc-8.png","src/resources/character-sprites/npc-10.png","src/resources/character-sprites/npc-12.png","src/resources/images/WHAM.png"],k=["src/resources/character-sprites/mc-run(1).png","src/resources/character-sprites/mc-run(2).png","src/resources/character-sprites/mc-run(3).png"],e={x:0,y:0,width:90,height:40},i={x:550,y:240,width:20,height:40},I=()=>{c.style.width=`${e.width}px`,c.style.height=`${e.height}px`,c.style.backgroundImage=`url('${k[h]}')`,h=(h+1)%k.length,g.style.width=`${e.width-30}px`,g.style.height=`${e.height}px`,E=setTimeout(I,1e3/G)},q=()=>{y.innerText=`Score: ${d.toLocaleString()}`,p||(p=performance.now());const s=performance.now(),o=Math.floor((s-p)/1e3);d+=o,y.innerText=`Score: ${d.toLocaleString()}`,O=setTimeout(q,100)};w.classList.add("hide");l.style.backgroundImage="none";m.classList.add("hide");M.addEventListener("click",()=>{B.classList.add("hide"),w.classList.add("show-flex")});C.addEventListener("click",()=>{w.classList.remove("show-flex"),l&&(l.style.backgroundImage="url('src/resources/environment/office(2).png')",l.style.animation="sceneMovement 9s linear infinite"),y.classList.add("show");const s=Math.floor(Math.random()*(u.length-1));t.style.backgroundImage=`url('${u[s]}')`,q(),I(),_()});const K=()=>{p=0,a=3,d=0,h=0,x=!1,T.classList.remove("game__life-remove"),$.classList.remove("game__life-remove"),b.classList.remove("game__life-remove"),l.style.animation="sceneMovement 9s linear infinite",q(),I(),_()};document.addEventListener("keydown",s=>{s.key==="ArrowUp"&&!x&&(x=!0,P())});const j=()=>{e.y<0?(e.y+=S,e.x+=D,c.style.top=`${e.y}px`,c.style.right=`${e.x}px`,setTimeout(j,1e3/60)):(e.y=0,e.x=0,c.style.top=`${e.y}px`,c.style.right=`${e.x}px`,x=!1)},P=()=>{e.y>=-H?(e.y-=W,e.x-=L,c.style.top=`${e.y}px`,c.style.right=`${e.x}px`,setTimeout(P,1e3/60)):j()},U=()=>{const s=g.getBoundingClientRect(),o=t.getBoundingClientRect();s.x+17o.x&&s.yo.y&&(Q(),d-=100,S=50,L=0,c.style.width="40px",c.style.height="40px",c.style.backgroundImage=`url('${u[7]}')`,t.style.width="40px",t.style.height="40px",t.style.backgroundImage=`url('${u[7]}')`,setTimeout(()=>{t.style.display="none",S=5,L=4,a>0&&(f=setTimeout(_,1e3))},500),clearTimeout(f))},z=()=>{clearTimeout(f),clearTimeout(E),clearTimeout(O),l.style.animation="none",m.classList.remove("hide")};m.addEventListener("click",()=>{m.classList.add("hide"),K()});const Q=()=>{a-=1,a===2?T.classList.add("game__life-remove"):a===1?$.classList.add("game__life-remove"):a===0&&(b.classList.add("game__life-remove"),console.log("last life is gone"),z())},_=()=>{const s=t.getBoundingClientRect();if(t.style.position="absolute",t.style.width=`${i.width}px`,t.style.height=`${i.height}px`,t.style.left=`${i.x}px`,t.style.top=`${i.y}px`,s.x<=0){const o=Math.floor(Math.random()*(u.length-1));t.style.backgroundImage=`url('${u[o]}')`,t.style.display="block",i.x=window.innerWidth}i.x-=J,t.style.left=`${i.x}px`,f=setTimeout(_,1e3/N),U()}; diff --git a/assets/index-gz120MLu.js b/assets/index-gz120MLu.js new file mode 100644 index 0000000..3310af1 --- /dev/null +++ b/assets/index-gz120MLu.js @@ -0,0 +1 @@ +(function(){const r=document.createElement("link").relList;if(r&&r.supports&&r.supports("modulepreload"))return;for(const o of document.querySelectorAll('link[rel="modulepreload"]'))j(o);new MutationObserver(o=>{for(const n of o)if(n.type==="childList")for(const T of n.addedNodes)T.tagName==="LINK"&&T.rel==="modulepreload"&&j(T)}).observe(document,{childList:!0,subtree:!0});function L(o){const n={};return o.integrity&&(n.integrity=o.integrity),o.referrerPolicy&&(n.referrerPolicy=o.referrerPolicy),o.crossOrigin==="use-credentials"?n.credentials="include":o.crossOrigin==="anonymous"?n.credentials="omit":n.credentials="same-origin",n}function j(o){if(o.ep)return;o.ep=!0;const n=L(o);fetch(o.href,n)}})();const c=document.querySelector("#hero"),s=document.querySelector(".npc-12"),z=document.querySelector(".npc__collision-box"),h=document.querySelector(".hero__collision-box"),f=document.querySelector(".score-counter"),k=document.querySelector(".game__start-screen"),S=document.querySelector(".game__end-screen"),F=document.querySelector(".game__end-screen-button"),N=document.querySelector(".game__start-button"),H=document.querySelector(".game__instructions-button"),J=document.querySelector(".game__instructions"),a=document.querySelector(".game__background"),q=document.querySelector(".one"),C=document.querySelector(".two"),M=document.querySelector(".three");if(!c||!s||!z||!h||!f||!k||!S||!F||!N||!a||!H||!J||!q||!C||!M)throw new Error("Issues with selector");const Q=10,V=8,X=new Audio("src/resources/audio/hits/6.ogg"),Y=new Audio("src/resources/audio/hits/ohmy.wav");let $=0,B=!0,W,A,O,x,D=!1,y,m=3,d=0,i=0,p=!1,w=!1,Z=110,ee=15,b=5,I=5,te=0,g=25;const u=["src/resources/character-sprites/npc-0.png","src/resources/character-sprites/npc-2.png","src/resources/character-sprites/npc-4.png","src/resources/character-sprites/npc-6.png","src/resources/character-sprites/npc-8.png","src/resources/character-sprites/npc-10.png","src/resources/character-sprites/npc-12.png","src/resources/images/WHAM.png"],G=["src/resources/character-sprites/mc-run(1).png","src/resources/character-sprites/mc-run(2).png","src/resources/character-sprites/mc-run(3).png"],P=["src/resources/character-sprites/mc-attack00.png","src/resources/character-sprites/mc-attack02.png","src/resources/character-sprites/mc-attack03.png","src/resources/character-sprites/mc-attack04.png","src/resources/character-sprites/mc-attack05.png","src/resources/character-sprites/mc-attack06.png","src/resources/character-sprites/mc-attack07.png","src/resources/character-sprites/mc-attack17.png","src/resources/character-sprites/mc-attack18.png","src/resources/character-sprites/mc-attack19.png","src/resources/character-sprites/mc-attack20.png","src/resources/character-sprites/mc-attack21.png"],t={x:0,y:0,width:90,height:40},l={x:550,y:240,width:20,height:40},re=()=>{X.play()},R=()=>{if(p)if($<1)if(ir.x&&e.yr.y&&(re(),d+=100,s.style.width="40px",s.style.height="40px",s.style.backgroundImage=`url('${u[7]}')`)}else $++,i=0,R();else p=!1,B=!1,$=0,v()},v=()=>{p=!1,B=!0,clearTimeout(O),c.style.width=`${t.width}px`,c.style.height=`${t.height}px`,c.style.backgroundImage=`url('${G[i]}')`,i=(i+1)%G.length,h.style.width=`${t.width-30}px`,h.style.height=`${t.height}px`,A=setTimeout(v,1e3/Q)};document.addEventListener("keydown",e=>{e.key===" "&&!p&&D&&(p=!0,B&&clearTimeout(A),R())});const _=()=>{const e=s.getBoundingClientRect();if(s.style.position="absolute",s.style.width=`${l.width}px`,s.style.height=`${l.height}px`,s.style.left=`${l.x}px`,s.style.top=`${l.y}px`,e.x<=0){const r=Math.floor(Math.random()*(u.length-1));s.style.backgroundImage=`url('${u[r]}')`,s.style.display="block",l.x=window.innerWidth,g=Math.floor(Math.random()*10)+55;let L=Math.floor(Math.random()*6)+10;g+=L,console.log(g)}l.x-=g,s.style.left=`${l.x}px`,x=setTimeout(_,1e3/V),ie()},E=()=>{f.innerText=`Score: ${d.toLocaleString()}`,y||(y=performance.now());const e=performance.now(),r=Math.floor((e-y)/1e3);d+=r,f.innerText=`Score: ${d.toLocaleString()}`,W=setTimeout(E,100)};k.classList.add("hide");a.style.backgroundImage="none";S.classList.add("hide");H.addEventListener("click",()=>{J.classList.add("hide"),k.classList.add("show-flex")});N.addEventListener("click",()=>{se()});const se=()=>{D=!0,k.classList.remove("show-flex"),a&&(a.style.backgroundImage="url('src/resources/environment/office(2).png')",a.style.animation="sceneMovement 9s linear infinite"),f.classList.add("show");const e=Math.floor(Math.random()*(u.length-1));s.style.backgroundImage=`url('${u[e]}')`,E(),v(),_()},ce=()=>{y=0,m=3,d=0,i=0,w=!1,q.classList.remove("game__life-remove"),C.classList.remove("game__life-remove"),M.classList.remove("game__life-remove"),a.style.animation="sceneMovement 9s linear infinite",E(),v(),_()},K=()=>{t.y<0?(t.y+=I,t.x+=te,c.style.top=`${t.y}px`,c.style.right=`${t.x}px`,setTimeout(K,1e3/60)):(t.y=0,t.x=0,c.style.top=`${t.y}px`,c.style.right=`${t.x}px`,w=!1)},U=()=>{t.y>=-Z?(t.y-=ee,t.x-=b,c.style.top=`${t.y}px`,c.style.right=`${t.x}px`,setTimeout(U,1e3/60)):K()},oe=()=>{w||(w=!0,U())};document.addEventListener("keydown",e=>{e.key==="ArrowUp"&&oe()});const ne=()=>{Y.play()},ie=()=>{const e=h.getBoundingClientRect(),r=s.getBoundingClientRect();e.x+17r.x&&e.yr.y&&(ne(),le(),d-=100,I=50,b=0,c.style.width="40px",c.style.height="40px",c.style.backgroundImage=`url('${u[7]}')`,s.style.width="40px",s.style.height="40px",s.style.backgroundImage=`url('${u[7]}')`,setTimeout(()=>{s.style.display="none",I=5,b=4,m>0&&(x=setTimeout(_,1e3))},500),clearTimeout(x))},ae=()=>{clearTimeout(x),clearTimeout(A),clearTimeout(O),clearTimeout(W),a.style.animation="none",S.classList.remove("hide")};F.addEventListener("click",()=>{S.classList.add("hide"),ce()});const le=()=>{m-=1,m===2?q.classList.add("game__life-remove"):m===1?C.classList.add("game__life-remove"):m===0&&(M.classList.add("game__life-remove"),ae())}; diff --git a/index.html b/index.html index f362ca3..7665661 100644 --- a/index.html +++ b/index.html @@ -5,11 +5,11 @@ + href="/assets/personal-space-invaders_dodging-small-talk_LOGO-DVKqBW6Y.png"/> Personal-Space Invaders - - + + @@ -24,7 +24,7 @@

Personal-Space Invaders: Dodging Small Talk

lives.

- Use the '⇧' arrow key to jump over colleagues and survive to the end. + Use the '⇧' arrow key to jump over colleagues and SPACEBAR to attack. Can you survive the event without succumbing to boredom?

Continue
@@ -49,15 +49,15 @@

GAME OVER

pixelated heart pixelated heart pixelated heart