Whack a Mole Game in Javascript HTML CSS

Подписаться 22 тыс.

Просмотров 71 тыс.

50% 1

How to make whac-a-mole in javascript, html, css. While creating this mario themed whac-a-mole game, you will learn how to use javascript to set the game board by editing dom elements, add click handlers to whack the mole, and randomly spawn the mole and piranha plant.
Code: github.com/ImKennyYip/whac-a-...
Demo: imkennyyip.github.io/whac-a-m...
Website: www.kennyyipcoding.com/
Java Game Programming Projects Playlist:
• Java Game Programming ...
JavaScript Game Programming Projects Playlist:
• JavaScript Game Progra...
Subscribe for more coding tutorials 😄!
Edit* Apparently the game is called whac a mole, NOT whack a mole. Therefore, I renamed whack to whac for the code on github.
To prevent the images from being dragged and highlighted:
#board div img {
/* all img tags inside the tile div tags */
width: 100px;
height: 100px;
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
}

Опубликовано:

25 фев 2023

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 54

@KennyYipCoding Год назад

Check out the playlist of web project tutorials here! ru-vid.com/group/PLnKe36F30Y4bLhA-st9sC4ZthyV7nsL2Q Got a tutorial suggestion? Let me know down below!

@vetri4206 Год назад

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

@bravefart651 Год назад

Could you do Donkey Kong?

@huiying2838 11 месяцев назад

Could you do Jigsaw puzzle?

@KennyYipCoding 11 месяцев назад

@@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 4 месяца назад

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

@johntran3334 6 месяцев назад

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!

@Shubham-vh3cp 7 месяцев назад

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

@majdalin1265 11 месяцев назад

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

@itsybitsyiyan 6 месяцев назад

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 3 месяца назад

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

@luakim3038 24 дня назад

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

@AutMouseLabs 5 месяцев назад

This was great! Thank you for the work.

@steveweichel4990 Год назад

this makes so much fun to learn

@memesalldayjack3267 24 дня назад

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

@sirishaa.m7007 5 месяцев назад

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

@waltdisney-tz8ef 8 месяцев назад

Wow! Fantastic Channel 🔥

@nbeditz9106 8 месяцев назад

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

@KennyYipCoding 8 месяцев назад

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

@hi_im_crimson Месяц назад

this was great to follow

@Enginor 8 месяцев назад

amazing keep it up

@S_S_T_SkolkoStoitTelevizor 4 месяца назад

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

@Shubham-vh3cp 7 месяцев назад

Thanks a lot bro you are really amazing

@minnikeswarrao6185 Год назад

You are a hero

@babida9113 Год назад

thanks kenny

@SketchBoyofficial 7 месяцев назад

not able to donload images from your link , plz help

@lalisarto1459 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?

@sunseteagleproductions8463 5 месяцев назад

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!

@mully929518 Месяц назад

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

@manithan99 11 месяцев назад

Do some project using nodejs and MongoDB 🙏🏼

@marianneringstad108 11 месяцев назад

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 11 месяцев назад

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

@KennyYipCoding 11 месяцев назад

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

@user-ei1vf6ve1k 8 месяцев назад

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

@KennyYipCoding 8 месяцев назад

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

@CisWhitePig Год назад

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

@zoltanszadoczki5665 7 месяцев назад

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 7 месяцев назад

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 7 месяцев назад

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

@zoltanszadoczki5665 7 месяцев назад

@@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 7 месяцев назад

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

@shihyuehjan3835 3 месяца назад

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

@BJNotes 4 дня назад

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

@KennyYipCoding 4 дня назад

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

@shihyuehjan3835 3 месяца назад

why my innerHTML not working?

@KennyYipCoding 3 месяца назад

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

@shihyuehjan3835 3 месяца назад

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