Build PACMAN in Vanilla JavaScript, HTML and CSS

Vanilla javaScript Game with HTML and CSS

A super simple walkthourgh to coding Pac-Man in vanilla JavaScript, HTML and CSS.

I have kept the styling at a bare miniumum for you to go wild and make it your own. Please tag me as I would LOVE to see your game!!!

In this game I show you how to make Pac-Man move around the grid while avoiding walls, show you how to use the constructor method for all four ghosts to apply their unique characteristics to each one, including at what speed they move at. Clyde obviously being the slowest.

Inbuilt JavaScript functions I have used:

  • addEventListener()
  • getElementById()
  • querySelector()
  • for Loop
  • appendChild()
  • createElement()
  • push()
  • if else statements
  • classList
  • switch case
  • keyCode
  • forEach()
  • setTimeout
  • Class
  • constructor
  • setInterval()
  • removeEventListener

Next steps:
My next goal is to make a copy of this game and apply logic to the ghost moves. At the moment they are choosing a direction to go in at random. I want to apply logic that makes them move closer to wherever Pac-man is.

Watch this space.

View code here:

#javascript #html #css #game-development #web-development

What is GEEK

Buddha Community

Build PACMAN in Vanilla JavaScript, HTML and CSS
Lyda  White

Lyda White


How to Image Uploader with Preview || Html CSS JavaScript

Image Uploader with Preview || Html CSS JavaScript || #html #css #javascript #coding

#html #css #javascript 

anita maity

anita maity


Sidebar Menu Using Only HTML and CSS | Side Navigation Bar

how to create a Sidebar Menu using HTML and CSS only. Previously I have shared a Responsive Navigation Menu Bar using HTML & CSS only, now it’s time to create a Side Navigation Menu Bar that slides from the left or right side.


#sidebar menu using html css #side navigation menu html css #css side navigation menu bar #,pure css sidebar menu #side menu bar html css #side menu bar using html css

Sofiaml Boo

Sofiaml Boo


CSS3 Clip-path Transform Effects on Scroll with Video Background | Html CSS Vanilla Javascript

Enroll My Course : Next Level CSS Animation and Hover Effects…

Another Course : Build Complete Real World Responsive Websites from Scratch…

Join Our Channel Membership And Get Source Code of My New Video’s Everyday!

Join :…

#css #css3 #html #vanilla javascript #javascript

Nandini roy

Nandini roy


Responsive Personal Portfolio Website Using HTML CSS and JavaScript


#create a portfolio website with html css javascript #personal portfolio complete website using only html css javascript #responsive portfolio website html css javascript #responsive personal portfolio website #portfolio website #responsive website

Alisha  Larkin

Alisha Larkin


HTML Tutorial For Beginners

The prospect of learning HTML can seem confusing at first: where to begin, what to learn, the best ways to learn — it can be difficult to get started. In this article, we’ll explore the best ways for learning HTML to assist you on your programming journey.

What is HTML?

Hypertext Markup Language (HTML) is the standard markup language for documents meant to be displayed in a web browser. Along with Cascading Style Sheets (CSS) and JavaScript, HTML completes the trio of essential tools used in creating modern web documents.

HTML provides the structure of a webpage, from the header and footer sections to paragraphs of text, videos, and images. CSS allows you to set the visual properties of different HTML elements, like changing colors, setting the order of blocks on the screen, and defining which elements to display. JavaScript automates changes to HTML and CSS, for example, making the font larger in a paragraph when a user clicks a button on the page.

#html #html-css #html-fundamentals #learning-html #html-css-basics #html-templates