Pacman Game Tutorial

Content List

How To Build Pacman Game With JavaScripts Pacman Game Source Code

Complete tutorial on pacman game with javascript

Complete tutorial on PacMan game with javascript, How To Build Pacman Game With JavaScript Pacman Source Code, Download, Pacman Source Code, JavaScripts Game

JavaScript Pacman game development finds out the source code.

Here in this video, we are explaining that how you can able to build a Pacman game and provide all the resources which you need and which we have used in our Pacman game project which you can find down below.

HTML, CSS & JavaScript's Sources Code, Javascripts Tag and Properties used in pacMan Game

HTML Code For PacMan Game

<body>

<h1 class=”score”>Score</h1>

</body?

CSS Code For PacMan Game

<style>

body{

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%,-50%);

text-align: center;

}

.grid {

display: flex;

flex-wrap: wrap;

width: 560px;

height: 560px;

border: solid black;

}

.grid div {

width: 20px;

height: 20px;

}

.ghost-lair {

background-color: rgb(255, 255, 255);

}

.pac-dot {

background-color: green;

border: 5px solid white;

box-sizing: border-box;

}

.wall {

background: url(brik.png);

}

.power-pellet {

background-color: green;

border-radius: 10px;

}

.blinky {

background: url(arm.png);

}

.pinky {

background: url(arm.png);

}

.inky {

background: url(arm.png);

}

.clyde {

background: url(arm.png);

}

.pac-man {

background: url(th.png);

}

.scared-ghost {

background: url(scr.png);

}

</style>

Javascript Code For PacMan Game

