JavaScript for Beginners: How to Build a Simple Game

Learn how to build a basic “Whack-a-Mole” game with JavaScript

Photo by Riho Kroll on Unsplash

JavaScript is a versatile programming language that can be used for a wide range of applications, including building simple games. Our game will be a basic “Whack-a-Mole” style game, where the player must click on a moving object to score points. We’ll start with the HTML and CSS for the game, and then move on to the JavaScript code.

Let’s walk you through the process of building a simple game using JavaScript.

HTML and CSS Setup

First, let’s set up the HTML and CSS for the game. We’ll need a container element for the game, a score display, and a moving target. Here’s the HTML:

<div id="container">
  <h1>Whack-a-Mole</h1>
  <p>Score: <span id="score">0</span></p>
  <div id="target"></div>
</div>

And here’s the CSS:

#container {
  width: 400px;
  margin: 0 auto;
  text-align: center;
}

#target {
  width: 50px;
  height: 50px;
  background-color: #ff0000;
  position: relative;
  top: 0;
  left: 0;
  border-radius: 50%;
  animation: moveTarget 2s linear infinite;
}

@keyframes moveTarget {
  0% { top: 0; left: 0; }
  25% { top: 0; left: 350px; }
  50% { top: 350px; left: 350px; }
  75% {…