-
css
@charset "UTF-8";
body{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
body.html{
height: 100%;
overflow: hidden; /* 스크롤바 숨기기 */
}
body{
background: #fff1cb url("../image/bg.png") center center;
background-size: cover;
}
#sunban-wrapper{
width: 800px;
margin: 50px auto;
}
#control-wrapper{
width: 300px;
height: 420px;
position: fixed;
left: 0;
bottom: 0;
}
.sunban{
height: 150px;
margin-bottom: 50px;
width: 770px;
background: url("../image/sunban.png") no-repeat center bottom;
/* url로 사진줄 때는 꼭 no-repeat해주기.. 아니면 계속 반복됨 */
}
.sunban li{
float: left;
width: 125px;
height: 125px;
cursor: pointer;
}
.gun{
width: 300px;
height: 250px;
background: url("../image/gun.png") no-repeat;
cursor: pointer;
text-indent: -9999px; /* 음수로 주면 글자가 안 보임 */
}
.gun:active{
background-position: right bottom;
}
#msg{
font-family: 'Nanum Pen Script';
position: absolute;
left: 700px;
top: 500px;
width: 400px;
height: 70px;
font-size: 20pt;
border: 10px groove tomato;
text-align: center;
line-height: 70px;
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="../css/gungame.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap" rel="stylesheet">
<script type="text/javascript" src="../js/gungame.js"></script>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<div id="control-wrapper">
<div class="gun">총</div>
<ul class="money">
<li><img src="../image/money.png"></li>
<li><img src="../image/money.png"></li>
<li><img src="../image/money.png"></li>
</ul>
</div>
<div id="sunban-wrapper">
<ul class="sunban">
<li><img src="../image/01.png"></li>
<li><img src="../image/02.png"></li>
<li><img src="../image/03.png"></li>
<li><img src="../image/04.png"></li>
<li><img src="../image/05.png"></li>
<li><img src="../image/06.png"></li>
</ul>
<ul class="sunban">
<li><img src="../image/07.png"></li>
<li><img src="../image/08.png"></li>
<li><img src="../image/09.png"></li>
<li><img src="../image/10.png"></li>
<li><img src="../image/11.png"></li>
<li><img src="../image/12.png"></li>
</ul>
</div>
<div id="msg"></div>
</body>
</html>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
js
/**
*
*/
$(function(){
//음성파일넣기
var fire=new Audio("../image/fire.wav");
//총이미지 클릭시 0~11 난수 발생
$(".gun").click(function(){
fire.play();
var n=parseInt(Math.random()*12);
//해당인덱스 인형이 이미 hidden()숨겨져있다면 "2번째 인형은 이미 처리되었습니다"
//if..$(".sunban img").eq(1).is(":hidden")==?true,false
if($(".sunban img").eq(n).is(":hidden")){
$("#msg").html((n+1)+"번째 인형은 이미 처리되었습니다");
} else{
//else..만약 있다면 "2번째 인형을 맞췄습니다" 라는 메세지 출력후 hide
$("#msg").html((n+1)+"번째 인형을 맞췄습니다");
$(".sunban img").eq(n).hide();
}
//12개를 모두 맞춘 경우에는 메세지창에 "You Win!!" 출력
//each(cnt..each함수이용..없으면(hidden)이면 cnt++)..if문
var cnt=0;
$(".sunban img").each(function(i,element){
if($(this).is(":hidden"))
cnt++;
});
if(cnt==12){
$("#msg").html("<b>YOU WIN~!</b>");
}
//게임 다 끝나고 지폐를 클릭하면 해당지폐 사라지면서 다시 인형12개 보이게 하고 메세지창 지우기..리셋
$(".money img").click(function(){
$(this).hide();
$(".sunban img").show();
$("#msg").empty(); //메세지창에 남아있는 거 비우기
});
});
});
'JQuery' 카테고리의 다른 글
211008_ (0) 2021.10.08 211008_ (0) 2021.10.08 211007_table,click,addClass,removeClass (0) 2021.10.08 211007_array,animate,image,mouseover (0) 2021.10.08 211007_animate,z-index (0) 2021.10.08