Whack a Mole Game in Javascript HTML CSS

แชร์
ฝัง
  • เผยแพร่เมื่อ 20 ธ.ค. 2024

ความคิดเห็น • 74

  • @KennyYipCoding
    @KennyYipCoding  ปีที่แล้ว +11

    Check out the playlist of web project tutorials here!
    th-cam.com/play/PLnKe36F30Y4bLhA-st9sC4ZthyV7nsL2Q.html
    Got a tutorial suggestion? Let me know down below!

    • @vetri4206
      @vetri4206 ปีที่แล้ว +1

      Hi, thanks for your videos, they are very helpful for me, my suggestion : fps game with js

    • @bravefart651
      @bravefart651 ปีที่แล้ว

      Could you do Donkey Kong?

    • @huiying2838
      @huiying2838 ปีที่แล้ว

      Could you do Jigsaw puzzle?

    • @KennyYipCoding
      @KennyYipCoding  ปีที่แล้ว +4

      @@huiying2838 jigsaw puzzle might be a bit difficult but I do have a tutorial on my channel for how to create a normal puzzle, and a slide puzzle game

    • @palestine643
      @palestine643 11 หลายเดือนก่อน

      شكرا لك قناتك رائعه 🤩

  • @itsybitsyiyan
    @itsybitsyiyan ปีที่แล้ว +28

    Thanks for this tutorial!! I was able to understand the code and added more features to the game such as:
    - Adding start and reset buttons
    - Incrementing the score only when the user clicks on the tile once (instead of allowing user to click on the same tile many times and obtaining more scores)
    - Ensuring that the mole is generated on a different tile on every interval
    Will add more features as I go. Thanks again!

    • @amabsteve2594
      @amabsteve2594 10 หลายเดือนก่อน

      hi im stuck on creating start button. can you show me your code I'm stuck for a good 3 hour now idk

  • @johntran3334
    @johntran3334 ปีที่แล้ว +9

    I just discover you. I am a BootCamp grad trying to switch career and your channel is really healthful. Keep doing what you are doing. You will be big in no time!

  • @Polymath1729
    @Polymath1729 ปีที่แล้ว +4

    after learning i made this game from myself bro you are legend you just taught complex things in such a simple manner you deserve to have like million subscriber i shared this playlist with my friends ..... hope you do great in life love you

  • @nbeditz9106
    @nbeditz9106 ปีที่แล้ว +2

    Can see the Time in the Right Corner..Dude Coding at 2am..Kudos!!

    • @KennyYipCoding
      @KennyYipCoding  ปีที่แล้ว +2

      Hahaha I consider that early. There are definitely some tutorials I’ve done at 4 am even.

  • @husseinkizz
    @husseinkizz 6 หลายเดือนก่อน +1

    Man have seen a lot on youtube, all game tutorials are over mathing, this is really different, well explained no complexity!

  • @Flossychicken-eo1rh
    @Flossychicken-eo1rh 4 หลายเดือนก่อน

    I want to venture in Game Development as my computer science niche. For a beginner, you have helped me.Thank you

  • @memesalldayjack3267
    @memesalldayjack3267 8 หลายเดือนก่อน

    I've been coming back to some of these videos to remember how to do certain things, like at 17:40 that adding event listener to the tiles, i came for that just now

  • @luakim3038
    @luakim3038 8 หลายเดือนก่อน

    this is best lesson ever! i had almost given it up before, but you saved my life.

  • @hackanimator12
    @hackanimator12 6 หลายเดือนก่อน

    just followed this tutorial but with my own sprites, loved it

  • @majdalin1265
    @majdalin1265 ปีที่แล้ว +4

    Good Job Kenny Thank you so much for making these videos to help us

  • @sirishaa.m7007
    @sirishaa.m7007 ปีที่แล้ว

    very nice and very well explained !!! Love this video, Kenny Yip i did the same project and uploded in my git repo.

  • @BrandonCaris
    @BrandonCaris 3 วันที่ผ่านมา +1

    you are the goat

  • @lordaake
    @lordaake 4 หลายเดือนก่อน

    Your tutorial is good, you explain everything your doing well.

  • @waltdisney-tz8ef
    @waltdisney-tz8ef ปีที่แล้ว +1

    Wow! Fantastic Channel 🔥

  • @lalisarto1459
    @lalisarto1459 9 หลายเดือนก่อน +2

    Thx for this tutorial!!! Help me a lot to understand and learn Javascript by playing and programming a game. I need some help. I/ve change some parts and the themme (its pirates in my game) (sorry my poor english). But i have a problem trying the little image (mole, plant) display centered in the tile. they always displays in the top. ( add justify-content: center; align-items: center; in the #board in the .css and text-align: center; in the #board div and #board div img) and nothing, the little image is stuck in the upper side. Can you help me plz?

  • @S_S_T_SkolkoStoitTelevizor
    @S_S_T_SkolkoStoitTelevizor ปีที่แล้ว

    Я искал тебя, и нашел, спасибо за то что ты есть!!!!!!!

  • @AbdulhaseebOnuja
    @AbdulhaseebOnuja 7 หลายเดือนก่อน +5

    my java script isn't working at all

    • @Maximus999
      @Maximus999 5 หลายเดือนก่อน +4

      Link it to html

    • @dr.entertainer7774
      @dr.entertainer7774 3 หลายเดือนก่อน

      Use script tag instead

  • @AutMouseLabs
    @AutMouseLabs ปีที่แล้ว

    This was great! Thank you for the work.

  • @hi_im_crimson
    @hi_im_crimson 8 หลายเดือนก่อน

    this was great to follow

  • @marianneringstad108
    @marianneringstad108 ปีที่แล้ว +4

    I found out while following the video and coding the game that if the player clicks the mole really fast many times you can get more points. Any suggestions how to fix that? I want the player to only be able to get one point per mole position :)

    • @marianneringstad108
      @marianneringstad108 ปีที่แล้ว

      btw I loved the tutorial and I plan on trying more of your games :)

    • @KennyYipCoding
      @KennyYipCoding  ปีที่แล้ว +2

      Perhaps you can add a bool, moleClicked to false and use it to check! When clicking on the mole, the bool will flip to true, and only when the function gets called again to move the mole, you’d set the bool back to false

  • @Polymath1729
    @Polymath1729 ปีที่แล้ว

    Thanks a lot bro you are really amazing

  • @NickTorius
    @NickTorius 7 หลายเดือนก่อน

    how do you download the files from the github repo?

    • @KennyYipCoding
      @KennyYipCoding  7 หลายเดือนก่อน

      There’s a green button that says Code, and you click that and you can download as ZIP

  • @mully929518
    @mully929518 8 หลายเดือนก่อน

    Im getting cant find variable : math when my mole should be popping up now. Any idea why?

  • @zoltanszadoczki5665
    @zoltanszadoczki5665 ปีที่แล้ว

    Hy! For some reason when I try to delete the tile wich is inculde the mole, it not works. After the if statment the moles are gone and they are not appearing. What' wrong? Thanks for your answer! My js code :
    function setMole() {
    if (currMoleTile) {
    currMoleTile.innerHTML = "";
    }

    let mole = document.createElement("img");
    mole.src = "./monty-mole.png";
    let num = getRandomTile();
    currMoleTile = document.getElementById(num);
    currMoleTile.appendChild(mole);
    }

    • @KennyYipCoding
      @KennyYipCoding  ปีที่แล้ว +1

      Not sure based on your code, try comparing your code with the completed code on GitHub to see if anything is missing. Did you call setMole with setInterval?

    • @KennyYipCoding
      @KennyYipCoding  ปีที่แล้ว +1

      Also right click inspect on your webpage to see if any errors show on console log, that might help too

    • @zoltanszadoczki5665
      @zoltanszadoczki5665 ปีที่แล้ว

      @@KennyYipCoding yes i set the Interval, but using console log whas a great idea i got closer, i got this
      mole.js:33 Uncaught ReferenceError: currMoleTile is not defined
      at setMole (mole.js:33:4)
      and it showing to :
      if (currMoleTile) {
      currMoleTile.innerHTML = "";
      }
      but still dont know because i checked your .js and it's a same

    • @zoltanszadoczki5665
      @zoltanszadoczki5665 ปีที่แล้ว

      i got the problem i missed one name damn i am sorry and thaky you very much!!@@KennyYipCoding

    • @shihyuehjan3835
      @shihyuehjan3835 10 หลายเดือนก่อน

      Same problem here, can you tell me how did you do?@@zoltanszadoczki5665

  • @SavvyPotato-pe8jj
    @SavvyPotato-pe8jj 6 หลายเดือนก่อน

    My pipe images aren't popping up? could someone help?

  • @SketchBoyofficial
    @SketchBoyofficial ปีที่แล้ว

    not able to donload images from your link , plz help

  • @AngelAkki-k5r
    @AngelAkki-k5r ปีที่แล้ว

    In your github I found direct link to open the game.. can u tell how to generate that link

    • @KennyYipCoding
      @KennyYipCoding  ปีที่แล้ว

      There’s a tutorial on my channel on how to upload a website on GitHub

  • @Enginor
    @Enginor ปีที่แล้ว

    amazing keep it up

  • @BJNotes
    @BJNotes 7 หลายเดือนก่อน

    My pipe is not showing, does anyone has any solution?

    • @KennyYipCoding
      @KennyYipCoding  7 หลายเดือนก่อน

      Right click inspect console to see what the error is showing… it could be you didn’t put the correct image path in your file

  • @high-pie-pepper
    @high-pie-pepper หลายเดือนก่อน

    love you bro! !!

  • @I-love-c9q
    @I-love-c9q 12 วันที่ผ่านมา

    Smart 😎 more than me😅 not all. 😊
    I think i can not learn coding
    So hard and boring😑
    But please DELVEMPLOER make
    For Android y know not y know
    So easy 😎 like you do🎉

  • @shihyuehjan3835
    @shihyuehjan3835 10 หลายเดือนก่อน

    why my innerHTML not working?

    • @KennyYipCoding
      @KennyYipCoding  10 หลายเดือนก่อน +1

      Right click inspect console to see what error you’re getting. Could be that you misspelled something

    • @shihyuehjan3835
      @shihyuehjan3835 10 หลายเดือนก่อน

      Yes, I misleading the part (colume 30 to 31 in 12:14), I was coding it to: currMoleTile = document.getElementById(num).appendChild(mole), and boom! Bugs attack :P​@@KennyYipCoding

  • @sunseteagleproductions8463
    @sunseteagleproductions8463 ปีที่แล้ว

    Hi Kenny, thanks for this video! It's similar to the game I'm trying to make. I was hoping you might be able to please help me code the setGame function for the images to pop up randomly anywhere in the game board instead of the 9 tiles you have here:
    function setGame() {
    //set up the grid in html
    for (let i = 0; i < 9; i++) { //i goes from 0 to 8, stops at 9
    //
    let tile = document.createElement("div");
    tile.id = i.toString();
    tile.addEventListener("click", selectTile);
    document.getElementById("board").appendChild(tile);
    Any advice would be greatly appreciated, thanks!

  • @SoloFrxst
    @SoloFrxst 3 หลายเดือนก่อน +1

    My mole is invisible someone help me

  • @CisWhitePig
    @CisWhitePig ปีที่แล้ว +1

    You should do a full chess game tutorial in vanilla JavaScript!

  • @silentworldsound
    @silentworldsound 6 หลายเดือนก่อน

    can you please make a bubble shoter game in js, please
    Thanks;

  • @manithan99
    @manithan99 ปีที่แล้ว

    Do some project using nodejs and MongoDB 🙏🏼

  • @babida9113
    @babida9113 ปีที่แล้ว

    thanks kenny

  • @bmpMusic100
    @bmpMusic100 4 หลายเดือนก่อน +1

    it is not work

  • @minnikeswarrao6185
    @minnikeswarrao6185 ปีที่แล้ว

    You are a hero

  • @akinjideakinbobola2282
    @akinjideakinbobola2282 6 หลายเดือนก่อน

    Please put the code here on the comment section

  • @Advik-5315
    @Advik-5315 ปีที่แล้ว

    Can some one send the git hub link

    • @KennyYipCoding
      @KennyYipCoding  ปีที่แล้ว

      It is in the video description

    • @Advik-5315
      @Advik-5315 ปีที่แล้ว

      @@KennyYipCoding k

  • @hetpatel9503
    @hetpatel9503 ปีที่แล้ว +1

    make it responsive

  • @RamjiDahal-nc7vw
    @RamjiDahal-nc7vw 11 หลายเดือนก่อน

    In 3rd place and I think

  • @md.mashiurrahman4039
    @md.mashiurrahman4039 11 หลายเดือนก่อน

    Look my one it's based on pvz