<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>array</title>
<script src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<style>
.box1{
border: 2px solid lime;
width: 60px;
height: 60px;
float:left;
border-radius: 10px;
margin: 3px;
}
.box2{
clear: both;
width: 288px;
}
.box3{
text-align: center;
width: 188px;
padding-top: 20px;
}
.memo{
height: 50px;
width: 200px;
border: 2px solid;
border-radius: 10px;
margin-left: 4px;
text-align: center;
padding-top: 30px;
}
.imgBox{
width: 60px;
}
</style>
<script>
var num = [0,0,0,0,0,0,0,0,1];
var flag = false;
var heart=0;//하트개수
//폭탄 위치 만들기
function shuffle(){
for (var i=0; i<num.length; i++){
var idx1 = Math.floor(Math.random()*9);
var idx2 = Math.floor(Math.random()*9);
if (idx1 != idx2){ //num 배열 섞기
var temp = num[idx1];
num[idx1] = num[idx2];
num[idx2] = temp;
}
}
}
$(document).ready(function(){
$("#btn1").click(function(){
shuffle();
for (i=1; i<=num.length; i++) {
var a = "<img src='../hello.html/smile.png' class='imgBox' id='img"+i+"'>"
$("#div"+i).html(a);
}//question mark 넣어주기
$(".memo").text("")
});
$(".box1").on("click",".imgBox", function(){
if (flag == true) return;
var id = $(this).attr("id");
id = id.substr(3,1);// 1,2,3,4,5,6,7,8,9를 추출가능
if (num[id-1] == 0) {
$("#div"+id).html("<img src='../hello.html/number1.jpg' class='imgBox' id='img"+id+"'>");
flag = false;
heart++;
if (heart == 8) {
$(".memo").text("성공")
alert("성공")
}
}//1
else{
$("#div"+id).html("<img src='../hello.html/bomb.png' class='imgBox' id='img"+id+"'>");
flag = true;
$(".memo").text("Game Over")
alert("Game Over")
}//폭탄등장
});
//동적으로 생성된 이미지에 클릭 이벤트 만들기
});
</script>
</head>
<body>
<!-- .length :배열 요소의 개수 -->
<!-- .indexOf("문자열"): 배열에서 문자열이 있는 첫위치검색 -->
<!-- .reverse(): 배열 안의 원소 순서를 반대로 정렬하여 반환 -->
<div id="box">
<div class="box1" id="div1">
</div>
<div class="box1" id="div2"></div>
<div class="box1" id="div3"></div>
<div class="box2">
</div>
<div class="box1" id="div4"></div>
<div class="box1" id="div5"></div>
<div class="box1" id="div6"></div>
<div class="box2"></div>
<div class="box1" id="div7">
</div>
<div class="box1" id="div8"></div>
<div class="box1" id="div9"></div>
<div class="box2"></div>
</div>
<div class="memo"></div>
<div class="box3">
<input type="button" value="폭탄섞기" id="btn1">
</div>
</body>
</html>flag 변수를 사용한이유는 false true 로 케이스를 나누어 폭탄을 눌렀을 시 모든 상황을 종료시키기 위해서였다.
'프로그래밍 언어 > Java' 카테고리의 다른 글
| 유투브로 음악 player 만들기 jquery 예제6 (0) | 2020.10.15 |
|---|---|
| Jqeury 예제5.카드게임 구현하기 (0) | 2020.10.10 |
| jqeury 예제3. 가위바위보 게임만들기 (0) | 2020.09.30 |
| jquery 예제2.주사위게임 (0) | 2020.09.29 |
| Jquery 예제1.랜덤 카드를 만들고 짝/홀 카드 구분하기 (0) | 2020.09.28 |