Eidam/PetPet
1
0
Fork 0
mirror of https://github.com/MrEidam/PetPet.git synced 2026-04-17 15:43:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

It works?

Browse Source
This commit is contained in:
MrEidam
2024-06-04 15:43:37 +02:00
parent d85587fdd5
commit a8123be603
8 changed files with 75 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
img/dead/tiger.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 144 KiB

BIN
img/tiger/adult.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 253 KiB

0
img/tiglet_small.png → img/tiger/baby.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 413 KiB

After

Width:  |  Height:  |  Size: 413 KiB

BIN
img/tiger/senior.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 155 KiB

BIN
img/tiger/teen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 177 KiB

12
index.html
View File

@@ -11,24 +11,24 @@
<body> <body>
<div> <div>
<h1><span>Junior</span>-<span>BOY</span></h1> <h1><span>Junior</span>-<span>BOY</span></h1>
<p>Age: <span>0</span></p> <p>Age: <span id="ageN">0</span></p>
<img src="./img/tiglet_small.png" style="width:200px;"> <img src="./img/tiger/baby.png" style="width:200px;" id="anim">
</div> </div>
<div class="activ"> <div class="activ">
<article class="item"> <article class="item">
<p>Joy: <span id="joyN">10</span></p> <p>Joy: <span id="joyN">0</span></p>
<button onclick="play()">Play</button> <button onclick="play()">Play</button>
</article> </article>
<article class="item"> <article class="item">
<p>Food: <span id="fooN">30</span></p> <p>Food: <span id="fooN">0</span></p>
<button onclick="feed()">Feed</button> <button onclick="feed()">Feed</button>
</article> </article>
<article class="item"> <article class="item">
<p>Clean: <span id="cleN">50</span></p> <p>Clean: <span id="cleN">0</span></p>
<button onclick="clearBoy()">Clean</button> <button onclick="clearBoy()">Clean</button>
</article> </article>
<article class="item"> <article class="item">
<p>Health: <span id="heaN">100</span></p> <p>Health: <span id="heaN">0</span></p>
<button>Heal</button> <button>Heal</button>
</article> </article>
</div> </div>

50
main.js
View File

@@ -1,15 +1,49 @@
const Dage = document.querySelector('#ageN');
const Aimg = document.querySelector('#anim')
const Djoy = document.querySelector('#joyN'); const Djoy = document.querySelector('#joyN');
const Dfood = document.querySelector('#fooN'); const Dfood = document.querySelector('#fooN');
const Dclean = document.querySelector('#cleN'); const Dclean = document.querySelector('#cleN');
const Dhealth = document.querySelector('#heaN'); 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(){ function display(){
Dage.innerHTML = age;
Djoy.innerHTML = joy; Djoy.innerHTML = joy;
Dfood.innerHTML = hunger; Dfood.innerHTML = hunger;
Dclean.innerHTML = clean; Dclean.innerHTML = clean;
Dhealth.innerHTML = hp; 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(){ function play(){
@@ -46,3 +80,17 @@ function clearBoy(){
} }
display(); display();
} }
function time(){
setTimeout (() => {
hunger--;
clean--;
joy--;
age+=0.5;
display();
time();
},1000);
}

20
style.css
View File

@@ -4,6 +4,26 @@
box-sizing: border-box; box-sizing: border-box;
} }
body{ body{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #333; background: #333;
color: #fff; 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;
}