mirror of
https://github.com/MrEidam/PetPet.git
synced 2026-04-17 15:43:31 +00:00
Colors and Attributes value
This commit is contained in:
@@ -9,10 +9,11 @@
|
||||
<title>PetPet</title>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<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">
|
||||
<img src="./img/tiger/baby.png" id="anim">
|
||||
</div>
|
||||
<div class="activ">
|
||||
<article class="item">
|
||||
@@ -32,6 +33,7 @@
|
||||
<button>Heal</button>
|
||||
</article>
|
||||
</div>
|
||||
</main>
|
||||
<script src="main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
111
main.js
111
main.js
@@ -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();
|
||||
|
||||
16
style.css
16
style.css
@@ -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,7 +24,8 @@ body{
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.item{
|
||||
border: red solid 2px;
|
||||
/*border: red solid 2px;*/
|
||||
border-radius: .5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 1rem;
|
||||
@@ -27,3 +33,11 @@ body{
|
||||
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;}
|
||||
Reference in New Issue
Block a user