ChatGPT로 기억력 게임 만들기(1)

728x90

ChatGPT에 질문

같은 그림찾기 메모리 게임을 html, css, javascript로 코딩하려고 합니다. html, css, javascript 파일을 분리해주고, 먼저 html, css부터 코딩해주세요

물론, 다음은 동일한 그림 찾기 메모리 게임에 대한 HTML 및 CSS 코드의 예입니다.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Same Picture Finding Memory Game</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h2>Same Picture Finding Memory Game</h2>
  </header>
  <main>
    <div class="game-container">
      <div class="card">
        <div class="front"></div>
        <div class="back"></div>
      </div>
      <div class="card">
        <div class="front"></div>
        <div class="back"></div>
      </div>
      <div class="card">
        <div class="back"></div>
      </div>
    </div>
  </main>
<script src="script.js"></script>
</body>
</html>

CSS:

body {
  background-color: #eee;
  font-family: sans-serif;
  margin: 0;
  padding: 0;
}

header {
  background-color: #f8f8f8;
  padding: 1em;
}

h1 {
  margin: 0;
}

.game-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 2em 0;
}

.card {
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  margin: 0.5em;
  position: relative;
  width: calc(25% - 1em);
  height: 0;
  padding-bottom: calc(25% - 1em);
  cursor: pointer;
}

.card .front {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('image.jpg'); /* replace with your image */
  background-size: cover;
  border-radius: 5px;
  backface-visibility: hidden;
}

.card .back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #0077be; /* replace with your desired color */
  border-radius: 5px;
  backface-visibility: hidden;
  transform: rotateY(180deg);
}

CSS는 예시일 뿐이며 필요에 따라 사용자 정의할 수 있습니다. 또한 image.jpg를 원하는 이미지로 교체해야 합니다.

같은 그림찾기 메모리 게임의 javascript를 코딩해주세요.

물론! 다음은 동일한 그림 찾기 메모리 게임에 대한 JavaScript 코드입니다.

let cards = document.querySelectorAll('.card');
let flippedCards = [];
let matches = 0;
let attempts = 0;
let maxAttempts = 10;
let lockBoard = false;

function flipCard() {
  if (lockBoard) return;
  if (this === flippedCards[0]) return;
  this.classList.add('flip');

  if (flippedCards.length === 0) {
    flippedCards.push(this);
    return;
  }

  let secondCard = this;
  let firstCard = flippedCards[0];
  flippedCards = [];

  if (secondCard.dataset.card === firstCard.dataset.card) {
    matches++;
    attempts++;
    if (matches === cards.length / 2) {
      alert(`Congratulations! You completed the game in ${attempts} attempts!`);
    }
  } else {
    attempts++;
    lockBoard = true;
    setTimeout(() => {
      firstCard.classList.remove('flip');
      secondCard.classList.remove('flip');
      lockBoard = false;
    }, 1000);
  }

  if (attempts === maxAttempts) {
    alert('Sorry, you have exceeded the maximum number of attempts.');
    resetGame();
  }
}

function resetGame() {
  cards.forEach(card => {
    card.classList.remove('flip');
  });
  flippedCards = [];
  matches = 0;
  attempts = 0;
}

(function shuffleCards() {
  cards.forEach(card => {
    let randomPos = Math.floor(Math.random() * cards.length);
    card.style.order = randomPos;
  });
})();

cards.forEach(card => card.addEventListener('click', flipCard));

이 JavaScript 코드는 HTML 및 CSS 파일에 상호 작용을 추가합니다. 이 코드는 카드의 클릭 이벤트를 수신하고 뒤집습니다. 뒤집힌 두 장의 카드가 일치하는지 확인하고 맞으면 뒤집힌 상태로 유지합니다. 일치하지 않으면 다시 뒤집기 전에 잠시 기다립니다. 이 코드는 또한 시도 횟수를 추적하고 최대 시도 횟수에 도달하면 게임을 재설정합니다. 마지막으로 코드는 페이지가 로드될 때 카드를 섞습니다.

개발환경 설정

- Visual Studio Code 설치

Visual Studio Code"는 HTML, CSS 및 JavaScript를 비롯한 다양한 프로그래밍 언어로 코드를 작성하고 편집하는 데 사용할 수 있는 무료 오픈 소스 코드 편집기입니다. 전 세계 개발자들이 사용하는 인기 있는 코드 편집기입니다.

Visual Studio Code 공식 웹사이트로 이동하여 운영 체제에 맞는 설치 프로그램을 다운로드합니다.

https://code.visualstudio.com/Download

- HTML, CSS 및 JavaScript 파일 생성

1. 탐색기에서 memory-game 폴더 생성

2. Visual Studio Code에서 File -> Open Folder... -> memory-game 폴더 선택

버튼 클릭하여 index.html, script.js, style.css 파일 생성하고 chatGPT에서 제공한 소스를 복사해서 붙여넣습니다.

브라우저에서 테스트

탐색기에서 memory-game 폴더로 이동하여 index.html 더블클릭하면 브라우저에서 프로그램이 실행됩니다.

'코딩 > 기억력 게임' 카테고리의 다른 글

ChatGPT로 기억력 게임 만들기(4) (0)	2023.03.22
ChatGPT로 기억력 게임 만들기(3) (0)	2023.03.22
ChatGPT로 기억력 게임 만들기(2) (0)	2023.03.22