PetPet all tigers images and new logo

This commit is contained in:
2024-08-16 20:50:42 +02:00
parent cee37b3d61
commit ff2f9ddc29
10 changed files with 45 additions and 24 deletions

View File

@@ -10,11 +10,13 @@
</head> </head>
<body> <body>
<h1 id="opponent-score">0</h1> <h1 id="opponent-score">0</h1>
<article class="choiBACK"> <section>
<img src="Invis.png" class="choices" id="opponent-choice" draggable="false"> <article class="choiBACK">
<img src="Invis.png" class="choices" id="your-choice" draggable="false"> <img src="Invis.png" class="choices" id="opponent-choice" draggable="false">
</article> <img src="Invis.png" class="choices" id="your-choice" draggable="false">
<div id="choices" draggable="false"></div> </article>
<div id="choices" draggable="false"></div>
</section>
<h1 id="your-score">0</h1> <h1 id="your-score">0</h1>
</body> </body>
</html> </html>

View File

@@ -11,6 +11,7 @@ window.onload = () => {
let choice = document.createElement("img"); let choice = document.createElement("img");
choice.id = choices[i]; choice.id = choices[i];
choice.src = `${choices[i]}.png`; choice.src = `${choices[i]}.png`;
choice.setAttribute("draggable", "false");
choice.addEventListener("click", selectChoice); choice.addEventListener("click", selectChoice);
document.getElementById("choices").append(choice); document.getElementById("choices").append(choice);
} }

View File

@@ -39,12 +39,22 @@ h1{
/*background: #4fdc5e;*/ /*background: #4fdc5e;*/
margin-top: 20px; margin-top: 20px;
} }
section{
backdrop-filter: blur(5px);
border-radius: 50px;
box-shadow:
inset 10px 10px 20px #fff,
10px 10px 20px #333;
}
#choices{ #choices{
width: 240px; width: 304px;
height: 80px; height: 90px;
/*background: #f4a478;*/ /*background: #f4a478;*/
border-top: 2.5px #000000cc solid;
margin: 0 auto; margin: 0 auto;
margin-top: 10px; border-radius: 30px;
display: flex;
justify-content: space-around;
} }
#choices img{ #choices img{
@@ -56,11 +66,6 @@ h1{
padding: 2rem; padding: 2rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
backdrop-filter: blur(5px);
border-radius: 50px;
box-shadow:
inset 10px 10px 20px #fff,
10px 10px 20px #333;
} }
.choices{ .choices{
@@ -69,6 +74,15 @@ h1{
border-radius: 25px; border-radius: 25px;
} }
@keyframes pop{
0%{
transform: scale(0.5);
}
100%{
transform: scale(1);
}
}
@media screen and (max-width: 500px){ @media screen and (max-width: 500px){
body{ body{
background-image: url("./mobile.jpg"); background-image: url("./mobile.jpg");
@@ -77,7 +91,4 @@ h1{
width: 180px; width: 180px;
height: 180px; height: 180px;
} }
.choiBACK{
}
} }

Binary file not shown.

Before

Width:  |  Height:  |  Size: 144 KiB

After

Width:  |  Height:  |  Size: 295 KiB

BIN
img/gone/Invis.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 120 B

BIN
img/gone/tiger.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 738 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 203 KiB

After

Width:  |  Height:  |  Size: 294 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 155 KiB

After

Width:  |  Height:  |  Size: 561 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 526 KiB

23
main.js
View File

@@ -20,7 +20,8 @@ const imgTiger = {
////Summer: {}, ////Summer: {},
////Fall: {}, ////Fall: {},
////Winter: {}, ////Winter: {},
Dead: './img/dead/tiger.png' Dead: './img/dead/tiger.png',
Gone: './img/gone/tiger.png'
} }
let attributes = { let attributes = {
@@ -99,29 +100,36 @@ function display(){
Dhealth.innerHTML = toCPercen(attributes.Hp); Dhealth.innerHTML = toCPercen(attributes.Hp);
if(attributes.Age.value<=6){ if(attributes.Age.value<=6){
NameC.innerHTML = `Junior` 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` 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` 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` NameC.innerHTML = `Senior`;
Aimg.src = imgTiger.Normal.tiger[3]; Aimg.src = imgTiger.Normal.tiger[3];
}else{ }else{
NameC.innerHTML = `Dead` NameC.innerHTML = `Dead`;
attributes.Life.dead = 1; attributes.Life.dead = 1;
btnHide(); btnHide();
Aimg.src = imgTiger.Dead; Aimg.src = imgTiger.Dead;
} }
if(attributes.Hp.value<=0){ if(attributes.Hp.value<=0){
NameC.innerHTML = `Dead`;
attributes.Life.dead = 1; attributes.Life.dead = 1;
btnHide(); btnHide();
Aimg.src = imgTiger.Dead; Aimg.src = imgTiger.Dead;
} }
if(attributes.Life.away){
NameC.innerHTML = `Gone`;
btnHide();
Aimg.src = imgTiger.Gone;
}
} }
function play(){ function play(){
@@ -173,10 +181,9 @@ function btnHide(){
} }
function sadDetection(){ function sadDetection(){
if(attributes.Joy.value <= attributes.Joy.abszero){ if((attributes.Joy.value <= attributes.Joy.abszero)&&(attributes.Joy.value<0)){
if(Math.abs(attributes.Joy.value) >= Math.floor(Math.random()*100)){ if(Math.abs(attributes.Joy.value) >= Math.floor(Math.random()*100)){
attributes.Life.away = 1; attributes.Life.away = 1;
btnHide();
} }
} }
} }