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

Colors and Attributes value

Browse Source
This commit is contained in:
MrEidam
2024-06-04 23:48:48 +02:00
parent c054655c40
commit 05dcdc7b09
3 changed files with 121 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
index.html
View File

@@ -9,29 +9,31 @@
<title>PetPet</title> <title>PetPet</title>
</head> </head>
<body> <body>
<div> <main>
<h1><span>Junior</span>-<span>BOY</span></h1> <div>
<p>Age: <span id="ageN">0</span></p> <h1><span>Junior</span>-<span>BOY</span></h1>
<img src="./img/tiger/baby.png" style="width:200px;" id="anim"> <p>Age: <span id="ageN">0</span></p>
</div> <img src="./img/tiger/baby.png" id="anim">
<div class="activ"> </div>
<article class="item"> <div class="activ">
<p>Joy: <span id="joyN">0</span></p> <article class="item">
<button onclick="play()">Play</button> <p>Joy: <span id="joyN">0</span></p>
</article> <button onclick="play()">Play</button>
<article class="item"> </article>
<p>Food: <span id="fooN">0</span></p> <article class="item">
<button onclick="feed()">Feed</button> <p>Food: <span id="fooN">0</span></p>
</article> <button onclick="feed()">Feed</button>
<article class="item"> </article>
<p>Clean: <span id="cleN">0</span></p> <article class="item">
<button onclick="clearBoy()">Clean</button> <p>Clean: <span id="cleN">0</span></p>
</article> <button onclick="clearBoy()">Clean</button>
<article class="item"> </article>
<p>Health: <span id="heaN">0</span></p> <article class="item">
<button>Heal</button> <p>Health: <span id="heaN">0</span></p>
</article> <button>Heal</button>
</div> </article>
</div>
</main>
<script src="main.js"></script> <script src="main.js"></script>
</body> </body>
</html> </html>

111
main.js
View File

@@ -22,56 +22,105 @@ const imgTiger = {
Dead: './img/dead/tiger.png' 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',() => { window.addEventListener('load',() => {
display(); display();
time(); time();
}) })
function display(){ function toCPercen(num){//todo num => %
Dage.innerHTML = age; if(num>=90){
Djoy.innerHTML = joy; return `<p class="Lime">${num}%</p>`;
Dfood.innerHTML = hunger; }else if(num>=70){
Dclean.innerHTML = clean; return `<p class="Yellow">${num}%</p>`;
Dhealth.innerHTML = hp; }else if(num>=40){
return `<p class="Orange">${num}%</p>`;
}else if(num>=20){
return `<p class="Red">${num}%</p>`;
}else if(num>=0){
return `<p class="DarkRed">${num}%</p>`;
}else if(num<0){
return `<p class="DarkRed">${num}%</p>`;
}
}
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]; Aimg.src = imgTiger.Normal.tiger[0];
}else if(age<18){ }else if(attributes.Age.value<18){
Aimg.src = imgTiger.Normal.tiger[1]; Aimg.src = imgTiger.Normal.tiger[1];
}else if(age<60){ }else if(attributes.Age.value<60){
Aimg.src = imgTiger.Normal.tiger[2]; Aimg.src = imgTiger.Normal.tiger[2];
}else if(age<100){ }else if(attributes.Age.value<100){
Aimg.src = imgTiger.Normal.tiger[3]; Aimg.src = imgTiger.Normal.tiger[3];
}else{ }else{
Aimg.src = imgTiger.Dead; Aimg.src = imgTiger.Dead;
} }
if(hp<=0) Aimg.src = imgTiger.Dead; if(attributes.Hp.value<=0) Aimg.src = imgTiger.Dead;
} }
function play(){ function play(){
if(joy<98){ if(attributes.Joy.value<98){
joy += Math.floor(Math.random()*10); attributes.Joy.value += Math.floor(Math.random()*10);
clean -= Math.floor(Math.random()*5); attributes.Clean.value -= Math.floor(Math.random()*5);
}else{ }else{
clean -= Math.floor(Math.random()*5); attributes.Clean.value -= Math.floor(Math.random()*5);
} }
display(); display();
} }
function feed(){ function feed(){
if(hunger<150){ if(attributes.Hunger.value<attributes.Hunger.max){
if(hunger<100){ if(attributes.Hunger.value<100){
hunger += Math.floor(Math.random()*15); attributes.Hunger.value += Math.floor(Math.random()*15);
clean -= Math.floor(Math.random()*5); attributes.Clean.value -= Math.floor(Math.random()*7);
}else{ }else{
hunger += Math.floor(Math.random()*5); attributes.Hunger.value += Math.floor(Math.random()*5);
clean -= Math.floor(Math.random()*5); attributes.Clean.value -= Math.floor(Math.random()*7);
hp -= Math.floor(Math.random()*14); attributes.Hp.value -= Math.floor(Math.random()*14);
} }
}else{ }else{
attributes.attributes.Hp.value.value -= Math.floor(Math.random()*5);
return; return;
} }
display(); display();
@@ -79,20 +128,20 @@ function feed(){
function clearBoy(){ function clearBoy(){
console.log('sup'); console.log('sup');
if(clean<100){ if(attributes.Clean.value<100){
clean += Math.floor(Math.random()*20); attributes.Clean.value += Math.floor(Math.random()*20);
joy -= Math.floor(Math.random()*11); attributes.Joy.value -= Math.floor(Math.random()*11);
} }
display(); display();
} }
function time(){ function time(){
setTimeout (() => { setTimeout (() => {
if(hunger>0) hunger--; if(attributes.Hunger.value>0) attributes.Hunger.value -= 3;
clean--; if(attributes.Clean.value>0) attributes.Clean.value--;
joy--; if(attributes.Joy.value>-100) attributes.Joy.value--;
if(hp>0) age+=0.5; if(attributes.Hp.value>0) attributes.Age.value+=0.5;
if(hunger===0) hp--; if((attributes.Hunger.value===0)&&(attributes.Hp.value!=0)) attributes.Hp.value -= 1.5
display(); display();

16
style.css
View File

@@ -2,6 +2,7 @@
padding: 0; padding: 0;
margin: 0; margin: 0;
box-sizing: border-box; box-sizing: border-box;
text-align: center;
} }
body{ body{
display: flex; display: flex;
@@ -12,6 +13,10 @@ body{
background: #333; background: #333;
color: #fff; color: #fff;
} }
#anim{
width: 200px;
aspect-ratio: 1/1;
}
.activ{ .activ{
margin-top: 1rem; margin-top: 1rem;
display: flex; display: flex;
@@ -19,7 +24,8 @@ body{
flex-wrap: wrap; flex-wrap: wrap;
} }
.item{ .item{
border: red solid 2px; /*border: red solid 2px;*/
border-radius: .5rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 1rem; padding: 1rem;
@@ -27,3 +33,11 @@ body{
gap: 10px; gap: 10px;
background: #222222cc; background: #222222cc;
} }
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;}