728x90
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>겜블링 게임</title>
<style>
div{
background-color: mistyrose;
border: 1px solid violet;
width: 300px;
height: 100px;
color: blue;
font-size: 70px;
text-align: center;
}
span{
padding:10px;
}
</style>
</head>
<body id="parent">
<h3>겜블링 게임</h3>
각 숫자를 클릭하면 0에서 2사이의 난수로 바뀝니다. 모두 같은 수가 나오면 승리합니다.
<hr>
<div id="gameboard">
<span id="0" onclick="change(this)">0</span>
<span id="1" onclick="change(this)">0</span>
<span id="2" onclick="change(this)">0</span>
</div>
<script>
var flagArr = [1,1,1];
function change(obj) {
var objId = parseInt(obj.id);
if(flagArr[objId]==1){
flagArr[objId]=0;
obj.innerHTML=Math.floor(Math.random()*3);
}
if((flagArr[0]==0)&(flagArr[1]==0)&(flagArr[2]==0)){
result();
}
}
function result(){
var spanArr = document.getElementsByTagName("span");
if((spanArr[0].innerHTML==spanArr[1].innerHTML)&((spanArr[1].innerHTML==spanArr[2].innerHTML))){
text="Success(click here to do again)";
}else{
text="fail(click here to do again)";
}
var obj = document.getElementById("parent");
var newP = document.createElement("p");
newP.innerHTML=text;
newP.addEventListener("click",
function(){
location.reload();
})
newP.style.color="plum";
obj.appendChild(newP);
}
</script>
</body>
</html>728x90
'HTML+CSS+JavaScript' 카테고리의 다른 글
| [HTML5+CSS3+Javascript 웹프로그래밍]10장 연습문제 (0) | 2021.11.21 |
|---|---|
| [HTML5+CSS3+Javascript 웹프로그래밍]8장 연습문제 (0) | 2021.11.21 |
| [HTML5+CSS3+Javascript 웹프로그래밍]9장 OpenChallenge (0) | 2021.11.21 |
| [HTML5+CSS3+Javascript 웹프로그래밍]10장 OpenChallenge (0) | 2021.11.21 |
| [HTML5+CSS3+Javascript 웹프로그래밍]9장 실습문제 (0) | 2021.11.14 |