diff --git a/index.html b/index.html index 19512f9..5193ee9 100644 --- a/index.html +++ b/index.html @@ -9,29 +9,31 @@ PetPet -
-

Junior-BOY

-

Age: 0

- -
-
-
-

Joy: 0

- -
-
-

Food: 0

- -
-
-

Clean: 0

- -
-
-

Health: 0

- -
-
+
+
+

Junior-BOY

+

Age: 0

+ +
+
+
+

Joy: 0

+ +
+
+

Food: 0

+ +
+
+

Clean: 0

+ +
+
+

Health: 0

+ +
+
+
\ No newline at end of file diff --git a/main.js b/main.js index 30c5ba4..929b9e7 100644 --- a/main.js +++ b/main.js @@ -22,56 +22,105 @@ const imgTiger = { Dead: './img/dead/tiger.png' } -let joy=10, hunger=30, clean=50, hp=100, age=0; +let attributes = { + Name: [], + Joy: { + value: 10, + max: 100, + min: -100, + }, + Hunger: { + value: 30, + max: 150, + min: 0, + }, + Clean: { + value: 50, + max: 100, + min: 0, + }, + Hp: { + value: 100, + max: 100, + min: 0, + }, + Age: { + value: 0, + max: 100, + min: 0, + }, + /*Joy: { + value: 10, + max: 100, + min: -100, + }*/ +} window.addEventListener('load',() => { display(); time(); }) -function display(){ - Dage.innerHTML = age; - Djoy.innerHTML = joy; - Dfood.innerHTML = hunger; - Dclean.innerHTML = clean; - Dhealth.innerHTML = hp; +function toCPercen(num){//todo num => % + if(num>=90){ + return `

${num}%

`; + }else if(num>=70){ + return `

${num}%

`; + }else if(num>=40){ + return `

${num}%

`; + }else if(num>=20){ + return `

${num}%

`; + }else if(num>=0){ + return `

${num}%

`; + }else if(num<0){ + return `

${num}%

`; + } +} - if(age<=6){ +function display(){ + Dage.innerHTML = (attributes.Age.value); + Djoy.innerHTML = toCPercen(attributes.Joy.value); + Dfood.innerHTML = toCPercen(attributes.Hunger.value); + Dclean.innerHTML = toCPercen(attributes.Clean.value); + Dhealth.innerHTML = toCPercen(attributes.Hp.value); + + if(attributes.Age.value<=6){ Aimg.src = imgTiger.Normal.tiger[0]; - }else if(age<18){ + }else if(attributes.Age.value<18){ Aimg.src = imgTiger.Normal.tiger[1]; - }else if(age<60){ + }else if(attributes.Age.value<60){ Aimg.src = imgTiger.Normal.tiger[2]; - }else if(age<100){ + }else if(attributes.Age.value<100){ Aimg.src = imgTiger.Normal.tiger[3]; }else{ Aimg.src = imgTiger.Dead; } - if(hp<=0) Aimg.src = imgTiger.Dead; + if(attributes.Hp.value<=0) Aimg.src = imgTiger.Dead; } function play(){ - if(joy<98){ - joy += Math.floor(Math.random()*10); - clean -= Math.floor(Math.random()*5); + if(attributes.Joy.value<98){ + attributes.Joy.value += Math.floor(Math.random()*10); + attributes.Clean.value -= Math.floor(Math.random()*5); }else{ - clean -= Math.floor(Math.random()*5); + attributes.Clean.value -= Math.floor(Math.random()*5); } display(); } function feed(){ - if(hunger<150){ - if(hunger<100){ - hunger += Math.floor(Math.random()*15); - clean -= Math.floor(Math.random()*5); + if(attributes.Hunger.value { - if(hunger>0) hunger--; - clean--; - joy--; - if(hp>0) age+=0.5; - if(hunger===0) hp--; + if(attributes.Hunger.value>0) attributes.Hunger.value -= 3; + if(attributes.Clean.value>0) attributes.Clean.value--; + if(attributes.Joy.value>-100) attributes.Joy.value--; + if(attributes.Hp.value>0) attributes.Age.value+=0.5; + if((attributes.Hunger.value===0)&&(attributes.Hp.value!=0)) attributes.Hp.value -= 1.5 display(); diff --git a/style.css b/style.css index a199a30..e66aa92 100644 --- a/style.css +++ b/style.css @@ -2,6 +2,7 @@ padding: 0; margin: 0; box-sizing: border-box; + text-align: center; } body{ display: flex; @@ -12,6 +13,10 @@ body{ background: #333; color: #fff; } +#anim{ + width: 200px; + aspect-ratio: 1/1; +} .activ{ margin-top: 1rem; display: flex; @@ -19,11 +24,20 @@ body{ flex-wrap: wrap; } .item{ - border: red solid 2px; + /*border: red solid 2px;*/ + border-radius: .5rem; display: flex; flex-direction: column; padding: 1rem; margin: .5rem; gap: 10px; background: #222222cc; -} \ No newline at end of file +} +main{ + clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%); +} +.Lime{color: lime;} +.Yellow{color: yellow;} +.Orange{color: orange;} +.Red{color: red;} +.DarkRed{color: darkred;} \ No newline at end of file