Table of Contents

재미와 학습을 결합한 자바스크립트 미니게임

들어가며

자바스크립트는 쉽게 배울 수 있는 프로그래밍 언어로, 누구나 쉽게 접근할 수 있습니다. 하지만 프로그래밍을 공부하면서 재미도 놓치지 않고 높은 효율로 학습할 수 있는 방법을 찾기란 쉽지 않습니다. 이번 포스트에서는 자바스크립트 미니게임을 소개하며, 재미와 학습을 결합할 수 있는 방법을 제공합니다.

1. 가위바위보 게임


let userChoice = prompt("가위, 바위, 보 중에 선택하세요.");

let computerChoice = Math.random();

if (computerChoice < 0.34) {
	computerChoice = "가위";
} else if(computerChoice <= 0.67) {
	computerChoice = "바위";
} else {
	computerChoice = "보";
}

if (userChoice === computerChoice) {
	alert("비겼습니다!");
} else if (userChoice === "가위") {
	if (computerChoice === "보") {
		alert("이겼습니다!");
	} else {
		alert("졌습니다!");
	}
} else if (userChoice === "바위") {
	if (computerChoice === "가위") {
		alert("이겼습니다!");
	} else {
		alert("졌습니다!");
	}
} else if (userChoice === "보") {
	if (computerChoice === "바위") {
		alert("이겼습니다!");
	} else {
		alert("졌습니다!");
	}
} else {
	alert("잘못된 입력입니다!");
}

가위바위보 게임은 프로그래밍을 배울 때 가장 많이 다루어지는 게임 중 하나입니다. 이 게임은 사용자가 가위, 바위, 보 중에 하나를 선택하면 컴퓨터와 대결하는 게임입니다. 사용자의 선택과 컴퓨터의 선택을 비교하여 승패를 가립니다. 이 게임을 통해 사용자는 조건문과 변수를 활용하는 방법을 배울 수 있습니다.

2. 빙고 게임


let bingoNums = [];
let min = 1;
let max = 25;

for (let i = min; i <= max; i++) {
	bingoNums.push(i);
}

function shuffle(array) {
	for (let i = 0; i < array.length; i++) {
		let randomIndex = Math.floor(Math.random() * array.length);
		let temp = array[i];
		array[i] = array[randomIndex];
		array[randomIndex] = temp;
	}
}

shuffle(bingoNums);

let bingo = [];
for (let i = 0; i < 5; i++) {
	bingo[i] = [];
}

for (let i = 0; i < 5; i++) {
	for (let j = 0; j < 5; j++) {
		bingo[i][j] = bingoNums[i * 5 + j];
	}
}

let count = 0;
let bingoLine = 0;

while (bingoLine < 5) {
	let userNum = prompt("빙고판에서 숫자 하나를 입력하세요.");

	let isFound = false;

	for (let i = 0; i < 5; i++) {
		for (let j = 0; j < 5; j++) {
			if (bingo[i][j] == userNum) {
				bingo[i][j] = "X";
				isFound = true;
				break;
			}
		}
		if (isFound) {
			break;
		}
	}

	count++;

	for (let i = 0; i < 5; i++) {
		if (bingo[i][0] == "X" &&
		    bingo[i][1] == "X" &&
		    bingo[i][2] == "X" &&
		    bingo[i][3] == "X" &&
		    bingo[i][4] == "X") {
			bingoLine++;
		}
		if (bingo[0][i] == "X" &&
		    bingo[1][i] == "X" &&
		    bingo[2][i] == "X" &&
		    bingo[3][i] == "X" &&
		    bingo[4][i] == "X") {
			bingoLine++;
		}
	}

	if (bingo[0][0] == "X" &&
	    bingo[1][1] == "X" &&
	    bingo[2][2] == "X" &&
	    bingo[3][3] == "X" &&
	    bingo[4][4] == "X") {
		bingoLine++;
	}
	if (bingo[0][4] == "X" &&
	    bingo[1][3] == "X" &&
	    bingo[2][2] == "X" &&
	    bingo[3][1] == "X" &&
	    bingo[4][0] == "X") {
		bingoLine++;
	}
}

alert("빙고! 축하합니다. " + count + "번만에 완성하셨습니다!")

빙고 게임은 랜덤하게 생성된 숫자 25개를 빙고판에 무작위로 배치한 후, 사용자가 빙고판에서 하나의 숫자를 선택하는 게임입니다. 사용자가 선택한 숫자는 "X"로 바뀌며, 가로, 세로, 대각선 방향으로 "X"가 5개가 되면 빙고하게 됩니다. 이 게임은 배열과 반복문 등의 개념을 활용하여 구현할 수 있으며, 사용자가 무작위로 선택하는 것과 컴퓨터가 선택하는 것을 구분하여 구현해볼 수도 있습니다.

3. 슈팅 게임


let spaceship = document.getElementById("spaceship");
let bullet = document.getElementById("bullet");
let alien = document.getElementById("alien");

let bulletTop = parseInt(window.getComputedStyle(bullet).getPropertyValue("top"));
let alienLeft = parseInt(window.getComputedStyle(alien).getPropertyValue("left"));

function bulletFire() {
	let bulletInterval = setInterval(() => {
		if (bulletTop > 0) {
			bulletTop -= 5;
			bullet.style.top = bulletTop + "px";
			if (bulletTop == 0) {
				clearInterval(bulletInterval);
			}
			if (Math.abs(bulletTop - alienLeft) < 50 && Math.abs(spaceshipLeft - alienLeft) < 50) {
				alert("승리!");
				clearInterval(bulletInterval);
			}
		} else {
			clearInterval(bulletInterval);
		}
	}, 10);
}

window.addEventListener("keydown", (event) => {
	let spaceshipLeft = parseInt(window.getComputedStyle(spaceship).getPropertyValue("left"));
	if (event.key == "ArrowLeft" && spaceshipLeft > 0) {
		spaceshipLeft -= 10;
		spaceship.style.left = spaceshipLeft + "px";
	} else if (event.key == "ArrowRight" && spaceshipLeft < 460) {
		spaceshipLeft += 10;
		spaceship.style.left = spaceshipLeft + "px";
	} else if (event.key == "ArrowUp") {
		bullet.style.left = parseInt(window.getComputedStyle(spaceship).getPropertyValue("left")) + 25 + "px";
		bullet.style.display = "block";
		bulletTop = parseInt(window.getComputedStyle(bullet).getPropertyValue("top"));
		bulletFire();
	}
});

let alienInterval = setInterval(() => {
	alienLeft += 10;
	alien.style.left = alienLeft + "px";
	if (alienLeft >= 470) {
		clearInterval(alienInterval);
		alert("패배!");
	}
}, 50);

슈팅 게임은 사용자가 우주선을 조종하여 외계인을 사냥하는 게임입니다. 사용자의 우주선은 왼쪽, 오른쪽으로 이동할 수 있으며, 우주선에서 총알을 발사하여 외계인을 제거합니다. 이 게임은 웹 페이지에서 간단하게 구현할 수 있으며, 이벤트를 처리하는 방법과 DOM 요소의 스타일을 변경하는 방법 등을 배울 수 있습니다.