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

Wow It's working

Browse Source
This commit is contained in:
MrEidam
2024-06-10 22:21:26 +02:00
parent 05dcdc7b09
commit 80e5ed11b2
7 changed files with 76 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
img/mone.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 148 KiB

BIN
img/tiger/adult.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 253 KiB

After

Width:  |  Height:  |  Size: 674 KiB

BIN
img/tiger/baby.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 413 KiB

After

Width:  |  Height:  |  Size: 412 KiB

BIN
img/tiger/teen.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 177 KiB

After

Width:  |  Height:  |  Size: 572 KiB

16
index.html
View File

@@ -9,27 +9,31 @@
<title>PetPet</title> <title>PetPet</title>
</head> </head>
<body> <body>
<article class="cash">
<img src="./img/mone.png" style="height: 1rem;">
<p>Money: <span>0</span></p>
</article>
<main> <main>
<div> <div>
<h1><span>Junior</span>-<span>BOY</span></h1> <h1><span id="nameCa">Junior</span>-<span>BOY</span></h1>
<p>Age: <span id="ageN">0</span></p> <p>Age: <span id="ageN"></span></p>
<img src="./img/tiger/baby.png" id="anim"> <img src="./img/tiger/baby.png" id="anim">
</div> </div>
<div class="activ"> <div class="activ">
<article class="item"> <article class="item">
<p>Joy: <span id="joyN">0</span></p> <p>Joy: <span id="joyN"></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">0</span></p> <p>Food: <span id="fooN"></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">0</span></p> <p>Clean: <span id="cleN"></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">0</span></p> <p>Health: <span id="heaN"></span></p>
<button>Heal</button> <button>Heal</button>
</article> </article>
</div> </div>

66
main.js
View File

