Star Wars Whack-A-Mole [JavaScript Game Tutorial for Beginners]

In this JavaScript game tutorial for beginners I will take you step by step though a complete game development process.

We will improve our front end web development coding skills and learn about ES6 syntax, event listeners, how to control CSS styles and classes with JavaScript, what’s the difference between setTimeout and setInterval, how to use clearInterval, difference between const and let variables and between regular JavaScript functions and ES6 arrow functions and much more. This will be very beginner friendly and I will explain everything so you can better understand how JavaScript works, use these skills to level up as a Front end web developer and get one step closer to getting hired for your first coding job.

We will build a complete Star Wars inspired whack-a-mole game together from scratch. No frameworks and no libraries, I will explain every line of code as we go along as I always do.

My name is Frank and I am a self taught Front End Web Developer. I learned everything I know in my free time from structured Udemy courses and YouTube project tutorials just like this one. If I could do it you can do it to.

Some of my favourite UDEMY courses: JavaScript Beginner Bootcamp (2020)
20 Web Projects With Vanilla JavaScript
Learn SVG Animation – With HTML, CSS & JavaScript
HTML, CSS, JavaScript – Build 6 Creative Projects
Object-oriented Programming in JavaScript
How to Program Games: Tile Classics in JS for HTML5 Canvas
Next Level CSS Creative Hover & Animation Effects
The Web Developer Bootcamp (Older but still very relevant)
Modern HTML & CSS From The Beginning (Including Sass)
Advanced CSS and Sass: Flexbox, Grid, Animations and More!
JavaScript Basics for Beginners
JavaScript: Understanding the Weird Parts
The Complete JavaScript Course 2020: Build Real Projects!
Modern JavaScript From The Beginning

This tutorial is part of a series – Creative coding with vanilla JavaScript and HTML canvas COMPLETE PLAYLIST:–6IPYNh

n this JavaScript tutorial we will build a complete project from scratch and focus on techniques that are important for beginners to understand so you can build up your skills towards the more advanced stuff. We will learn about Math,floor and Math.random, return keyword, if statements, classList add and classList remove, set timeout and set interval. I will also show you how to properly use clearInterval, I noticed it’s not easy for many people so let’s take confusion out of that today. I also will show you difference between regular functions and ES6 arrow functions and couple more things.

You can message me on TWITTER
Check out some of my source code on CODEPEN

Funko POP Star Wars:Mandalorian w/Frog The Mandalorian Collectible
Special Sculpted The Mandalorian Baby Yoda Mug | 16 Ounces
Star Wars The Mandalorian Battle Ready T-Shirt
The Mandalorian Gadget Decals – Officially Licensed Disney Star Wars Merchandise
Star Wars The Bounty Collection Collectibles 2.2-Inch
Groot Mashup-Baby Yoda Manda Short Sleeve T-Shirt
Funko POP Vinyl: Star Wars, the Mandalorian Collectible
Star Wars The Mandalorian Battle Ready T-Shirt
Star Wars Snack Time T-Shirt
Funko POP Star Wars: Mandalorian w/cup Collectible
Funko POP Star Wars: Mandalorian Yoda Collectible
Official Star Wars Baby Yoda Snack Time Mug, Ceramic
LEGO BrickHeadz Star Wars The Mandalorian

Let’s build a JavaScript game together 🙂 Have fun 😀

One comment

  1. hi Frank,sorry for this but i’m completely new to everything. I can’t seem to locate the the project images source anywhere here,please assist me.

Leave a Reply