Pac-man Game with Vanilla JS, HTML, CSS(Christmas Theme)🎅🏻🎄🎁

Emily Scone·2021년 1월 9일

CSS Christmas JavaScript PACMAN game html

SideProject

목록 보기

2/2

키보드로 플레이, 물론 모바일로도 가능하다.

Vanilla Javascript, CSS, HTML 을 사용해서 만든 팩맨.
크리스마스가 다가올때쯤 만들어서 팩맨 로고에 크리스마스 모자를 씌였고
로고를 누르면 음악재생, arrow key로 플레이, 게임시작 버튼, 게임, 최고기록, 게임오버, 성공, 먹이 먹으면 무적으로 변하는 것을 구현했다.

👩‍💻Can you JavaScript it?

After 2 months of learning JS, CSS and HTML(before knowing the existance of REACT) I wanted to push myself to see if I can Javascript games. Here I present my most proud achievement of all :)

Breaking-down codes

주소 : https://emilyoun.github.io/pacman-christmas/
Github 레포 : https://github.com/emilyoun/pacman-christmas

CLick logo to turn on || off music

이거 한번 만들어두고 이곳저곳 잘 쓰고 있다 css 꼭 넣어줘야 귀여움

HTML

 <audio id="audio" style="display:none;" src="Fun Christmas - AShamaluevMusic.mp3" controls autoplay loop onloadeddata="setHalfVolume()">

JavaScript

let on_off = document.querySelector(".musicOn");

on_off.onclick = function () {
	if (audio.paused) {
		audio.play();
	}
	else {
		audio.pause();
	}
}

CSS 로고 누르면 귀엽게 들어가는 효과

#logo{
	width: 700px;
}

#logo:active{
    transform: scale(1, 0.9);
    transition: transform 0.2s color 0.2s;
    }

Creating a map

0 = 먹이, 1 = 벽, 2 = 고스트 부활 장소, 3 = 부스트, 4 = 빈공간 을 잡고 array 하나 만들어서(layout) 하나하나 그려준다

document.getElementById("play").addEventListener("click", function game() {
	const scoreDisplay = document.getElementById("score");
	const width = 28; // 28*28 = 784 squares
	const grid = document.querySelector(".grid")
	const layout = [
		1,1,1,1,1,1,1,1,4,4,1,1,1,4,4,1,1,1,1,1,1,1,1,1,1,1,1,1,
		1,0,0,0,0,0,0,1,4,4,1,3,1,4,4,1,0,0,0,0,0,0,0,0,0,0,3,1,
		1,0,1,1,1,1,0,1,1,1,1,0,1,4,4,1,1,1,1,0,1,0,1,1,1,0,1,1,
		1,3,1,4,4,1,0,0,0,0,0,0,1,4,4,4,4,4,1,0,0,0,1,4,1,0,1,4,
		1,0,1,4,4,1,0,1,1,0,1,0,1,4,4,4,4,4,1,0,1,0,1,4,1,0,1,4,
		1,0,1,1,1,1,0,0,0,0,1,0,1,1,1,1,1,1,1,0,1,0,1,1,1,0,1,1,
		1,0,0,0,0,0,0,1,1,0,1,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,1,
		1,0,1,1,1,1,0,3,1,0,1,1,1,0,1,0,1,1,1,0,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,1,0,1,0,0,0,0,0,0,1,
		1,1,1,1,1,1,0,1,0,1,0,1,1,1,1,1,1,0,0,0,0,0,1,1,1,1,1,1,
		4,4,4,4,4,1,0,1,1,1,0,0,0,0,0,0,0,0,1,1,1,0,1,4,4,4,4,4,
		4,4,4,4,4,1,0,0,0,0,0,1,1,4,4,1,1,0,0,0,0,0,1,4,4,4,4,4,
		1,1,1,1,1,1,0,1,1,1,0,1,2,2,2,2,1,0,1,1,1,0,1,1,1,1,1,1,
		4,0,0,0,0,0,0,1,4,1,0,2,2,2,2,2,2,0,1,4,1,0,0,0,0,0,0,4,
		1,1,1,1,1,1,0,1,1,1,0,1,2,2,2,2,1,0,1,1,1,0,1,1,1,1,1,1,
		4,4,4,4,4,1,0,0,0,0,0,1,1,4,4,1,1,0,0,0,0,0,1,4,4,4,4,4,
		4,4,4,4,4,1,0,1,1,1,0,0,0,0,0,0,0,0,1,0,1,0,1,4,4,4,4,4,
		1,1,1,1,1,1,0,0,0,0,0,1,1,1,1,1,1,0,1,3,1,0,1,1,1,1,1,1,
		1,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,3,1,
		1,0,1,1,1,1,0,3,1,0,0,1,1,1,1,1,1,0,0,0,0,0,1,0,1,1,1,1,
		1,0,0,0,0,0,0,0,0,0,1,1,4,4,4,4,1,1,0,1,1,0,1,0,1,4,4,4,
		1,1,1,0,1,1,1,1,1,0,1,4,4,4,4,4,4,1,0,0,0,0,1,0,1,4,4,4,
		4,4,1,0,1,4,4,4,1,0,1,4,4,4,4,4,4,1,0,1,1,1,1,0,1,1,1,1,
		1,1,1,0,1,1,1,1,1,0,1,1,1,4,4,1,1,1,0,0,0,0,0,0,0,0,0,1,
		1,0,0,0,0,0,0,0,0,0,0,0,1,4,4,1,0,0,0,1,1,1,1,0,1,1,0,1,
		1,3,1,1,1,1,1,1,1,1,1,0,1,4,4,1,0,1,0,1,4,4,1,0,1,3,0,1,
		1,0,0,0,0,0,0,0,0,0,0,0,1,4,4,1,0,0,0,1,4,4,1,0,0,0,0,1,
		1,1,1,1,1,1,1,1,1,1,1,1,1,4,4,1,1,1,1,1,4,4,1,1,1,1,1,1]; 
	const squares = [];

and traverse a for loop to place each element in the right place.

// Draw the grid
	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");
			} else if (layout[i] === 4) {
				squares[i].classList.add("empty");
			}
		}
	}
	createBoard();

