Build an Arcade Game With Vanilla JavaScript

Create a simple arcade game with DOM manipulation

Roberto Hernandez
Feb 25 · 4 min read
Photo by Carl Raw on Unsplash

Today’s a special day for those who just are starting out in the JavaScript world. The only way to master our craft is practice and today we’re going to dirty our hands and start improving our DOM manipulation skills. How? by building a simple arcade game just with vanilla JavaScript.


Despite this post being for beginners and newbies, it doesn’t mean that more experienced developers won’t find it useful too.


What We Will Cover

  • The basics of CSS and JavaScript.

The Challenge

Arcade game with vanilla JavaScript

The arcade game has the following requirements:

  • It uses an image as a background and has a clickable duck image.

Simple. Now what? As a general rule, the first thing we need to do with a problem like this is to think about the approach we need to follow and the recipe. That means we need to figure out each step and the detail we need to complete those requirements. Let’s break this down.

To solve the challenge we will follow the next steps in the given order. Divide and you will conquer!

  1. Implement the layout using the assets (the background image and the duck) and the score box.

Without further ado, let’s get our fingers dirty.


1. Layout

Our layout (index.html) will have a div as a container and then both images the background and the duck. Finally, a scoreContainer element with the score text and the score (a counter).

<div class="container">
<img src="https://bit.ly/2Q4q14a" />
<img id="duck" src="https://bit.ly/2KQJVKc" alt="duck" />
<div class="scoreContainer">
<div id="score-text">Score</div>
<div id="score-counter">0</div>
</div>
</div>

Styles

/*Make any img element responsive*/
img {
max-width: 100%;
}
/*Set a fixed size for width and height and in an absolute position*/
#duck {
margin: 50px;
width: 100px;
height: 100px;
position: absolute;
left: 100px;
top: 100px;
}
/*Style for the Score container*/
.scoreContainer {
background-color: black;
width: 15%;
height: 15%;
color: #ffffff;
top: 5%;
right: 5%;
border: 2px solid greenyellow;
border-radius: 10px;
display: flex;
position: fixed;
flex-direction: column;
align-items: center;
}
#score-text {
font-size: 1.5em;
}
#score-counter {
font-size: 3.1em;
font-weight: bold;
color: #06e515;
}

2. JavaScript

2.1 Create the event listener

Now, we are going to create an event listener on our duck image. When a user clicks on the duck image it will fire a function.

//Get the target element
const duck = document.querySelector("#duck");
//Add the click event listener
duck.addEventListener("click", () => {
//Dont forget call the functions here
increaseScore();
moveDuck();
});

2.2 Create a function to increase the current score

We just created the event listener. Now, we’re going to create a function that will increase the counter, our score, by one.

//Increase score by 1
const increaseScore = () => {
//Get the content of the target element. The current value for score
const score = document.querySelector("#score-counter").innerHTML;
//Get the element to increase the value
const scoreHTML = document.querySelector("#score-counter");
//Cast the score value to Number type
let count = Number(score);
//Set the new score to the target element
scoreHTML.innerHTML = count + 1;
};

2.3 Create a function to move the duck randomly

It’s time to move the duck. However, since the duck will move randomly, it’s a good choice to create a helper function to get a random number, which we will later use to set the random position. Let’s create that function:

//Get a random numberconst getRandomNum = (num) => {
return Math.floor(Math.random() * Math.floor(num));
}

Now, we’re going to create a function to move the duck. We are using the innerWidth property to get the inner width of the window in pixels and the innerHeight property gets the inner height of the window in pixels. Also, we use the getRandomNum function to set the pixel numbers for top and left properties to affect the vertical and horizontal position of the duck.

/*
Move the duck randomly
*/
const moveDuck = () => {
const w = window.innerWidth;
const h = window.innerHeight;
duck.style.top = getRandomNum(w) + "px";
duck.style.left = getRandomNum(h) + "px";
};

This is all for today! I hope you followed this simple guide and have gained an understanding of DOM manipulation.


The Completed Program

Arcade Game — DOM Manipulation

Thanks for reading! I hope this post was helpful to you.

Better Programming

Advice for programmers.

Thanks to Zack Shapiro

Roberto Hernandez

Written by

ReactJS & JavaScript Enthusiast, Coding and decoding life — Just a Human being, and Developer | Blogger @ www.mullinstack.com

Better Programming

Advice for programmers.

More From Medium

More from Better Programming

More from Better Programming

More from Better Programming

Fun Side Projects That You Can Build Today

3K

More from Better Programming

More from Better Programming

The Zero-Dollar Infrastructure Stack

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade