![재미와 학습을 동시에! 인기 있는 자바스크립트 미니게임 추천](https://javascriptsclass.com/wp-content/uploads/2023/04/CUsersvoovaDocuments카카오톡-받은-파일워프포_GPT_0415_무제한버전87245934-df5c-4f69-91eb-0bc7d1e45c4a.png)
재미와 학습을 동시에! 인기 있는 자바스크립트 미니게임 추천
재미와 학습을 동시에! 인기 있는 자바스크립트 미니게임 추천
1. Memory Game
const cards = document.querySelectorAll('.memory-card');
let hasFlippedCard = false;
let lockBoard = false;
let firstCard, secondCard;
function flipCard() {
if (lockBoard) return;
if (this === firstCard) return;
this.classList.add('flip');
if (!hasFlippedCard) {
hasFlippedCard = true;
firstCard = this;
return;
}
secondCard = this;
checkForMatch();
}
function checkForMatch() {
let isMatch = firstCard.dataset.framework === secondCard.dataset.framework;
isMatch ? disableCards() : unflipCards();
}
function disableCards() {
firstCard.removeEventListener('click', flipCard);
secondCard.removeEventListener('click', flipCard);
resetBoard();
}
function unflipCards() {
lockBoard = true;
setTimeout(() => {
firstCard.classList.remove('flip');
secondCard.classList.remove('flip');
resetBoard();
}, 1500);
}
function resetBoard() {
[hasFlippedCard, lockBoard] = [false, false];
[firstCard, secondCard] = [null, null];
}
(function shuffle() {
cards.forEach(card => {
let randomPos = Math.floor(Math.random() * 12);
card.style.order = randomPos;
});
})();
cards.forEach(card => card.addEventListener('click', flipCard));
“Memory Game”은 자바스크립트로 구현한 간단한 기억력 게임입니다. 플레이어는 일치하는 쌍의 카드를 찾아야합니다. 이 게임은 HTML과 CSS를 사용하여 카드를 디자인하고 자바스크립트를 사용하여 상호작용 효과를 구현합니다.
2. Snake Game
const canvas = document.getElementById("snake");
const ctx = canvas.getContext("2d");
const box = 32;
const ground = new Image();
ground.src = "img/ground.png";
const foodImg = new Image();
foodImg.src = "img/food.png";
let snake = [];
snake[0] = {
x : 9 * box,
y : 10 * box
};
let food = {
x : Math.floor(Math.random()*17+1) * box,
y : Math.floor(Math.random()*15+3) * box
};
let score = 0;
let d;
document.addEventListener("keydown",direction);
function direction(event){
if(event.keyCode == 37 && d != "RIGHT"){
d = "LEFT";
}else if(event.keyCode == 38 && d != "DOWN"){
d = "UP";
}else if(event.keyCode == 39 && d != "LEFT"){
d = "RIGHT";
}else if(event.keyCode == 40 && d != "UP"){
d = "DOWN";
}
}
function collision(head,array){
for(let i = 0; i < array.length; i++){
if(head.x == array[i].x && head.y == array[i].y){
return true;
}
}
return false;
}
function draw(){
ctx.drawImage(ground,0,0);
for( let i = 0; i < snake.length ; i++){
ctx.fillStyle = ( i == 0 )? "green" : "white";
ctx.fillRect(snake[i].x,snake[i].y,box,box);
ctx.strokeStyle = "red";
ctx.strokeRect(snake[i].x,snake[i].y,box,box);
}
ctx.drawImage(foodImg, food.x, food.y);
let snakeX = snake[0].x;
let snakeY = snake[0].y;
if( d == "LEFT") snakeX -= box;
if( d == "UP") snakeY -= box;
if( d == "RIGHT") snakeX += box;
if( d == "DOWN") snakeY += box;
if(snakeX == food.x && snakeY == food.y){
score++;
food = {
x : Math.floor(Math.random()*17+1) * box,
y : Math.floor(Math.random()*15+3) * box
}
}else{
snake.pop();
}
let newHead = {
x : snakeX,
y : snakeY
}
if(snakeX < box || snakeX > 17 * box || snakeY < 3*box || snakeY > 17*box || collision(newHead,snake)){
clearInterval(game);
}
snake.unshift(newHead);
ctx.fillStyle = "white";
ctx.font = "45px Changa one";
ctx.fillText(score,2*box,1.6*box);
}
let game = setInterval(draw,100);
“Snake Game”은 전통적인 비디오 게임의 선구자인 노키아 모바일 전화기에서 시작한 게임입니다. “Snake Game”은 자바스크립트로 구현이 가능하며, HTML과 CSS를 사용하여 사용자 인터페이스를 설계합니다. 이 게임은 사용자가 조작하는 뱀을 다룹니다. 뱀은 음식을 먹으면 점수가 획득됩니다. 뱀이 벽이나 자신의 몸과 충돌하면 게임에서 즉시 탈락됩니다.
자바스크립트 미니게임은 사용자에게 즐거움과 함께 새로운 기술을 배울 수 있는 기회를 제공합니다. 이 게임들은 쉽게 접근하고, 재미있으며, 도전적인 퍼즐과 게임요소를 가지고 있습니다. 미니게임을 통해 프로그래밍 언어를 배우는 것은 더욱 흥미롭고 직관적입니다.
자바스크립트 미니게임