PopArTech

Nous allons dessiner une citrouille en pixel-art pour Halloween. Pour cela, nous allons utiliser le logiciel Piskel. Si vous voulez vous familiariser avec ce logiciel, voici quelques articles : Créer son smiley avec Piskel, Piskel, création d'un personnage de jeux vidéo, Piskel, animation d'un personnage et Piskel, notre personnage marche.

Cet article sera composé de petites missions.

Mission 1 Personnage

Dessinez la citrouille suivante :
Contour de la citrouille

 <ul class="collapsible">
<li>
  <div class="collapsible-header black white-text"><i class="material-icons">vpn_key</i>Solution</div>
  <div class="collapsible-body black"><span class="white-text">
      Ce n'est pas si facile, pour obtenir la solution, il va falloir répondre à une petite question.
        <div id="zoneFormulaire">
            <label>Remplacez les pointillés par le mot manquant : Piskel permet de faire du ....... art
                <input class="white-text" type="text" id="reponse1" />
            </label>
            <a class="waves-effect waves-light btn"  id="btnRepondre1">Répondre</a>
        </div>
      <div id="solution1">
      </div>
      <script>
          var vBtnAj = document.getElementById("btnRepondre1");
          vBtnAj.addEventListener("click", afficher);
          function afficher() {
                            var rep = document.getElementById("reponse1");
                            if(rep.value == "pixel"){
                                document.getElementById("solution1").innerHTML = '<a href="https://drive.google.com/open?id=1igR8OPBM7hy1t8sDwTd8zo9YxxpmB5nn">Solution 1</a>';
                            }
                        }
      </script>
      </span></div>
</li>

Mission 2 Personnage

Coloriez la citrouille :
La citrouille en orange

Solution

Remplacez les pointillés par le mot manquant : La vidéo illustre l'Art ... Répondre

<div class="row">
<div class="col s12 m12">
  <div class="card-panel #e65100 orange darken-4">
      <span class="card-title white-text"><b>Mission 3</b>
                    <img align="right" class="responsive-img" width="5%" src="images/ipixelartanim/irobotechart_logo_openscad/character.png" alt="Personnage">
    </span>
    <span class="white-text">Améliorez la citrouille :
        <center><br><img class="responsive-img" width="50%" src="images/ipixelartanim/halloween_piskel/mission3.png" alt="Citrouille colorée"></center>
      </span>
  </div>
</div>