In this article, we explore JavaScript's .includes() method for searching arrays, including practical implementations in game development. You'll learn coding techniques to enhance your own projects!
.includes()
What is .includes()? Array.prototype.includes() is a built-in JavaScript array method that checks if an array contains a specific element. It returns true if the element is found, and false otherwise.
Syntax:
element: The value to search for.
f*romIndex (optional)*: The position in the array to start searching.
array.includes(element, fromIndex)
What You Can Do With .includes()
The .includes() method is excellent for checking if an array contains a specific value—it even works with emojis! For a simple demonstration, here’s how I use .includes() in my Pac-Man project to check for particular fruits. As you can see, the apple returns true because it is included in the array (in fact, there are two apples), and the watermelon returns false because it is not in the fruitBonus array.
// Example from my Pac-Man project
const fruitBonus = ['🍒','🍓','🍊','🍊','🍎','🍎','🍈','🍈','🚀','🔔','🔑'];
console.log(fruitBonus.includes('🍎')); // true
console.log(fruitBonus.includes('🍉')); // false
⚠ Important: There are limitations to using .includes(). While it works perfectly for primitive values like numbers, strings, and emojis, it does not perform deep checks for nested arrays or objects. Using .includes() with arrays or objects will only return true if the reference matches exactly—not if the contents are the same. You’ll need a different approach for deep comparisons, such as using .some() with a custom comparison function.
Putting .includes() to Good Use
I successfully used .includes() to improve ghost movement in my JavaScript Pac-Man game! I created an array containing all the intersection indices on the game board, and used .includes() to detect when a ghost enters an intersection. This allows the ghost to change direction at the correct spots, just like in the original arcade game.
The intersectionIndices array:
export const intersectionIndices = [
34, 49,
141, 146, 149, 152, 155, 158, 161, 166,
230, 245,
320, 323,
377, 378,
398, 401, 410, 413,
485, 494,
566, 569, 578, 581,
650, 653, 656, 659, 662, 665,
731, 752,
824, 827
];
Adding the Intersections
During board construction, squares whose index is listed in intersectionIndices are assigned the 'intersection' class. This visually and logically marks those squares as intersections for game logic.
export function buildTheBoard() {
for(let i = 0; i < 868; i++) {
let div = document.createElement("div");
gameGrid.appendChild(div);
squares.push(div);
squares[i].classList.add('game-board-square');
if (intersectionIndices.includes(i)) {
squares[i].classList.add('intersection');
}
}
}
Below, you can see every intersection included in the intersectionIndices array, courtesy of the ‘intersection‘ class:
Helper Intersection function
Here is a simple helper function, used for game logic, that takes an index as a parameter, uses .includes(), and returns true if the specified index is an intersection:
// Helper function to check if a given index is an intersection
function isIntersection(index) {
return intersectionIndices.includes(index);
}
Improved Ghost Movement using .includes()
Now that I have a function that detects intersections, I can use it to see if a ghost’s current index includes one. Once a ghost enters an intersection, I trigger a direction change—making the ghosts smarter!
How It Works: Each ghost moves automatically on a timer. At every step, the code checks if the ghost is on an intersection square (using isIntersection and .includes()). If the ghost is at an intersection:
The code figures out which directions are possible (not blocked by walls or other ghosts).
It avoids making the ghost immediately turn around (no U-turns unless stuck).
It randomly picks one of the valid directions and updates the ghost’s movement.
// Ghost movement logic uses isIntersection to trigger intersection behavior
export function moveGhost(ghost) {
const directions = [-1, 1, 28, -28];
let direction = ghost.direction || directions[Math.floor(Math.random() * directions.length)];
ghost.timerId = setInterval(function() {
// ...existing movement logic...
// At intersections, choose a new direction
if (isIntersection(ghost.currentIndex)) {
const reverseDir = ghost.previousIndex - ghost.currentIndex;
let validDirections = directions.filter(dir => {
if (dir === reverseDir) return false;
const nextIndex = ghost.currentIndex + dir;
return (
!squares[nextIndex].classList.contains('ghost') &&
!squares[nextIndex].classList.contains('lairText') &&
!squares[nextIndex].classList.contains('wall') &&
!(dir === 28 && squares[nextIndex].classList.contains('lairWall')) &&
(nextIndex !== 375) &&
(nextIndex !== 380)
);
});
if (validDirections.length === 0) {
validDirections = [reverseDir];
}
if (validDirections.length > 0) {
direction = validDirections[Math.floor(Math.random() * validDirections.length)];
ghost.direction = direction;
}
}
// ...rest of movement logic...
}, ghost.speed);
}
By checking for intersections with JavaScript’s .includes(), I ensure ghosts only change direction at the right spots. This brings my project closer to the original arcade experience and creates more authentic, challenging gameplay!
JS Pac-Man Project Links:
🔗 Link to the deployed project
Note: Since I’m following team development practices and pushing updates to the develop branch, some of the changes I describe in this article may not be live in the deployed version of the game yet.
My other related articles
JavaScript: Array Iteration and DOM Manipulation in Game Development
JavaScript Game Timing: How Independent Intervals Can Cause Missed Collisions
What Is “State” in JavaScript, and How to Use It in Your Projects
Mastering JavaScript: The Power of forEach and Ternary Operators
JavaScript: Understanding the Set and Clear Interval Methods
Be sure to listen to the HTML All The Things Podcast!
📝 I also write articles for the HTML All The Things Podcast, which you can read on their website: https://www.htmlallthethings.com/.
Be sure to check out HTML All The Things on socials!
Affiliate & Discount Links!
With CodeMonkey, learning can be all fun and games! CodeMonkey transforms education into an engaging experience, enabling children to evolve from tech consumers to creators. Use CodeMonkey's FREE trial to unlock the incredible potential of young tech creators!
With a structured learning path tailored for various age groups, kids progress from block coding to more advanced topics like data science and artificial intelligence, using languages such as CoffeeScript and Python. The platform includes features for parents and teachers to track progress, making integrating coding into home and classroom settings easy.
Through fun games, hands-on projects, and community interaction, CodeMonkey helps young learners build teamwork skills and receive recognition for their achievements. It fosters a love for coding and prepares children for future career opportunities in an ever-evolving tech landscape.
To learn more about CodeMonkey, you can read my detailed review article!
Affiliate Links:
Advance your career with a 20% discount on Scrimba Pro using this affiliate link!
Become a hireable developer with Scrimba Pro! Discover a world of coding knowledge with full access to all courses, hands-on projects, and a vibrant community. You can read my article to learn more about my exceptional experiences with Scrimba and how it helps many become confident, well-prepared web developers!
Important: This discount is for new accounts only. If a higher discount is currently available, it will be applied automatically.
How to Claim Your Discount:
Click the link to explore the new Scrimba 2.0.
Create a new account.
Upgrade to Pro; the 20% discount will automatically apply.
Disclosure: This article contains affiliate links. I will earn a commission from any purchases made through these links at no extra cost to you. Your support helps me continue creating valuable content. Thank you!
Conclusion
The JavaScript .includes() method checks whether an array contains a specific element, returning true if it does and false if it doesn't. It’s great for verifying if an array has a particular value, but it does have limitations. While it works well for simple values like numbers, strings, or (in my project’s case) emojis, it doesn’t check inside nested arrays or objects.
By utilizing .includes() in the function that controls the ghosts in my Pac-Man game, I can determine when a ghost’s current index enters an intersection and trigger a direction change. This makes the ghosts smarter and brings my project closer to the original arcade experience!
Just as I used .includes() with an array of intersections to improve game logic, you can also find creative ways to combine this method with your own data structures. Explore how .includes() can simplify checks and enhance features in your projects—experiment and see what smart solutions you can build!
Let’s connect! I’m active on LinkedIn and Twitter.
Top comments (0)