본문 바로가기
728x90

코딩/기억력 게임4

ChatGPT로 기억력 게임 만들기(4) 소스 최종본 See the Pen Untitled by imissrose (@imissrose) on CodePen. 브라우저에서 테스트 2023. 3. 22.
ChatGPT로 기억력 게임 만들기(3) ChatGPT에 추가 질문 .card .back { position: absolute; top: 0; left: 0; width: 100%; height: 100%; /*background-color: #0077be;*/ /*background-image: url('grid.png');*/ background-size: 100% 100%; border-radius: 5px; backface-visibility: hidden; transform: rotateY(180deg); } background-image 대신 '##########'으로 채우고 싶습니다. 사이즈에 맞게 '#'를 채우고 싶습니다. 어떻게 하면 될까요? .card .back 요소를 요소의 크기에 맞게 조정되는 # 문자의 반복 패턴으로 채우.. 2023. 3. 22.
ChatGPT로 기억력 게임 만들기(2) ChatGPT에 추가 질문 dataset에 대한 정의가 없습니다. 코딩해주세요. 메모리 게임에 대한 데이터 세트를 정의하려면 게임에 사용할 이미지 URL 배열을 만들어야 합니다. 다음은 데이터세트를 정의하는 방법의 예입니다. let dataset = [ 'image1.png', 'image1.png', 'image2.png', 'image2.png', 'image3.png', 'image3.png', 'image4.png', 'image4.png', 'image5.png', 'image5.png', 'image6.png', 'image6.png', 'image7.png', 'image7.png', 'image8.png', 'image8.png' ]; 이 예에서는 각 이미지가 두 번 나타나 총 16개의 카.. 2023. 3. 22.
ChatGPT로 기억력 게임 만들기(1) ChatGPT에 질문 같은 그림찾기 메모리 게임을 html, css, javascript로 코딩하려고 합니다. html, css, javascript 파일을 분리해주고, 먼저 html, css부터 코딩해주세요 물론, 다음은 동일한 그림 찾기 메모리 게임에 대한 HTML 및 CSS 코드의 예입니다. HTML: Same Picture Finding Memory Game 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; fle.. 2023. 3. 22.
반응형