Pacman Game Tutorial

How To Build Pacman Game With JavaScripts Pacman Game Source Code

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

JavaScripts Pacman Game Source Code

HTML Code For PacMan Game

<body>
    <div class=”grid”></div>

    <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

 <script>
          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, 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, 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, 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, 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, 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

Recent Post

How To Build Pacman Game With JavaScripts Pacman Game Source Code

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

JavaScripts Pacman Game Source Code

HTML Code For PacMan Game

<body>
    <div class=”grid”></div>

    <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

 <script>
          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, 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, 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, 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, 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, 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

Recent Post

JavaScripts Pacman Game Source Code

Javascripts PacMan Game

Daulat Hussain Profile

1536

How To Build Pacman Game With JavaScripts Pacman Game Source Code

How To Build Pacman Game With JavaScripts Pacman Game Source Code

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.

Health Calculator

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

JavaScripts Pacman Game Source Code

HTML Code For PacMan Game

<body>
    <div class=”grid”></div>

    <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

 <script>
          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, 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, 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, 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, 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, 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>

PacMan Game Source Code

Just Wait We Are Preparing The To Download

Recent Post

Join Our Team

By joining our team you will get all the exclusive content & information, Before it goes live

My Services

Daulat Hussain

@daulathussain

I’m here to bring a lot of new guides and information about branding, health and business. Follow me for new updates

Quick Link

Rules & Regulation

©CopyRight Reserve By Daulathussain.com