본문 바로가기
728x90

메모리게임7

ChatGPT로 천자문 게임 만들기(3) 네트리파이(Netlify)에 프로그램 배포 네트리파이(Netlify) 웹호스팅 네트리파이(Netlify)는 간편하게 정적 사이트를 호스팅할 수 있는 웹 호스팅 서비스입니다. 이 글에서는 네트리파이의 기능과 회원가입부터 배포까지의 과정을 상세하게 안내합니다. 네트리파이( bestwizard.tistory.com 브라우저에서 실행 https://chunjamun-game.netlify.app/index.html?fileName=chunjamun&num=1 천자문 게임 chunjamun-game.netlify.app 천자문 게임 2023. 4. 3.
ChatGPT로 천자문 게임 만들기(2) 기억력 게임 카피해서 소스 수정 See the Pen chunjamun-game by imissrose (@imissrose) on CodePen. chunjamun.json [ {"num": "1", "initialSound": "ㅊㅈㅎㅎ ㅇㅈㅎㅎ", "soundAndMeaningText": "천지현황 우주홍황 天地玄黃 宇宙洪荒", "meaningText": "하늘은 검고 땅은 누렇고, 우주는 넓고 거칠다." }, {"num": "2", "initialSound": "ㅇㅇㅇㅊ ㅈㅅㅇㅈ", "soundAndMeaningText": "일월영측 진수열장 日月盈昃 辰宿列張", "meaningText": "해와 달은 차고 기울며, 별과 별자리는 열을 이루어 펼쳐져 있다." } ] chunjamun1.json [.. 2023. 4. 2.
ChatGPT로 천자문 게임 만들기(1) ChatGPT에 질문 데이터셋을 불러와서 카드에 보여주고 싶습니다. 데이터 셋은 이렇게 선언했습니다.let dataset = [ `Hello`, `Hello`, ... ]; json 파일에서 조회하고 싶습니다. 천자문 중 앞에 8글자를 json 형식으로 구현해주세요. 천자문의 첫 8자(천지현황 우주홍황)을 JSON 형식으로 구현하면 다음과 같이 작성할 수 있습니다. [ { "hanja": "天", "meaning": "천지(天地)의 천(天), 하늘", "pronunciation": "천" }, { "hanja": "地", "meaning": "천지(天地)의 지(地), 땅", "pronunciation": "지" }, { "hanja": "玄", "meaning": "신비로운, 깊은", "pronuncia.. 2023. 4. 2.
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.
반응형