diff --git a/img/dead/tiger.png b/img/dead/tiger.png
new file mode 100644
index 0000000..820cb1a
Binary files /dev/null and b/img/dead/tiger.png differ
diff --git a/img/tiger/adult.png b/img/tiger/adult.png
new file mode 100644
index 0000000..296f490
Binary files /dev/null and b/img/tiger/adult.png differ
diff --git a/img/tiglet_small.png b/img/tiger/baby.png
similarity index 100%
rename from img/tiglet_small.png
rename to img/tiger/baby.png
diff --git a/img/tiger/senior.png b/img/tiger/senior.png
new file mode 100644
index 0000000..c0057b9
Binary files /dev/null and b/img/tiger/senior.png differ
diff --git a/img/tiger/teen.png b/img/tiger/teen.png
new file mode 100644
index 0000000..3ea78f9
Binary files /dev/null and b/img/tiger/teen.png differ
diff --git a/index.html b/index.html
index 9dc807d..19512f9 100644
--- a/index.html
+++ b/index.html
@@ -11,24 +11,24 @@
Junior-BOY
-
Age: 0
-
+
Age: 0
+
- Joy: 10
+ Joy: 0
- Food: 30
+ Food: 0
- Clean: 50
+ Clean: 0
- Health: 100
+ Health: 0
diff --git a/main.js b/main.js
index 9d7fac0..5f7d0e9 100644
--- a/main.js
+++ b/main.js
@@ -1,15 +1,49 @@
+const Dage = document.querySelector('#ageN');
+const Aimg = document.querySelector('#anim')
+
const Djoy = document.querySelector('#joyN');
const Dfood = document.querySelector('#fooN');
const Dclean = document.querySelector('#cleN');
const Dhealth = document.querySelector('#heaN');
-let joy=10, hunger=30, clean=50, hp=100;
+const imgTiger = {
+ Normal: {
+ tiger: [
+ '../img/tiger/baby.png',
+ '../img/tiger/teen.png',
+ '../img/tiger/adult.png',
+ '../img/tiger/senior.png'
+ ]
+ },
+ ////"Spring": {},
+ Dead: './img/dead/tiger.png'
+}
+
+let joy=10, hunger=30, clean=50, hp=100, age=0;
+
+window.addEventListener('load',() => {
+ display();
+ time();
+})
function display(){
+ Dage.innerHTML = age;
Djoy.innerHTML = joy;
Dfood.innerHTML = hunger;
Dclean.innerHTML = clean;
Dhealth.innerHTML = hp;
+
+ if(age<=6){
+ Aimg.src = imgTiger.Normal.tiger[0];
+ }else if(age<18){
+ Aimg.src = imgTiger.Normal.tiger[1];
+ }else if(age<60){
+ Aimg.src = imgTiger.Normal.tiger[2];
+ }else if(age<100){
+ Aimg.src = imgTiger.Normal.tiger[3];
+ }else{
+ Aimg.src = imgTiger.Dead;
+ }
}
function play(){
@@ -45,4 +79,18 @@ function clearBoy(){
joy -= Math.floor(Math.random()*11);
}
display();
+}
+
+function time(){
+ setTimeout (() => {
+ hunger--;
+ clean--;
+ joy--;
+ age+=0.5;
+ display();
+
+
+
+ time();
+ },1000);
}
\ No newline at end of file
diff --git a/style.css b/style.css
index 0ccfd77..a199a30 100644
--- a/style.css
+++ b/style.css
@@ -4,6 +4,26 @@
box-sizing: border-box;
}
body{
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ min-height: 100vh;
background: #333;
color: #fff;
+}
+.activ{
+ margin-top: 1rem;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+}
+.item{
+ border: red solid 2px;
+ display: flex;
+ flex-direction: column;
+ padding: 1rem;
+ margin: .5rem;
+ gap: 10px;
+ background: #222222cc;
}
\ No newline at end of file