P’New (Branch 1427)

✨ นางสาวอาภัสรา โมรัษเฐียร

<html>
<head>
	<title>Let's Start</title>
  <style>
    body {
  margin: 1em;
  margin-left: 3em;
  padding: 0;
  background: url(https://media.discordapp.net/attachments/798210263559962624/806839861046280202/1719897.png?width=1073&height=670);
}
.name{
  color:white;
  padding-left:30px;
  background-color:#6A5ACD;
   width:300px;
  height:40px;
  padding:5px;
  border-radius:10px;
  text-align:center;
  border:3px dashed white;
}
h3{
  color:white;
  padding-left:30px;
  background-color:#9370DB;
   width:450px;
  height:30px;
  padding:5px;
  border-radius:10px;
  text-align:center;
}
#score{
    color:white;
  margin-top:2px;
  padding-left:30px;
  background-color:#FFCC33;
   width:200px;
  height:30px;
  padding:5px;
  border-radius:10px;
  text-align:center;
}
.card {
  height: 200px;
  width: 150px;
  background-size: 150px 200px;
  border-radius: 30px;
  display: inline-block;
  transform: rotateY(180deg);
  transform-style: preserve-3d;
  transition: transform 1s;
  /* box-shadow:0px 0px 50px green;*/
}
.card[data-pic="0"] {
  height: 200px;
  width: 150px;
  background-image: url("https://media.discordapp.net/attachments/798210263559962624/806589052748693524/Larvitar.png");
  background-size: 180px 200px;
  border-radius: 30px;
  display: inline-block;
}
.card[data-pic="1"] {
  height: 200px;
  width: 150px;
  background-image: url("https://cdn.discordapp.com/attachments/798210263559962624/806589223976566859/04.png");
  background-size: 150px 200px;
  border-radius: 30px;
  display: inline-block;
}
.card[data-pic="2"] {
  height: 200px;
  width: 150px;
  background-image: url("http://www.jewsagainsttheoccupation.org/wp-content/uploads/2016/09/Bellossom-300x300.png");
  background-size: 150px 200px;
  border-radius: 30px;
  display: inline-block;
}
.card[data-pic="3"] {
  height: 200px;
  width: 150px;
  background-image: url("https://th.portal-pokemon.com/play/resources/pokedex/img/pm/649b3c0f69e218d567e16e97253d7a20648c64bb.png");
  background-size: 180px 200px;
  border-radius: 30px;
  display: inline-block;
}
.card[data-pic="4"] {
  height: 200px;
  width: 150px;
  background-image: url("https://cdn.discordapp.com/attachments/798210263559962624/806571513209815100/PokC3A9mon_Squirtle_art.png");
  background-size: 150px 200px;
  border-radius: 30px;
  display: inline-block;
  data
}

.card[data-pic="5"] {
  height: 200px;
  width: 150px;
  background-image: url("https://lifestyle.campus-star.com/app/uploads/2016/07/pokemon_caterpie.png");
  background-size: 180px 200px;
  border-radius: 30px;
  display: inline-block;
}

.card[data-pic="6"] {
  height: 200px;
  width: 150px;
  background-image: url("http://f.ptcdn.info/345/045/000/oc8awm34u1Zme9d9I4u-o.png");
  background-size: 180px 200px;
  border-radius: 30px;
  display: inline-block;
}