document.addEventListener(‘DOMContentLoaded’, () => {

let grid = document.querySelector(‘.grid’);

let scoreDisplay = document.querySelector(‘.score’);

const death = new Audio(“/Death.mp3”)

const eat = new Audio(“Fruit.mp3”)

const intro = new Audio(“Intro.mp3”)

let width = 28;

let score = 0

const layout = [

1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,

1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,

1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1,

1, 3, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 3, 1,

1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1,

1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,

1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1,

1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,

1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1,

1, 1, 1, 1, 1, 1, 0, 1, 1, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 1, 1, 0, 1, 1, 1, 1, 1, 1,

1, 1, 1, 1, 1, 1, 0, 1, 1, 4, 1, 1, 1, 2, 2, 1, 1, 1, 4, 1, 1, 0, 1, 1, 1, 1, 1, 1,

1, 1, 1, 1, 1, 1, 0, 1, 1, 4, 1, 2, 2, 2, 2, 2, 2, 1, 4, 1, 1, 0, 1, 1, 1, 1, 1, 1,

4, 4, 4, 4, 4, 4, 0, 0, 0, 4, 1, 2, 2, 2, 2, 2, 2, 1, 4, 0, 0, 0, 4, 4, 4, 4, 4, 4,

1, 1, 1, 1, 1, 1, 0, 1, 1, 4, 1, 2, 2, 2, 2, 2, 2, 1, 4, 1, 1, 0, 1, 1, 1, 1, 1, 1,

1, 1, 1, 1, 1, 1, 0, 1, 1, 4, 1, 1, 1, 1, 1, 1, 1, 1, 4, 1, 1, 0, 1, 1, 1, 1, 1, 1,

1, 0, 0, 0, 0, 0, 0, 0, 0, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 0, 0, 0, 0, 0, 0, 0, 0, 1,

1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1,

1, 3, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 3, 1,

1, 1, 1, 0, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 0, 1, 1, 1,

1, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 1,

1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1,

1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,

1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1

]

const squares = []

//create your board

function createBoard() {

for (let i = 0; i < layout.length; i++) {

const square = document.createElement(‘div’)

grid.appendChild(square)

squares.push(square)

//add layout to the board

if (layout[i] === 0) {

squares[i].classList.add(‘pac-dot’)

} else if (layout[i] === 1) {

squares[i].classList.add(‘wall’)

} else if (layout[i] === 2) {

squares[i].classList.add(‘ghost-lair’)

} else if (layout[i] === 3) {

squares[i].classList.add(‘power-pellet’)

}

createBoard()

//create Characters

//draw pacman onto the board

let pacmanCurrentIndex = 490

squares[pacmanCurrentIndex].classList.add(‘pac-man’)

//get the coordinates of pacman on the grid with X and Y axis

// console.log(getCoordinates(pacmanCurrentIndex))

//move pacman

function movePacman(e) {

squares[pacmanCurrentIndex].classList.remove(‘pac-man’)

switch (e.keyCode) {

case 37:

if (

pacmanCurrentIndex % width !== 0 &&

!squares[pacmanCurrentIndex – 1].classList.contains(‘wall’) &&

!squares[pacmanCurrentIndex – 1].classList.contains(‘ghost-lair’)

)

pacmanCurrentIndex -= 1

if (squares[pacmanCurrentIndex – 1] === squares[363]) {

pacmanCurrentIndex = 391

}

break

case 38:

if (

pacmanCurrentIndex – width >= 0 &&

!squares[pacmanCurrentIndex – width].classList.contains(‘wall’) &&

!squares[pacmanCurrentIndex – width].classList.contains(‘ghost-lair’))

pacmanCurrentIndex -= width

break

case 39:

if (

pacmanCurrentIndex % width < width – 1 &&

!squares[pacmanCurrentIndex + 1].classList.contains(‘wall’) &&

!squares[pacmanCurrentIndex + 1].classList.contains(‘ghost-lair’)

)

pacmanCurrentIndex += 1

if (squares[pacmanCurrentIndex + 1] === squares[392]) {

pacmanCurrentIndex = 364

}

break

case 40:

if (

pacmanCurrentIndex + width < width * width &&

!squares[pacmanCurrentIndex + width].classList.contains(‘wall’) &&

!squares[pacmanCurrentIndex + width].classList.contains(‘ghost-lair’)

)

pacmanCurrentIndex += width

break

}

squares[pacmanCurrentIndex].classList.add(‘pac-man’)

pacDotEaten()

powerPelletEaten()

checkForGameOver()

checkForWin()

}

document.addEventListener(‘keyup’, movePacman)

// what happens when you eat a pac-dot

function pacDotEaten() {

if (squares[pacmanCurrentIndex].classList.contains(‘pac-dot’)) {

eat.play()

score++

scoreDisplay.innerHTML = score

squares[pacmanCurrentIndex].classList.remove(‘pac-dot’)

}

//what happens when you eat a power-pellet

function powerPelletEaten() {

if (squares[pacmanCurrentIndex].classList.contains(‘power-pellet’)) {

eat.play()

score += 10

ghosts.forEach(ghost => ghost.isScared = true)

setTimeout(unScareGhosts, 10000)

squares[pacmanCurrentIndex].classList.remove(‘power-pellet’)

}

//make the ghosts stop flashing

function unScareGhosts() {

ghosts.forEach(ghost => ghost.isScared = false)

}

//create ghosts using Constructors

class Ghost {

constructor(className, startIndex, speed) {

this.className = className

this.startIndex = startIndex

this.speed = speed

this.currentIndex = startIndex

this.isScared = false

this.timerId = NaN

}

//all my ghosts

ghosts = [

new Ghost(‘blinky’, 348, 250),

new Ghost(‘pinky’, 376, 400),

new Ghost(‘inky’, 351, 300),

new Ghost(‘clyde’, 379, 500)

]

//draw my ghosts onto the grid

ghosts.forEach(ghost => {

squares[ghost.currentIndex].classList.add(ghost.className)

squares[ghost.currentIndex].classList.add(‘ghost’)

})

//move the Ghosts randomly

ghosts.forEach(ghost => moveGhost(ghost))

function moveGhost(ghost) {

const directions = [-1, +1, width, -width]

let direction = directions[Math.floor(Math.random() * directions.length)]

ghost.timerId = setInterval(function () {

//if the next squre your ghost is going to go to does not have a ghost and does not have a wall

if (!squares[ghost.currentIndex + direction].classList.contains(‘ghost’) &&

!squares[ghost.currentIndex + direction].classList.contains(‘wall’)) {

//remove the ghosts classes

squares[ghost.currentIndex].classList.remove(ghost.className)

squares[ghost.currentIndex].classList.remove(‘ghost’, ‘scared-ghost’)

ghost.currentIndex += direction

squares[ghost.currentIndex].classList.add(ghost.className, ‘ghost’)

//else find a new random direction ot go in

} else direction = directions[Math.floor(Math.random() * directions.length)]

//if the ghost is currently scared

if (ghost.isScared) {

squares[ghost.currentIndex].classList.add(‘scared-ghost’)

}

//if the ghost is currently scared and pacman is on it

if (ghost.isScared && squares[ghost.currentIndex].classList.contains(‘pac-man’)) {

squares[ghost.currentIndex].classList.remove(ghost.className, ‘ghost’, ‘scared-ghost’)

ghost.currentIndex = ghost.startIndex

score += 100

squares[ghost.currentIndex].classList.add(ghost.className, ‘ghost’)

}

checkForGameOver()

checkForWin()

}, ghost.speed)

}

function checkForGameOver(){

if(squares[pacmanCurrentIndex].classList.contains(‘ghost’) &&

!squares[pacmanCurrentIndex].classList.contains(‘scared-ghost’)){

document.removeEventListener(“keyup”, movePacman);

ghosts.forEach(ghost => clearInterval(ghost.timerId));

death.play()

setTimeout(function(){

alert(“Game Over”)

}, 500)

}

function checkForWin() {

if (score === 274) {

ghosts.forEach(ghost => clearInterval(ghost.timerId))

document.removeEventListener(‘keyup’, movePacman)

setTimeout(function () { alert(“You have WON!”); }, 500)

}

})

</script>

Health Calculator

PacMan Game Source Code

Just Wait We Are Preparing The To Download

My Services

Content List

Take Quiz