Giter VIP home page Giter VIP logo

taquin's Introduction

taquin

Taquin de raymond-version html-js-css

Commande de Raymond :

taquin jouable.

Le taquin est une figure divisée en 16 morceaux de dimensions similaires(en hauteur et en largeur).
Les 16 morceaux sont disposés sur une grille de 16 emplacements adjacents(4 colonnes, 4 rangées).
Le 16eme morceau est invisible.
Si un des 15 morceaux visibles est voisin du morceau invisible, il devient cliquable. Au clic sur un morceau visible, il échange sa place avec le morceau invisible.

Comment qu'on fait

Structure

Les 16 div sont contenues par une boite flex. La largeur de la dite boite Flex correspond à 4 fois la largeur de chaque morceau. Nous attribuons un comportement wrap à cette boite: La mise en tableau des pièces dépend de ce comportement.
Une propriété order pour chaque pièce du taquin lui donne sa position dans le tableau. L'image n'a pa été découpée en 16 morceaux au préalable, une seule image est employée et est ensuite utilisée comme background de chaque case pour simuler des morceaux différents. Une autre version de ce Taquin reproduira le même fonctionnement avec une vidéo. Le Javascript est employé pour gérer le CSS existant, permettre l'écoute des actions du joueur et y réagir.

Structure du site,

simple:

  • Un Header qui reprend le nom de domaine.
  • Un Nav latéral avec la galerie d'images/video cliquables.
  • 3 pages composeront le site
  • -Une page galerie, avec toutes les images représentant les taquins potentiel, qui ménera à:
  • Une page Taquin contenant un Main centré, qui sera le contenant du composant "Taquin jouable".
  • Une page à propos ou ReadMe
  • Un footer reprenant les références minimum(générique, conditions générales, liens externes, réseaux sociaux potentiels).

Esthétique,

  • Footer, header,
  • aplats unis communs,
  • font : sans-serif brute, sobre, blanc grand pour h1 header et pour le footer petite taille, peu de strong, noir.
  • Composant, fond gris clair, adoucir le biseau de chaque pièce.

taquin's People

Contributors

wawatusee avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.