PetPet all tigers images and new logo
@@ -10,11 +10,13 @@
|
||||
</head>
|
||||
<body>
|
||||
<h1 id="opponent-score">0</h1>
|
||||
<article class="choiBACK">
|
||||
<img src="Invis.png" class="choices" id="opponent-choice" draggable="false">
|
||||
<img src="Invis.png" class="choices" id="your-choice" draggable="false">
|
||||
</article>
|
||||
<div id="choices" draggable="false"></div>
|
||||
<section>
|
||||
<article class="choiBACK">
|
||||
<img src="Invis.png" class="choices" id="opponent-choice" draggable="false">
|
||||
<img src="Invis.png" class="choices" id="your-choice" draggable="false">
|
||||
</article>
|
||||
<div id="choices" draggable="false"></div>
|
||||
</section>
|
||||
<h1 id="your-score">0</h1>
|
||||
</body>
|
||||
</html>
|
||||
@@ -11,6 +11,7 @@ window.onload = () => {
|
||||
let choice = document.createElement("img");
|
||||
choice.id = choices[i];
|
||||
choice.src = `${choices[i]}.png`;
|
||||
choice.setAttribute("draggable", "false");
|
||||
choice.addEventListener("click", selectChoice);
|
||||
document.getElementById("choices").append(choice);
|
||||
}
|
||||
|
||||
@@ -39,12 +39,22 @@ h1{
|
||||
/*background: #4fdc5e;*/
|
||||
margin-top: 20px;
|
||||
}
|
||||
section{
|
||||
backdrop-filter: blur(5px);
|
||||
border-radius: 50px;
|
||||
box-shadow:
|
||||
inset 10px 10px 20px #fff,
|
||||
10px 10px 20px #333;
|
||||
}
|
||||
#choices{
|
||||
width: 240px;
|
||||
height: 80px;
|
||||
width: 304px;
|
||||
height: 90px;
|
||||
/*background: #f4a478;*/
|
||||
border-top: 2.5px #000000cc solid;
|
||||
margin: 0 auto;
|
||||
margin-top: 10px;
|
||||
border-radius: 30px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
#choices img{
|
||||
@@ -56,11 +66,6 @@ h1{
|
||||
padding: 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
backdrop-filter: blur(5px);
|
||||
border-radius: 50px;
|
||||
box-shadow:
|
||||
inset 10px 10px 20px #fff,
|
||||
10px 10px 20px #333;
|
||||
}
|
||||
|
||||
.choices{
|
||||
@@ -69,6 +74,15 @@ h1{
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
@keyframes pop{
|
||||
0%{
|
||||
transform: scale(0.5);
|
||||
}
|
||||
100%{
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 500px){
|
||||
body{
|
||||
background-image: url("./mobile.jpg");
|
||||
@@ -77,7 +91,4 @@ h1{
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
}
|
||||
.choiBACK{
|
||||
|
||||
}
|
||||
}
|
||||
|
Before Width: | Height: | Size: 144 KiB After Width: | Height: | Size: 295 KiB |
BIN
img/gone/Invis.png
Normal file
|
After Width: | Height: | Size: 120 B |
BIN
img/gone/tiger.png
Normal file
|
After Width: | Height: | Size: 738 KiB |
BIN
img/icon.png
|
Before Width: | Height: | Size: 203 KiB After Width: | Height: | Size: 294 KiB |
|
Before Width: | Height: | Size: 155 KiB After Width: | Height: | Size: 561 KiB |
BIN
img/tiglet.png
|
Before Width: | Height: | Size: 526 KiB |
23
main.js
@@ -20,7 +20,8 @@ const imgTiger = {
|
||||
////Summer: {},
|
||||
////Fall: {},
|
||||
////Winter: {},
|
||||
Dead: './img/dead/tiger.png'
|
||||
Dead: './img/dead/tiger.png',
|
||||
Gone: './img/gone/tiger.png'
|
||||
}
|
||||
|
||||
let attributes = {
|
||||
@@ -99,29 +100,36 @@ function display(){
|
||||
Dhealth.innerHTML = toCPercen(attributes.Hp);
|
||||
|
||||
if(attributes.Age.value<=6){
|
||||
NameC.innerHTML = `Junior`
|
||||
NameC.innerHTML = `Junior`;
|
||||
Aimg.src = imgTiger.Normal.tiger[0];
|
||||
}else if(attributes.Age.value<18){
|
||||
NameC.innerHTML = `Teen`
|
||||
NameC.innerHTML = `Teen`;
|
||||
Aimg.src = imgTiger.Normal.tiger[1];
|
||||
}else if(attributes.Age.value<60){
|
||||
NameC.innerHTML = `Adult`
|
||||
NameC.innerHTML = `Adult`;
|
||||
Aimg.src = imgTiger.Normal.tiger[2];
|
||||
}else if(attributes.Age.value<100){
|
||||
NameC.innerHTML = `Senior`
|
||||
NameC.innerHTML = `Senior`;
|
||||
Aimg.src = imgTiger.Normal.tiger[3];
|
||||
}else{
|
||||
NameC.innerHTML = `Dead`
|
||||
NameC.innerHTML = `Dead`;
|
||||
attributes.Life.dead = 1;
|
||||
btnHide();
|
||||
Aimg.src = imgTiger.Dead;
|
||||
}
|
||||
|
||||
if(attributes.Hp.value<=0){
|
||||
NameC.innerHTML = `Dead`;
|
||||
attributes.Life.dead = 1;
|
||||
btnHide();
|
||||
Aimg.src = imgTiger.Dead;
|
||||
}
|
||||
|
||||
if(attributes.Life.away){
|
||||
NameC.innerHTML = `Gone`;
|
||||
btnHide();
|
||||
Aimg.src = imgTiger.Gone;
|
||||
}
|
||||
}
|
||||
|
||||
function play(){
|
||||
@@ -173,10 +181,9 @@ function btnHide(){
|
||||
}
|
||||
|
||||
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)){
|
||||
attributes.Life.away = 1;
|
||||
btnHide();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||