Best Score

function bestScoreCount () {
		let higher;
		let bestScore = window.localStorage.getItem(higher);
		window.localStorage.setItem(bestScore, higher);
		const bestScoreDisplay = document.getElementById("bestScore");
		if (bestScore == null) {
			bestScore = score;
			window.localStorage.setItem(higher, bestScore);
		} else if (score < Number(window.localStorage.getItem(higher))) {
			bestScore = score;	
		} else if (score > Number(window.localStorage.getItem(higher))) {
			window.localStorage.clear();
			bestScore = score;
			window.localStorage.setItem(higher, bestScore);
		}
		bestScoreDisplay.innerHTML = window.localStorage.getItem(higher);
	}
	bestScoreCount();

Starting position of Pac man

	let pacmanCurrentIndex = 518;
	squares[pacmanCurrentIndex].classList.add("pac-man");

move pac man

	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;
					squares[pacmanCurrentIndex].style.transform = "scaleX(-1) rotate(95deg)";
					// If Pac-Man is on the left exit
					if (pacmanCurrentIndex - 1 === 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;
					squares[pacmanCurrentIndex].style.transform = "scaleY(1)";
				}
				break;
			case 39:
				if (pacmanCurrentIndex % width < width - 1 && !squares[pacmanCurrentIndex +1].classList.contains("wall") && !squares[pacmanCurrentIndex +1].classList.contains("ghost-lair")){ pacmanCurrentIndex += 1;
					squares[pacmanCurrentIndex].style.transform = "scaleY(1) rotate(95deg)";
					// If Pac-Man is on the right exit
					if(pacmanCurrentIndex + 1 === 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;
					squares[pacmanCurrentIndex].style.transform = "rotate(190deg)";
				}
				break;
		}

		squares[pacmanCurrentIndex].classList.add("pac-man");

		pacDotEaten();
		powerPelletEaten();
		checkForGameOver();
		checkForWin();
	}

	document.addEventListener("keydown", movePacman);

Move on mobile phone

e.touches 를 주었는데 자세한건 깃헙 레포에 app.js에서 확인 가능하다.

저녁에 시작해서 자기전에 끝내려 했는데 욕심이 생겨서 오후 8시쯤 시작해서 새벽 4시쯤 끝났다. 대략 8시간정도 걸렸지만 결과물이 마음에 들었던 프로젝트. 할때마다 뿌듯해서 아직도 가끔 플레이한다 😊
이렇게 폴더안에 잠자고있는 Side Project들이 많은데(blogging materials) 차근차근 업데이트 할 예정.

Emily Scone

Hello world

이전 포스트

리액트를 이용한 Facebook 클론코딩

8개의 댓글

Minjun Kim

2021년 1월 11일

대학교에서 과제로 JS로 팩맨 만들었던 경험이 있는데.. 추억이네요.
저는 그때 Canvas를 사용했었어요.

그때 작성했던 코드, 다시 한번 보고 싶은데 찾을수가 없군요 ㅠ 그때는 GitHub을 쓸 줄 몰랐어서 ㅋㅋㅋ 아쉬워요.

참, 링크가 잘못 달렸어요~

1개의 답글

기록일기📫

2021년 1월 11일

와...! 엄청 고퀄리티네요!ㅋㅋㅋㅋㅋ

잘 읽었습니다😊

답글 달기

Amora Potter

2024년 5월 22일

Keep up the great work, and continue exploring JavaScript game development! If you have specific questions or need further assistance with any part of your code, slope feel free to ask.

답글 달기

Sophie Maynard

2025년 2월 13일

겉보기에 평범한 주제를 가져와 신선하고 흥미진진한 관점을 가져와 매력적으로 만듭니다. 정보를 유익하고 즐겁게 읽을 수 있는 것으로 바꾸는 능력은 진정한 기술입니다. 교육적일 뿐만 아니라 즐거움을 주는 콘텐츠를 보는 것은 항상 상쾌합니다. https://littletotheleftgame.com

1개의 답글

alcor zhang

2025년 3월 25일

Keep up the great work, and continue exploring JavaScript game development! If you have specific questions or need further assistance with any part of your code https://repomod.com

답글 달기

bear clicker

2025년 6월 18일

어머! Vanilla JS로 이렇게 귀여운 팩맨 게임을 만들다니 대단해요! 크리스마스 테마도 너무 깜찍하고, BearClicker 같은 간단한 게임도 좋지만 이런 퀄리티 넘치는 작품도 멋지네요! 나도 bear clicker 같은 나만의 게임을 만들어보고 싶어지네!

답글 달기