인공지능으로 지뢰 찾기 게임 코딩하기 - AskUp ChatGPT
2024. 7. 17. 17:52ㆍ개발/웹 관련
반응형
인공지능을 이용해 지뢰 찾기 게임 코드를 요청해 봤습니다. Copilot GPT는 제대로 구현이 안되어 카카오톡 아숙업(AskUp) 채널을 이용했습니다. 아숙업 채널에서 ChatGPT 4 버전 이용은 요청 문구 제일 앞에 느낌표 적고 한 칸 띄운 다음 명령어를 입력하면 됩니다.
완벽한 코드가 아닌 단순 참고용입니다.
코드가 길어 접은글로 했으니 더보기를 클릭하시면 코드 확인이 가능합니다.
더보기
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Minesweeper Game</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
#game-board {
display: grid;
grid-template-columns: repeat(10, 30px);
grid-gap: 5px;
}
.cell {
width: 30px;
height: 30px;
background-color: #ddd;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
border: 1px solid #aaa;
}
.cell.revealed {
background-color: #fff;
}
.cell.mine {
background-color: red;
}
</style>
</head>
<body>
<div id="game-board"></div>
<script>
const boardSize = 10;
const mineCount = 10;
let board = [];
let mineLocations = [];
function createBoard() {
const gameBoard = document.getElementById('game-board');
// Initialize board
for (let i = 0; i < boardSize; i++) {
board[i] = [];
for (let j = 0; j < boardSize; j++) {
const cell = document.createElement('div');
cell.classList.add('cell');
cell.addEventListener('click', () => revealCell(i, j));
gameBoard.appendChild(cell);
board[i][j] = cell;
}
}
// Place mines
for (let i = 0; i < mineCount; i++) {
let mineRow, mineCol;
do {
mineRow = Math.floor(Math.random() * boardSize);
mineCol = Math.floor(Math.random() * boardSize);
} while (mineLocations.some(loc => loc[0] === mineRow && loc[1] === mineCol));
mineLocations.push([mineRow, mineCol]);
}
}
function revealCell(row, col) {
if (mineLocations.some(loc => loc[0] === row && loc[1] === col)) {
board[row][col].classList.add('mine');
alert('Game Over!');
location.replace(location.href);
return;
}
board[row][col].classList.add('revealed');
}
createBoard();
</script>
</body>
</html>
지뢰 찾기 게임처럼 숫자 표시나 마우스 우클릭으로 물음표 기능 그리고 점수 등은 안되고 그냥 클릭만 되는 코드입니다. 클릭하다가 지뢰를 발견하면 이미지처럼 Game Over! 알림 창이 뜨고 종료됩니다.
이 코드에서 숫자 표시와 한 번에 펼쳐질 영역 등을 추가로 요청하면서 코드를 수정하면 좀 더 완벽한 게임이 될 것 같습니다.
오늘도 방문해 주셔서 감사드립니다.
반응형
'개발 > 웹 관련' 카테고리의 다른 글
| Javascript 로또 번호 생성하기 (18) | 2024.07.22 |
|---|---|
| 인공지능으로 돌림판(룰렛) 코드 작성해보기 (28) | 2024.07.18 |
| 인공지능으로 테트리스 게임 코딩하기 - Copilot GPT (35) | 2024.07.16 |
| 인공지능(Copilot)을 이용한 풀페이지(fullpage) 코드 생성 (26) | 2024.07.11 |
| php 금액을 한글로 변환 - 인공지능 이용 (55) | 2024.07.02 |