Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!-- les éléments -->
<img src="https://ateliers.esad-pyrenees.fr/_inc/img/750/10.jpg" >
<img src="https://ateliers.esad-pyrenees.fr/_inc/img/750/20.jpg" >
<img src="https://ateliers.esad-pyrenees.fr/_inc/img/750/3.jpg" >
<img src="https://ateliers.esad-pyrenees.fr/_inc/img/750/45.jpg" >
<img src="https://ateliers.esad-pyrenees.fr/_inc/img/750/5.jpg" >

<!-- le score -->
<p id="infos">
  Il vous reste <span id="timer">20</span> secondes pour atteindre le score de 20. <br>Votre score : <span id="score">0</span>. <br>Cliquez ! Vite !
</p>



              
            
!

CSS

              
                html, body{
  height: 100%;
}
body{
  margin: 0;
  overflow: hidden;
  background: #000;
  color:white;
}
/* quand on a gagné ou qu’on a perdu */
/* on change l’arrère plan du body */
.win { 
  background: black url(https://ateliers.esad-pyrenees.fr/_inc/img/750/3.jpg) no-repeat center; 
  background-size:contain; 
}
.lost { 
  background: red url(https://ateliers.esad-pyrenees.fr/_inc/img/750/11.jpg) ; 
  background-size:contain;
  background-blend-mode:multiply;
}
/* on cache toutes les images */
.win img,
.lost img{
  display: none;
}


/* toutes les images */
img {
  height:100px;
  position: absolute;
  cursor: crosshair;
  animation: movearound 1500ms infinite alternate;
}
/* délais et positions différentes pour chaque image*/
img:nth-child(1) {top:4%; animation-delay: 0ms}
img:nth-child(2) {bottom: 10%; animation-delay: 350ms}
img:nth-child(3) {top: 40%; animation-delay: 650ms}
img:nth-child(4) {top: 25%; animation-delay: -250ms}
img:nth-child(5) {bottom: 10%; animation-delay: 850ms}

@keyframes movearound {
  0% { transform: translate(0,0)}
  100% { transform: translate(calc(100vw - 200px),0)}
}
/* au click */
img:active{
  filter: blur(25px)
}

/* affichage du score */
#infos {
  text-align: center;
  font-family: monospace;
  font-size: 2vw;
  margin: 0;
  max-width: 33ch;
  pointer-events:none;
  /*centrage :*/
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
              
            
!

JS

              
                const images = document.querySelectorAll('img'); // toutes les images
const infos_element = document.querySelector('#infos'); // élément pour afficher les infos
const score_element = document.querySelector('#score'); // élément pour afficher les infos
const timer = document.querySelector('#timer'); // élément pour afficher le temps
let score = 0; // score initial

// on enregistre le moment du chargement de la page
const start = Date.now();

// toutes les secondes (1000 millisecondes)
// setInterval détermine une fonction exécutée régulièrement
var comptearebours = setInterval( () => {
  // on calcule la différence entre maintenant et le moment du démarrage
  const millisecondes = Date.now() - start;
  const reste = 20 - Math.floor(millisecondes / 1000); 
  timer.textContent = reste;
  // si le temps est dépassé…
  if(reste <= 0 ){
    // on affiche qu’on a perdu
    infos_element.textContent = "Perdu :(";
    document.body.classList.add("lost");
    // on arrête le compte à rebours
    clearTimeout(comptearebours);
  }
}, 1000);

// pour chaque image
images.forEach(function(image){
  image.onclick = () => {
    // on ajoute 1 au score actuel 
    score += 1;
    // on modifie le contenu textuel de l’élément #score
    score_element.textContent = score;
    // si le score est (supérieur ou) égal à 20
    if(score >= 20){
      // on affiche qu’on a gagné
      infos_element.textContent = "Gagné :)";
      document.body.classList.add("win");
      // on arrête le compte à rebours
      clearTimeout(comptearebours);
    }
  }
})
              
            
!
999px

Console