Catégorie : Projets

Projets

Une bataille navale codée en python sur NumWorks

Jouez contre une composition aléatoire au grand classique du jeu de société : la bataille navale ! Devinez ou sont cachés les bateaux en un minimum de temps.

Introduction

Projet réalisé par A. Juge, P. Moucadeau et B. Kerneïs de la classe de première en spécialité NSI. Nous sommes également les auteurs de ce compte rendu. Pour en savoir plus : Les projets en spécialité NSI

Lien court vers ce document : https://nsi.xyz/battleship

Jouez à l’incontournable jeu de la bataille navale directement sur votre calculatrice NumWorks ou sur un émulateur compatible avec le module kandinsky (Omega – IDE) !

La bataille navale ou touché-coulé est un jeu de société commercialisé en 1831 qui se joue à deux joueurs. Le principe du jeu, si vous ne le connaissez pas, est de placer des « navires » sur une grille tenue secrète et de tenter de couler les navires adverses. La partie s’arrête lorsque l’un des deux joueur a réussi à couler tous les navires de l’autre joueur.

Dans le cadre de notre projet, le jeu codé en python a été simplifié : le joueur essaie de deviner la composition de l’ordinateur qui a été générée aléatoirement et ainsi, le jeu ne se joue que dans un seul sens. C’est à dire que le joueur ne peut que gagner ! Incroyable non ?

Vous pouvez jouer contre avec vos amis et tenter de gagner en le moins de coup possible !

Évolution

Le processus de création s’est divisé en différentes parties.

La première grille
Avec le module kandinsky, nous avons commencé par reprendre et améliorer le code de Schraf : Maths-info qui nous a permit de construire une grille de 10*10

def grille():
    '''
   Tracé de la grille
   '''
    for i in range(11):
        if i<11:fr(50,10+20*i,200,1,N)
        fr(50+20*i,10,1,200,N)

Interaction homme/machine
Ensuite, nous avons crée un « curseur » qui peut se déplacer dans cette grille en récupérant les touches pressées par le joueur grâce au module ion.

Cette portion de code sert à attendre que l’utilisateur appuie sur une touche et la récupérer.

def wait(b):
    while Partie:
        for i in b:
            if keydown(i):
                while keydown(i):True
                return i

code inspiré de Arthur Jacquin

La classe bateau
La création d’une classe bateau nous a permit de simplifier le code, notamment pour ce qui est de détecter si un bateau est touché et/ou couléuniquement avec les coordonnées du début et de la fin

bateaux1,y1x2,y2état
11,21,4touché
26,49,4safe
38,28,5coulé

Les méthodes is_touche et is_coule sont la pour repérer si un bateau est touché ou coulé lorsque le joueur décide de tirer sur une case. Elles utilisent la liste des cases composant le bateau.

def is_touch(self,x,y):
        ''''Méthode revoyant Vrai si le bateau est touché 
       et Faux si il ne l'est pas
       '''
        l = [x,y]
        for i,elt in enumerate(self.LC):
            if elt == l:
                self.etat = 1
                self.L_etats[i] = 1
                return True
      
        return False
    
    def is_coule(self):
        '''Méthode revoyant Vrai si le bateau est coulé 
       et Faux si il ne l'est pas
       '''
        if self.etat == 2:
            return True
 
        for i in self.L_etats:
            if i != 1:
                return False
 
        for j in self.LC:
            ca(j[0],j[1],N)
 
        self.L_etats = []
        for i in range(len(self.LC)):
            self.L_etats.append(2)
 
        self.etat=2
        print(self, "est coulé")
        return True

Le cerveau du programme
La fonction Main représente la boucle principale, c’est elle qui récupère les boutons pressés par les joueurs pour appeler les autres fonctions. La boucle s’arrête lorsque tous les bateaux sont dans l’état coulé.
Puisque c’est une boucle qui tourne à toutes les actions du joueur, c’est l’endroit idéal pour mettre à jour les infos du joueur, comme le nombre de coups.

def Main(n):
    '''Boucle principale'''
    global X,Y,Partie,NBcoups,NBtouches,LB
    LB = compo(n)
    grille()
    ca(X,Y,G)
    print(Partie)
    while Partie:
        t = wait([0,1,2,3,4,])
        if t == 3 and X+1<10:
            majcase(X,Y,X+1,Y)
            X+=1
        elif t == 0 and X>0:
            majcase(X,Y,X-1,Y)
            X-=1
        elif t == 1 and Y>0:
            majcase(X,Y,X,Y-1)
            Y-=1
        elif t == 2 and Y+1<10:
            majcase(X,Y,X,Y+1)
            Y+=1
        elif t == 4:
            touche(X,Y)
        ds("Coups",255,10,Bl)
        ds(str(NBcoups),255,30)
        ds("Touches",251,50,R)
        ds(str(NBtouches),255,70)

Le tirage aléatoire de la composition
Il a fallu ensuite générer aléatoirement la composition des bateaux de l’adversaire. Le module random nous a été très utile. La difficulté principale a été de faire que les bateaux ne dépassent pas de la grille. Nous avons donc décalés les bateaux étant dans cette situation en modifiant les coordonnées x1, y1 de ce dernier.

def compo(n):
    '''Générateur de composition aléatoire'''
    L= []
 
    for i in range(n):
        ori = randint(0,1)
        sens = randrange(-1,2,2)
        longueur = randint(2,4)
        x1 = randint(0,10)
        y1 = randint(0,10)
 
        if ori == 0:
            x2 = x1
            y2 = y1+(longueur*sens)
            c1 = y1
            c2 = y2
        else :
            x2 = x1+(longueur*sens)
            y2 = y1
            c1 = x1
            c2 = x2
        
        if c2 > 9:
            c1 = c1 - (c2-9)
            c2 = c1+(longueur*sens)
        elif c2 < 0:
            c1 = c1 - c2
            c2 = c1+(longueur*sens)
        
        if ori == 0:
            L.append(bateau(x1,c1,x2,c2))
        else :
            L.append(bateau(c1,y1,c2,y2))
    
    return L

Interface graphique
Puisque les conditions de jeu ne changent pas (mode de jeu, nombre de bateaux…), la présence d’un menu augmente inutilement la taille du fichier. Nous avons alors opté pour insérer une image d’accueil qui s’efface au bout de 2 secondes. Le jeu se lance lorsque les 2 secondes sont écoulées.

def play():
    fill_rect(0,0,320,222,(255,255,255))
    texte_center("Battleship", 160, 20, col_os())
    texte_center("nsi.xyz/battleship ", 160, 50, N)
    texte_center("par", 160, 80, (101,101,101))
    texte_center("Alexandre Juge", 160, 100, (42,42,42))
    texte_center("Pierre Moucadeau", 160, 120, (42,42,42))    
    texte_center("Baptiste Kerneis ", 160, 140, (42,42,42))
    sleep(2)
    fill_rect(0,0,320,222,(255,255,255))
    Main(5)
Résultat des crédits

Par la suite nous avons rajouté 2 compteurs, un comptant le nombre de coup et l’autre le nombre de bateau touché.

Lorsque le nombre de bateau touché est égale au nombre de bateau il lance un menu de fin.

def end():
    global NBcoups
    fill_rect(0,0,320,222,B)
    texte_center("Battleship", 160, 20, col_os())
    texte_center("Vous avez fait un score de :", 160, 50, N)
    texte_center(str(NBcoups), 160, 80, col_os())
    texte_center("Vous pouvez faire mieux !", 160, 100, (42,42,42))

Mention spéciale

Mention spéciale à la toute petite fonction ca qui malgré ses 2 lignes est la fonction la plus utile puisque elle permet de remplir un case. Et oui, tout simplement

Ce n’est pas la taille qui compte , « Un grand sage »

def ca(x,y,c=G):
    ''' Remplis la case x,y avec la couleur c '''
    fr(51+20*x,11+20*y,19,19,c)

Problèmes rencontrés

A la fin du processus de création nous nous sommes heurtés à de nombreux problèmes le premier étant la taille du fichier, supérieur à 8ko donc inutilisable sur la calculatrice, ont a alors dut supprimer le mode multijoueur car prenant trop de place.

Deuxièmement les bateaux généré étaient magnifique mais complètement en dehors de la grille.

Certains bateaux étaient générés en dehors de la grille

Pour régler ce problème nous avons rajouter une condition à la formation des bateaux qui fait ,que lorsqu’ils se trouvent en dehors de l’intervalle de la grille ,ils sont décalés à l’intérieur de la grille .

Anecdote

Pour l’anecdote, il faut savoir que nous voulions originellement créer un jeu uno ! Mais suite à de nombreuses difficultés, notamment la gestion de la pioche pour deux joueurs, nous nous sommes réorientés vers la bataille navale et rabattu sur une parti en solo.

Conclusion 

Pour pouvoir jouer à cette version du jeu bataille navale, téléchargez le code par l’intermédiaire du lien ci-dessous. Les commandes sont assez intuitives : les flèches pour se déplacer, et le bouton OK pour interagir.
Amusez-vous bien !

Crédits / Remerciements 

Tout d’abord un grand merci aux fragments de codes de Arthur Jacquin, notamment son menu (réalisé avec @cent20). 
Ainsi que M.Schraf pour ses tutos très utiles sur la couche graphique de Python

Téléchargement

Projets

Site avec un piano fonctionnelle , un générateur de…

Site qui renvoie aléatoirement vers un piano fonctionnel, un générateur de citation, ou un compte à rebours.

Ce projet est un site composé de 4 pages codées en html : 

La page principale

  • Présentation 

Voici la page principale de notre site, c’est elle qui renverra l’utilisateur vers 3 autres pages au hasard grâce à un script javascript que vous retrouver plus tard dans cette article. La redirection vers les sites est effectué par une interaction sur un bouton cliquable situé au centre de la page. De plus autre bouton placé en bas à droite de la page permet de changer la couleur du dégradé de fond.

  • Le code HTML
<html lang="fr">
<head>
        <link rel="stylesheet" href="main.css">
        <link rel="icon" type="image/ico" href="favicon.ico" />
        <title>Bienvenue</title>
        <meta charset="utf-8"/>
        <script src="https://package.nsi.xyz/api/"></script>
        <nsi-xyz add="menu" ref="0NSI 2020"></nsi-xyz>
</head>
<body>
  <div id="container" class="orange1">
        <h2> CLIQUEZ SUR CE BOUTON POUR ACCÉDER À UN DE NOS SITES</h2>
        <button id="style_boutton"; type="button"; ><h2>CLIQUEZ MOI</h2></button>
  </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="target" class="orange"></button>
</body>
  • Le code CSS
html{
        margin: 0;
        height: 100%;
}
 
body {
    font-family: Verdana;
 
}
 
#container {
    width: 32rem;
    height: 21rem;
    box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2);
    border-radius: 20px;
    overflow: hidden;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
 
 
 
h2{
  color: #d3d3d3;
  text-align: center;
}
 
 
 
#style_boutton {
        border-radius: 20px;
    font-family: Verdana;
    animation: boutton_animation 3s infinite;
    background-color: transparent;
    color: #C0C0C0;
    height: 6rem;
    width: 15rem;
    border-width: 4px;
    margin: 0;
    position: absolute;
    top: 52%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: 0.3s;
}
 
 
 
#style_boutton:hover {
    animation: boutton_animation 2s ease infinite;
    animation-fill-mode: forwards;
    cursor: pointer;
    height:40%;
    width:60%;
    font-size: 100%;
}
 
 
 
@keyframes boutton_animation {
    0% {border-color: red;}
    25%{border-color:yellow;}
                35%{border-color:orange;}
    50%{border-color:green;}
    75%{border-color:blue;}
    100% {border-color: purple;}
}
 
 
 
