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>
</head>
<body>
<article class="cash">
<img src="./img/mone.png" style="height: 1rem;">
<p>Money: <span>0</span></p>
</article>
<main>
<div>
<h1><span>Junior</span>-<span>BOY</span></h1>
<p>Age: <span id="ageN">0</span></p>
<h1><span id="nameCa">Junior</span>-<span>BOY</span></h1>
<p>Age: <span id="ageN"></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>
<p>Joy: <span id="joyN"></span></p>
<button onclick="play()">Play</button>
</article>
<article class="item">
<p>Food: <span id="fooN">0</span></p>
<p>Food: <span id="fooN"></span></p>
<button onclick="feed()">Feed</button>
</article>
<article class="item">
<p>Clean: <span id="cleN">0</span></p>
<p>Clean: <span id="cleN"></span></p>
<button onclick="clearBoy()">Clean</button>
</article>
<article class="item">
<p>Health: <span id="heaN">0</span></p>
<p>Health: <span id="heaN"></span></p>
<button>Heal</button>
</article>
</div>

66
main.js
View File

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

30
style.css
View File

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