JavaScript Games in the DOM: Comprehensive Guide

JavaScript Games in the DOM: Comprehensive Guide 1

What are DOM-Based Games? 2
Why Build Games Using the DOM? 2
Basic Tools for DOM Games 2
Step-by-Step: Create a Simple DOM Game 2
Example: Click the Box Game 3

Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis

1
Game Mechanics 3
1. Keyboard Input 3
2. Collision Detection 4
3. Timer 4
Complete Game Example: Snake Game 5
HTML Structure 5
JavaScript Code 5
Exercises 6
Exercise 1: Create a Dodging Game 6
Exercise 2: Add Levels to Click the Box Game 6
Multiple-Choice Questions 6
Question 1: 6
Question 2: 6
Question 3: 7
Best Practices for DOM-Based Games 7

Building games using JavaScript and the DOM (Document Object Model) allows you to create
interactive games directly within the HTML structure of a webpage. This guide provides
step-by-step instructions, examples, exercises, and quiz questions to help you develop
DOM-based games.

What are DOM-Based Games?

DOM-based games use HTML elements, styled with CSS, and manipulated with JavaScript to
create interactivity. Unlike games built with <canvas>, DOM games rely on HTML structures for
rendering.

Why Build Games Using the DOM?

1. Accessibility: Games can adapt to web-based interfaces.

2. Ease of Styling: Use CSS for animations and styles.
3. Integration: Combine gameplay with other webpage content.

Basic Tools for DOM Games

1. HTML Elements: Use <div>, <span>, or <button> as game elements.

2. CSS Styling: Style game components for visuals.
3. JavaScript: Manipulate positions, handle events, and control game logic.

Step-by-Step: Create a Simple DOM Game

Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis

2
Example: Click the Box Game

1. HTML Structure

<div id="gameContainer" style="position: relative; width: 400px;

height: 400px; border: 1px solid black;">
<div id="box" style="width: 50px; height: 50px; background-color:
red; position: absolute;"></div>
</div>
<p>Score: <span id="score">0</span></p>

2. JavaScript Code

const box = document.getElementById("box");

const scoreDisplay = document.getElementById("score");
let score = 0;
// Move the box to a random position
function moveBox() {
const container = document.getElementById("gameContainer");
const maxX = container.clientWidth - box.offsetWidth;
const maxY = container.clientHeight - box.offsetHeight;
const randomX = Math.floor(Math.random() * maxX);
const randomY = Math.floor(Math.random() * maxY);
box.style.left = `${randomX}px`;
box.style.top = `${randomY}px`;
}
// Increase the score when the box is clicked
box.addEventListener("click", () => {
score++;
scoreDisplay.textContent = score;
moveBox();
});
// Initialize the game
moveBox();

Game Mechanics

1. Keyboard Input

Capture keyboard input for movement or interactions.

Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis

3
document.addEventListener("keydown", (event) => {
if (event.key === "ArrowUp") {
console.log("Move Up");
} else if (event.key === "ArrowDown") {
console.log("Move Down");
}
});

2. Collision Detection

Detect when two elements collide.

function detectCollision(element1, element2) {

const rect1 = element1.getBoundingClientRect();
const rect2 = element2.getBoundingClientRect();
return !(
rect1.top > rect2.bottom ||
rect1.bottom < rect2.top ||
rect1.left > rect2.right ||
rect1.right < rect2.left
);
}

3. Timer

Add a countdown timer for time-based gameplay.

let timeLeft = 30;

const timerDisplay = document.getElementById("timer");
function startTimer() {
const timerInterval = setInterval(() => {
timeLeft--;
timerDisplay.textContent = `Time Left: ${timeLeft}s`;
if (timeLeft <= 0) {
clearInterval(timerInterval);
alert("Game Over!");
}
}, 1000);
}
startTimer();
Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis

4
Complete Game Example: Snake Game

HTML Structure
<div id="gameBoard" style="position: relative; width: 400px; height:
400px; border: 1px solid black; background-color: lightgray;">
<div id="snakeHead" style="width: 20px; height: 20px;
background-color: green; position: absolute; top: 0; left: 0;"></div>
</div>
<p>Score: <span id="score">0</span></p>

JavaScript Code
const gameBoard = document.getElementById("gameBoard");
const snakeHead = document.getElementById("snakeHead");
const scoreDisplay = document.getElementById("score");
let snakeX = 0;
let snakeY = 0;
let score = 0;
let direction = "right";
// Move the snake
function moveSnake() {
if (direction === "right") snakeX += 20;
if (direction === "left") snakeX -= 20;
if (direction === "up") snakeY -= 20;
if (direction === "down") snakeY += 20;
// Boundary check
if (snakeX < 0 || snakeX >= gameBoard.clientWidth || snakeY < 0 ||
snakeY >= gameBoard.clientHeight) {
alert("Game Over!");
document.location.reload();
}
snakeHead.style.left = `${snakeX}px`;
snakeHead.style.top = `${snakeY}px`;
}
// Change direction based on keyboard input
document.addEventListener("keydown", (event) => {
if (event.key === "ArrowUp" && direction !== "down") direction =
"up";

Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis

5
 if (event.key === "ArrowDown" && direction !== "up") direction =
"down";
if (event.key === "ArrowLeft" && direction !== "right") direction =
"left";
if (event.key === "ArrowRight" && direction !== "left") direction =
"right";
});
// Game loop
setInterval(moveSnake, 200);

Exercises

Exercise 1: Create a Dodging Game

● Create a square (player) controlled by arrow keys.

● Add a moving obstacle that the player must avoid.

Exercise 2: Add Levels to Click the Box Game

● Increase the speed of the box movement as the score increases.

Multiple-Choice Questions

Question 1:

Which method is used to update the position of a DOM element dynamically?

1. element.offsetPosition
2. element.getBoundingClientRect()
3. element.style
4. element.updatePosition()

Answer: 3. element.style

Question 2:

What does the getBoundingClientRect method return?

1. The CSS styles of an element.

2. The dimensions and position of an element.
3. The parent element of the DOM node.
4. The z-index of an element.
Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis

6
Answer: 2. The dimensions and position of an element.

Question 3:

Which event listener is commonly used for keyboard input in games?

1. onkeypress
2. onkeydown
3. onkeyup
4. onkeydown and onkeyup

Answer: 4. onkeydown and onkeyup

Best Practices for DOM-Based Games

1. Optimize Performance:
○ Use requestAnimationFrame for smoother animations.
2. Modularize Code:
○ Separate game logic, rendering, and event handling.
3. Cross-Browser Compatibility:
○ Test games on multiple browsers.
4. Responsive Design:
○ Ensure games adapt to different screen sizes.

Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis