인공지능으로 돌림판(룰렛) 코드 작성해보기
2024. 7. 18. 17:56ㆍ개발/웹 관련
반응형
인공지능 Copilot, 아숙업(AskUp)으로 돌림판(룰렛) 코드를 작성해 봤습니다.
먼저 Copilot
룰렛이 아니라 랜덤 숫자 코드를 짜주네요. 시작 버튼을 클릭하면 1초 동안 숫자가 변경되면서 랜덤으로 하나의 숫자를 보여줍니다. 코드는 아래 더보기 클릭하시면 확인 가능합니다.
더보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<style>
#roulette { font-size: 50px; text-align: center; margin-top: 20%; }
#start {display: block; width: 100px; height: 50px; margin: 20px auto; font-size: 20px;}
</style>
</head>
<body>
<div id="roulette">1</div>
<button id="start">시작</button>
<script>
var startButton = document.getElementById('start');
var roulette = document.getElementById('roulette');
var timerId;
startButton.onclick = function() {
clearInterval(timerId);
timerId = setInterval(function() {
var num = Math.floor(Math.random() * 20) + 1;
roulette.textContent = num;
}, 100);
setTimeout(function() {
clearInterval(timerId);
}, 1000);
};
</script>
</body>
</html>
다음은 아숙업(AskUp)이 짜준 코드입니다.
원형 돌림판(룰렛)이라는 문구를 추가해서 요청하니 이렇게 원형으로 만들어 주는데 1, 2가 안 보이네요. 배경색 때문에 가려져 있어서 그런 건데 배경색 지워도 모양이 제대로 안 나옵니다.
코드는 아래 더보기 클릭하면 됩니다.
더보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.roulette-container {
position: relative;
width: 300px;
height: 300px;
border-radius: 50%;
border: 3px solid #000;
margin: 20px auto;
overflow: hidden;
}
.roulette {
position: absolute;
width: 100%;
height: 100%;
transform-origin: 50% 50%;
transition: transform 1s ease-out;
}
.segment {
position: absolute;
width: 50%;
height: 50%;
background: #f0f0f0;
border: 1px solid #000;
transform-origin: 100% 100%;
}
.segment:nth-child(odd) {
background: #ccc;
}
.start-button {
display: block;
margin: 20px auto;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
</style>
<title>Roulette</title>
</head>
<body>
<div class="roulette-container">
<div class="roulette" id="roulette">
<!-- Segments -->
<div class="segment" style="transform: rotate(0deg) translate(100%, 0);">1</div>
<div class="segment" style="transform: rotate(36deg) translate(100%, 0);">2</div>
<div class="segment" style="transform: rotate(72deg) translate(100%, 0);">3</div>
<div class="segment" style="transform: rotate(108deg) translate(100%, 0);">4</div>
<div class="segment" style="transform: rotate(144deg) translate(100%, 0);">5</div>
<div class="segment" style="transform: rotate(180deg) translate(100%, 0);">6</div>
<div class="segment" style="transform: rotate(216deg) translate(100%, 0);">7</div>
<div class="segment" style="transform: rotate(252deg) translate(100%, 0);">8</div>
<div class="segment" style="transform: rotate(288deg) translate(100%, 0);">9</div>
<div class="segment" style="transform: rotate(324deg) translate(100%, 0);">10</div>
</div>
</div>
<button class="start-button" onclick="startRoulette()">시작</button>
<script>
function startRoulette() {
const roulette = document.getElementById('roulette');
const randomDegree = Math.floor(Math.random() * 360) + 3600; // At least 10 full rotations
roulette.style.transform = `rotate(${randomDegree}deg)`;
// Stop after 1 second
setTimeout(() => {
const finalDegree = randomDegree % 360;
roulette.style.transform = `rotate(${finalDegree}deg)`;
}, 1000);
}
</script>
</body>
</html>
제가 원했던 건 아래와 비슷한 기능이었습니다.
언제 만들었는지 기억도 안나는 룰렛 메뉴 고르기.. 점심 메뉴 정하기 귀찮아서 만들었는데 가끔 해보고 안 하게 되더군요.
인공지능으로 만든 룰렛 코드는 수정이 많이 필요해 보이네요.
오늘도 방문해 주셔서 감사드립니다.
반응형
'개발 > 웹 관련' 카테고리의 다른 글
| css 다단 레이아웃 column-count (42) | 2024.07.23 |
|---|---|
| Javascript 로또 번호 생성하기 (18) | 2024.07.22 |
| 인공지능으로 지뢰 찾기 게임 코딩하기 - AskUp ChatGPT (34) | 2024.07.17 |
| 인공지능으로 테트리스 게임 코딩하기 - Copilot GPT (35) | 2024.07.16 |
| 인공지능(Copilot)을 이용한 풀페이지(fullpage) 코드 생성 (26) | 2024.07.11 |