복불복 게임 제작

Chat GPT 물어봅시다.

by 기술자놈 2023. 4. 2. 20:15

SMALL

안녕하세요.

#기술자놈 입니다.

오늘은 #복불복게임 을 만들어 봤습니다.

한 2시간 걸린것 같습니다.

이제는 알다시피 제가 만드는 개발 게임은 전부 말로 만드는 #코딩 입니다.

저는 #코딩 을 할 줄 모릅니다.

모두가 #ChatGPT 가 하는거에요.

기본형 복불복 게임 이에요.

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Names Randomizer</title>

<script>

function generateRandom() {

var numOfPeople = parseInt(document.getElementById("numOfPeople").value);

var nameInputs = document.getElementById("nameInputs").getElementsByTagName("input");

var names = [];

for (var i = 0; i < numOfPeople; i++) {

names.push(nameInputs[i].value);

}

var winner = Math.floor(Math.random() * numOfPeople) + 1;

var result = "The winner is: ";

for (var i = 0; i < names.length; i++) {

if (i == winner - 1) {

result += names[i] + " (당첨!)";

} else {

result += names[i];

}

if (i < names.length - 1) {

result += ", ";

}

}

document.getElementById("result").innerHTML = result;

document.getElementById("result").style.display = "block";

}

</script>

</head>

<body>

<h1>Names Randomizer</h1>

<label for="numOfPeople">Select the number of people (1-5):</label>

<select id="numOfPeople">

<option value="1">1</option>

<option value="2">2</option>

<option value="3">3</option>

<option value="4">4</option>

<option value="5">5</option>

</select>

<br><br>

<div id="nameInputs"></div>

<button type="button" onclick="generateRandom()">Start</button>

<br><br>

<div id="result"></div>

<script>

function updateNameInputs() {

var numOfPeople = parseInt(document.getElementById("numOfPeople").value);

var nameInputs = document.getElementById("nameInputs");

nameInputs.innerHTML = "";

for (var i = 0; i < numOfPeople; i++) {

var input = document.createElement("input");

input.type = "text";

input.name = "name" + (i + 1);

input.placeholder = "Enter name " + (i + 1);

nameInputs.appendChild(input);

nameInputs.appendChild(document.createElement("br"));

}

document.getElementById("result").innerHTML = "";

document.getElementById("result").style.display = "none";

}

document.getElementById("numOfPeople").addEventListener("change", updateNameInputs);

updateNameInputs();

</script>

</body>

</html>

보시면 많이 밍밍 한 느낌입니다.

여기까지 만드는 건 금방했어요.

이제부터 한시간 넘게 걸린 부분입니다.

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>복불복 게임</title>

<style>

#container {

display: flex;

align-items: center;

justify-content: center;

height: 100vh;

}

#randomizer {

padding: 20px;

background-color: #f5f5f5;

border-radius: 10px;

box-shadow: 0 2px 5px rgba(0,0,0,0.3);

}

</style>

<script>

function generateRandom() {

var numOfPeople = parseInt(document.getElementById("numOfPeople").value);

var nameInputs = document.getElementById("nameInputs").getElementsByTagName("input");

var names = [];

for (var i = 0; i < numOfPeople; i++) {

names.push(nameInputs[i].value);

}

var winnerIndex = Math.floor(Math.random() * numOfPeople);

var winnerName = names[winnerIndex];

names.splice(winnerIndex, 1);

names.unshift(winnerName);

var result = "<ol>";

for (var i = 0; i < names.length; i++) {

if (i == 0) {

result += "<li><strong>" + names[i] + " (축!당첨!!)</strong></li>";

} else {

result += "<li>" + names[i] + "</li>";

}

}

result += "</ol>";

document.getElementById("result").innerHTML = "<h2>※ 당첨 결과 ※</h2>" + result;

document.getElementById("result").style.display = "block";

}

</script>

</head>

<body>

<div id="container">

<div id="randomizer">

<h1>복불복 게임</h1>

<label for="numOfPeople">Select the number of people (1-10):</label>

<select id="numOfPeople">

<option value="1">1</option>

<option value="2">2</option>

<option value="3">3</option>

<option value="4">4</option>

<option value="5">5</option>

<option value="6">6</option>

<option value="7">7</option>

<option value="8">8</option>

<option value="9">9</option>

<option value="10">10</option>

</select>

<br><br>

<div id="nameInputs"></div>

<button type="button" onclick="generateRandom()">Start</button>

<br><br>

<div id="result"></div>

<script>

function updateNameInputs() {

var numOfPeople = parseInt(document.getElementById("numOfPeople").value);

var nameInputs = document.getElementById("nameInputs");

nameInputs.innerHTML = "";

for (var i = 0; i < numOfPeople; i++) {

var input = document.createElement("input");

input.type = "text";

input.name = "name" + (i + 1);

input.placeholder = "Enter name " + (i + 1);

nameInputs.appendChild(input);

nameInputs.appendChild(document.createElement("br"));

}

document.getElementById("result").innerHTML = "";

document.getElementById("result").style.display = "none";

}

document.getElementById("numOfPeople").addEventListener("change", updateNameInputs);

updateNameInputs();

</script>

</div>

</div>

</body>

</html>

이렇게 만들어 봤습니다.

심심하실때 써먹으면 좋을 것 같습니다.

#복불복게임
#랜덤게임
#운빨기술
#추첨게임
#즉석복권
#재미난게임
#당첨확률
#게임이벤트
#상품추첨
#럭키드로우
#행운의추첨
#무작위선발
#복권추첨
#운수저격
#뽑기게임
#행운의끝판왕
#상품지급이벤트
#당첨자발표
#럭키게임
#확률게임
#당첨자선발
#경품추첨
#자비스의복불복게임
#즉석당첨
#선착순이벤트

LIST

'Chat GPT 물어봅시다.' 카테고리의 다른 글

당첨!!로또 번호 생성기 (2)	2023.04.02
당첨율 높은 로또 번호 생성기 추가 제작!! (0)	2023.04.02
벽돌깨기 게임 만들기 (0)	2023.04.02
당첨율 높은 로또 번호 생성기 (0)	2023.04.02
Chat GPT 로또 당첨 번호의 통계를 알려줘!! (0)	2023.04.02