html {
  background: linear-gradient(to bottom right, #1B998B, #0D1317);
}
.black {
     background: linear-gradient(to bottom right, #006BA6, #D81159);
}
.blue {
     background: linear-gradient(to bottom right, #C81D25, #23395B);
}
.orange{
     background: linear-gradient(to bottom right, #1B998B, #0D1317);
}
.black1 {
     background: linear-gradient(to top left , #006BA6, #D81159);
}
.blue1 {
     background: linear-gradient(to top left , #C81D25, #23395B);
}
.orange1 {
     background: linear-gradient(to top left , #1B998B, #0D1317);
}
#target {
          height: 50px;
          width: 50px;
        color: #fff;
        border-radius: 50%;
          display: inline-block;
          text-shadow: #000 1px 1px 1px;
          cursor: pointer;
          border: none;
          position:absolute;
          bottom:0;
          right:0;
          transition: 0.5s;
}
#target:hover{
          height: 58px;
          width: 58px;
}
  • Les scripts javascript
  • Le script changeur de thème

Ce script sera exécuté lorsque l’utilisateur appuiera sur le bouton en bas à droite de l’écran. Il changera alors la class de l’arrière-plan. Les classes (dans le css) « black », « blue », et « orange » sont utilisé pour l’arrère plan de l’html alors que « black1 », « blue1 », et « orange1 » sont utilisé pour l’arrière plan du container au ilieu de l’écran.

<script>
    var colors = [
    'orange',
    'blue',
    'black'
  ];
    var colors1 = [
    'orange1',
    'blue1',
    'black1'
  ];
    var currentColor = 0;
    var currentColor1 = 0;
    var target = jQuery('#target');
    var target1 = jQuery('html');
    var target2 = jQuery('#container');
 
 
    target.click(function (evt) {
      currentColor += 1;
      currentColor1 += 1;
      currentColor %= colors.length;
      currentColor1 %= colors1.length;
      target1.prop('class', colors[currentColor]);
      target.prop('class', colors[currentColor]);
      target2.prop('class', colors1[currentColor1]);
 
    });
</script>
Télécharger

Le scripte qui renvoi vers d'autre sites
Lorsque le bouton au milieu de l'écran est utilisé, le script sera utilisé, et l'utilisateur sera renvoyé vers une de nos pages aléatoirement.

<script>
  var links = new Array();
  links[0] = "http://kebab.nsi42.net/new/compte_a_rebours.html";
  links[1] = "http://kebab.nsi42.net/new/citation.html";
  links[2] = "http://kebab.nsi42.net/new/piano.html";
 
  function openLink() {
    var i = Math.floor(Math.random() * links.length);
    parent.location = links[i];
    return false;
  }
</script>

Le piano

  • Présentation

Voici notre page piano dans laquelle est présent un « extrait » de piano que l’utilisateur pourra utiliser grâce aux touches de son clavier. Lorsque l’utilisateur appuiera sur l’une des touches du clavier, la note correspondante à la touche s’affichera au dessus du piano.

  • Le code HTML
<html lang="fr">
<head>
        <title>Piano</title>
        <link rel="stylesheet" type="text/css" href="piano111.css">
        <meta charset="utf-8">
  <script src="https://package.nsi.xyz/api/"></script>
</head>
<header>
  <h1>Piano</h1>
  <h2>Afin d'utiliser ce magnifique piano il faut utiliser les touches de ton clavier. Regarde le tableau de correspondance des touches. Et vas y petit Mozart.</h2>
</header>
<body>
  <nsi-xyz add="menu" ref="0NSI 2020"></nsi-xyz>
  <section id="wrap">
    <section id="main">
        <div class="nowplaying"></div>
        <div class="keys">
                        <div data-key="81" class="key" data-note="Do"><p>Q</p></div>
                        <div data-key="90" class="key sharp" data-note="Do#"><p>Z</p></div>
                        <div data-key="83" class="key" data-note="Ré"><p>S</p></div>
                        <div data-key="69" class="key sharp" data-note="Ré#"><p>E</p></div>
                        <div data-key="68" class="key" data-note="Mi"><p>D</p></div>
                        <div data-key="70" class="key" data-note="Fa"><p>F</p></div>
                        <div data-key="84" class="key sharp" data-note="Fa#"><p>T</p></div>
                        <div data-key="71" class="key" data-note="Sol"><p>G</p></div>
                        <div data-key="89" class="key sharp" data-note="Sol#"><p>Y</p></div>
                        <div data-key="72" class="key" data-note="La"><p>H</p></div>
                        <div data-key="85" class="key sharp" data-note="La#"><p>U</p></div>
                        <div data-key="74" class="key" data-note="Si"><p>J</p></div>
                        <div data-key="75" class="key" data-note="Do"><p>K</p></div>
                        <div data-key="79" class="key sharp" data-note="Do#"><p>O</p></div>
                        <div data-key="76" class="key" data-note="Ré"><p>L</p></div>
                        <div data-key="80" class="key sharp" data-note="Ré#"><p>P</p></div>
                        <div data-key="77" class="key" data-note="Mi"><p>M</p></div>
        </div>
 
      <audio data-key="81" src="http://carolinegabriel.com/demo/js-keyboard/sounds/040.wav"></audio>
      <audio data-key="90" src="http://carolinegabriel.com/demo/js-keyboard/sounds/041.wav"></audio>
      <audio data-key="83" src="http://carolinegabriel.com/demo/js-keyboard/sounds/042.wav"></audio>
      <audio data-key="69" src="http://carolinegabriel.com/demo/js-keyboard/sounds/043.wav"></audio>
      <audio data-key="68" src="http://carolinegabriel.com/demo/js-keyboard/sounds/044.wav"></audio>
      <audio data-key="70" src="http://carolinegabriel.com/demo/js-keyboard/sounds/045.wav"></audio>
      <audio data-key="84" src="http://carolinegabriel.com/demo/js-keyboard/sounds/046.wav"></audio>
      <audio data-key="71" src="http://carolinegabriel.com/demo/js-keyboard/sounds/047.wav"></audio>
      <audio data-key="89" src="http://carolinegabriel.com/demo/js-keyboard/sounds/048.wav"></audio>
      <audio data-key="72" src="http://carolinegabriel.com/demo/js-keyboard/sounds/049.wav"></audio>
      <audio data-key="85" src="http://carolinegabriel.com/demo/js-keyboard/sounds/050.wav"></audio>
      <audio data-key="74" src="http://carolinegabriel.com/demo/js-keyboard/sounds/051.wav"></audio>
      <audio data-key="75" src="http://carolinegabriel.com/demo/js-keyboard/sounds/052.wav"></audio>
      <audio data-key="79" src="http://carolinegabriel.com/demo/js-keyboard/sounds/053.wav"></audio>
      <audio data-key="76" src="http://carolinegabriel.com/demo/js-keyboard/sounds/054.wav"></audio>
      <audio data-key="80" src="http://carolinegabriel.com/demo/js-keyboard/sounds/055.wav"></audio>
      <audio data-key="77" src="http://carolinegabriel.com/demo/js-keyboard/sounds/056.wav"></audio>
      </section>
  </section>
 
    <table class="tableau-style">
 
        <thead>
            <tr>
                <th>Do</th>
                <th>Ré</th>
                <th>Mi</th>
                <th>Fa</th>
                <th>Sol</th>
                <th>La</th>
                <th>Si</th>
                <th>Do</th>
                <th>Ré</th>
                <th>Mi</th>
                <th>Do#</th>
                                <th>Ré#</th>
                                <th>Fa#</th>
                                <th>Sol#</th>
                                <th>La#</th>
                <th>Do#</th>
                                <th>Ré#</th>
            </tr>
        </thead>
 
 
        <tbody>
            <tr>
                <td>Q</td>
                <td>S</td>
                <td>D</td>
                <td>F</td>
                <td>G</td>
                <td>H</td>
                <td>J</td>
                <td>K</td>
                <td>L</td>
                <td>M</td>
                <td>Z</td>
                <td>E</td>
                <td>T</td>
                <td>Y</td>
                <td>U</td>
                <td>O</td>
                <td>P</td>
 
            </tr>
 
        </tbody>
 
    </table>
  • Le code CSS
html{
  background: linear-gradient(#006494, #FF1053);
        margin: 0;
        height: 100%;
}
 
body  {
        font-family: 'Noto Serif', serif;
        text-align: center;
      }
 
 
header {
      position: relative;
      margin: 30px 0;
    }
 
header:after {
      content: '';
      width: 460px;
      height: 15px;
      display: inline-block;
      text-align: center;
      background-size: 70%;
    }
 
h1 {
      color: #fff;
      font-size: 50px;
      font-weight: 400;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      margin: 0;
    }
 
h2 {
      color: #fff;
      font-size: 24px;
      font-style: italic;
      font-weight: 400;
      margin: 0 250px 30px;
 
    }
 
 
 
.nowplaying {
      font-size: 120px;
      line-height: 1;
      color: #eee;
      text-shadow: 0 0 5rem #028ae9;
      transition: all .07s ease;
      min-height: 120px;
    }
 
.keys {
      display: block;
      width: 100%;
      height: 350px;
      max-width: 880px;
      position: relative;
      margin: 40px auto 0;
      cursor: none;
    }
 
.key {
      position: relative;
      border: 4px solid black;
      border-radius: .5rem;
      transition: all .07s ease;
      display: block;
      box-sizing: border-box;
      z-index: 2;
    }
 
.key:not(.sharp) {
      float: left;
      width: 10%;
      height: 100%;
      background: rgba(255, 255, 255, .8);
    }
 
.key.sharp {
      position: absolute;
      width: 6%;
      height: 60%;
      background: #000;
      color: #eee;
      top: 0;
      z-index: 3;
    }
 
.key[data-key="90"] {
      left: 7%;
    }
 
.key[data-key="69"] {
      left: 17%;
    }
 
.key[data-key="84"]  {
      left: 37%;
    }
 
.key[data-key="89"] {
      left: 47%;
    }
 
.key[data-key="85"] {
      left: 57%;
    }
 
.key[data-key="79"] {
      left: 77%;
    }
 
.key[data-key="80"] {
      left: 87%;
    }
 
.playing {
      transform: scale(.95);
      border-color: #028ae9;
      box-shadow: 0 0 1rem #028ae9;
 
    }
 
.hints {
      display: block;
      width: 100%;
      opacity: 0;
      position: absolute;
      bottom: 7px;
 
      font-size: 20px;
        }
 
 
 
.tableau-style  {
        cursor: none;
    border-collapse: collapse;
    min-width: 400px;
         font-style: italic;
    width: auto;
    box-shadow: 0 5px 50px rgba(0,0,0,0.15);
    margin: 100px auto;
    border: 2px solid black;
}
 
thead tr {
    background-color: black;
    color: #fff;
    text-align: center;
}
 
tbody tr {
    background-color: white;
    color: black;
    text-align: center;
}
 
th, td {
    padding: 15px 20px;
}
 
tbody tr, td, th {
    border: 1px solid ;
}
 
tbody tr:nth-child(even){
    background-color: #f3f3f3;
}
  • Le scripts javascript du piano

Dans ce script javascript est présent une ligne très importante :

if (e.repeat) return;

qui empèche la répétition de la note de musique qui ferait planter le piano lorsque l’utilisateur maintiendrai la touche enfoncée.

<script>
                const keys = document.querySelectorAll(".key"),
                note = document.querySelector(".nowplaying"),
                hints = document.querySelectorAll(".hints");
 
                function playNote(e) {
                const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`),
                key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
 
                if (!key) return;
                if (e.repeat) return;
 
                const keyNote = key.getAttribute("data-note");
 
                key.classList.add("playing");
                note.innerHTML = keyNote;
                audio.currentTime = 0;
                audio.play();
                }
 
                function removeTransition(e) {
                if (e.propertyName !== "transform") return;
                this.classList.remove("playing");
                }
 
                function hintsOn(e, index) {
                e.setAttribute("style", "transition-delay:" + index * 50 + "ms");
                }
 
                hints.forEach(hintsOn);
 
                keys.forEach(key => key.addEventListener("transitionend", removeTransition));
 
                window.addEventListener("keydown", playNote);
        </script>

Le compte à rebours

  • Présentation

Voici la page compte à rebours de la fin présumé d’internet. Au centre de l’ecran se trouve le compte à rebours ayant pour fin 2023 sur un fond gif.

  • Le code HTML
<html lang="fr">
<html>
<head>
  <link rel="stylesheet" href="compte_a_rebours.css">
  <link rel="icon" type="image/ico" href="favicon.ico" />
  <title>END</title>
  <meta charset="utf-8"/>
  <script src="https://package.nsi.xyz/api/"></script>
</head>
<body>
<nsi-xyz add="menu" ref="0NSI 2020"></nsi-xyz>
<div class="container">
  <h1 id="headline">Compte a rebours de la Fin d'Internet:</h1>
  <div id="countdown">
    <ul>
      <li><span id="days"></span>days</li>
      <li><span id="hours"></span>Hours</li>
      <li><span id="minutes"></span>Minutes</li>
      <li><span id="seconds"></span>Seconds</li>
    </ul>
  </div>
  <div class="message">
    <div id="content">
      <span class="emoji">&#128126; </span>
      <span class="emoji">&#128187;</span>
      <span class="emoji">&#128128;</span>
    </div>
  </div>
</div>
  • Le code CSS
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
 
html, body {
  height: 100%;
  margin: 0;
}
 
body {
  align-items: center;
  background-image:url(images/36010.gif);
  display: flex;
  font-family: -apple-system,
    "Segoe UI",
    "Helvetica Neue",
    sans-serif;
}
 
.container {
  color: white;
  margin: 0 auto;
  text-align: center;
}
 
h1 {
  font-weight: bolder;
  letter-spacing: .125rem;
  text-transform: uppercase;
}
 
li {
  display: inline-block;
  font-size: 1.5em;
  list-style-type: none;
  padding: 1em;
  text-transform: uppercase;
}
 
li span {
  display: block;
  font-size: 4.5rem;
}
 
.message {
  font-size: 4rem;
}
 
#content {
  display: none;
  padding: 1rem;
}
 
.emoji {
  padding: 0 .25rem;
}
  • Le scripts javascript du compte à rebours
<script>
(function () {
  const second = 1000,
        minute = second * 60,
        hour = minute * 60,
        day = hour * 24;
 
  let annee = "Janvier 1, 2023 00:00:01",
      countDown = new Date(annee).getTime(),
      x = setInterval(function() {
 
        let now = new Date().getTime(),
            distance = countDown - now;
 
        document.getElementById("days").innerText = Math.floor(distance / (day)),
          document.getElementById("hours").innerText = Math.floor((distance % (day)) / (hour)),
          document.getElementById("minutes").innerText = Math.floor((distance % (hour)) / (minute)),
          document.getElementById("seconds").innerText = Math.floor((distance % (minute)) / second);
 
        //do something later when date is reached
        if (distance < 0) {
          let headline = document.getElementById("headline"),
              countdown = document.getElementById("countdown"),
              content = document.getElementById("content");
 
          headline.innerText = "C'est la Fin !";
          countdown.style.display = "none";
          content.style.display = "block";
 
          clearInterval(x);
        }
        //seconds
      }, 0)
  }());
 
</script>
  • Le script javascript de la page qui s’ouvre

Ce script Javascript permet de d’ouvrir une page lorsque l’utilisateur écrira le mot « end » avec les touches de son clavier.

<script>
function openPage(pageName,elmnt,color) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].style.backgroundColor = "";
  }
  document.getElementById(pageName).style.display = "block";
  elmnt.style.backgroundColor = color;
}
 
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
<script>
            var index = 0;
            var magic_word = "end";
                if (e.key == magic_word[index]) {
                    index++;
 
                    if (index == magic_word.length) {
                        window.open("https://www.youtube.com/watch?v=EqaHgjv_Snc", "_blank");
                        index = 0;
                    }
                } else {
                    index = 0;
                }
            }
</script>

Le générateur de citations

  • Présentation

Voici la page générateur de citations qui présentera à l’utilisateur lorsqu’il qu’il le voudra divers citation de personne fictif ou bien réel. Enregistré en variable dans les scripts javascript. De plus le fond de la page est une gradation de couleur en mouvement constant.

  • Le code HTML
<html lang="fr">
<head>
        <link rel="stylesheet" href="citation.css">
        <link rel="icon" type="image/ico" href="favicon.ico" />
        <title>Citation</title>
        <meta charset="utf-8"/>
        <script src="https://package.nsi.xyz/api/"></script>
<body>
        <nsi-xyz add="menu" ref="0NSI 2020"></nsi-xyz>
</body>
 
        <div class="container">
                <div class="citation">
                        <div id="citationplace"></div>
                </div>
                <div class="auteur">
                        <div id="auteurplace"></div>
                </div>
        <button>Nouvelle Citation</button>
</div>
</body>
</html>
  • Le code CSS
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
 
.container{
        width: 32rem;
        height: 21rem;
        box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .3);
        border-radius: 20px;
        overflow: hidden;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: rgba(0, 0, 0, 0.08);
        overflow: hidden;
        color:white;
}
 
.guil{
        font-size: 10%;
}
 
.citation{
        text-align: left;
        margin-top: 20px;
        margin-left: 10px;
        margin-right: 10px;
        font-size:31px;
}
 
.auteur{
        margin-left: 10px;
        margin-right: 10px;
        margin-bottom: 10px;
        text-align: right;
        font-size:28px;
}
 
html {
        font-family: 'Montserrat', sans-serif;
        background: linear-gradient(to top left, #ee7752, #e73c7e, #23a6d5, #23d5ab);
        background-size: 400% 400%;
        animation: gradient 15s ease infinite;
        width:100%;
        height:100%;
}
 
button{
        width:30%;
        height:20%;
    position:absolute;
    bottom:0;
    right:0;
        transition: 0.3s;
    cursor:pointer;
        color: white;
        text-transform: uppercase;
        background-color: rgba(0, 0, 0, 0.08);
        padding: 20px;
        border-radius: 5px;
        display: inline-block;
        border: none;
        transition: all 0.4s ease 0s;
        border-radius: 5px;
}
 
button:hover{
        background-color: rgba(0, 0, 0, 0.2);
        letter-spacing: 2px;
        animation: titre 1s;
        width:31%;
        height:21%;
}
 
 
@keyframes gradient {
        0% {background-position: 0% 50%;}
        50% {background-position: 100% 50%;}
        100% {background-position: 0% 50%;}
}
  • Les scripts javascript
  • Le script changeur de citation

A chaque fois que l’utilisateur actualise la page ou que le bouton est utiliser, une nouvelle citation qui est dans dans la variable « citations » sera affiché.

<script>
        var auteur = [
                "Maitre Oogway",
                "Maitre Oogway",
                "Martin Luther King",
                "Confucius",
                "Jean-Paul Sartre",
                "Victor Hugo",
                "Albert Einstein",
                "Oscar Wilde",
                "Albert Einstein",
                "Emmanuel Kant",
                "Douglas Adams",
                "Maitre Yoda"
        ]
        var citations = [
                "❝Hier est derrière, demain est mystère, et aujourd'hui est un cadeau, c'est pour cela qu'on l'appelle le présent.❞",
                "❝On rencontre souvent sa destinée par les chemins qu'on a pris pour l'éviter.❞",
                "❝Celui qui accepte le mal sans lutter contre lui coopère avec lui.❞",
                "❝Exige beaucoup de toi-même et attends peu des autres. Ainsi beaucoup d'ennuis te seront épargnés.❞",
                "❝Dans la vie on ne fait pas ce que l'on veut mais on est responsable de ce que l'on est.❞",
                "❝On passe une moitié de sa vie à attendre ceux qu'on aimera et l'autre moitié à quitter ceux qu'on aime.❞",
                "❝La vie, c'est comme une bicyclette, il faut avancer pour ne pas perdre l'équilibre.❞",
                "❝La beauté est dans les yeux de celui qui regarde.❞",
                "❝Un problème sans solution est un problème mal posé.❞",
                "❝La musique est la langue des émotions.❞",
                "❝42 est la réponse à la grande question sur la vie, l'univers et le reste❞",
                "❝Difficile à voir. toujours en mouvement est l'avenir.❞"
        ]
        function nouveaux() {
                var rand = Math.floor(Math.random() * (citations.length));
                document.getElementById('citationplace').innerHTML = citations[rand];
                document.getElementById('auteurplace').innerHTML = auteur[rand];
        }
        </script>
  • Le script javascript changeur d’image

A chaque fois que l’utilisateur actualise la page ou que le bouton est utiliser, une nouvelle image tiré au hasard de Flickr sera affiché. Cette image est trouvé grâce au mot clé « autumn forest ».

</script>
 
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script type="text/javascript">
        var keyword = "autumn forest";
        $(document).ready(function (){
                        $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
                        {
                                        tags: keyword,
                                        tagmode: "any",
                                        format: "json"
                        },
                        function (data) {
                                        var rnd = Math.floor(Math.random() * data.items.length);
                                        var image_src = data.items[rnd]['media']['m'].replace("_m", "_b");
                                        $('.container').css('background-image', "url('" + image_src + "')");
                        });
        });
 
 
        </script>

Un problème rencontré

Lors de la programation de nos page nous avons constaté plus précisément dans la page du piano, que la personne ayant codé le javascript avait codé avec un choix de touche adapté au clavier QWERTY il a donc fallut modifié les touches du clavier en l’adaptant pour un clavier AZERTY. Cette action a était possible en changeant les DATA-KEY des touches.

Projets

Un donjon textuel en Python sur la NumWorks

Mini jeux sous forme de jeux de rôle. Nommé dungeon, ce jeu consiste à remplir des mini quêtes en interagissant avec des personnage fictif.

L’histoire du jeu textuel

En 1972, William Crowther programme la première fiction interactive, nommée Adventure. Nécessitant 300 Ko de stockage, il était programmé sur un PDP 10, un ordinateur créé à la fin des années 1960 .
Cependant ce style de jeu a aussi existé sous forme de livres, les livres dont vous êtes le héros. Ce sont donc ces livres, qui ont bercé notre enfance, qui nous ont donné l’idée de ce jeu, Dungeon !

De l’idée à la conception

Après un long débat, nous étions parvenus à la conclusion que notre jeu proposerait toujours 2 choix, et qu’il n’existerait qu’une seule fin valable. Mais l’imagination débordante de notre professeur nous a permis de revoir l’idée de notre jeu. Ainsi nous vous proposons de naviguer dans un donjon, en interagissant avec différents personnages fantastiques.
Nous avons choisi différents personnages, ainsi que leurs interactions. Pour les plus cruels des joueurs, nous offrons la possibilité de tuer certains personnages, à leurs risques et périls. Tout au long de cette aventure, il sera possible de récolter des objets différents permettant de sortir du donjon.

Le début du codage

Il nous a fallu définir une variable pour chaque personnage ou objet contenant l’état de ce personnage ou objet :

  • True : le personnage est en vie ou l’objet est en votre possession
  • False : le personnage est mort ou vous ne possédez pas l’objet.

Ceci fait, on a cherché le moyen de coder chaque interaction. Ainsi, on demande au joueur de choisir entre plusieurs possibilités, et la réponse entrée est testée pour effectuer l’action correspondante. Le code pris cette forme (\n indiquant un saut de ligne) :

x=int(input("Que voulez vous faire entre :\n1 : manger un steak \n2 : ne pas manger de steak ?\n\nChoix : ")
if x==1 :
    print("vous mangez un steak")
elif x==2 :
    print("Vous ne mangez pas de steak")

Coder jusqu’à la fin !

Il nous a fallu coder chacune des pièces dans lesquelles le joueur peut se rendre dans une fonction def, permettant de tester et débuguer plus facilement nos lignes de code. Nous avons gardé cette écriture pour plus de lisibilité.
Une fois les salles et les interactions avec les personnages codées, un long travail de saut de ligne (\n) s’est mis en place pour rendre lisible le jeu. De cette manière, nous avons essayé d’optimiser la lecture à l’écran.

def room1():
    print("Vous entrez dans la salle du\nFourneau.\nParler : ")
    if etat[2]==True :
        print("\n1 : au", objet[2])
    if etat[6]==True :
        print("2 : a l'", objet[6])
    f=int(input("\n\n\n\n\nChoix : "))
    if f==1 and etat[2]==True :
        fo=int(input("Bonjour, je peux vous forger\nce que vous voulez, mais\navec des materiaux.\n\n1 : Avez-vous ... ?\n2 : Tuer le forgeron\n3 : Donner un objet\n\n\n\n\nChoix : "))
        if fo==1 :
            print("Oh vous etes le livreur,\ntenez, c'est la pioche du\nmineur. Allez lui donner,\nil a deja tout paye.\n\n\n")
            etat[10]=True
        elif fo==2 :
            print("Argh je me meurs !\n\n\n\n\n")
            etat[2]=False
            etat[19]=etat[19]+1
        elif fo==3 :
            if etat[9]==True :
                print("Un instant, je vous forge\nune epee avec ceci !\n\n\n\n")
                etat[11]=True
            else :
                print("Je ne peux rien faire\npour vous, desole\n\n\n\n\n")
    elif f==2 and etat[6]==True :
        al=int(input("Bienvenue, je suis\nl'alchimiste Gandalf,\nspecialiste de\nl'immortalite.\n\n1 : Gandalf ?\n2 : Tuer Gandalf\n3 : Prendre une potion\n\n\n\nChoix : "))
        if al==1 :
            print("Je suis Gandalf, un\nimmortel de 70 ans.\n\n\n\n")
        elif al==2 :
            print("Ainsi je meurs.\n\n\n\n\n")
            etat[6]=False
            etat[19]=etat[19]+1
        elif al==3 :
            print("Je vous echange ma potion\ncontre un STEAK.")
            if etat[12]==True :
                print("Tenez. Bonne journee.\n\n\n\n")
                etat[15]=True
            else :
                print("PAS TOUCHE A MES POTIONS!\n\n\n\n") 

Les difficultés encontrées…

Notre idée première était d’établir chacune des variables désignant un personnage ou un objet en début de code, sous la forme suivante (avec comme exemple un nain et sa hache) :

nain=True
hache=False

Seulement, ce style de définition de variables est « local », il ne peut être utilisé que dans le code en lui-même et non pas dans les fonctions defdes salles, dans lesquelles nous utilisions ces variables. Notre professeur, M. Robert, nous a expliqué que certaines définitions de variables étaient donc « globales », comme les tableaux. Ainsi nous avons codé toutes nos variables dans deux tableaux, l’un contenant le nom de la variable et l’autre la valeur de la variable. Nous obtenions donc ceci :

nom=["nain", "hache"]
etat=[True, False]

Par la suite, il nous a fallu remplacer chaque variable par le nom du tableau et le nombre correspondant au tableau. Selon les exemples précédents, « nain » devait être changé en « nom[0] » ou « etat[0] ». Nos vingt-et-une variable échangées dans le code pour le nom des tableurs, il nous fut plus complexe de coder mais cela était encore faisable.
Enfin, il nous a fallu définir la manière dont le programme afficherait chaque interactions. Nous disposions de 11 lignes sur l’écran, et pour que le jeu soit le plus clair possible il fallait que chaque interface occupe 11 lignes ( de temps en temps 10 ou 9 si vous vous comportez mal dans notre jeu, c’est le karma). nous avons donc opté pour une version lisible et ordonnée.

A vous de jouer !

Notre jeu étant composé de nombreuses interactions avec des personnages, et ne voulant pas spoiler notre jeu, nous ne voulons pas vous montrer trop d’images de ce jeu.
Mais vous pouvez télécharger Dungeon sur votre calculatrice via le bouton rouge ci-dessous ou en cliquant ici.

Télécharger et tester

Serveur Workshop de NumWorks tiplanet.org nsi.xyz 
RemarquesPermet un téléchargement rapide sur la calculatriceTéléchargement .pyTéléchargement .zip
Liens hypertexteslienNumWorks > Jeux > Lien

Projets

Comment faire un montage simple sur iMovie

Ce tutoriel a été entièrement rédigé par un élève en spécialité NSI au Lycée Louis Pasteur. Pour en savoir plus : Les tutoriels en spécialité NSI

Pour tous ceux qui adorent remplir leurs galeries de photos en tout genre mais qui ne savent jamais comment les assembler afin de créer un rendu correct et présentable, ce tutoriel va vous guider pour vous permettre de réaliser votre premier montage ( sur iMovie ).

A tous ceux qui ne possèdent pas de Mac, arrêtez-vous là, vous n’apprendrez rien qui ne soit compatible avec votre système d’exploitation ( Windows ou Linux ) .
Sachez que le logiciel est compatible avec iPhone et iPad mais ce tutoriel ne se concentrera que sur la version mac pour éviter les confusions.

Téléchargement et lancement du logiciel

Si vous êtes encore là c’est que vous possédez un mac ! La première étape va être de télécharger le logiciel iMovie pour pouvoir commencer à monter vos plans, si vous l’avez déjà, vous pouvez passez à l’étape suivante.

Il existe plusieurs sites pour télécharger le logiciel, néanmoins je vous conseille l’app store , il permet un téléchargement sécurisé et relativement rapide ( suivant votre débit internet ).
Vous pouvez également télécharger iMovie sur des sites tels que 01net.com.

L’interface

Lorsque vous lancez votre programme, vous devez alors créer votre premier projet.

Il faut noter que lors de votre toute première ouverture de l’application, il n’y a aucun clip, aucun projet de film et un seul événement.

Une fois votre projet créé vous arrivez sur une interface comme celle ci-dessous.

La fenêtre A se réfère à la console, elle vous permet d’importer tous vos fichiers audio et vidéo et de les modifier selon vos envies. Vous pouvez également ajouter des transitions ainsi que des cartes et des arrières plans, mais nous y reviendrons plus tard.

La fenêtre B correspond au rendu de votre travail en cours, vous pouvez vous rendre compte de votre montage dans cette fenêtre que vous pouvez agrandir en cas de besoin. La barre en haut de cette fenêtre contient un certain nombre de commandes que nous verrons dans l’étape suivante.

La fenêtre C est votre bibliothèque, elle vous permet de choisir les transitions, les textes, les cartes et les titres à mettre, les photos, vidéos et audio à insérer ainsi que les éventuels arrières plans de vos créations.

Les différentes insertions

Maintenant que vous connaissez l’interface, il est temps de réaliser votre premier montage, commençons par insérer les photos.

Il existe plusieurs façons d’ajouter photos : vous pouvez insérer des images et vidéos à l’aide de la bibliothèque seulement si vos fichiers se trouvent dans votre photothèque mac.

Ou alors, si vos fichiers sont dans un dossier sur votre bureau ou directement sur celui-ci comme indiqué sur la capture d’écran, vous pouvez les glisser directement dans la fenêtre A.

Lorsque cela est fait vous verrez qu’une bande apparaît dans votre console, pour les vidéos il s’agit de la durée de la vidéo et pour les photos il s’agit du temps durant lequel la photo va rester sur votre montage final.

Sachez que vous pouvez modifier la durée de chaque fichier : pour la vidéo il suffit de cliquer sur un trait jaune à l’extrémité de la bande qui correspond à la vidéo et d’aller vers la droite ; vous pouvez alors voir que la bande rétrécit.

Veillez bien à regarder votre vidéo modifiée une nouvelle fois pour vérifier son contenu.

Il s’agit de la même manœuvre pour les photos.

Une fois vos photos et vidéos ajoutées, vous pouvez insérer des textes ou des titres sur, ou entre vos fichiers. Pour ce faire il suffit d’aller dans votre bibliothèque, de choisir dans “Titres” une animation de texte, vous pouvez ensuite cliquer dans la fenêtre B sur le texte pour le modifier à votre guise.

Quand vous ajoutez des vidéos, le son de celles-ci est inclus, il apparaît comme une bande bleue en dessous de la vidéo.Retour ligne automatique
Si vous souhaitez le détacher, il suffit de faire un clic droit et de cliquer sur “détacher l’audio” . Vous pouvez ensuite inclure une musique ou un fichier son à l’aide de la fenêtre C dans la bibliothèque « audio » ou en le faisant glisser de la même façon qu’une image ou une vidéo ( le fichier son doit être sous format mp3 ).

Une fois l’audio inséré une bande verte sera affichée en dessous des photos texte et vidéos.

Le logiciel permet également d’accélérer ou de ralentir vos plans vidéos pour un rendu plus impressionnant. Retour ligne automatique
Pour ce faire :

  1. sélectionnez la vidéo à modifier en cliquant dessus ( le contour devient alors jaune )
  2. allez dans la barre d’outils en haut de la fenêtre B
  3. cliquez sur le logo vitesse, vous pouvez alors choisir de ralentir ou d’accélérez vos vidéos ainsi que la vitesse de ces modifications ( x2x4, …).

A noter que ces modifications auront un impact sur le temps du rendu final, alors faites ces changements avant d’insérer un audio qui soit parfaitement synchronisé.

Vous avez maintenant mis bout à bout : du texte, des images, des vidéos, et inséré une musique. Il s’agit maintenant de lier cette création de façon harmonieuse, vous avez accès à une trentaine de transitions que vous pouvez choisir dans la bibliothèque de la fenêtre C à l’onglet “transitions” . Vous n’avez plus qu’à faire glisser votre transition entre les photos et les vidéos.

Vous pouvez également effectuer des “transitions de fondu” entre vos audios en utilisant les petits cercles aux extrémités des bandes audio et allant plus ou moins vers le centre.

Notez bien que ce fondu diminuera le son de façon décroissante à la fin de votre son.

Astuces et conseils

Votre montage est terminé ! Vous avez des images des videos et de l’audio, et tout cela s’assemble très bien grâce à vos transitions judicieuses.

Vous pouvez encore peaufiner votre montage en améliorant le rendu de vos images. En effet la touche 1 vous permet de régler la colorimétrie de votre image de façon automatique mais vous pouvez également le faire de façon manuelle grâce à la touche 2 qui vous permet un réglage plus approfondi des couleurs.

Il existe aussi une fonctionnalité qui vous permet de stabiliser les vidéos tremblantes. Elle se situe dans la même barre d’outils que les fonctions précédentes. Elle permet, comme son nom l’indique, de stabiliser une vidéo tremblante pour qu’elle soit plus agréable à regarder.

Néanmoins cette fonctionnalité n’est vraiment utile que dans des cas extrêmes et elle met un certain temps à corriger la vidéo tremblante pour un résultat pas toujours visible…

Ce tutoriel est terminée, j’espère qu’il vous aura été utile. Retour ligne automatique
Je vous propose le lien suivant qui est une vidéo que j’ai réalisé avec iMovie.

Lien vers Youtube

Projets

Convertisseur de distances

Ce projet a été réalisé par des élèves en spécialité NSI du Lycée Louis Pasteur. Ils sont également les auteurs de ce compte rendu. Pour en savoir plus : Les projets en spécialité NSI

Présentation

Ce projet a été réaliser par Chausi Ursuegui T. et Cymbler N. en classe de première G3 dans le cadre de leur enseignement de spécialité NSI (numérique et sciences de l’informatique), au lycée Louis Pasteur à Avignon .
Avec comme matériel un ordinateur équipé du logiciel Thonny.

Descriptif du projet

Ce projet est un programme écrit en Python qui sert dans plusieurs domaine à convertir n’importe quelle distance allant du Pico mètre jusqu’au Téra mètre. Nous avons décider de faire ce programme car de nombreux étudiants de tout âge rencontre ce problème particulièrement en physique chimie .

Notre programme

d = int(input("Indiquez la distance: "))
print("pm / nm / µm / mm / cm / dm / m / dam / km / hm / M / G / T")
u_d = input("Indiquez l'unité de départ: ")
print("pm / nm / µm / mm / cm / dm / m / dam / km / hm / M / G / T")
 
if u_d =="Tm":
    d_Tm = d
    d_Gm = d * 1000
    d_Mm = d *1000000
    d_km = d * 1000000000
    d_hm = d * 10000000000
    d_dam = d * 100000000000
    d_m = d * 1000000000000
    d_dm = d * 10000000000000
    d_cm = d * 100000000000000
    d_mm = d * 1000000000000000
    d_µm = d * 1000000000000000000
    d_nm = d * 1000000000000000000000
    d_pm = d * 1000000000000000000000000
 
if u_d =="Gm":
    d_Tm = d / 1000
    d_Gm = d
    d_Mm = d * 1000
    d_km = d * 1000000
    d_hm = d * 10000000
    d_dam = d * 100000000
    d_m = d * 1000000000
    d_dm = d * 10000000000
    d_cm = d * 100000000000
    d_mm = d * 1000000000000
    d_µm = d * 1000000000000000
    d_nm = d * 1000000000000000000
    d_pm = d * 1000000000000000000000
 
if u_d =="Mm":
    d_Tm = d / 1000000
    d_Gm = d / 1000
    d_Mm = d
    d_km = d * 1000
    d_hm = d * 10000
    d_dam = d * 100000
    d_m = d * 1000000
    d_dm = d * 10000000
    d_cm = d * 100000000
    d_mm = d * 1000000000
    d_µm = d * 1000000000000
    d_nm = d * 1000000000000000
    d_pm = d * 1000000000000000000
 
if u_d =="km":
    d_Tm = d / 1000000000
    d_Gm = d / 1000000
    d_Mm = d / 1000
    d_km = d
    d_hm = d * 10
    d_dam = d * 100
    d_m = d * 1000
    d_dm = d * 10000
    d_cm = d * 100000
    d_mm = d * 1000000
    d_µm = d * 1000000000
    d_nm = d * 1000000000000
    d_pm = d * 1000000000000000
 
if u_d =="hm":
    d_Tm = d / 10000000000
    d_Gm = d / 10000000
    d_Mm = d / 10000
    d_km = d / 10
    d_hm = d
    d_dam = d * 10
    d_m = d * 100
    d_dm = d * 1000
    d_cm = d * 10000
    d_mm = d * 100000
    d_µm = d * 100000000
    d_nm = d * 100000000000
    d_pm = d * 100000000000000
 
if u_d =="dam":
    d_Tm = d / 100000000000
    d_Gm = d / 100000000
    d_Mm = d / 100000
    d_km = d / 100
    d_hm = d / 10
    d_dam = d
    d_m = d * 10
    d_dm = d * 100
    d_cm = d * 1000
    d_mm = d * 10000
    d_µm = d * 10000000
    d_nm = d * 10000000000
    d_pm = d * 10000000000000
 
if u_d =="m":
    d_Tm = d / 1000000000000
    d_Gm = d / 1000000000
    d_Mm = d / 1000000
    d_km = d / 1000
    d_hm = d / 100
    d_dam = d / 10
    d_m = d
    d_dm = d * 10
    d_cm = d * 100
    d_mm = d * 1000
    d_µm = d * 1000000
    d_nm = d * 1000000000
    d_pm = d * 1000000000000
 
if u_d =="dm":
    d_Tm = d / 10000000000000
    d_Gm = d / 10000000000
    d_Mm = d / 10000000
    d_km = d / 10000
    d_hm = d / 1000
    d_dam = d / 100
    d_m = d / 10
    d_dm = d
    d_cm = d * 10
    d_mm = d * 100
    d_µm = d * 100000
    d_nm = d * 100000000
    d_pm = d * 100000000000
 
if u_d =="cm":
    d_Tm = d / 100000000000000
    d_Gm = d / 100000000000
    d_Mm = d / 100000000
    d_km = d / 100000
    d_hm = d / 10000
    d_dam = d / 1000
    d_m = d / 100
    d_dm = d / 10
    d_cm = d
    d_mm = d * 10
    d_µm = d * 10000
    d_nm = d * 10000000
    d_pm = d * 10000000000
 
if u_d =="mm":
    d_Tm = d / 1000000000000000
    d_Gm = d / 1000000000000
    d_Mm = d / 1000000000
    d_km = d / 1000000
    d_hm = d / 100000
    d_dam = d / 10000
    d_m = d / 1000
    d_dm = d / 100
    d_cm = d / 10
    d_mm = d
    d_µm = d * 1000
    d_nm = d * 1000000
    d_pm = d * 1000000000
 
if u_d =="µm":
    d_Tm = d / 1000000000000000000
    d_Gm = d / 1000000000000000
    d_Mm = d / 1000000000000
    d_km = d / 1000000000
    d_hm = d / 100000000
    d_dam = d / 10000000
    d_m = d / 1000000
    d_dm = d / 100000
    d_cm = d / 10000
    d_mm = d / 1000
    d_µm = d
    d_nm = d * 1000
    d_pm = d * 1000000
 
if u_d =="nm":
    d_Tm = d / 1000000000000000000000
    d_Gm = d / 1000000000000000000
    d_Mm = d / 1000000000000000
    d_km = d / 1000000000000
    d_hm = d / 100000000000
    d_dam = d / 10000000000
    d_m = d / 1000000000
    d_dm = d / 100000000
    d_cm = d / 10000000
    d_mm = d / 1000000
    d_µm = d / 1000
    d_nm = d
    d_pm = d * 1000
 
if u_d =="pm":
    d_Tm = d / 1000000000000000000000000
    d_Gm = d / 1000000000000000000000
    d_Mm = d / 1000000000000000000
    d_km = d / 1000000000000000
    d_hm = d / 100000000000000
    d_dam = d / 10000000000000
    d_m = d / 1000000000000
    d_dm = d / 100000000000
    d_cm = d / 10000000000
    d_mm = d / 1000000000
    d_µm = d / 1000000
    d_nm = d / 1000
    d_pm = d
 
u_a = input("Indiquez l'unité d'arrivée: ")
 
if u_a=="Tm":
    print("La distance en Tm est %.2f Tm." % d_Tm)
 
if u_a=="Gm":
    print("La distance en Gm est %.2f Gm." % d_Gm)
 
if u_a=="Mm":
    print("La distance en Mm est %.2f Mm." % d_Mm)
 
if u_a=="km":
    print("La distance en km est %.2f km." % d_km)
 
if u_a=="hm":
    print("La distance en hm est %.2f hm." % d_hm)
 
if u_a=="dam":
    print("La distance en dam est %.2f dam." % d_dam)
 
if u_a=="m":
    print("La distance en m est %.2f m." % d_m)
 
if u_a=="dm":
    print("La distance en dm est %.2f dm." % d_dm)
 
if u_a=="cm":
    print("La distance en cm est %.2f cm." % d_cm)
 
if u_a=="mm":
    print("La distance en mm est %.2f mm." % d_mm)
 
if u_a=="µm":
    print("La distance en µm est %.2f µm." % d_µm)
 
if u_a=="nm":
    print("La distance en nm est %.2f nm." % d_nm)
 
if u_a=="pm":
    print("La distance en pm est %.2f pm." % d_pm)

Description du programme

Voici la première version de notre programme alors nous avons détailler les calcul pour chaque conversions (de m en mm , de km en hm …)et nous avons a la fin écrit une phrases de réponse pour touts les résultats en donnant l’unité donné par l’utilisateur et le résulta demandé .

Fonctionnement du du programme

1-Indiquer le distance a convertir
2-Donner l’unité de départ
3-Donner l’unité d’arrivé
4-Vous avez le résultat

Une version améliorée

Notre programme

d = float(input("Indiquez la distance: "))
print("pm = 0\tnm = 1\tµm = 2\tmm = 3\tcm = 4\tdm = 5\tm = 6\tdam = 7\thm = 8\tkm = 9\tMm = 10\nGm = 11\tTm = 12")
u_d = int(input("Indiquez l'unité de départ: "))
u_a = int(input("Indiquez l'unité d'arrivée: "))
{exposant = [10**-12,10**-9,10**-6,10**-3,10**-2,10**-1,10**0,10**1,10**2,10**3,10**6,10**9,10**12]
prefixe = ["pm","nm","µm","mm","cm","dm","m","dam","hm","km","Mm","Gm","Tm"]}
d_c = d * exposant[u_d] / exposant[u_a]
print(d_c,prefixe[u_a])

Explication du programme

Après avoir fini la version 1 ont a trouvé que c’était beaucoup trop long et nous avons donc voulu le raccourcir .
Ont a donc chercher un moyen et nous avons trouve l’utilité des listes

exposant = [10**-12,10**-9,10**-6,10**-3,10**-2,10**-1,10**0,10**1,10**2,10**3,10**6,10**9,10**12]
prefixe = [« pm », »nm », »µm », »mm », »cm », »dm », »m », »dam », »hm », »km », »Mm », »Gm », »Tm »]

qui regroupe touts les calcul qu’il permette de faire la conversion de distance, et que l’on peut voir dans la version 1. Par contre même si nous sommes passer de 220 lignes a 8 lignes les possibilité sont les même ainsi que le fonctionnement . Nous avons décidé de remplacer int par float pour que vous puissiez convertir des décimaux .

Conclusion

J’espère que notre programme vous aidera pour toute vos conversions.
Si vous voulez vous pouvez le récupéré et rajouter d’autres unités de votre choix si vous vous en sentez capable.

Projets

Calcul du volume et de la masse des solides

Ce projet a été réalisé par des élèves en spécialité NSI du Lycée Louis Pasteur. Ils sont également les auteurs de ce compte rendu. Pour en savoir plus : Les projets en spécialité NSI

  • Le CVMS est un programme python créé dans le but de faciliter les calculs mathématiques dont l’obtention du résultat nécessite l’usage d’une calculatrice. Il automatise le calcul du volume et de la masse des solides de manière simple, rapide et pratique.
  • Cet algorithme est sous forme de menu, c’est à dire un menu listant des choix reliés à des fonctions. Chaque choix est relié à une fonction définie par la commande def [nom de la fonction].
  • Sept solides, listés au début du programme, sont disponibles. Pour en choisir un, il faut entrer le nombre lui correspondant. Pour obtenir le volume, certaines dimensions du solide sont demandées à l’utilisateur.
    Le programme utilisera la formule mathématique correspondant à la fonction.
  • Suite à cela, le programme propose de calculer la masse du solide
    sélectionné, si l’utilisateur sélectionne « non », le programme se clos. Si il sélectionne « oui », le programme demande d’entrer la masse volumique du solide, le résultat est donné en fonction de cette valeur.
    En dernier lieu, le programme offre à l’utilisateur la possibilité de choisir un nouveau solide.

Si vous souhaitez essayer ce programme, vous pouvez vous rendre sur ce site : trinket.io

Algorithme :

from math import *
print("Calcul du volume et de la masse des solides :")
print()
print("1. boule")
print("2. cube")
print("3. pyramide à base carrée")
print("4. parallélépipède rectangle")
print("5. cylindre droit")
print("6. cône de révolution")
print("7. prisme droit")
 
def boule():  
    print("Vous avez choisi la boule.")
    print()
    a=int(input("Entrez le rayon de la boule (en cm) :"))
    b=4/3*pi*a**3
    print("Le volume de la boule est de",b,"cm3")
    print()
    print("Voulez vous sa masse ?")
    print("1.Oui")
    print("2.Non")
    a=int(input())
    if a==2:
        print("Non ?, tant pis bonne journée...")
        exit
    elif a==1:
        c=int(input("Entrez la masse volumique (en g/cm3) de votre solide : "))
        print()
        print("La masse de votre solide est de " , c*b, "g")
    print()
    print("Pour choisir un nouveau solide, appuyez sur la touche ENTRER")
    input()
 
def cube():
    print("Vous avez choisi le cube.")
    print()
    a=int(input("Saisissez la longueur du côté du cube (en cm) : "))
    b= a**3
    print("Le volume du cube est de",b,"cm3")
    print()
    print("Voulez vous sa masse ?")
    print("1.Oui")
    print("2.Non")
    a=int(input())
    if a==2:
        print("Non ?, tant pis bonne journée...")
        exit
    elif a==1:
        c=int(input("Entrez la masse volumique (en g/cm3) de votre solide : "))
        print()
        print("La masse de votre solide est de " , c*b, "g")
    print()
    print()
    print("Pour choisir un nouveau solide, appuyez sur la touche ENTRER")
    input()
 
def pyramide():
    print("Vous avez choisi la pyramide.")
    print()
    a=int(input("Saisissez la longueur de la base de la pyramide (en cm) : "))
    b=int(input("Saisissez la largeur de la base de la pyramide (en cm) : "))
    c=int(input("Saisissez la hauteur de votre pyramide (en cm) : "))
    d=a*b
    e=d**2*c/3
    print("L'aire de la base de votre solide est de",d,"cm2")
    print()
    print("Le volume de votre pyramide est de",e,"cm3")
    print()
    print("Voulez vous sa masse ?")
    print("1.Oui")
    print("2.Non")
    a=int(input())
    if a==2:
        print("Non ?, tant pis bonne journée...")
        exit
    elif a==1:
        c=int(input("Entrez la masse volumique (en g/cm3) de votre solide : "))
        print()
        print("La masse de votre solide est de " , c*e, "g")
    print()
    print("Pour choisir un nouveau solide, appuyez sur la touche ENTRER")
    input()
 
def parallélépipèderectangle():
    print("Vous avez choisi le parallélépipède rectangle.")
    print()
    a=int(input("Saisissez sa longueur (en cm) : "))
    b=int(input("Saisissez sa largeur (en cm) : "))
    c=int(input("Saisissez sa hauteur (en cm) : "))
    d=a*b*c
    print("Le volume de votre parallélépipède rectangle est de",d,"cm3")
    print()
    print("Voulez vous sa masse ?")
    print("1.Oui")
    print("2.Non")
    a=int(input())
    if a==2:
        print("Non ?, tant pis bonne journée...")
        exit
    elif a==1:
        c=int(input("Entrez la masse volumique (en g/cm3) de votre solide : "))
        print()
        print("La masse de votre solide est de " , c*d, "g")
    print()
    print("Pour choisir un nouveau solide, appuyez sur la touche ENTRER")
    input()
 
def cylindredroit():    
    print("Vous avez choisi le cylindre droit.")
    print()
    a=int(input("Entrez le rayon du cylindre (en cm) :"))
    b=int(input("Entrez la hauteur du cylindre (en cm)"))
    d=pi*a**2*b
    print("Le volume de votre solide est de",d,"cm3")
    print()
    print("Voulez vous sa masse ?")
    print("1.Oui")
    print("2.Non")
    a=int(input())
    if a==2:
        print("Non ?, tant pis bonne journée...")
        exit
    elif a==1:
        c=int(input("Entrez la masse volumique (en g/cm3) de votre solide : "))
        print()
        print("La masse de votre solide est de " , c*d, "g")
    print()
    print("Pour choisir un nouveau solide, appuyez sur la touche ENTRER")
    input()
 
def cônederévolution():    
    print("Vous avez choisi le cône de révolution.")
    print()
    a=int(input("Saisissez la longueur du rayon du cône (en cm) : "))
    b=int(input("Saisissez la hauteur de votre cône (en cm) : "))
    c=pi*a**2
    d=pi*a**2*b/3
    print()
    print("L'aire de la base de votre solide est de",c,"cm2")
    print()
    print("Le volume de votre cône est de",d,"cm3")
    print()
    print("Voulez vous sa masse ?")
    print("1.Oui")
    print("2.Non")
    a=int(input())
    if a==2:
        print("Non ?, tant pis bonne journée...")
        exit
    elif a==1:
        c=int(input("Entrez la masse volumique (en g/cm3) de votre solide : "))
        print()
        print("La masse de votre solide est de " , c*d, "g")
    print()
    print("Pour choisir un nouveau solide, appuyez sur la touche ENTRER")
    input()
 
def prismedroit():
    print("Vous avez choisi le prisme droit.")
    print()
    a=int(input("Saisissez sa longueur (en cm) : "))
    b=int(input("Saisissez sa largeur (en cm) : "))
    c=int(input("Saisissez sa hauteur (en cm) : "))
    d=1/2*a*b*c
    print("Le volume de votre prisme est de",d,"cm3")
    print()
    print("Voulez vous sa masse ?")
    print("1.Oui")
    print("2.Non")
    a=int(input())
    if a==2:
        print("Non ?, tant pis bonne journée...")
        exit
    elif a==1:
        c=int(input("Entrez la masse volumique (en g/cm3) de votre solide : "))
        print()
        print("La masse de votre solide est de " , c*d, "g")
    print()
    print("Pour choisir un nouveau solide, appuyez sur la touche ENTRER")
    input()
 
def menu():
    print()
    print("Entrez le chiffre correspondant à votre solide : ")  
    choix = 0
    while choix==0:
        choix=int(input())
    if choix==1:
        boule()
    elif choix==2:
        cube()
    elif choix==3:
        pyramide()
    elif choix==4:
        parallélépipèderectangle()
    elif choix==5:
        cylindredroit()
    elif choix==6:
        cônederévolution()
    elif choix==7:
        prismedroit()
    elif choix==9:
        print("Abonnez vous : _kami_pedro_")
        exit
    elif choix==666:
        print("Tu vas avoir des problèmes")
        exit
    elif choix==42:
        print("42 est la réponse à La Grande Question sur la vie, l'univers et le reste dans l'œuvre de Douglas Adams Le Guide du voyageur galactique. Il reste alors à déterminer quelle était, précisément, la question.")
    else:
        menu()
    if choix!=9:
        menu()
 
menu()
  • En conclusion, nous pouvons dire que ce programme fut parfois difficile à réaliser mais nous avons finalement réussi à traverser tous les obstacles.
    Nous espérons que ce programme pourra répondre aux attentes de tous les utilisateurs.
Projets

Cubito’s Adventures, un jeu en Python pour la NumWorks

Le jeu est très simple, il faut ramasser le plus de pièces possible, et pour se déplacer, il suffit d’appuyer sur les flèches de la calculatrice. Mais attention ! Si il n’y a pas de pièce en dessous de Cubito (le personnage que vous incarnez), vous tombez ! Il est impossible de remonter si on en oublie une. Heureusement, il y a des échelles pour vous aider !
Bon courage et amusez vous bien !!

Ce projet a été réalisé par des élèves en spécialité NSI du Lycée Louis Pasteur. Ils sont également les auteurs de ce compte rendu. Pour en savoir plus : Les projets en spécialité NSI

Lien court vers ce document : https://nsi.xyz/cubito

On a tous espéré un jour pouvoir jouer sur sa calculatrice !
C’est pourquoi nous vous présentons le jeu « Cubito’s Adventures » !

Recherche d’idées et présentation du projet

Lorsque nos profs nous ont dit qu’il fallait faire un programme en Python qui tourne sur la NumWorks, on a tout de suite pensé à un petit jeu avec la surcouche graphique de la NumWorks, Kandinsky.
On voulait partir sur un jeu, oui, mais lequel ? Après être passés par une reprise du jeu Rogue sorti en 1980, ou par un Space Invaders comme en 1978, nous sommes finalement partis sur une tout autre idée, et Cubito est né !
Nous nous sommes lancés dans ce projet avec empressement.
Il consiste en un jeu sur la NumWorks avec différents niveaux.
Chaque niveau s’articule particulièrement autour de 4 paramètres que vous pouvez voir dans la capture d’écran ci-contre :

Le jeu Cubito’s Adventures sur NumWorks
  • Le personnage principal, Cubito (carré jaune),
  • L’arrivée (carré bleu),
  • Les pièces (points blancs),
  • L’échelle (rectangle blanc)

Pour gérer chaque niveau, des variables sont actualisées à chaque fois dans la barre du bas, il s’agit du score, ainsi que du niveau.
L’objectif du jeu est d’atteindre l’arrivée en ayant le plus gros score. 
Le choix des couleurs devrait certainement vous rappeler le jeu Pac-Man sorti en 1980 et dont nous nous sommes quelque peu inspiré.

Outils à notre disposition et problèmes rencontrés

On avait hâte oui, mais on n’avait pas de moyens pour tester notre programme autrement que de l’envoyer sur la NumWorks à chaque fois, ce qui est très long !!
Deux possibilités s’ouvraient alors à nous :
Nous pouvions utiliser le Workshop NumWorks, le site officiel de NumWorks qui nous permettait de tester notre programme plus simplement et en ligne mais, le site n’était pas très intuitif et nos professeurs nous ont conseillé d’utiliser Omega IDE, pour avancer plus facilement.
On s’est donc servi de l’IDE en ligne Omega IDE, issu de l’OS alternatif pour la calculatrice du même nom. (Un IDE, de l’anglais « integrated development environment  », est un logiciel en ligne ou non qui intègre toutes les fonctionnalités utiles pour pouvoir développer sur un langage et un produit (ici en l’occurrence Python et sur la NumWorks).)
Omega IDE nous permet un aperçu du rendu sur calculatrice ainsi que l’enregistrement automatique de notre code sur GitHub (plateforme de partage de codes et programmes).
Mais tout ne pouvait pas être parfait. En effet, ce site étant en version alpha (pas vraiment sorti) certains bugs pouvaient être présents dont certains particulièrement embêtant auxquels nous avons eu affaire. 
En effet, si l’on testait notre programme une fois puis qu’on le re testait une seconde fois (même 10 min plus tard) les deux programmes se mélangeaient ce qui rendait le test quasi impossible et nous obligeait à rafraîchir à chaque fois la page web. Nous avons donc dû faire avec !

Un programme bien « carré »

Quand nous avons commencé notre programme, nous avons utilisé le code de l’agent 42, pour les déplacements.

Nous avions déjà réalisé un programme qui permettait les déplacements mais nous ne maîtrisions pas tout le savoir nécessaire sur le module Kandinksy au départ pour pouvoir réaliser ces déplacements.
Grâce à l’abandon de cette partie du programme, nous connaissions déjà les bases du module graphique ce qui nous a permis de mieux avancer dans notre travail par la suite.

Ce qui nous a bien aidé, c’est que dès le début, nous avons tout écrit et définit par des fonctions. Des fonctions pour chaque détails du code. Par exemple une fonction pour se déplacer, une pour la fin des niveaux etc…
Notre jeu était alors beaucoup plus facile à mettre en place, par de simples boucles comme vous pouvez ici le voir grâce à un extrait de notre fonction jeu.

def jeu():
    global niveau
    while niveau!=6:
        fill_rect(0,0,320,222,no)
        sleep(2)
        partie()
#[...]

Avec la boucle while qui teste la valeur de la variable niveau, on peut après une incrémentation (un ajout) de 1 à la variable niveau, appeler à chaque fois la fonction partie qui va à son tour appeler les déplacements, et l’initialisation de l’écran pour le niveau en question.

Évidemment, comme une bonne nouvelle n’arrive jamais seule, on a eu une petite complication car il fallait appeler chaque fonction, oui, mais par ordre d’appel très précis sinon cela ne fonctionne pas !

Notre programme a été centré sur la position des différents objets dans chaque niveau et l’interaction de Cubito avec les autres « objets ».

Un de nos plus grands problèmes dès le début était de faire en sorte que Cubito ne puisse pas sortir de l’écran de la calculatrice ! Il fallait définir le point le plus en haut à gauche et le point le plus en bas à droite, dans lequel le personnage pouvait se déplacer. Au bout de quelques heures (et beaucoup d’échecs), il fallait juste définir la « bordure » qui avait déjà été mise en place (pas avec les mêmes valeurs) par notre agent :

bordure = [0,0,190,310] #x min, y min, y max, x max

Le premier 0 est donc l’abscisse minimale de Cubito, 310 l’abscisse maximale, le deuxième 0 l’ordonnée minimale et 190l’ordonnée maximale.

Voyons maintenant un point central du jeu, la génération des pièces.

#[...]
def initiation(): #Génère les pièces
    fill_rect(0,0,320,222,no)
    for j in range(5,222,10):
        for i in range(5,320,10):
            set_pixel(i,j,bl)
#[...]

Cette fonction va donc au fur et à mesure créer une variable j, correspondant à l’ordonnée ainsi qu’une variable i, correspondant à l’abscisse, en partant de 5 à chaque fois. Puis au fur et à mesure, à chaque avancée, elle va allumer un pixel en blanc (le set_pixel). Pour le for j et i in range, le premier nombre correspond à la valeur de départ, 5 pour qu’à chaque déplacement, la pièce soit au centre de Cubito. Le deuxième nombre est la valeur maximale, car l’écran de la calculatrice est en 320 par 222. Enfin la troisième valeur correspond au « pas », c’est à dire l’avancée à chaque fois.

Pour les déplacements, voici un extrait de la fonction move :

#[...]
def move():
     if keydown(0): #gauche
            mvt[0] = max(position[0]-10, bordure[0])
            is_key_pressed = True
#[...]

Dans cette portion de code (pour aller à gauche), on dit à Cubito de se déplacer de -10 sur l’axe des abscisses. Mais comme notre personnage est un bloc de 10×10, alors il se déplace de 10 pixels par 10 pixels ; en fait il se décale d’une case ! Sans oublier qu’il laisse derrière lui une case noire pour effacer sa dernière position. Comme le fond est noir aussi, on a l’impression qu’il a disparu de son ancienne positon. C’est là toute l’illusion des déplacements !!

Un menu pour notre jeu

Nous avons voulu mettre en place un menu pour notre jeu.
Pour ne pas prendre trop de place dans le poids total du jeu, il n’est que partiellement interactif comme vous pouvez le voir dans la capture d’écran ci-dessous.

def menu():
    #[...]
    while not keydown(5):
        if keydown(4) or keydown(17):
            jeu()
#[...]

Pour afficher ce menu, nous avons juste affiché le texte à l’aide de draw_string.
Pour tout ce qui est interaction avec le joueur, c’est à dire commencer la partie, voici un extrait de code de la fonction menu :

Un problème coloré mais heureusement résolu !

Nous avons néanmoins rencontré durant ce projet, un problème épineux.
En effet, nous avions besoin d’utiliser la fonction get_pixel issue de Kandinsky qui permet de vérifier la couleur d’un pixel donné.
Ainsi, dans l’exemple ci-dessous :

Nous avons néanmoins rencontré durant ce projet, un problème épineux.
En effet, nous avions besoin d’utiliser la fonction get_pixel issue de Kandinsky qui permet de vérifier la couleur d’un pixel donné.
Ainsi, dans l’exemple ci-dessous :

Le programme trace un carré de 10 par 10 aux coordonnées (120 ; 120) et de couleur noire, soit (0,0,0) en RGB (rouge, vert, bleu), la méthode utilisée par la NumWorks pour les couleurs.

La ligne de code :

couleur_carre=get_pixel(120,120)

retournait comme valeur de la variable couleur_carre : (0,0,0).

Néanmoins, si on inversait les couleurs et que le cube était blanc sur un fond noir, le get_pixel ne retournait pas la couleur RGB du blanc : (255,255,255) mais une autre valeur incompréhensible pour nous, (248,252,248).
Après avoir demandé de l’aide à notre agent ainsi qu’aux développeurs d’Omega OS, car nous craignions que ce soit une erreur de notre part, nous avons appris que la calculatrice arrondissait le rouge tous les 8, le vert tous les 4 et le bleu tous les 8. Ce qui veut dire que les couleurs RGB rendues par le get_pixel avançaient de 8 en 8 pour le rouge, de 4 en 4 pour le vert et de 8 en 8 pour le bleu. Cette organisation complexe, nous a semblé plus claire grâce au programme fourni par notre professeur et montrant pour chaque couleur, ce qui ressortait au get_pixel.

Une fois ce souci réglé, nous pouvions enfin mettre en place les chutes et l’échelle !

Le fonctionnement des chutes peut paraître contre-intuitif au premier abord même s’il est tout à fait fonctionnel.
En effet, Cubito chute si en dessous de lui, il n’y a pas une pièce (par exemple s’il l’a déjà ramassée). 
Voici une portion de notre fonction vide qui réalise ceci :

def vide():
    global position, mvt, score, niveau
    while get_pixel(position[0]+5,position[1]+15)!=(248,252,248) and position[1]!=190:
        personnage(0)
        position[0]=position[0]
        position[1]+=10
        mvt[1]=position[1]
        score-=1
        personnage(1)
        sleep(1)
#[...]

Pour vérifier si il y a une pièce en dessous, on utilise le get_pixel que nous avons vu précédemment à la différence qu’on connait la valeur qu’il doit retourner : (248,252,248). 
Nous avons choisi d’utiliser une boucle, ce qui permet de vérifier que tant que la case au dessous n’a pas de pièce, le personnage continue de tomber, ce qui est permis par l’opérateur != (lire : « différent de »). La chute peut continuer jusqu’à arriver à la position maximale de Cubito en ordonnée : 190, sans quoi il irait sur les variables se trouvant dans la barre du bas.
On n’a donc plus qu’à ajouter 10 à l’ordonnée du personnage, à effacer son ancienne position et à créer la nouvelle à chaque tour de boucle.
Petite difficulté supplémentaire : les coordonnées de Cubito sont calculées à partir de son point le plus en haut à gauche, et les pièces sont placées de 10 en 10 mais en partant de 5.
Il faut donc pour savoir si une pièce en dessous de Cubito est présente ou non, faire le get_pixel aux coordonnées de l’abscisse de Cubito + 5 et de l’ordonnée de Cubito + 15 !

Ce get_pixel nous a aussi servi pour l’échelle comme vous pouvez le voir dans le code suivant :

#[...]
if get_pixel(position[0]+4,position[1]-39)==(248,252,248):
        personnage(0)
        position[1]-=longueur_scale+10
        position[0]=position[0]
        mvt[1]=position[1]
        personnage(1)
#[...]

En effet, au début nous avons voulu que l’échelle puisse faire monter le joueur de 40 (-40 car le point 0 est en haut), peut importe où nous étions sur l’échelle.
Mais quand l’échelle était trop proche du haut, Cubito sortait des limites du jeu.
Nous avons donc décidé que l’échelle ne pourrait être prise que du bas et ferait monter jusqu’en haut de cette dernière.
Ainsi pour vérifier que Cubito est bien tout en bas de l’échelle, qui a une longueur définie de 40, nous regardons le 39ème pixel au dessus de Cubito pour voir s’il est blanc. Si c’est le cas, le personnage se retrouve en haut de l’échelle.
Mais pourquoi le 39ème pixel et pas le 40ème, si l’échelle fait 40 de longueur ?
Tout simplement pour éviter de confondre avec une pièce, car pièce et échelle ont la même couleur !

Conclusion

Pour conclure, ce projet était ambitieux, c’était pas toujours facile, on a connu quelques tracas. 
Mais avec de la persévérance et l’aide de nos professeurs, nous avons réussi à créer un jeu qui nous satisfait réellement ! Ce challenge fut très enrichissant pour nous ! Le fait de se dire qu’en Première on a créé de toute pièce un jeu vidéo graphique alors qu’en troisième on n’avait jamais entendu parler de Python nous rend très fiers !

Et pour finir il y a pas un truc à se mettre sous la dent ?
Et bien si, un easter egg, et plus précisément un niveau unique est présent dans le jeu !!!
#[…]
Essayez de le trouver !

COMMENT TÉLÉCHARGER CE JEU POUR Y JOUER SUR MA CALCULATRICE ?

Vous trouverez dans le tableau ci-dessous les différents liens, mis à jour en fonction des évolutions du jeu, pour vous permettre de le télécharger !

ServeurWorkshop NumWorksTi-Planetnsi.xyz
Comment utiliser le codeBrancher sa calculatrice en USB et envoyer le codeTélécharger le code puis l’envoyer sur la NumWorks en passant par Omega IDE (si vous avez Omega OS)Idem
Lien URLCubito’s Adventures WorkshopCubito’s Adventures Ti-PlanetCubito’s Adventures (zip)

PS : Si la programmation sur calculatrice vous intéresse ou que vous voulez voir comment ça marche sur NumWorks, n’hésitez pas à lire : « Programmer en python et porter son code sur la NumWorks » qui vous donnera de précieux conseils pour y arriver !
Vous verrez c’est très plaisant de voir son programme avancer au fur et à mesure !!!

Projets

labohelp, nous allons vous aider sur labomep !

Labomep est un exerciseur de mathématiques en ligne, gratuit et facile à prendre en main. Il est utilisé par de nombreux enseignants français pour faire progresser leurs élèves.
Nous avons conçu labohelp pour aider les élèves à résoudre les petits problèmes qu’ils rencontrent parfois sur la labomep.

Labomep vous connaissez ?

Considéré comme un instrument de torture mathématique par certains, source d’angoisses pour d’autres, labomep est un formidable outil pour s’entraîner sur les automatismes du point de vue du prof.

Et lorsque les élèves comprennent qu’on va les faire travailler et que l’on peut contrôler finement ce travail, vérifier par exemple s’il est fait au dernier moment, vient alors le moment où certain tentent de trouver toutes les parades pour passer à travers, éventuellement en inventant des bugs imaginaires.

Certains enseignants renoncent alors à utiliser cet outil alors que 90% des problèmes rencontrés par les élèves sont imaginaires ou facilement dépassables.

Le site internet labohelp va vous aider à résoudre les principaux problèmes rencontrés par les élèves.

Le cahier des charges

L’idée de base est donc de proposer un chemin de résolution aux principaux problèmes rencontrés sous labomep. Il s’agit dans 90% des cas de problèmes annexes, qui n’ont rien de mathématique. Et quand c’est un problème en mathématiques, un peu d’autonomie de la part de l’élève et quelques prises d’initiatives peuvent aider ou suffire.

Le format flash étant obsolète et déprécié, labohelp n’aidera pas les élèves à résoudre leur problème avec le plugin flash dans le navigateur web.

Ainsi par un jeu de question / réponse, l’assistant aide l’utilisateur (un élève) à résoudre tout seul son problème.

Si le problème n’est pas résolu, il invite l’utilisateur à contacter son professeur mais des précautions sont prises pour éviter les abus.

Les URLs générées sur labohelp étant uniques, si un enseignant reçoit une demande d’élève qui se trouve dans la base de donnée, il lui suffit de copier / coller cette adresse et de l’envoyer à l’élève.

Ainsi à un élève vraiment de mauvaise fois qui ne trouverait pas la page de connexion on pourrait lui envoyer cette adresse : http://labohelp.nsi.xyz/index.php?ref=12

Laborobot répond à vos questions sur labohelp !

Pour rendre l’outil plus agréable, un petit robot est conçu. Un concours interne à l’équipe de développement du site (votation truquée bien évidemment) décide que le robot élu sera le croquis numéro 6.

Le croquis est donc réalisé au propre avec quelques améliorations graphiques, puis numérisé au format PNG et on y applique la charte graphique du site générée tout à fait aléatoirement sur coolors.co.

Tout est désormais en place pour développer un site amusant et coloré !

Choix techniques

L’idée étant de profiter de ce projet pour apprendre / progresser dans la maîtrise des langages HTML / PHP il est décidé de réaliser un unique script PHP, qui servira toutes les pages en interrogeant un annuaire de questions / réponses.

Après quelques tentatives infructueuses (car peu pertinentes) avec un fichier CSV, nous partons sur un fichier XML qui nous permettra de structurer facilement l’annuaire de questions / réponses.

L’unique script php de 400 lignes est ainsi capable de générer les nombreuses pages de ce labohelp.
D’après nos informations, il y aurait plus de 42 pages, et on me souffle dans l’oreillette qu’il y aurait des pages cachées (6 à la date du 11 février 2020), ainsi qu’un menu caché qui sera accessible ultérieurement ! Sauras-tu les retrouver ?

Bien évidemment, une feuille de style CSS habille le site internet, vous pouvez d’ailleurs le visiter sans la feuille de style ou avec celle-ci. Pour désactiver la feuille de style, il suffit de rajouter &style=no à la fin de l’adresse de la page visitée.

Minimaliste mais efficace, la feuille de style intègre également la gestion des écrans ayant une petite résolution avec la déclaration CSS

@media screen and (max-width: 1000px) {

}

Du coup si l’écran de l’ordinateur offre une résolution très faible, le navigateur affichera la version pour smartphone du site.

Le site labohelp, pour qui ?

  • Pour les élèves qui se noient dans un verre d’eau
  • Pour les élèves qui cherchent une réponse à un problème courant
  • Pour les enseignants qui souhaitent l’utiliser avec leurs élèves

Il est possible de faire évoluer l’annuaire de questions / réponses, si vous êtes enseignant et que vous souhaitez l’enrichir contactez-nous.

Si vous êtes un élève, la réponse à vos problèmes sur labomep se trouve peut-être sur labohelp.nsi.xyz, nous ne répondrons à aucun message concernant un bug sur labomep envoyé par un élève.

Projets

Comment réaliser un clip vidéo avec NVIDIA

Je vais vous présentez un tutoriel permettant de réaliser un clip vidéo à l’aide du logiciel NVIDIA Geforce Expérience disponible quand on possède une carte graphique NVIDIA.

Aujourd’hui la technologie devient de plus en plus important dans la société au fil du temps. C’est pour cela que je vais vous présenter un magnifique tutoriel vous permettant de créer un clip vidéo, en espérant que mon explication vous servira et vous aidera à accomplir de grandes choses.

Il est important et pratique de savoir faire un clip vidéo facilement et rapidement que ça soit pour les jeux vidéos ou pour toutes autres activités dont vous voudriez garder un souvenir dans votre ordinateur.

Ce tutoriel est constitué de plusieurs étapes avec les explications qui vont avec.

C’EST TIPAR !!! 😉

Les différentes étapes :

  • Il est tout d’abord conseillé de se procurer un ordinateur composé d’une carte graphique NVIDIA. (Cette étape est la plus dure du tutoriel)
  • Téléchargez le logiciel NVIDIA gratuit avec le lien suivant : https://www.nvidia.com/fr-fr/geforce/geforce-experience/
  • Une fois le logiciel téléchargé ouvrez-le. Vous devriez donc tomber sur la page suivante :
  • Sélectionnez « Ouvrir l’interface superposé en jeu » se situant en haut à droite de l’écran.
  • Une fois sur l’interface rendez vous sur l’onglet « Replay instantané » puis sur « paramètre« .
  • C’est ici que vous pouvez paramétrer la durée, la qualité et la résolution de vos futurs clips vidéo sachant que plus ils sont élevé plus la taille du fichier du clip vidéo sera important.
  • Après avoir tout paramétré, retournez en arrière et sélectionnez le logo paramètre à droite de l’interface.
  • Puis rendez-vous sur « Raccourcis clavier« .

Ici vous pouvez programmer des raccourcis clavier vous permettant par exemple d’effectuer un clip vidéo ou d’activer le replay instantané (expliqué à la suite du tutoriel) sans ouvrir l’interface. Cette capacité est surtout efficace quand vous êtes en train de jouer.

  • Maintenant il ne vous reste plus qu’à revenir en arrière pour activer le replay instantané

Cela va vous permettre d’enregistrer la durée sélectionnée dans les paramètre. Par exemple si vous avez sélectionné 30 secondes, le replay instantané va enregistrer les 30 dernières secondes réalisées sur votre ordinateur quand vous aurez effectué le clip vidéo à l’aide du raccourci clavier.

Ce tutoriel est maintenant terminé en espérant que cela n’aura pas été trop compliqué. Donc il vous reste qu’à réaliser de magnifiques clips vidéo que ça soit en jeu ou autres.

Projets

Générateur de citations

Vous êtes à la recherche d’inspiration ? Ne vous en faites pas, le générateur de citations de notre site est fait pour ça ! 
Vous connaissez les bases du HTML ? Cette article vous présente et explique pas à pas la création du site ainsi que l’intégration des quelques modules utilisés.

Si vous êtes sur cet article, il est probable que créer un générateur, de citations en l’occurrence, vous a intrigué. Voilà les explications du procédé de sa création et de son intégration sur notre site :

Notre projet a été de créer un site qui comporte un générateur de citations de grands auteurs ou philosophes mais également certaines répliques de films connus afin d’apporter une source d’inspiration pour nos visiteurs. Pour cela, nous avons fait le choix de créer qu’une seule page de site, ce qui est amplement suffisant pour mener à bien le projet. Cependant, une consigne a été imposée : intégrer des modules. Heureusement pour nous, la toile regorge de scripts intéressants et variés de générateurs : de JavaScript à Python, le choix est large.

Avant de commencer

Tout d’abord, avant d’intégrer quelconque script choisi par nos soins, nous devions mettre la balise <nsi-xyz> préalablement installée sur l’éditeur de texte avant la réalisation du site. Cette balise sert de « support » pour les fonctionnalités que nos professeurs peuvent ajouter. Cette ligne doit se situer entre les balises <head>.

<script src="https://package.nsi.xyz/api/"></script>

Après avoir ajouté la fonction menu fournie par nos professeurs, ils pourront relier les sites réalisés par les autres élèves avec le notre.

< !— Appel du menu —>
<nsi-xyz add="menu" ref="0NSI 2020"></nsi-xyz>

Icône du menu

Le script du générateur et du bouton

Pour pouvoir générer des citations aléatoirement nous avons pris un module sur le site freeCodeCamp.org qui nous permet d’apprendre le codage chez soi et apporte des aides précieuses pour les projets. Pour le nôtre, il explique pas à pas le processus de construction du script JavaScript complet. Il contient également un bouton qui permet de générer les citations que nous avons préalablement choisi ainsi que le générateur. Ce script sera le cœur de notre site. 

Cependant, la question se pose : comment un bouton a pu être relié au générateur me direz-vous ? Le déroulement est simple : il existe une fonction dans le langage HTML nommé “onclick” qui permet, ainsi inséré dans les balise “button”, de définir une fonction sur le bouton, qui dans notre cas, sera paramétré dans le script JavaScript et que nous aurons appelé “newQuote()”.

<button onclick="newQuote()"> Appuyez </button>
function newQuote() {
    var randomNumber = Math.floor(Math.random() * (quotes.length));
    document.getElementById('quoteDisplay').innerHTML = quotes[randomNumber]
    document.getElementById('quoteDisplay').style.fontFamily = 'Scope One', serif;
}

En revanche, au niveau de la stylisation des citations, celle-ci diffère d’une stylisation en CSS car elle se fait directement dans le script JavaScript. En effet, on place les citations entre des balises qu’on utilise également dans le langage HTML, comme les balises de sauts de lignes, d’alignement de texte, de la couleur, de la taille et bien plus encore selon vos envies. Une fois les citations tapées dans le script JavaScript et la stylisation faite, le générateur est prêt à fonctionner !

<br><br><center><div style="font-size : 155%"><p style="color:white ;"> "La vie sans musique est tout simplement une erreur, une fatigue, un exil" </center></p></div> <br> <center><div style="font-size : 120%"><p style="color:white ;"> Friedrich Nietzsche </center></p></div>

Le Header

Au niveau de la mise en page, lorsqu’on vous impose l’intégration de modules, la difficulté est tout autre que ce que l’on peut penser : il faut CHOISIR parmi des CENTAINES de scripts tous aussi beaux et impressionnants les uns que les autres. La difficulté est d’en choisir UN pour chaque fonctionnalités ou décoration du site. Réussir à les intégrer correctement est une autre histoire…

Pour ce faire, nous avons tout d’abord décidé de créer un header plutôt esthétique. Nous le rappelons, ce que nous voulons est de permettre aux visiteurs du site de lire des citations inspirantes. Ces visiteurs sont donc à la recherche d’inspiration, d’apaisement, de revigoration. L’esthétique du site compte alors énormément. Nous allons même jusqu’à dire que c’est ce qui compte ! Pour un site, le header, « en-tête » en anglais, est le haut du site, le commencement et est donc est la première partie sur laquelle arrive le visiteur. Cela signifie qu’elle doit être accrochante et agréable esthétiquement parlant, pour ainsi donner au lecteur une idée de la qualité du site et des citations mis à sa disposition.

Un diaporama de belles images sous une petite opacité et le titre du site fut une très bonne idée. Avec la simple recherche « slider photos css html » (slider qui veut dire « glissant » en anglais), nous avons choisi parmi un très large choix le tutoriel de Salvador el semestre « Speed Code-Full Screen Automatic Image Slider Background-HTML CSS », qui nous a permis d’intégrer un header qui prend toute la largeur de l’écran pour un plus beau résultat et un rendu plus fluide et aéré. L’intégration s’est très bien déroulée sans aucun blocage.

<div class="slider">
			<div class="load">
			</div>
			<div class="content">
				<div class="principal">
                    <h1>Citations Inspirantes</h1>
					<p>Générateur de citations et répliques de films</p>
					<p>Diaporama d'images inspirantes</p>
				</div>
			</div>
		</div>
.load {
  animation : slide 1s;
}

.slider {
  background-repeat : no-repeat;
  background-size : cover;
  background-position : center;
  width : 100%;
  height : 100vh;
  animation : slide 20s infinite;
}

.content {
  color : black;
  width : 100%;
  height : 100vh;
  background-color : rgba(255, 255, 255, 0.2);
}

.principal {
  left : 50%;
  top : 50%;
  transform : translate(-50%, -50%);
  position : absolute;
  letter-spacing : 5px;
  text-align : center;
}

.principal h1 {
  font-size : 70px;
  margin-bottom : 20px;
  font-family : 'Playfair Display', serif;
}

.principal p {
  font-size : 20px;
  font-family : 'Playfair Display', serif;
}

Résultat :

Par rapport au script original, nous avons modifié les images du slider avec background-image, le texte aux balises h1, p et nous avons ajouté un peu d’opacité avec opacity

Création de la boîte qui contient le générateur de citations

Ensuite, dans le corps du site, le « body« , il a fallu trouver une mise en page sympa afin d’y insérer le script JavaScript du générateur de citations. L’idée de créer une sorte de boîte avec des ombres pour lui donner du relief mais surtout l’illusion d’une petite feuille avec une citation inscrite dessus était intéressant. Pour cela, rien de plus simple : on tape sur son moteur de recherche « text box html css » et nous avons trouvé le tutoriel de Kevin Powell « CSS box-shadow – how to make them look good ».

En effet, taper votre recherche en anglais vous donne la plupart du temps plus de contenu et de réponses, alors il ne faut pas hésiter ! Pour cette boîte, un simple script suffisait puisqu’on ajuste nous même la forme de la boîte et son apparence selon nos envies en le modifiant.

Cependant, nous avons eu un PROBLEME au niveau de la dimension de la boîte : en effet, lorsqu’on active le générateur en cliquant sur le bouton, les dimensions de la boîte changeaient selon la taille de la citation (elle s’élargissait et inversement). Il a fallu un certain nombre de recherche sur internet avant de comprendre d’où venait le problème et comment le résoudre : le script original ne comportait pas les paramètres width et height, qui indiquent respectivement la largeur et la hauteur d’un objet. Sans eux, la dimensions de la boîte n’a pas été définie, ce qui implique que la taille de la boîte s’adapte à la taille des citations.

<div class="box">

			<div id="quoteDisplay">
				<p>
			< !— citation ici —>
				<p class="titre">...</p>
				</p>
			</div>
		</div>
.titre {
  text-align : center;
  color : black;
  font-family : 'Rubik', sans-serif;
  font-size : 40px;
}

.box {
  background : #F5B7B1;
  width : 1000px;
  height : 400px;
  padding-top : 120px;
  padding-right : 20px;
  padding-left : 20px;
  box-shadow : 10px 10px 9px black;
}

Résultat :

Par rapport au script original, nous avons modifié la taille de la boîte avec width, height, padding-top, padding-right, padding-left, les dimensions de l’ombrage avec box-shadow, la couleur de fond avec background et nous avons remplacé le texte par notre générateur de citations en ajoutant id= »quoteDisplay »

Stylisation du bouton du générateur

Bien sûr, le mieux est que le visiteur puisse activer ce générateur de citation via le bouton sur lequel il devra cliquer. La stylisation d’un bouton est une chose facile puisque des centaines de scripts de styles différents existent sur le web. Cette fois cependant, nous avons essayé d’intégrer une dizaines de scripts mais il arrive que cela ne soit pas aussi simple que ça puisse paraître puisque certains n’affichent pas le résultat espéré, même après maintes et maintes modifications du script.

Nous avons alors opté pour un simple bouton animé très sympa qui utilise du html/css. Il provient du site w3school.com qui est un site optimisé pour l’apprentissage et la formation du langage web. L’intégration n’a causé aucun problème et nous l’avons évidemment adapté aux couleurs de la page.

button {
  position : relative;
  background-color : black;
  border : none;
  border-radius : 3px;
  font-size : 15px;
  color : #FFFFFF;
  padding : 20px;
  width : 100px;
  text-align : center;
 -webkit-transition-duration : 0.4s; /* Safari */
  transition-duration : 0.4s;
  text-decoration : none;
  overflow : hidden;
  cursor : pointer;
}

button:after {
  content : "";
  background : white;
  display : block;
  position : absolute;
  padding-top : 300%;
  padding-left : 350%;
  margin-left : -20px !important;
  margin-top : -120%;
  opacity : 0;
  transition : all 0.8s;
}

button:active:after {
  padding : 0;
  margin : 0;
  opacity : 1;
  transition : 0s;
  border : none ;
}

Résultat :

Par rapport au script original, nous avons modifié la forme du bouton avec border-radius pour arrondir les coins, la couleur avec background-color et background lors du cliquage et le texte dans la balise button

Le Diaporama d’images

Enfin, l’idée finale du projet a été de donner la possibilité aux visiteurs du site d’avoir à disposition également certaines images inspirantes qui pourraient accompagner le concept des citations inspirantes. Pour se faire, encore une fois, la recherche « diaporama css html » nous a permis de choisir le script du site pierre-giraud.com qui est un site incroyablement bien fait pour apprendre à coder et contient toutes les ressources sur le développement web. L’intégration du script s’est très bien déroulé et nous avons bien évidemment intégré nos images dans le diaporama, avec un très beau rendu.

<div class="d1"></div>

	<div class="conteneur"></div>
.d1 {
  width : 576px;
  height : 384px;
  margin : 50px auto;
  box-shadow : 0px 15px 10px -5px #777;
  border-radius : 15px;
  background-color : #EDEDED;
  background-size : contain;
  animation : fondu 15s ease-in-out infinite both;
}

.conteneur {
  max-width : 576px;
  margin : 50px auto;
}

.d1:hover, .d2:hover {
  animation-play-state : paused;
}

@keyframes fondu {
  0% {
    background-image : url(ins.jpg);
  }
  33.33% {
    background-image : url(ins1.jpg);
  }
  66.67% {
    background-image : url(ins2.jpg);
  }
  100% {
    background-image : url(ins.jpg);
  }
}

Résultat :

Par rapport au script original, nous avons modifié la taille du diaporama avec height, arrondi les coins avec border-radius et modifié les images avec background-image

Les Plus+

 Nous avons aussi fait le choix d’intégrer un bouton qui nous ramène automatiquement en haut de page, ce qui est une fonction pratique lorsque le site est très long. Pour notre part, nous voulions permettre au visiteur de remonter la page au moment où il arrive au niveau du diaporama d’images, afin de lui permettre d’atteindre plus rapidement la partie du générateur de citations.

Pour cette fonctionnalité et pour bien d’autres encore, le site w3school.com contient des dizaines de scripts expliqués et que l’on peut modifier directement sur le site pour en comprendre le fonctionnement. Après l’intégration du script JavaScript cette fois-ci du bouton, nous l’avons bien sûr modifié afin de le fondre dans l’esthétique du site.

<button onclick="topFunction()" id="myBtn" title="Go to top">🔝</button>
<script>
//Get the button
var mybutton = document.getElementById("myBtn");

// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() scrollFunction();

function scrollFunction() {
  if (document.body.scrollTop > 1400 || document.documentElement.scrollTop > 1400) {
   mybutton.style.display = "block";
  } else {
    mybutton.style.display = "none";
  }
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
}
</script>
#myBtn {
  display : none;
  position : fixed;
  bottom : 20px;
  right : 30px;
  z-index : 99;
  font-size : 23px;
  border : none;
  outline : none;
  background-color : #EC7063;
  color : white;
  cursor : pointer;
  padding : 7px;
  border-radius : 30px;
}

#myBtn:hover {
  background-color : #555;
}

Résultat :

Par rapport au script original, nous avons modifié la couleur du bouton avec background-color, le texte dans la balise button, la taille du texte avec font-size, sa taille avec padding et arrondi les coins avec border-radius

 C’est également le cas du scroll bar qui se trouve à l’extrême droite du site. Nous avons intégré son script dans le code de la page et aucune modification n’a été nécessaire dans sa stylisation car elle convient parfaitement aux couleurs de notre site.

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* width */
::-webkit-scrollbar {
  width : 10px ;
}

/* Track */
::-webkit-scrollbar-track {
  background : #f1f1f1 ; 
}

/* Handle */
::-webkit-scrollbar-thumb {
  background : #888 ; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background : #555 ; 
}

</style>

Résultat :

Pour résumer, l’intégration des modules et des scripts nous ont permis d’obtenir un site avec un rendu agréable et esthétique avec quelques fonctionnalités comme le slider du header, le générateur de citations et le diaporama d’images. Cela donne un aspect sympa et vivant au site car le niveau de codage est plus poussé donc le résultat est plus intéressant et complexe. Cependant, à ne pas oublier que pour intégrer des modules dans de bonnes conditions, vous devriez posséder les connaissances de base du HTML, car il sera très souvent nécessaire de modifier certains paramètres pour obtenir le résultat attendu, que ce soit dans le code HTML, JavaScript ou le style CSS.

Voici une vue d’ensemble de notre site :

Source