Whack a Mole Game in Javascript HTML CSS

Channel:

Kenny Yip Coding

Subscribers:

50,600

Published on February 27, 2023 12:03:47 AM ● Video Link: https://www.youtube.com/watch?v=ej8SatOj3V4

Category:

Tutorial

Duration: 21:56

12,175 views

264

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: https://github.com/ImKennyYip/whac-a-mole
Demo: https://imkennyyip.github.io/whac-a-mole/

Website: https://www.kennyyipcoding.com/

Java Game Programming Projects Playlist:
https://www.youtube.com/playlist?list=PLnKe36F30Y4Y1XQOqNsL9Fgg_p6nYhcng

JavaScript Game Programming Projects Playlist:
https://www.youtube.com/playlist?list=PLnKe36F30Y4bLhA-st9sC4ZthyV7nsL2Q

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;
}