Challenge : 40 min pour coder un chat qui court après la souris

Поділитися
Вставка
  • Опубліковано 18 лис 2024

КОМЕНТАРІ • 85

  • @aouna1656
    @aouna1656 2 роки тому +137

    Je ne comprends ABSOLUMENT RIEN dans tes vidéos, et je m'y connais ABSOLUMENT PAS en coding, mais je regarde toutes tes vidéos 😅😅🤣

    • @hugosauvage8776
      @hugosauvage8776 2 роки тому +5

      Ça veux dire qu’il est très bon ;)

    • @kaporos
      @kaporos 2 роки тому +5

      Hésite pas à t'y mettre c'est génial 🤪😁

    • @aouna1656
      @aouna1656 2 роки тому +1

      @@hugosauvage8776 c'est clair

    • @aouna1656
      @aouna1656 2 роки тому +1

      @@kaporos j'aimerais bien, mais je ne sais pas d'ou commencer...

    • @kaporos
      @kaporos 2 роки тому +3

      @@aouna1656 Ah ça, c'est vrai qu'il y a énormément de possibilités, le seul conseil que je puisse donner c'est de commencer simple :)

  • @black_nextgen
    @black_nextgen 2 роки тому +15

    Est-ce que tu peux faire une vidéo sur ton espace de travail, tes outils, tes méthodes et parler de tes préférences, extensions/plugins, éditeur de texte, et cetera ?

  • @consolebuche6051
    @consolebuche6051 2 роки тому +31

    Respect éternel d'avoir attaqué le challenge sans aucun helper sur la partie maths, genre le calcul de distance en trois secondes c'était beau !
    Le lapin que je suis en train de coder suit la souris comme ça mais laisse tomber, j'ai attaqué le truc armé jusqu'aux dents :P
    Et format décidément terrible. Merci pour tes vidéos Benjamin

  • @anthonyp2301
    @anthonyp2301 2 роки тому +19

    La satisfaction quand le chat ne saute plus ! 🤩

  • @BALOPRISONNIER
    @BALOPRISONNIER 2 роки тому +19

    Trop fan du fait d'avoir utilisé un livesplit timer hahah
    Et gros GG, 41 minutes ça reste fou 😮

    • @BenjaminCode
      @BenjaminCode  2 роки тому +5

      C'est ma grosse trouvaille sur cette vidéo, je suis trop content, je vais l'utiliser sur tout mes challenges. En vrai ça apporte vraiment un bon support en plus pour le viewer qui voit un peu mieux comment est découpé la réflexion, je trouve ça vraiment pertinent et avec la grosse ref au milieu du gaming... Parf. Et merci pour les 41 min, j'avoue je pensais pas que j'y arriverai !!

  • @Rorothejedi
    @Rorothejedi 2 роки тому +6

    C'est marrant que tu ais fait une vidéo là dessus ;-) J'ai codé il y a quelques temps le même genre de truc mais avec les pas de la carte du maraudeur de Harry Potter, l'effet est vraiment sympa aussi ! Et continue tes vidéos, c'est un pur kif !

    • @XavooCoc
      @XavooCoc Рік тому

      Je suis justement en train de reprendre cette vidéo pour avoir exactement l’effet des pas de cette carte 😂😂

  • @SUPA93200
    @SUPA93200 Рік тому

    Je ne pige pas grand chose en tant que débutant ..mais quel régal !!

  • @joyous4567
    @joyous4567 Рік тому

    Fabuloso Fabuloso Benjamin, j'ai pleuré de joie quand t'as réussi l'épreuve à la fin, c'était touchant (y)

  • @surrion
    @surrion 2 роки тому

    Super découverte de ta chaîne depuis quelques jours je bouffe tes vidéos toute la journée, et j'ai vraiment la dalle :D

  • @valentinr.4678
    @valentinr.4678 2 роки тому

    Ahah c'te tête de gosse à Noël quand finalement ça finit par fonctionner !
    Well done, t'as géré encore une fois !

  • @youssoufkharabi5540
    @youssoufkharabi5540 2 роки тому +2

    j'aime bien le chrono avec les steps de ton codage, c'est quoi comme tool ?

  • @ctrl_fj
    @ctrl_fj 2 роки тому

    Belle problématique ! J'ai trouvé ça plus intéressant que de l'intégration en HTML/CSS !

  • @EricFressange
    @EricFressange 2 роки тому +1

    Pour ne pas se prendre la tête avec les changements de repère tu aurais put wrapper ton chat et placer le transform-origine sur la tête du chat.
    Ensuite tu n'as plus qu'à te concentrer sur le placement de la souris pour le wrapper et sur le rotate et le scale pour le chat.
    Gg en tout cas

  • @aminbeee
    @aminbeee 2 роки тому

    Moi quand j'ai fait l'exo en solo, j'ai plutôt pensé à utiliser un setInterval de 50ms ... C'est ce qui m'a permis d'avoir un rendu visuellement satisfaisant. Tout en ajoutant une transition de 100ms. Mais clairement le requestAnimationFrame est une meilleure solution!
    Merci pour le hint Benjamin :)

  • @JeremyGasperowicz
    @JeremyGasperowicz 2 роки тому

    Ah le souvenir ! After dark screensaver, je kiffais l'économiseur d'écran qui te bouffait toute l'interface graphique avec je sais plus quelles animations 🫶

  • @BenjaminCode
    @BenjaminCode  2 роки тому +2

    Alors challenge réussi ou raté ?
    Rejoignez gratuitement le talent club de talent.io:
    bit.ly/talent-club

  • @senesterium
    @senesterium Рік тому

    12:00 Allez je tente une théorie avant la solution : C'est parce que l'opacité dépend de la distance. Donc quand tu passes d'un côté du chat à l'autre, tu passes par le point où son opacité passe à 0. La solution consisterait alors à éviter que l'effet se déclenche. Mon idée : sous une certaine distance, tu déclenches un timeout, disons de 400ms. Si à l'issue de ce timeout, le chat est à une distance inférieure à 1, alors tu déclenches l'animation de fondu. Sinon il reste pleinement opaque.

  • @loh3763
    @loh3763 Рік тому

    Super vidéo, très pédagogique !
    J'ai pas l'niveau de me rendre compte à quel point mais suis persuadé que t'es un boss dans ton domaine.
    Vidéo suivante ? 40 min de plus ! 😉 Merci

  • @samythegrappler3297
    @samythegrappler3297 2 роки тому

    C’est ce genre de vidéos qui me fait kiffer le front mdr🤩🤓

  • @Magma-uw7yo
    @Magma-uw7yo 2 роки тому

    Il y a un jeu que je cherche depuis des années qui m'avait retourné le cerveau et encore mtn j'aurai kiffé voir le code : c'est un bonhomme dans un carrée qui attrape ta souris, sauf que le mec utilise un nombre d'outils hallucinant, des lassos, des bombes, des missiles, des objets qu'il te lances dessus, même quand tu vas hors du carré cet enfoiré te chopes quand même ahahaha. ça a un look anime ça me faisait penser à un truc japonais et c'est un des jeux qui m'as donné envie de faire du code

  • @kelors5634
    @kelors5634 Рік тому

    je kiff regarder ce que tu fais continue !

  • @Nuage14
    @Nuage14 2 роки тому

    Bg la coupe, Benji

  • @bastiendufour3841
    @bastiendufour3841 2 роки тому +1

    Pour flipper le chat avec la souris à gauche. Ça n’aurait pas été plus simple un rotateY(180deg) si la souris est avant et 0 si elle est après ? 😅
    Super format autrement ! Bonne vidéo !

  • @web3marabu
    @web3marabu 2 роки тому +1

    Des nouvelles de la version longue de la musique parfaite pour coder ?

  • @camaradepopoff7052
    @camaradepopoff7052 Рік тому

    Pour la couleur du background à choisir au début, bah j'aurais bien vu un "gris souris" :D

  • @benjaminniddam2114
    @benjaminniddam2114 2 роки тому

    Sa tête lorsque tout c'est débloqué. C'est exactement pour ça que j'aime coder 😂

  • @ugob9005
    @ugob9005 2 роки тому

    Génial ta vidéo ! 👍

  • @Kwinu
    @Kwinu 2 роки тому

    tes videos me fascinent

  • @fouderix
    @fouderix 2 роки тому

    incroyable

  • @mycode-developpement
    @mycode-developpement 2 роки тому +1

    Le titre m'a tué 😂

  • @azeur3659
    @azeur3659 2 роки тому +1

    100K 🥳

  • @KawaMood
    @KawaMood 2 роки тому +1

    Pour ce genre de contexte, une façon de simplifier les opérations mathématiques sur les transform dans un premier temps c'est d'utiliser des éléments imbriqués plutôt qu'un seul, et d'opérer avec les différentes propriétés sur l'un ou l'autre, certes c'est moins "optimisé" (car ton JS va bosser sur plusieurs éléments du DOM) mais au moins c'est plus accessible pour la lecture et la compréhension ! Et puis par la suite tu peux décider de fusionner tes différentes formules pour en faire qu'une sur un seul élément. ;)

  • @QUIGNONPAIN
    @QUIGNONPAIN 2 роки тому

    Beaucoup trop stylé, j'espere que tu pourras PB bientot... :^)

  • @DavidSilveraYT
    @DavidSilveraYT 2 роки тому

    Excellent 👌

  • @Gyver4000
    @Gyver4000 2 роки тому

    Super démo
    J'adore le format, merci pour cette vidéo très éducatif

  • @Hyside
    @Hyside 2 роки тому +1

    Hey! super vidéo comme d'habitude
    Quel est ton editeur de texte d'ailleurs ?

    • @skylord_omf6480
      @skylord_omf6480 2 роки тому

      Utilise Visual Studio Code c’est vraiment un excellent éditeur de texte. Avec des plugins comme Prettier et bien d’autre tu perds beaucoup moins de temps à coder et ton texte s’indente tout seul

    • @Hyside
      @Hyside 2 роки тому

      @@skylord_omf6480 c'est ce que j'utilise au quotidien mais j'etais curieux vis à vis de ce qu'il utilise. Merci tout de meme! 🤗

    • @BenjaminCode
      @BenjaminCode  2 роки тому +2

      J'utilise php storm avec le nouveau thème en bêta qui arrive dans la prochaine release.
      Meilleur ide du monde. Meilleures completions, meilleure assistance au développement je ne peux que trop conseiller !

    • @Hyside
      @Hyside 2 роки тому

      @@BenjaminCode Merci!

    • @skylord_omf6480
      @skylord_omf6480 2 роки тому

      @@BenjaminCode j’irais y jeter un coup d’œil alors !
      J’ai commencé à coder en php dans mon entreprise grâce à toi,au début j’avais pas très envie de m’y mettre je trouvais ça trop long d’apprendre tout ça. Mais finalement quand on voit la puissance qu’on a entre les mains c’est vraiment merveilleux. Vraiment merci beaucoup pour tes vidéos, elles donnent des idées et poussent à la créativité. En plus, t’es toujours chill j’adore vraiment ton mood ! Continue comme ça surtout

  • @ye333333333333
    @ye333333333333 2 роки тому

    Salut Benjamin puis-je te poser une question ?
    J'ai commencé à développer, j'ai des bases très solides en html, css, js et php.
    Je commence également en react et node js.
    Cependant je n'arirve pas à obtenir du boulot front end (intégration psd par exemple).
    Sais-tu où je devrais m'orienter pour réussir enfin à gagner de l'argent avec le dev web ?
    Je suis relativement fort en intégration mais maintenant faut avoir des clients pour pouvoir prouver ce que je fais.
    Merci d'avance de ta réponse !

  • @TheRadProd
    @TheRadProd 2 роки тому

    9:10 mon quotidien de développeur.

  • @bricemoi1205
    @bricemoi1205 2 роки тому

    Je viens de te découvrir (grace à tes participations dans Underscore) et que vois-je, tu vis à El Palo ! (ou pas loin, en tout cas j'ai bien vu les immeubles verts qui délimitent mon tié-quar !). J'espère te (re?)croiser dans Malaga, en attendant t'as gagné un abonné :)

    • @BenjaminCode
      @BenjaminCode  2 роки тому +1

      Yo Brice ! Je suis à Berlin en ce moment ! Mais quand je rentre à Malaga, on peut se faire une caña entre paleños ! Je suis de la Pelusa!

    • @bricemoi1205
      @bricemoi1205 2 роки тому

      @@BenjaminCode con mucho gusto vecino ! Je t'ai suivi sur twitter pour que tu me tiennes au courant via MP

  • @bastienbroussard
    @bastienbroussard 2 роки тому

    6:49 bordelais spotted 😏

  • @Nssr6.9
    @Nssr6.9 Рік тому

    « Soraré » bien l’accent anglais 😂

  • @SyDyJo
    @SyDyJo 2 роки тому

    Maintenant tu peux faire un jeu en js pur ;)

  • @lucasfzy
    @lucasfzy Рік тому

    Wo ! Super vidéo :0

  • @bobi-bob
    @bobi-bob 2 роки тому

    0:32 J'adore le sourire sur l'introduction du sponsor autour du mot talent. On sent un peu l'autodérision. Non c'était bien...

  • @quattroquatre3113
    @quattroquatre3113 2 роки тому

    I love your mind Sir

  • @cest_le_don_psiko
    @cest_le_don_psiko Рік тому

    Fort

  • @justelesnews
    @justelesnews 2 роки тому

    Romain Guy, c'est un français. Si je me souviens bien, pigiste chez PCTeam dans une autre vie

  • @lewis6747
    @lewis6747 Рік тому

    3:55 l'écran de mon Alienware en 360Hz RIP 🤣

  • @foot360s
    @foot360s 2 роки тому

    Merci pour la vidéo le code source svp

  • @billal2731
    @billal2731 2 роки тому +1

    Pourquoi devenir développeur : 13:08

  • @theolavaux
    @theolavaux 2 роки тому

    transform-origin: "top left" aurait pas pu t'aider au début ?

    • @BenjaminCode
      @BenjaminCode  2 роки тому +1

      Non pas trop hélas

    • @KawaMood
      @KawaMood 2 роки тому

      Il vaut clairement mieux bosser depuis le centre de l’élément pour ce genre d'effet

  • @sankalulu
    @sankalulu 2 роки тому

    Si toi aussi tu ressens la même satisfaction quand ton code fonctionne ☺

  • @ilyesbejia6566
    @ilyesbejia6566 2 роки тому

    On avait demander un zizi en css mais bon le chat c pas mal

  • @Gatsu351
    @Gatsu351 2 роки тому

    tu as pensé à déclarer le "transform-position: x y" qui te permet justement de décaler le centre de l'objet ?

    • @BenjaminCode
      @BenjaminCode  2 роки тому

      Oui j'y ai pensé mais c'est pas convaincant tout le temps pour les rotations ça n'allait bien que ce soir par rapport au centre et je sais plus pour qu'elle autre raison mais j'y ai pensé oui

    • @yann-soazbillot8415
      @yann-soazbillot8415 2 роки тому

      @@BenjaminCode et le transform-origin:center right ?

  • @cubecraft1894
    @cubecraft1894 2 роки тому

    T utilise que ide benjamin

    • @najy8320
      @najy8320 2 роки тому

      intellij je pense

  • @ploplop7001
    @ploplop7001 2 роки тому

    t'abuse le challenge est bien mais sans starter, sans montrer comment tu config webpack, parcel, ou babel... ben impossible de le refaire le challenge, j'aime bcp se que tu fais mais c'est vraiement chient de pas pourvoir refaire les bails de façon fluide

    • @carlusmartelus6601
      @carlusmartelus6601 4 місяці тому

      J'aurais aimé voir la coinfig aussi qu'il utilise.

  • @gijoe5508
    @gijoe5508 2 роки тому

    Je pose toujours la question lorsque le vent est dans le dos, peut-il courir à plus de 40 km/h?