PetPet all tigers images and new logo
@@ -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>
|
||||||
@@ -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);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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{
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
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: {},
|
////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();
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||