diff --git a/img/mone.png b/img/mone.png new file mode 100644 index 0000000..d2d4a28 Binary files /dev/null and b/img/mone.png differ diff --git a/img/tiger/adult.png b/img/tiger/adult.png index 296f490..d0832c9 100644 Binary files a/img/tiger/adult.png and b/img/tiger/adult.png differ diff --git a/img/tiger/baby.png b/img/tiger/baby.png index 1ed9e21..d2cb97b 100644 Binary files a/img/tiger/baby.png and b/img/tiger/baby.png differ diff --git a/img/tiger/teen.png b/img/tiger/teen.png index 3ea78f9..083f457 100644 Binary files a/img/tiger/teen.png and b/img/tiger/teen.png differ diff --git a/index.html b/index.html index 5193ee9..c4c9be1 100644 --- a/index.html +++ b/index.html @@ -9,27 +9,31 @@ PetPet +
+ +

Money: 0

+
-

Junior-BOY

-

Age: 0

+

Junior-BOY

+

Age:

-

Joy: 0

+

Joy:

-

Food: 0

+

Food:

-

Clean: 0

+

Clean:

-

Health: 0

+

Health:

diff --git a/main.js b/main.js index 929b9e7..102d4cc 100644 --- a/main.js +++ b/main.js @@ -1,5 +1,6 @@ const Dage = document.querySelector('#ageN'); const Aimg = document.querySelector('#anim') +const NameC = document.querySelector('#nameCa') const Djoy = document.querySelector('#joyN'); const Dfood = document.querySelector('#fooN'); @@ -26,17 +27,17 @@ let attributes = { Name: [], Joy: { value: 10, - max: 100, + max: 306, min: -100, }, Hunger: { value: 30, - max: 150, + max: 100, min: 0, }, Clean: { - value: 50, - max: 100, + value: 50.6, + max: 253, min: 0, }, Hp: { @@ -59,12 +60,20 @@ let attributes = { window.addEventListener('load',() => { display(); time(); -}) +}); -function toCPercen(num){//todo num => % - if(num>=90){ +function toCPercen(varr){//todo num => % + let num = Math.floor((varr.value/(varr.max/100))*10)/10; + + if(num>100) num = 100; + if(num=80){ return `

${num}%

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

${num}%

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

${num}%

`; @@ -79,20 +88,25 @@ function toCPercen(num){//todo num => % 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); + Djoy.innerHTML = toCPercen(attributes.Joy); + Dfood.innerHTML = toCPercen(attributes.Hunger); + Dclean.innerHTML = toCPercen(attributes.Clean); + Dhealth.innerHTML = toCPercen(attributes.Hp); if(attributes.Age.value<=6){ + NameC.innerHTML = `Junior` Aimg.src = imgTiger.Normal.tiger[0]; }else if(attributes.Age.value<18){ + NameC.innerHTML = `Teen` Aimg.src = imgTiger.Normal.tiger[1]; }else if(attributes.Age.value<60){ + NameC.innerHTML = `Adult` Aimg.src = imgTiger.Normal.tiger[2]; }else if(attributes.Age.value<100){ + NameC.innerHTML = `Senior` Aimg.src = imgTiger.Normal.tiger[3]; }else{ + NameC.innerHTML = `Dead` Aimg.src = imgTiger.Dead; } @@ -100,9 +114,9 @@ function display(){ } function play(){ - if(attributes.Joy.value<98){ - attributes.Joy.value += Math.floor(Math.random()*10); - attributes.Clean.value -= Math.floor(Math.random()*5); + if(attributes.Joy.value(attributes.Hunger.max/100)*80 && attributes.Joy.value>(attributes.Joy.max/100)*80 && attributes.Clean.value>(attributes.Clean.max/100)*90 && attributes.Hp.value < attributes.Hp.max){ + attributes.Hp.value += 0.1; + } +} + function time(){ setTimeout (() => { 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 + if(attributes.Hp.value>0) attributes.Age.value = (attributes.Age.value*10 + 1)/10; + if((attributes.Hunger.value<=0)&&(attributes.Hp.value!=0)) attributes.Hp.value -= 2 - + hapiHeal(); display(); - time(); },1000); } diff --git a/style.css b/style.css index e66aa92..31cd213 100644 --- a/style.css +++ b/style.css @@ -22,6 +22,8 @@ body{ display: flex; flex-direction: row; flex-wrap: wrap; + justify-content: center; + align-items: center; } .item{ /*border: red solid 2px;*/ @@ -32,12 +34,28 @@ body{ margin: .5rem; gap: 10px; background: #222222cc; + height: 100px; + width: 100px; + } main{ - clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%); + /*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 +.Lime{color: lime;}.Yellow{color: yellow;}.Orange{color: orange;}.Red{color: red;}.DarkRed{color: darkred;} + +.cash{ + position: absolute; + left: 0; + top: 0; + background: #222222cc; + padding: .5rem; + border-radius: 0 0 1rem 0; + display: flex; + flex-direction: row; + justify-content: space-evenly; + align-items: center; +} + +.cash img{ + margin-right: .5rem; +} \ No newline at end of file