How to make a simple guess game with CSS!

by

Hi all! have you ever wanted to do something like this?

💣
🆗
💣
🆗

This is a simple but yet very cool base-game for something you can want and i wish to share right now! it is not a tutorial or nothing, just wanted to share actually, if you have any questions, you can commend, i will for shure awnser or even edit this post for better understanding if thats the case.

The full code is like this:


<html>
 <head>
  <style>
    .card-container {
      perspective: 1000px; /* gives perspective to the 3d object */
      width: 50px;
      height: 50px;
      float: left; /* makes everything glued toguether :D */
      margin: 1px; /* space for border */
    }

    .card {
      width: 100%;
      height: 100%;
      transform-style: preserve-3d; /* enables 3d */
      transition: transform 1s; /* animation speed (flip) */
      border: 3px dotted black; /* border for style B) */
    }

    .card-container:hover .card {
      transform: rotateY(-180deg); /* on hover, show other side! */
    }

    .card-face { /* defines each face of the card */
      position: absolute; /* must be absolute so when flippind keep on the same place! */
      width: 100%;
      height: 100%;
      backface-visibility: hidden; /* hides the hidden one (the one on the back) */
      display: flex; /* everything else is finishing touches... */
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: bold;
      font-size: 20px;
      text-align: center;
    }

    .card-face.front {
      background-color: #fff; /* can be anything, even images */
    }

    .card-face.backok {
      background-color: #2ecc71;
      transform: rotateY(180deg);
    }
    .card-face.backbad {
      background-color: #ff6666;
      transform: rotateY(180deg);
    }
  </style>
 </head>
 <body>
  <div class="card-container">
    <div class="card">
      <div class="card-face front"></div>
      <div class="card-face backbad">💣</div>
    </div>
  </div>
  <div class="card-container">
  	<div class="card">
      <div class="card-face front"></div>
      <div class="card-face backok">🆗</div>
    </div>
  </div>
  <div style="clear:both"></div>
  <div class="card-container">
    <div class="card">
      <div class="card-face front"></div>
      <div class="card-face backbad">💣</div>
    </div>
  </div>
  <div class="card-container">
  	<div class="card">
      <div class="card-face front"></div>
      <div class="card-face backok">🆗</div>
    </div>
  </div>
  <div style="clear:both"></div>
 </body>
<html>

You can also add a JavaScript to trigger wharever you click in a object like so:


<script>
    window.onload = function() {
        var backbad = document.getElementsByClassName('backbad');
        for(var i = 0; i < backbad.length; i++) {
            var bad = backbad[i];
            bad.addEventListener('mouseover', function()
            {
              alert("you loose!")
            }, false );
        }
    }
  function lost(){
  	alert("you lose!")
  }
</script>

result:

💣
🆗
💣
🆗

<html>
 <head>
  <script>
    window.onload = function() {
        var backbad = document.getElementsByClassName('backbad');
        for(var i = 0; i < backbad.length; i++) {
            var bad = backbad[i];
            bad.addEventListener('mouseover', function()
            {
              alert("you loose!")
            }, false );
        }
    }
  function lost(){
  	alert("you lose!")
  }
  </script>
  <style>
    .card-container {
      perspective: 1000px; /* gives perspective to the 3d object */
      width: 50px;
      height: 50px;
      float: left; /* makes everything glued toguether :D */
      margin: 1px; /* space for border */
    }

    .card {
      width: 100%;
      height: 100%;
      transform-style: preserve-3d; /* enables 3d */
      transition: transform 1s; /* animation speed (flip) */
      border: 3px dotted black; /* border for style B) */
    }

    .card-container:hover .card {
      transform: rotateY(-180deg); /* on hover, show other side! */
    }

    .card-face { /* defines each face of the card */
      position: absolute; /* must be absolute so when flippind keep on the same place! */
      width: 100%;
      height: 100%;
      backface-visibility: hidden; /* hides the hidden one (the one on the back) */
      display: flex; /* everything else is finishing touches... */
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: bold;
      font-size: 20px;
      text-align: center;
    }

    .card-face.front {
      background-color: #fff; /* can be anything, even images */
    }

    .card-face.backok {
      background-color: #2ecc71;
      transform: rotateY(180deg);
    }
    .card-face.backbad {
      background-color: #ff6666;
      transform: rotateY(180deg);
    }
  </style>
</head>
<body>
  <div class="card-container">
    <div class="card">
      <div class="card-face front"></div>
      <div class="card-face backbad">💣</div>
    </div>
  </div>
  <div class="card-container">
  	<div class="card">
      <div class="card-face front"></div>
      <div class="card-face backok">🆗</div>
    </div>
  </div>
  <div style="clear:both"></div>
  <div class="card-container">
    <div class="card">
      <div class="card-face front"></div>
      <div class="card-face backbad">💣</div>
    </div>
  </div>
  <div class="card-container">
  	<div class="card">
      <div class="card-face front"></div>
      <div class="card-face backok">🆗</div>
    </div>
  </div>
  <div style="clear:both"></div>
 </body>
<html>

Notes:

you need to allways use a div with clear:both when you wish to make a new line, or you ended the game itself!

Leave a Comment