{"id":116,"date":"2026-02-06T15:12:52","date_gmt":"2026-02-06T15:12:52","guid":{"rendered":"https:\/\/theroyalscode.com\/students\/l_rankins\/?p=116"},"modified":"2026-02-06T15:12:52","modified_gmt":"2026-02-06T15:12:52","slug":"blog-19-pacman-pacman-pacman-pacman-pacman-pacman-pacman-pacman-pacman-pacman-pacman-pacman-pacman-pacman-pacman-pacman-pacman-pacman-pacman-pacman-pacman-pacman-pacman-pacman-pacman-pacman-pacman-pa","status":"publish","type":"post","link":"https:\/\/theroyalscode.com\/students\/l_rankins\/2026\/02\/06\/blog-19-pacman-pacman-pacman-pacman-pacman-pacman-pacman-pacman-pacman-pacman-pacman-pacman-pacman-pacman-pacman-pacman-pacman-pacman-pacman-pacman-pacman-pacman-pacman-pacman-pacman-pacman-pacman-pa\/","title":{"rendered":"BLOG 19: Pacman Pacman Pacman Pacman Pacman Pacman Pacman Pacman Pacman Pacman Pacman Pacman Pacman Pacman Pacman Pacman Pacman Pacman Pacman Pacman Pacman Pacman Pacman Pacman Pacman Pacman Pacman Pacman Pacman Pacman Pacman Pacman Pacman Pacman Pacman Pacman Pacman Pacman Pacman Pacman Pacman"},"content":{"rendered":"\n<p><strong>Today I made Pacman<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>class Ghost {\n    constructor(\n        x,\n        y,\n        width,\n        height,\n        speed,\n        imageX,\n        imageY,\n        imageWidth,\n        imageHeight,\n        range\n    ) {\n        this.x = x;\n        this.y = y;\n        this.width = width;\n        this.height = height;\n        this.speed = speed;\n        this.direction = DIRECTION_RIGHT;\n        this.imageX = imageX;\n        this.imageY = imageY;\n        this.imageHeight = imageHeight;\n        this.imageWidth = imageWidth;\n        this.range = range;\n        this.randomTargetIndex = parseInt(Math.random() * 4);\n        this.target = randomTargetsForGhosts&#91;this.randomTargetIndex];\n        setInterval(() => {\n            this.changeRandomDirection();\n        }, 10000);\n    }\n\n    isInRange() {\n        let xDistance = Math.abs(pacman.getMapX() - this.getMapX());\n        let yDistance = Math.abs(pacman.getMapY() - this.getMapY());\n        if (\n            Math.sqrt(xDistance * xDistance + yDistance * yDistance) &lt;=\n            this.range\n        ) {\n            return true;\n        }\n        return false;\n    }\n\n    changeRandomDirection() {\n        let addition = 1;\n        this.randomTargetIndex += addition;\n        this.randomTargetIndex = this.randomTargetIndex % 4;\n    }\n\n    moveProcess() {\n        if (this.isInRange()) {\n            this.target = pacman;\n        } else {\n            this.target = randomTargetsForGhosts&#91;this.randomTargetIndex];\n        }\n        this.changeDirectionIfPossible();\n        this.moveForwards();\n        if (this.checkCollisions()) {\n            this.moveBackwards();\n            return;\n        }\n    }\n\n    moveBackwards() {\n        switch (this.direction) {\n            case 4: \/\/ Right\n                this.x -= this.speed;\n                break;\n            case 3: \/\/ Up\n                this.y += this.speed;\n                break;\n            case 2: \/\/ Left\n                this.x += this.speed;\n                break;\n            case 1: \/\/ Bottom\n                this.y -= this.speed;\n                break;\n        }\n    }\n\n    moveForwards() {\n        switch (this.direction) {\n            case 4: \/\/ Right\n                this.x += this.speed;\n                break;\n            case 3: \/\/ Up\n                this.y -= this.speed;\n                break;\n            case 2: \/\/ Left\n                this.x -= this.speed;\n                break;\n            case 1: \/\/ Bottom\n                this.y += this.speed;\n                break;\n        }\n    }\n\n    checkCollisions() {\n        let isCollided = false;\n        if (\n            map&#91;parseInt(this.y \/ oneBlockSize)]&#91;\n                parseInt(this.x \/ oneBlockSize)\n            ] == 1 ||\n            map&#91;parseInt(this.y \/ oneBlockSize + 0.9999)]&#91;\n                parseInt(this.x \/ oneBlockSize)\n            ] == 1 ||\n            map&#91;parseInt(this.y \/ oneBlockSize)]&#91;\n                parseInt(this.x \/ oneBlockSize + 0.9999)\n            ] == 1 ||\n            map&#91;parseInt(this.y \/ oneBlockSize + 0.9999)]&#91;\n                parseInt(this.x \/ oneBlockSize + 0.9999)\n            ] == 1\n        ) {\n            isCollided = true;\n        }\n        return isCollided;\n    }\n\n    changeDirectionIfPossible() {\n        let tempDirection = this.direction;\n        this.direction = this.calculateNewDirection(\n            map,\n            parseInt(this.target.x \/ oneBlockSize),\n            parseInt(this.target.y \/ oneBlockSize)\n        );\n        if (typeof this.direction == \"undefined\") {\n            this.direction = tempDirection;\n            return;\n        }\n        if (\n            this.getMapY() != this.getMapYRightSide() &amp;&amp;\n            (this.direction == DIRECTION_LEFT ||\n                this.direction == DIRECTION_RIGHT)\n        ) {\n            this.direction = DIRECTION_UP;\n        }\n        if (\n            this.getMapX() != this.getMapXRightSide() &amp;&amp;\n            this.direction == DIRECTION_UP\n        ) {\n            this.direction = DIRECTION_LEFT;\n        }\n        this.moveForwards();\n        if (this.checkCollisions()) {\n            this.moveBackwards();\n            this.direction = tempDirection;\n        } else {\n            this.moveBackwards();\n        }\n        console.log(this.direction);\n    }\n\n    calculateNewDirection(map, destX, destY) {\n        let mp = &#91;];\n        for (let i = 0; i &lt; map.length; i++) {\n            mp&#91;i] = map&#91;i].slice();\n        }\n\n        let queue = &#91;\n            {\n                x: this.getMapX(),\n                y: this.getMapY(),\n                rightX: this.getMapXRightSide(),\n                rightY: this.getMapYRightSide(),\n                moves: &#91;],\n            },\n        ];\n        while (queue.length > 0) {\n            let poped = queue.shift();\n            if (poped.x == destX &amp;&amp; poped.y == destY) {\n                return poped.moves&#91;0];\n            } else {\n                mp&#91;poped.y]&#91;poped.x] = 1;\n                let neighborList = this.addNeighbors(poped, mp);\n                for (let i = 0; i &lt; neighborList.length; i++) {\n                    queue.push(neighborList&#91;i]);\n                }\n            }\n        }\n\n        return 1; \/\/ direction\n    }\n\n    addNeighbors(poped, mp) {\n        let queue = &#91;];\n        let numOfRows = mp.length;\n        let numOfColumns = mp&#91;0].length;\n\n        if (\n            poped.x - 1 >= 0 &amp;&amp;\n            poped.x - 1 &lt; numOfRows &amp;&amp;\n            mp&#91;poped.y]&#91;poped.x - 1] != 1\n        ) {\n            let tempMoves = poped.moves.slice();\n            tempMoves.push(DIRECTION_LEFT);\n            queue.push({ x: poped.x - 1, y: poped.y, moves: tempMoves });\n        }\n        if (\n            poped.x + 1 >= 0 &amp;&amp;\n            poped.x + 1 &lt; numOfRows &amp;&amp;\n            mp&#91;poped.y]&#91;poped.x + 1] != 1\n        ) {\n            let tempMoves = poped.moves.slice();\n            tempMoves.push(DIRECTION_RIGHT);\n            queue.push({ x: poped.x + 1, y: poped.y, moves: tempMoves });\n        }\n        if (\n            poped.y - 1 >= 0 &amp;&amp;\n            poped.y - 1 &lt; numOfColumns &amp;&amp;\n            mp&#91;poped.y - 1]&#91;poped.x] != 1\n        ) {\n            let tempMoves = poped.moves.slice();\n            tempMoves.push(DIRECTION_UP);\n            queue.push({ x: poped.x, y: poped.y - 1, moves: tempMoves });\n        }\n        if (\n            poped.y + 1 >= 0 &amp;&amp;\n            poped.y + 1 &lt; numOfColumns &amp;&amp;\n            mp&#91;poped.y + 1]&#91;poped.x] != 1\n        ) {\n            let tempMoves = poped.moves.slice();\n            tempMoves.push(DIRECTION_BOTTOM);\n            queue.push({ x: poped.x, y: poped.y + 1, moves: tempMoves });\n        }\n        return queue;\n    }\n\n    getMapX() {\n        let mapX = parseInt(this.x \/ oneBlockSize);\n        return mapX;\n    }\n\n    getMapY() {\n        let mapY = parseInt(this.y \/ oneBlockSize);\n        return mapY;\n    }\n\n    getMapXRightSide() {\n        let mapX = parseInt((this.x * 0.99 + oneBlockSize) \/ oneBlockSize);\n        return mapX;\n    }\n\n    getMapYRightSide() {\n        let mapY = parseInt((this.y * 0.99 + oneBlockSize) \/ oneBlockSize);\n        return mapY;\n    }\n\n    changeAnimation() {\n        this.currentFrame =\n            this.currentFrame == this.frameCount ? 1 : this.currentFrame + 1;\n    }\n\n    draw() {\n        canvasContext.save();\n        canvasContext.drawImage(\n            ghostFrames,\n            this.imageX,\n            this.imageY,\n            this.imageWidth,\n            this.imageHeight,\n            this.x,\n            this.y,\n            this.width,\n            this.height\n        );\n        canvasContext.restore();\n        canvasContext.beginPath();\n        canvasContext.strokeStyle = \"red\";\n        canvasContext.arc(\n            this.x + oneBlockSize \/ 2,\n            this.y + oneBlockSize \/ 2,\n            this.range * oneBlockSize,\n            0,\n            2 * Math.PI\n        );\n        canvasContext.stroke();\n    }\n}\n\nlet updateGhosts = () => {\n    for (let i = 0; i &lt; ghosts.length; i++) {\n        ghosts&#91;i].moveProcess();\n    }\n};\n\nlet drawGhosts = () => {\n    for (let i = 0; i &lt; ghosts.length; i++) {\n        ghosts&#91;i].draw();\n    }\n};<\/code><\/pre>\n\n\n\n<p><strong>This is the ghosts Ai code and the code that draws the ghosts on the screen and decides its speed and such.<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>class Pacman {\n    constructor(x, y, width, height, speed) {\n        this.x = x;\n        this.y = y;\n        this.width = width;\n        this.height = height;\n        this.speed = speed;\n        this.direction = 4;\n        this.nextDirection = 4;\n        this.frameCount = 7;\n        this.currentFrame = 1;\n        setInterval(() => {\n            this.changeAnimation();\n        }, 100);\n    }\n\n    moveProcess() {\n        this.changeDirectionIfPossible();\n        this.moveForwards();\n        if (this.checkCollisions()) {\n            this.moveBackwards();\n            return;\n        }\n    }\n\n    eat() {\n        for (let i = 0; i &lt; map.length; i++) {\n            for (let j = 0; j &lt; map&#91;0].length; j++) {\n                if (\n                    map&#91;i]&#91;j] == 2 &amp;&amp;\n                    this.getMapX() == j &amp;&amp;\n                    this.getMapY() == i\n                ) {\n                    map&#91;i]&#91;j] = 3;\n                    score++;\n                }\n            }\n        }\n    }\n\n    moveBackwards() {\n        switch (this.direction) {\n            case DIRECTION_RIGHT: \/\/ Right\n                this.x -= this.speed;\n                break;\n            case DIRECTION_UP: \/\/ Up\n                this.y += this.speed;\n                break;\n            case DIRECTION_LEFT: \/\/ Left\n                this.x += this.speed;\n                break;\n            case DIRECTION_BOTTOM: \/\/ Bottom\n                this.y -= this.speed;\n                break;\n        }\n    }\n\n    moveForwards() {\n        switch (this.direction) {\n            case DIRECTION_RIGHT: \/\/ Right\n                this.x += this.speed;\n                break;\n            case DIRECTION_UP: \/\/ Up\n                this.y -= this.speed;\n                break;\n            case DIRECTION_LEFT: \/\/ Left\n                this.x -= this.speed;\n                break;\n            case DIRECTION_BOTTOM: \/\/ Bottom\n                this.y += this.speed;\n                break;\n        }\n    }\n\n    checkCollisions() {\n        let isCollided = false;\n        if (\n            map&#91;parseInt(this.y \/ oneBlockSize)]&#91;\n                parseInt(this.x \/ oneBlockSize)\n            ] == 1 ||\n            map&#91;parseInt(this.y \/ oneBlockSize + 0.9999)]&#91;\n                parseInt(this.x \/ oneBlockSize)\n            ] == 1 ||\n            map&#91;parseInt(this.y \/ oneBlockSize)]&#91;\n                parseInt(this.x \/ oneBlockSize + 0.9999)\n            ] == 1 ||\n            map&#91;parseInt(this.y \/ oneBlockSize + 0.9999)]&#91;\n                parseInt(this.x \/ oneBlockSize + 0.9999)\n            ] == 1\n        ) {\n            isCollided = true;\n        }\n        return isCollided;\n    }\n\n    checkGhostCollision(ghosts) {\n        for (let i = 0; i &lt; ghosts.length; i++) {\n            let ghost = ghosts&#91;i];\n            if (\n                ghost.getMapX() == this.getMapX() &amp;&amp;\n                ghost.getMapY() == this.getMapY()\n            ) {\n                return true;\n            }\n        }\n        return false;\n    }\n\n    changeDirectionIfPossible() {\n        if (this.direction == this.nextDirection) return;\n        let tempDirection = this.direction;\n        this.direction = this.nextDirection;\n        this.moveForwards();\n        if (this.checkCollisions()) {\n            this.moveBackwards();\n            this.direction = tempDirection;\n        } else {\n            this.moveBackwards();\n        }\n    }\n\n    getMapX() {\n        let mapX = parseInt(this.x \/ oneBlockSize);\n        return mapX;\n    }\n\n    getMapY() {\n        let mapY = parseInt(this.y \/ oneBlockSize);\n\n        return mapY;\n    }\n\n    getMapXRightSide() {\n        let mapX = parseInt((this.x * 0.99 + oneBlockSize) \/ oneBlockSize);\n        return mapX;\n    }\n\n    getMapYRightSide() {\n        let mapY = parseInt((this.y * 0.99 + oneBlockSize) \/ oneBlockSize);\n        return mapY;\n    }\n\n    changeAnimation() {\n        this.currentFrame =\n            this.currentFrame == this.frameCount ? 1 : this.currentFrame + 1;\n    }\n\n    draw() {\n        canvasContext.save();\n        canvasContext.translate(\n            this.x + oneBlockSize \/ 2,\n            this.y + oneBlockSize \/ 2\n        );\n        canvasContext.rotate((this.direction * 90 * Math.PI) \/ 180);\n        canvasContext.translate(\n            -this.x - oneBlockSize \/ 2,\n            -this.y - oneBlockSize \/ 2\n        );\n        canvasContext.drawImage(\n            pacmanFrames,\n            (this.currentFrame - 1) * oneBlockSize,\n            0,\n            oneBlockSize,\n            oneBlockSize,\n            this.x,\n            this.y,\n            this.width,\n            this.height\n        );\n        canvasContext.restore();\n    }\n}\n<\/code><\/pre>\n\n\n\n<p><strong>This is Pacmans code and what allows you to control him and it decides his hit box.<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\n&lt;html lang=\"en\">\n\n&lt;head>\n    &lt;meta charset=\"UTF-8\">\n    &lt;meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    &lt;title>Pacman&lt;\/title>\n&lt;\/head>\n\n&lt;body style=\"margin: 0; background-color: black;\">\n    &lt;canvas id=\"canvas\" width=\"500\" height=\"500\">&lt;\/canvas>\n    &lt;div style=\"display:none;\">\n        &lt;img id=\"animation\" src=\"animations.gif\" width=\"140\" height=\"20\">\n        &lt;img id=\"ghosts\" src=\"ghost.png\" width=\"140\" height=\"20\">\n    &lt;\/div>\n    &lt;script src=\"ghost.js\">&lt;\/script>\n    &lt;script src=\"pacman.js\">&lt;\/script>\n    &lt;script src=\"game.js\">&lt;\/script>\n&lt;\/body>\n\n&lt;\/html><\/code><\/pre>\n\n\n\n<p><strong>This is the main website booter.<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const canvas = document.getElementById(\"canvas\");\nconst canvasContext = canvas.getContext(\"2d\");\nconst pacmanFrames = document.getElementById(\"animation\");\nconst ghostFrames = document.getElementById(\"ghosts\");\n\nlet createRect = (x, y, width, height, color) => {\n    canvasContext.fillStyle = color;\n    canvasContext.fillRect(x, y, width, height);\n};\n\nconst DIRECTION_RIGHT = 4;\nconst DIRECTION_UP = 3;\nconst DIRECTION_LEFT = 2;\nconst DIRECTION_BOTTOM = 1;\nlet lives = 3;\nlet ghostCount = 4;\nlet ghostImageLocations = &#91;\n    { x: 0, y: 0 },\n    { x: 176, y: 0 },\n    { x: 0, y: 121 },\n    { x: 176, y: 121 },\n];\n\n\/\/ Game variables\nlet fps = 30;\nlet pacman;\nlet oneBlockSize = 20;\nlet score = 0;\nlet ghosts = &#91;];\nlet wallSpaceWidth = oneBlockSize \/ 1.6;\nlet wallOffset = (oneBlockSize - wallSpaceWidth) \/ 2;\nlet wallInnerColor = \"black\";\n\n\/\/ we now create the map of the walls,\n\/\/ if 1 wall, if 0 not wall\n\/\/ 21 columns \/\/ 23 rows\nlet map = &#91;\n    &#91;1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],\n    &#91;1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1],\n    &#91;1, 2, 1, 1, 1, 2, 1, 1, 1, 2, 1, 2, 1, 1, 1, 2, 1, 1, 1, 2, 1],\n    &#91;1, 2, 1, 1, 1, 2, 1, 1, 1, 2, 1, 2, 1, 1, 1, 2, 1, 1, 1, 2, 1],\n    &#91;1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1],\n    &#91;1, 2, 1, 1, 1, 2, 1, 2, 1, 1, 1, 1, 1, 2, 1, 2, 1, 1, 1, 2, 1],\n    &#91;1, 2, 2, 2, 2, 2, 1, 2, 2, 2, 1, 2, 2, 2, 1, 2, 2, 2, 2, 2, 1],\n    &#91;1, 1, 1, 1, 1, 2, 1, 1, 1, 2, 1, 2, 1, 1, 1, 2, 1, 1, 1, 1, 1],\n    &#91;0, 0, 0, 0, 1, 2, 1, 2, 2, 2, 2, 2, 2, 2, 1, 2, 1, 0, 0, 0, 0],\n    &#91;1, 1, 1, 1, 1, 2, 1, 2, 1, 1, 2, 1, 1, 2, 1, 2, 1, 1, 1, 1, 1],\n    &#91;2, 2, 2, 2, 2, 2, 2, 2, 1, 2, 2, 2, 1, 2, 2, 2, 2, 2, 2, 2, 2],\n    &#91;1, 1, 1, 1, 1, 2, 1, 2, 1, 2, 2, 2, 1, 2, 1, 2, 1, 1, 1, 1, 1],\n    &#91;0, 0, 0, 0, 1, 2, 1, 2, 1, 1, 1, 1, 1, 2, 1, 2, 1, 0, 0, 0, 0],\n    &#91;0, 0, 0, 0, 1, 2, 1, 2, 2, 2, 2, 2, 2, 2, 1, 2, 1, 0, 0, 0, 0],\n    &#91;1, 1, 1, 1, 1, 2, 2, 2, 1, 1, 1, 1, 1, 2, 2, 2, 1, 1, 1, 1, 1],\n    &#91;1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1],\n    &#91;1, 2, 1, 1, 1, 2, 1, 1, 1, 2, 1, 2, 1, 1, 1, 2, 1, 1, 1, 2, 1],\n    &#91;1, 2, 2, 2, 1, 2, 2, 2, 2, 2, 1, 2, 2, 2, 2, 2, 1, 2, 2, 2, 1],\n    &#91;1, 1, 2, 2, 1, 2, 1, 2, 1, 1, 1, 1, 1, 2, 1, 2, 1, 2, 2, 1, 1],\n    &#91;1, 2, 2, 2, 2, 2, 1, 2, 2, 2, 1, 2, 2, 2, 1, 2, 2, 2, 2, 2, 1],\n    &#91;1, 2, 1, 1, 1, 1, 1, 1, 1, 2, 1, 2, 1, 1, 1, 1, 1, 1, 1, 2, 1],\n    &#91;1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1],\n    &#91;1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],\n];\n\nlet randomTargetsForGhosts = &#91;\n    { x: 1 * oneBlockSize, y: 1 * oneBlockSize },\n    { x: 1 * oneBlockSize, y: (map.length - 2) * oneBlockSize },\n    { x: (map&#91;0].length - 2) * oneBlockSize, y: oneBlockSize },\n    {\n        x: (map&#91;0].length - 2) * oneBlockSize,\n        y: (map.length - 2) * oneBlockSize,\n    },\n];\n\n\/\/ for (let i = 0; i &lt; map.length; i++) {\n\/\/     for (let j = 0; j &lt; map&#91;0].length; j++) {\n\/\/         map&#91;i]&#91;j] = 2;\n\/\/     }\n\/\/ }\n\nlet createNewPacman = () => {\n    pacman = new Pacman(\n        oneBlockSize,\n        oneBlockSize,\n        oneBlockSize,\n        oneBlockSize,\n        oneBlockSize \/ 5\n    );\n};\n\nlet gameLoop = () => {\n    update();\n    draw();\n};\n\nlet gameInterval = setInterval(gameLoop, 1000 \/ fps);\n\nlet restartPacmanAndGhosts = () => {\n    createNewPacman();\n    createGhosts();\n};\n\nlet onGhostCollision = () => {\n    lives--;\n    restartPacmanAndGhosts();\n    if (lives == 0) {\n    }\n};\n\nlet update = () => {\n    pacman.moveProcess();\n    pacman.eat();\n    updateGhosts();\n    if (pacman.checkGhostCollision(ghosts)) {\n        onGhostCollision();\n    }\n};\n\nlet drawFoods = () => {\n    for (let i = 0; i &lt; map.length; i++) {\n        for (let j = 0; j &lt; map&#91;0].length; j++) {\n            if (map&#91;i]&#91;j] == 2) {\n                createRect(\n                    j * oneBlockSize + oneBlockSize \/ 3,\n                    i * oneBlockSize + oneBlockSize \/ 3,\n                    oneBlockSize \/ 3,\n                    oneBlockSize \/ 3,\n                    \"#FEB897\"\n                );\n            }\n        }\n    }\n};\n\nlet drawRemainingLives = () => {\n    canvasContext.font = \"20px Emulogic\";\n    canvasContext.fillStyle = \"white\";\n    canvasContext.fillText(\"Lives: \", 220, oneBlockSize * (map.length + 1));\n\n    for (let i = 0; i &lt; lives; i++) {\n        canvasContext.drawImage(\n            pacmanFrames,\n            2 * oneBlockSize,\n            0,\n            oneBlockSize,\n            oneBlockSize,\n            350 + i * oneBlockSize,\n            oneBlockSize * map.length + 2,\n            oneBlockSize,\n            oneBlockSize\n        );\n    }\n};\n\nlet drawScore = () => {\n    canvasContext.font = \"20px Emulogic\";\n    canvasContext.fillStyle = \"white\";\n    canvasContext.fillText(\n        \"Score: \" + score,\n        0,\n        oneBlockSize * (map.length + 1)\n    );\n};\n\nlet draw = () => {\n    canvasContext.clearRect(0, 0, canvas.width, canvas.height);\n    createRect(0, 0, canvas.width, canvas.height, \"black\");\n    drawWalls();\n    drawFoods();\n    drawGhosts();\n    pacman.draw();\n    drawScore();\n    drawRemainingLives();\n};\n\nlet drawWalls = () => {\n    for (let i = 0; i &lt; map.length; i++) {\n        for (let j = 0; j &lt; map&#91;0].length; j++) {\n            if (map&#91;i]&#91;j] == 1) {\n                createRect(\n                    j * oneBlockSize,\n                    i * oneBlockSize,\n                    oneBlockSize,\n                    oneBlockSize,\n                    \"#342DCA\"\n                );\n                if (j > 0 &amp;&amp; map&#91;i]&#91;j - 1] == 1) {\n                    createRect(\n                        j * oneBlockSize,\n                        i * oneBlockSize + wallOffset,\n                        wallSpaceWidth + wallOffset,\n                        wallSpaceWidth,\n                        wallInnerColor\n                    );\n                }\n\n                if (j &lt; map&#91;0].length - 1 &amp;&amp; map&#91;i]&#91;j + 1] == 1) {\n                    createRect(\n                        j * oneBlockSize + wallOffset,\n                        i * oneBlockSize + wallOffset,\n                        wallSpaceWidth + wallOffset,\n                        wallSpaceWidth,\n                        wallInnerColor\n                    );\n                }\n\n                if (i &lt; map.length - 1 &amp;&amp; map&#91;i + 1]&#91;j] == 1) {\n                    createRect(\n                        j * oneBlockSize + wallOffset,\n                        i * oneBlockSize + wallOffset,\n                        wallSpaceWidth,\n                        wallSpaceWidth + wallOffset,\n                        wallInnerColor\n                    );\n                }\n\n                if (i > 0 &amp;&amp; map&#91;i - 1]&#91;j] == 1) {\n                    createRect(\n                        j * oneBlockSize + wallOffset,\n                        i * oneBlockSize,\n                        wallSpaceWidth,\n                        wallSpaceWidth + wallOffset,\n                        wallInnerColor\n                    );\n                }\n            }\n        }\n    }\n};\n\nlet createGhosts = () => {\n    ghosts = &#91;];\n    for (let i = 0; i &lt; ghostCount * 2; i++) {\n        let newGhost = new Ghost(\n            9 * oneBlockSize + (i % 2 == 0 ? 0 : 1) * oneBlockSize,\n            10 * oneBlockSize + (i % 2 == 0 ? 0 : 1) * oneBlockSize,\n            oneBlockSize,\n            oneBlockSize,\n            pacman.speed \/ 2,\n            ghostImageLocations&#91;i % 4].x,\n            ghostImageLocations&#91;i % 4].y,\n            124,\n            116,\n            6 + i\n        );\n        ghosts.push(newGhost);\n    }\n};\n\ncreateNewPacman();\ncreateGhosts();\ngameLoop();\n\nwindow.addEventListener(\"keydown\", (event) => {\n    let k = event.keyCode;\n    setTimeout(() => {\n        if (k == 37 || k == 65) {\n            \/\/ left arrow or a\n            pacman.nextDirection = DIRECTION_LEFT;\n        } else if (k == 38 || k == 87) {\n            \/\/ up arrow or w\n            pacman.nextDirection = DIRECTION_UP;\n        } else if (k == 39 || k == 68) {\n            \/\/ right arrow or d\n            pacman.nextDirection = DIRECTION_RIGHT;\n        } else if (k == 40 || k == 83) {\n            \/\/ bottom arrow or s\n            pacman.nextDirection = DIRECTION_BOTTOM;\n        }\n    }, 1);\n});\n<\/code><\/pre>\n\n\n\n<p><strong>This starts the game and draws the map and its hit box and also checks what direction pacmans facing.<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Today I made Pacman This is the ghosts Ai code and the code that draws the ghosts on the screen [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[1],"tags":[],"class_list":["post-116","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/theroyalscode.com\/students\/l_rankins\/wp-json\/wp\/v2\/posts\/116","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theroyalscode.com\/students\/l_rankins\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theroyalscode.com\/students\/l_rankins\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/l_rankins\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/l_rankins\/wp-json\/wp\/v2\/comments?post=116"}],"version-history":[{"count":1,"href":"https:\/\/theroyalscode.com\/students\/l_rankins\/wp-json\/wp\/v2\/posts\/116\/revisions"}],"predecessor-version":[{"id":117,"href":"https:\/\/theroyalscode.com\/students\/l_rankins\/wp-json\/wp\/v2\/posts\/116\/revisions\/117"}],"wp:attachment":[{"href":"https:\/\/theroyalscode.com\/students\/l_rankins\/wp-json\/wp\/v2\/media?parent=116"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/l_rankins\/wp-json\/wp\/v2\/categories?post=116"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/l_rankins\/wp-json\/wp\/v2\/tags?post=116"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}