갬블링 게임
각 숫자를 클릭하면 1에서 3사이의 난수로 바뀝니다. 모두 같은 수가 나오면 승리합니다.0 | 0 | 0 |
<code>
<html><head>
<meta charset="UTF-8">
<title>갬블링 게임</title>
<style>
table {
border : 1px solid violet;
border-collapse : collapse;
}
td {
width : 50px;
height : 50px;
padding : 0px;
font : italic 50px consolas, sans-serif;
color : blue;
text-align : center;
background : linen;
}
div#msg {
font : italic 18px consolas, sans-serif;
color : magenta;
margin-top : 10px;
}
</style>
<script src="10_gamble.js">
</script>
</head>
<body id="parent">
<h3>갬블링 게임</h3>
각 숫자를 클릭하면 1에서 3사이의 난수로 바뀝니다. 모두 같은 수가 나오면 승리합니다.
<hr>
<table>
<tbody><tr>
<td class="number">0</td>
<td class="number">0</td>
<td class="number">0</td>
</tr>
</tbody></table>
<button onclick="shuffle()">갬블!</button>
<button onclick="reset()">초기화</button>
</body></html>
var trial = 0;
function shuffle(){
var numbers = document.getElementsByClassName('number');
for(var i = 0; i < numbers.length; i++){
numbers.item(i).innerHTML = Math.floor((Math.random()*3)+1);
}
var obj = document.getElementById("parent");
var newDiv = document.createElement("div");
newDiv.setAttribute("class" , "msg"); //<div id = "msg">
var num1 = numbers.item(0).innerHTML;
var num2 = numbers.item(1).innerHTML;
var num3 = numbers.item(2).innerHTML;
if(num1 == num2 & num2 == num3) {
newDiv.innerHTML = "Trial " + trial + " : Sucess";
}
else {
newDiv.innerHTML = "Trial " + trial + " : Fail";
}
document.getElementById('parent').appendChild(newDiv);
trial++;
}
function reset(){
/*
function removeChildren (params){
var parentId = params.parentId;
var childName = params.childName;
var childNodesToRemove = document.getElementById(parentId).getElementsByClassName('foo');
for(var i=childNodesToRemove.length-1;i >= 0;i--){
var childNode = childNodesToRemove[i];
childNode.parentNode.removeChild(childNode);
}
*/
var numbers = document.getElementsByClassName('number');
for(var i = numbers.length-1; i >= 0; i--){
numbers.item(i).innerHTML = 0;
}
var messages = document.getElementsByClassName('msg');
for(var i = messages.length-1; i >=0; i--){
var childNode = messages[i];
childNode.parentNode.removeChild(childNode);
}
trial = 0;
}
'FE > Web(HTML5, CSS, JS)' 카테고리의 다른 글
[HTML]구조화 (0) | 2022.04.03 |
---|---|
[HTML 실습 01] 기본 문서 작성, 표 생성, 셀 병합, th, td (0) | 2022.03.19 |
[HTML] tag (0) | 2022.03.19 |
[HTML] Basic structure, How to use, Layout (0) | 2022.03.17 |