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