라라리라
2023.10.18 / Step 6 [DOM_경마게임] - 코딩 71 일차 본문
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
#horse{
text-align: center;
margin: auto;
border: 1px solid black;
}
.one{background-color: red;}
.two{background-color: orange;}
.three{background-color: yellow;}
.four{background-color: green;}
.five{background-color: skyblue;}
.white{background-color: white;};
#horseride{
margin: auto;
text-align: center;
font-weight: bold;
}
#horseride td{
width: 35px;
height: 35px;
border: 1px solid black;
text-align: center;
font-weight: bold;
}
#result{
display: none;
margin: auto;
text-align: center;
font-weight: bold;
}
#result td{
width: 80px;
height: 50px;
border: 1px solid black;
text-align: center;
font-weight: bold;
}
</style>
<body>
<h1 style="text-align: center;" >경마 게임</h1>
<div>
<table id="horse">
<tr>
<td colspan="5" style="font-weight: bold;">1등으로 도착하는 말은 몇 번 일까요?</td>
</tr>
<tr>
<td class="one" ><input type="radio" id="numone" name="horsegame">1번마</td>
<td class="two"><input type="radio" id="numtwo"name="horsegame">2번마</td>
<td class="three"><input type="radio" id="numthree"name="horsegame">3번마</td>
<td class="four"><input type="radio" id="numfour"name="horsegame">4번마</td>
<td class="five"><input type="radio" id="numfive"name="horsegame">5번마</td>
</tr>
<tr>
<td><label for="numone"><img src="red.png" height="100px" ></label></td>
<td><label for="numtwo"><img src="orange.png" height="100px"></label></td>
<td><label for="numthree"><img src="yellow.png" height="100px"></label></td>
<td><label for="numfour"><img src="green.png" height="100px"></label></td>
<td><label for="numfive"><img src="blue.png" height="100px"></label></td>
</tr>
<tr>
<td colspan="5"><input type="button" id="startBtn" value="선택완료" style="margin: auto;" onclick="start()"></td>
</tr>
</table>
<br>
<br>
</div>
<div id="center">
</div>
<br><br>
<div id="footer">
<table id="result">
<tr>
<td>1번마</td>
<td>2번마</td>
<td>3번마</td>
<td>4번마</td>
<td>5번마</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="5" id="firsthorse"></td>
</tr>
<tr>
<td colspan="5"><input type="button"value="다시 시작" onclick="restart()"></td>
</tr>
</table>
</div>
<script>
let $center = document.querySelector(`#center`);
let $table = document.createElement(`table`);
let $tr = document.createElement(`tr`);
let $td = document.createElement(`td`);
let $data = [];
let myInterval = null;
let y = 5;
let x = 41;
let num1 = 1
let num2 = 1
let num3 = 1
let num4 = 1
let num5 = 1
let turn1 = false;
let turn2 = false;
let turn3 = false;
let turn4 = false;
let turn5 = false;
let colorclass = [`one`, `two`, `three`, `four`, `five`];
let resultList = [`1등`, `2등`, `3등`, `4등`, `5등`];
let horseList = [`1번`, `2번`, `3번`, `4번`, `5번`];
let score = [];
function init(){
$center = document.querySelector(`#center`);
$table = document.createElement(`table`);
$table.id = `horseride`
for(let i = 0; i < y; i++){
$tr = document.createElement(`tr`);
$temp = [];
for(let j = 0; j < x; j++){
$td = document.createElement(`td`);
$temp.push($td);
$tr.append($td);
}
$data.push($temp)
$table.append($tr);
}
$center.append($table);
for(let i = 0; i < 5; i++){
$data[i][0].setAttribute(`class`, colorclass[i]);
$data[i][0].innerText = i + 1;
}
}
function start(){
document.querySelector("#startBtn").setAttribute(`disabled`, true);
myInterval = setInterval(game, 200);
}
function game(){
let r1 = Math.floor(Math.random() * 3) + 1;
if(num1 + r1 <= 40){
$data[0][num1].setAttribute(`class`, `white`)
$data[0][num1 + r1].setAttribute(`class`, colorclass[0]);
num1 += r1;
}
else {
$data[0][num1].setAttribute(`class`, `white`);
$data[0][40].setAttribute(`class`, colorclass[0]);
if(turn1 == false){
turn1 = true;
score.push(0);
}
}
let r2 = Math.floor(Math.random() * 3) + 1;
if(num2 + r2 <= 40){
$data[1][num2].setAttribute(`class`, `white`)
$data[1][num2 + r2].setAttribute(`class`, colorclass[1]);
num2 += r2;
}
else {
$data[1][num2].setAttribute(`class`, `white`);
$data[1][40].setAttribute(`class`, colorclass[1]);
if(turn2 == false){
turn2 = true;
score.push(1);
}
}
let r3 = Math.floor(Math.random() * 3) + 1;
if(num3 + r3 <= 40){
$data[2][num3].setAttribute(`class`, `white`)
$data[2][num3 + r3].setAttribute(`class`, colorclass[2]);
num3 += r3;
}
else {
$data[2][num3].setAttribute(`class`, `white`);
$data[2][40].setAttribute(`class`, colorclass[2]);
if(turn3 == false){
turn3 = true;
score.push(2);
}
}
let r4 = Math.floor(Math.random() * 3) + 1;
if(num4 + r4 <= 40){
$data[3][num4].setAttribute(`class`, `white`)
$data[3][num4 + r4].setAttribute(`class`, colorclass[3]);
num4 += r4;
}
else {
$data[3][num4].setAttribute(`class`, `white`);
$data[3][40].setAttribute(`class`, colorclass[3]);
if(turn4 == false){
turn4 = true;
score.push(3);
}
}
let r5 = Math.floor(Math.random() * 3) + 1;
if(num5 + r5 <= 40){
$data[4][num5].setAttribute(`class`, `white`)
$data[4][num5 + r5].setAttribute(`class`, colorclass[4]);
num5 += r5;
}
else {
$data[4][num5].setAttribute(`class`, `white`);
$data[4][40].setAttribute(`class`, colorclass[4]);
if(turn5 == false){
turn5 = true;
score.push(4);
}
}
if(score.length == 5){
gameover();
}
}
function gameover(){
clearInterval(myInterval)
console.log(score)
$first = document.querySelector(`#firsthorse`);
$table = document.querySelector(`#result`);
$table.style.display = `table`
for(let i = 0; i < 5; i++){
$table.children[0].children[1].children[score[i]].innerText = resultList[i];
}
let temp = document.getElementsByName(`horsegame`)
let tempnum = 0;
for(let i = 0; i < temp.length; i++){
if(temp[i].checked) tempnum = i;
}
if(score[0] == tempnum){
$first.innerText = `축하합니다! 당신이 고른말이 1등입니다!`
} else {
$first.innerText = `저런... 1등은 ${horseList[score[0]]}마 입니다.. 아쉬운결과네요!`
}
}
function restart(){
$data = [];
myInterval = null;
y = 5;
x = 41;
num1 = 1
num2 = 1
num3 = 1
num4 = 1
num5 = 1
turn1 = false;
turn2 = false;
turn3 = false;
turn4 = false;
turn5 = false;
score = [];
$table = document.querySelector(`#horseride`)
$table.remove();
$table = document.querySelector(`#result`)
$table.style.display = `none`;
for(let i = 0; i < 5; i ++){
$table.children[0].children[1].children[i].innerText = "";
}
$first = document.querySelector(`#firsthorse`)
$first.innerText = "";
document.querySelector("#startBtn").removeAttribute(`disabled`, true);
$horses = document.getElementsByName(`horsegame`);
for(let i = 0; i < 5; i ++){
$horses[i].checked = false;
}
init();
}
init();
</script>
</body>
</html>
경마 게임
| 1등으로 도착하는 말은 몇 번 일까요? | ||||
| 1번마 | 2번마 | 3번마 | 4번마 | 5번마 |
'코딩 > 2023 JavaScript DOM' 카테고리의 다른 글
| 2023.10.20 / Step 7 [DOM_member] - 코딩 73 일차 (0) | 2023.10.20 |
|---|---|
| 2023.10.19 / Step 7 [DOM_member] - 코딩 72 일차 (0) | 2023.10.19 |
| 2023.10.17 / Step 6 [DOM_테트리스] - 코딩 70 일차 (0) | 2023.10.17 |
| 2023.10.16 / Step 6 [DOM_스네이크게임] - 코딩 69 일차 (0) | 2023.10.16 |
| 2023.10.13 / Step 6 [DOM_식권자판기3단계] - 코딩 68 일차 (0) | 2023.10.13 |