728x90
반응형
<!DOCTYPE html>
<!-- src/main/webapp/20220425/game1.html -->
<html>
<head>
<meta charset="UTF-8">
<title>그림 맞추기 게임</title>
<style type="text/css">
table,td {border:1px solid gray;}
table {border-collapse: collapse;}
</style>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
var level = 4;
$(function() { //문서 준비 완료
shuffle(); //이미지 섞기
editHtml();//이미지 화면에 출력
game(); //게임 시작
})
//shuffle : 이미지 섞기
function shuffle() {
model = ["S_1.jpg","S_1.jpg","S_2.jpg","S_2.jpg",
"S_3.jpg","S_3.jpg","S_4.jpg","S_4.jpg",
"S_5.jpg","S_5.jpg","S_6.jpg","S_6.jpg",
"S_7.jpg","S_7.jpg","S_8.jpg","S_8.jpg",
"S_9.jpg","S_9.jpg","S_10.jpg","S_10.jpg",
"pic00.png","pic00.png","pic01.png","pic01.png",
"pic02.png","pic02.png","pic03.png","pic03.png",
"pic04.png","pic04.png","pic05.png","pic05.png",
"pic06.png","pic06.png","pic07.png","pic07.png" ];
cnt = level * level; //cnt = 16
for(var a=0;a<10000;a++) {
var ran = Math.floor(Math.random()*cnt); // 0 ~ 15
var tmp = model[0];
model[0] = model[ran];
model[ran] = tmp;
}
}
//editHtml : 섞여있는 이미지를 순서대로 화면에 출력
function editHtml() {
var board = "<table>";
for(var i=0;i<cnt;i++) {
if((i%level)==0) board +="<tr>";
board += "<td><img class='pic' src='../imgs/"+model[i]
+"' value='"+model[i]+"' width='100' height='100'></td>";
if((i%level)==(level - 1)) board +="</tr>";
}
$("#board").html(board+"</table>");
}
//game : 게임하기
function game() {
//setTimeout(함수, 밀리초) : 밀리초 이후에 함수 실행
setTimeout(function() {
//.pic : class = pic 인 태그들 => img 태그들
$(".pic").each(function(i,item) {
$(this).css("opacity","0.01"); //opacity : 투명도 0(투명) ~ 1(불투명)
})
},3000); //n초 후 실행 (투명). 그림을 볼 수 있는 시간 설정
var total = 0; //클릭 된 갯수
var count = 0; //1 : 첫번째 이미지, 2 : 두번째 이미지
var success = 0; //같은 이미지를 찾은 쌍의 갯수
var onePic = null; //첫번째 이미지객체
var twoPic = null; //두번째 이미지객체
//$(".pic") : 이미지 객체들
$(".pic").click(function() {
if(!$(this).is(".diepic")) { //class 속성값이 diepic가 아닌 경우.
total++; //이미지 선택한 클릭수 증가
$(this).css("opacity",1); //이미지 보여줌
count++; //이미지순서
if(count == 1) {
onePic = $(this); //$(this) : 클릭된 이미지. 첫번째 클릭된 이미지 계속 보여줌.
onex = onePic.parent().parent().index(); //tr의 인덱스
oney = onePic.parent().index(); //td의 인덱스
} else if(count == 2) {
twoPic = $(this); //$(this) : 클릭된 이미지. 두번째 클릭된 이미지.
twox = twoPic.parent().parent().index(); //tr의 인덱스
twoy = twoPic.parent().index(); //td의 인덱스
if(onePic.attr("src") == twoPic.attr("src") && (onex != twox || oney != twoy)) { //같은 이미지를 찾은 경우.
success++; //찾은 이미지 쌍의 갯수 증가
onePic.addClass("diepic"); //diepic 클래스 속성 추가
twoPic.addClass("diepic");
onePic.disable=true; //비활성화
twoPic.disable=true;
//cnt = level * level => 16 = 4 * 4
if(cnt/2 == success) { //모든 이미지를 찾은 경우
alert(total + "번 만에 성공. 게임 종료")
setTimeout(function(){
if(confirm("게임을 계속하시겠습니까?"))
location.reload(); //현재 화면을 재시작
},2000) //n초 후에 재시작
}
} else { //같은 이미지를 찾지 못한 경우. 1pic과 2pic이 다른경우
setTimeout(function() { //n초 후에 이미지를 다시 안보여줌
onePic.css("opacity","0.01"); //이미지 보여지지 않음
twoPic.css("opacity","0.01");
},100); //n초 후에 사라짐
}
count = 0; //두번의 선택이 끝나면 다시 초기화. ( 1pic과 2pic이 다른경우)
} else { //count 값이 1, 2가 아닌 경우. alert창 실행
alert("프로그램 오류 발생");
}
}
})
}
function gamestart(sel) {
level = parseInt(sel.value); //level 선택
shuffle();
editHtml();
game();
}
</script>
</head>
<body>
<select id="level" onchange="gamestart(this)">
<option value="2">2 X 2</option>
<option value="4" selected="selected">4 X 4</option>
<option value="6">6 X 6</option>
</select>
<div id="board">
</div>
</body>
</html>728x90
반응형
'study > Jquery' 카테고리의 다른 글
| [Jquery] 21. Jquery animate2 (id값주기) (0) | 2022.04.26 |
|---|---|
| [Jquery] 21. Jquery animate1 (animate) (0) | 2022.04.26 |
| [Jquery] 21. Jquery table ($(this).index(), $(this).parent().children().index(this), td:nth-of-type()) (0) | 2022.04.25 |
| [Jquery] 21. Jquery key1 (inputarr, <div id="card">) (0) | 2022.04.25 |
| [Jquery] 21. Jquery key1 (keydown, keypress, keyup) (0) | 2022.04.25 |