.card[data-pic="7"] {
  height: 200px;
  width: 150px;
  background-image: url("https://sites.google.com/site/popokemonmonster/_/rsrc/1487425070709/prawati-taw-lakhr-r-3/cv.png?height=320&width=320");
  background-size: 150px 200px;
  border-radius: 30px;
  display: inline-block;
}
.cardtest {
  height: 400px;
  width: 400px;
  background-image: url("https://i.imgur.com/oAEE6fk.gif");
  background-position:center;
  background-size : cover;
  position: absolute;
  top: 16%;
  left: 62%;
  border-radius: 50%;

}
.cardtest[data-pic="0"] {
  height: 400px;
  width: 400px;
  background-image: url("https://media.discordapp.net/attachments/798210263559962624/806589052748693524/Larvitar.png");
  background-size:cover;
  background-position:center;
  position: absolute;
  top: 18%;
  left: 65%;
  border-radius: 30px;
  transform: rotateY(180deg);
  transform-style: preserve-3d;
  transition: transform 1s;
}
.cardtest[data-pic="1"] {
  height: 400px;
  width: 400px;
  background-image: url("https://cdn.discordapp.com/attachments/798210263559962624/806589223976566859/04.png");
  background-size:cover;
  background-position:center;
  position: absolute;
  top: 18%;
  left: 65%;
  border-radius: 30px;
    transform: rotateY(180deg);
  transform-style: preserve-3d;
  transition: transform 1s;
}
.cardtest[data-pic="2"] {
  height: 400px;
  width: 400px;
  background-image: url("http://www.jewsagainsttheoccupation.org/wp-content/uploads/2016/09/Bellossom-300x300.png");
  background-size:cover;
  background-position:center;
  position: absolute;
  top: 18%;
  left: 65%;
  border-radius: 30px;
    transform: rotateY(180deg);
  transform-style: preserve-3d;
  transition: transform 1s;
}
.cardtest[data-pic="3"] {
  height: 400px;
  width: 400px;
  background-image: url("https://th.portal-pokemon.com/play/resources/pokedex/img/pm/649b3c0f69e218d567e16e97253d7a20648c64bb.png");
  background-size:cover;
  background-position:center;
  position: absolute;
  top: 18%;
  left: 65%;
  border-radius: 30px;
    transform: rotateY(180deg);
  transform-style: preserve-3d;
  transition: transform 1s;
}
.cardtest[data-pic="4"] {
  height: 400px;
  width: 400px;
  background-image: url("https://cdn.discordapp.com/attachments/798210263559962624/806571513209815100/PokC3A9mon_Squirtle_art.png");
  background-size:cover;
  background-position:center;
  position: absolute;
  top: 18%;
  left: 65%;
  border-radius: 30px;
    transform: rotateY(180deg);
  transform-style: preserve-3d;
  transition: transform 1s;
}
.cardtest[data-pic="5"] {
  height: 400px;
  width: 400px;
  background-image: url("https://lifestyle.campus-star.com/app/uploads/2016/07/pokemon_caterpie.png");
  background-size:cover;
  background-position:center;
  position: absolute;
  top: 18%;
  left: 65%;
  border-radius: 30px;
    transform: rotateY(180deg);
  transform-style: preserve-3d;
  transition: transform 1s;
}
.cardtest[data-pic="6"] {
  height: 400px;
  width: 400px;
  background-image: url("http://f.ptcdn.info/345/045/000/oc8awm34u1Zme9d9I4u-o.png");
  background-size:cover;
  background-position:center;
  position: absolute;
  top: 18%;
  left: 65%;
  border-radius: 30px;
    transform: rotateY(180deg);
  transform-style: preserve-3d;
  transition: transform 1s;
}
.cardtest[data-pic="7"] {
  height: 400px;
  width: 400px;
  background-image: url("https://sites.google.com/site/popokemonmonster/_/rsrc/1487425070709/prawati-taw-lakhr-r-3/cv.png?height=320&width=320");
  background-size:cover;
  background-position:center;
  position: absolute;
  top: 18%;
  left: 65%;
  border-radius: 30px;
    transform: rotateY(180deg);
  transform-style: preserve-3d;
  transition: transform 1s;
}
.card[data-cards="-1"] {
  background-image: url("https://cdn.discordapp.com/attachments/798210263559962624/806514756068179998/0c8e1fd3b0d4a29aad4d4e08ab9f9b09.jpg");
  background-size: 150px 200px;
}
.card.flip {
  transform: rotateY(180deg);
}

</style>
</head>
<body>
<html>

<html>

<body>
  <h1 class="name">Catch me If you can!</h1>
  <h3>press "click me!" and choose the card that you like...</h3>
  <div class="all">
    <div class="row">
      <div class="card" data-pic="0" data-cards='-1' onclick="pick(this)"></div>
      <div class="card" data-pic="1" data-cards='-1' onclick="pick(this)"></div>
      <div class="card" data-pic="2" data-cards='-1' onclick="pick(this)"></div>
      <div class="card" data-pic="3" data-cards='-1' onclick="pick(this)"></div>
    </div>
    <div class="row1">
      <div class="card" data-pic="4" data-cards='-1' onclick="pick(this)"></div>
      <div class="card" data-pic="5" data-cards='-1' onclick="pick(this)"></div>
      <div class="card" data-pic="6" data-cards='-1' onclick="pick(this)"></div>
      <div class="card" data-pic="7" data-cards='-1' onclick="pick(this)"></div>
    </div>

<div class="cardtest" data-pic="-1" onclick="picks(this)"></div>
  </div>
  <h1 id='score'>Bonus : 0</h1>
</body>

</html>
</body>
<script>
	var num = Math.floor(Math.random() * Math.floor(8));
let score = 0;
function pick(cardd) {
  cardd.dataset.cards *= -1;
  var ans = cardd.dataset.pic * cardd.dataset.cards;
  if (cardd.dataset.pic * cardd.dataset.cards == num) {
    setTimeout(function () {
      alert('คุณตอบถูกแล้วกด"ตกลง"เพื่อรับโบนัส!');
    }, 500);
    setTimeout(function () {
      cardd.dataset.cards *= -1;
    }, 1000);
    document.getElementById("score").innerHTML =
      "Bonus " + ": " + (score += 10);
  } else {
    setTimeout(function () {
      alert("เสียใจด้วย!คุณตอบผิดบอกลาโบนัสได้เลย");
    }, 500);
    setTimeout(function () {
      cardd.dataset.cards *= -1;
    }, 1000);

document.getElementById("score").innerHTML =
      "Bonus " + ": " + (score -= 10);
  } //document.getElementById("print").innerHTML = num;
}
var ans1 = ans;
function picks(cardds) {
  cardds.dataset.pic *= -1 * num;
  //document.getElementById("print2").innerHTML = randomPos;
}

</script>
</html>
</body>
</html>