@@ -1,5 +1,6 @@
const Dage = document.querySelector('#ageN'); const Dage = document.querySelector('#ageN');
const Aimg = document.querySelector('#anim') const Aimg = document.querySelector('#anim')
const NameC = document.querySelector('#nameCa')
const Djoy = document.querySelector('#joyN'); const Djoy = document.querySelector('#joyN');
const Dfood = document.querySelector('#fooN'); const Dfood = document.querySelector('#fooN');
@@ -26,17 +27,17 @@ let attributes = {
Name: [], Name: [],
Joy: { Joy: {
value: 10, value: 10,
max: 100, max: 306,
min: -100, min: -100,
}, },
Hunger: { Hunger: {
value: 30, value: 30,
max: 150, max: 100,
min: 0, min: 0,
}, },
Clean: { Clean: {
value: 50, value: 50.6,
max: 100, max: 253,
min: 0, min: 0,
}, },
Hp: { Hp: {
@@ -59,12 +60,20 @@ let attributes = {
window.addEventListener('load',() => { window.addEventListener('load',() => {
display(); display();
time(); time();
}) });
function toCPercen(num){//todo num => % function toCPercen(varr){//todo num => %
if(num>=90){ let num = Math.floor((varr.value/(varr.max/100))*10)/10;
if(num>100) num = 100;
if(num<varr.min){
num = varr.min;
varr.value = varr.min;
}
if(num>=80){
return `<p class="Lime">${num}%</p>`; return `<p class="Lime">${num}%</p>`;
}else if(num>=70){ }else if(num>=60){
return `<p class="Yellow">${num}%</p>`; return `<p class="Yellow">${num}%</p>`;
}else if(num>=40){ }else if(num>=40){
return `<p class="Orange">${num}%</p>`; return `<p class="Orange">${num}%</p>`;
@@ -79,20 +88,25 @@ function toCPercen(num){//todo num => %
function display(){ function display(){
Dage.innerHTML = (attributes.Age.value); Dage.innerHTML = (attributes.Age.value);
Djoy.innerHTML = toCPercen(attributes.Joy.value); Djoy.innerHTML = toCPercen(attributes.Joy);
Dfood.innerHTML = toCPercen(attributes.Hunger.value); Dfood.innerHTML = toCPercen(attributes.Hunger);
Dclean.innerHTML = toCPercen(attributes.Clean.value); Dclean.innerHTML = toCPercen(attributes.Clean);
Dhealth.innerHTML = toCPercen(attributes.Hp.value); Dhealth.innerHTML = toCPercen(attributes.Hp);
if(attributes.Age.value<=6){ if(attributes.Age.value<=6){
NameC.innerHTML = `Junior`
Aimg.src = imgTiger.Normal.tiger[0]; Aimg.src = imgTiger.Normal.tiger[0];
}else if(attributes.Age.value<18){ }else if(attributes.Age.value<18){
NameC.innerHTML = `Teen`
Aimg.src = imgTiger.Normal.tiger[1]; Aimg.src = imgTiger.Normal.tiger[1];
}else if(attributes.Age.value<60){ }else if(attributes.Age.value<60){
NameC.innerHTML = `Adult`
Aimg.src = imgTiger.Normal.tiger[2]; Aimg.src = imgTiger.Normal.tiger[2];
}else if(attributes.Age.value<100){ }else if(attributes.Age.value<100){
NameC.innerHTML = `Senior`
Aimg.src = imgTiger.Normal.tiger[3]; Aimg.src = imgTiger.Normal.tiger[3];
}else{ }else{
NameC.innerHTML = `Dead`
Aimg.src = imgTiger.Dead; Aimg.src = imgTiger.Dead;
} }
@@ -100,9 +114,9 @@ function display(){
} }
function play(){ function play(){
if(attributes.Joy.value<98){ if(attributes.Joy.value<attributes.Joy.max){
attributes.Joy.value += Math.floor(Math.random()*10); attributes.Joy.value += Math.floor(Math.random()*20);
attributes.Clean.value -= Math.floor(Math.random()*5); attributes.Clean.value -= Math.floor(Math.random()*8);
}else{ }else{
attributes.Clean.value -= Math.floor(Math.random()*5); attributes.Clean.value -= Math.floor(Math.random()*5);
} }
@@ -120,34 +134,38 @@ function feed(){
attributes.Hp.value -= 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); attributes.Hp.value -= Math.floor(Math.random()*5);
return; return;
} }
display(); display();
} }
function clearBoy(){ function clearBoy(){
console.log('sup'); if(attributes.Clean.value<attributes.Clean.max){
if(attributes.Clean.value<100){ attributes.Clean.value += Math.floor(Math.random()*15);
attributes.Clean.value += Math.floor(Math.random()*20); attributes.Joy.value -= Math.floor(Math.random()*7);
attributes.Joy.value -= Math.floor(Math.random()*11);
} }
display(); display();
} }
function hapiHeal(){
if(attributes.Hunger.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(){ function time(){
setTimeout (() => { setTimeout (() => {
if(attributes.Hunger.value>0) attributes.Hunger.value -= 3; if(attributes.Hunger.value>0) attributes.Hunger.value -= 3;
if(attributes.Clean.value>0) attributes.Clean.value--; if(attributes.Clean.value>0) attributes.Clean.value--;
if(attributes.Joy.value>-100) attributes.Joy.value--; if(attributes.Joy.value>-100) attributes.Joy.value--;
if(attributes.Hp.value>0) attributes.Age.value+=0.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 -= 1.5 if((attributes.Hunger.value<=0)&&(attributes.Hp.value!=0)) attributes.Hp.value -= 2
hapiHeal();
display(); display();
time(); time();
},1000); },1000);
} }

30
style.css
View File

@@ -22,6 +22,8 @@ body{
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center;
align-items: center;
} }
.item{ .item{
/*border: red solid 2px;*/ /*border: red solid 2px;*/
@@ -32,12 +34,28 @@ body{
margin: .5rem; margin: .5rem;
gap: 10px; gap: 10px;
background: #222222cc; background: #222222cc;
height: 100px;
width: 100px;
} }
main{ 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;}
.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;
} }
.Lime{color: lime;}
.Yellow{color: yellow;}
.Orange{color: orange;}
.Red{color: red;}
.DarkRed{color: darkred;}