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

111
main.js
View File

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

18
style.css
View File

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