ChatGPT 와 함께 할리갈리 보드게임 만들기 두번째
안녕하세요 인공지능하마 입니다.
문득 할리갈리 보드게임 만들기 포스트를 빨리 써야 겠다는 생각이 들었습니다.
개발 경험을 살려 ChatGPT와 함께 노코딩으로 게임 만들어야 겠다고 생각했지만
결국 ChatGPT 의 예제를 활용해서 완성을 해야 하는 상황이 되었습니다.
ChatGPT가 완성하지 못한 코딩을 마무리 하려니 안구에 습기가...
포스팅을 작성하기 위해 오랜만에 JavaScript CSS코딩을 해봤습니다.
역시나 CSS 의 심오한 세계를 다시 감탄하며 포스팅을 시작하겠습니다.
ChatGPT 로 기본적인 핵심 코드들은 전달 받았지만. 게임으로 만들기에는 많이 부족했습니다.
수정해야 할 부분이 많았는데요.
1. 화면 디자인 구성
2. 카드 이동, 뒤집기
3. 종 눌렀을때 카드계산
4. 승리, 패배 판단
핵심만 전달해 드리겠습니다.
ChatGPT 가 만들어준 화면의 카드 영역을 하나로 모으는 작업을 수행 했습니다.
CSS를 활용하여 수동으로 추가한 이벤트 효과들입니다.
position: absolute; 설정으로 위치를 고정해 줍니다.
transition: 0.5s; cardElement.style.left="150px"; 카드가 오른쪽으로 이동하는 효과를 줍니다.
cardElement.style.transform = "rotateY(180deg)"; 카드를 뒤집는 효과를 줍니다.
추가로 생성 및 수정한 함수 목록입니다.
gamestart() 시작버튼 누를때 게임 시작
flipCard1() 카드 뒤집기에 이벤트 효과
isFiveYN() 과일 다섯개 일때 눌렀는가?
pressBell() 벨 눌렀을때 이벤트 처리
과일 다섯개 일때 눌렀는가? 예제로 하나만 살펴보면
- 카드가 하나 뒤집어진 경우 과일이 5개 이면 성공
- 카드가 두게 뒤집어진 경우 동일한 과일이라면 과일합이 5개 이면 성공
- 나머지 경우에는 실패
function isFiveYN(){
const el1 = player1Pile2Element;
const el2 = player2Pile2Element;
elem1 = el1.lastElementChild;
elem2 = el2.lastElementChild;
var rst = false;
if(elem1 == null && elem2 == null){
}else if(elem1 != null && elem2 == null){
if(elem1.card.number == 5){
rst = true;
}
}else if(elem1 == null && elem2 != null){
if(elem2.card.number == 5){
rst = true;
}
}else{
if(elem1.card.color == elem2.card.color){
if((elem1.card.number + elem2.card.number) == 5){
rst = true;
}
}else{
if(elem1.card.number == 5 || elem2.card.number == 5){
rst = true;
}
}
console.log(elem1.card.color + " " + elem2.card.color + " " + elem1.card.number + " " + elem2.card.number + " " + rst);
}
우여곡절 끝에 완성된 ChatGPT 의 도움받아 만든 할리갈리 입니다.
동영상으로 만들었습니다. 함께 보시죠.
