세로형
Notice
Recent Posts
Recent Comments
Link
10-24 09:26
«   2021/10   »
일 월 화 수 목 금 토
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31            
Tags more
Archives
Today
199
Total
1,884,127
관리 메뉴

꿈 많은 사람의 이야기

자바스크립트로 간단한 퍼즐게임 만들기 본문

javascript

자바스크립트로 간단한 퍼즐게임 만들기

오키여 이수진의 블로그 2017. 8. 21. 08:50

 




























































아래는 html 파일이다.

<!DOCTYPE html> <html lang="en">

 

<head>

 

<meta charset="UTF-8">

 

<title>Document

 

</title>

 

<link rel="stylesheet" href="PuzzleGame.css">

 

<script src="PuzzleGame.js"> <

 

/script>

 

</head>

 

<body>

 

 </body>

 

</html>

아래는 자바스크립트 소스 파일이다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
var body;
var randNumArr = new Array();
var size = 16;
var cells;
setRandNumArr = function(){
    for(var i = 0 ; i < size ;)
    {
        //console.log(randNumArr[i] == undefined) ; 이면 숫자를 넣어라
        var idx = Math.floor(Math.random()*size);
        if(randNumArr[idx] == undefined){
            randNumArr[idx] = String.fromCharCode(i%8+65);
            i++;  //입력이 성공하면 증가.
        }
    }
};
 
function init(){
    body = document.getElementsByTagName("body")[0];  //컬렉션으로 들어오니까 0번지라고 붙여줘야한다.
    var heading = document.createElement("h1");
    heading.innerText = "짝 맞추기 게임";
    body.appendChild(heading);
    var puzzle = document.createElement("div");
    puzzle.id = 'puzzle';
    body.appendChild(puzzle);
    
    setRandNumArr();
 
    for(var i = 0 ; i < size ; i++)
    {
        var cell = document.createElement("div");
        cell.className = "cell";
        cell.id = "cell"+randNumArr[i];
        cell.innerText = randNumArr[i];
        cell.code = randNumArr[i] //숨겨진 코드
        puzzle.appendChild(cell);
    }
};
 
 
function compare(){
    alert("게임시작"); 
    /*
    1.첫번째 셀을 클릭
        - 같은 셀을 또 클릭했나?
        - 첫번째 셀을 임시로 저장
    2. 두번째 셀을 클릭
        - 임시 공간의 첫번째 셀의 값과 비교
    3. 첫번째 셀, 두번째 셀 비교
        - 같은 셀이면 배경색 변경
        - 다른 셀이면 다시 감춤
    4. 비교후 처리
        -임시공간초기화
    */
 
    var tmp = null;
    
    for(var i = 0 ; i < cells.length ; i++){
        //이거는 onclikc을 처음에 다 초기화시켜주는것
        cells[i].onclick = function(){
            this.innerText = this.code;
            this.style.background = "yellow";
            if(tmp == null){
                //alert("처음클릭");
                tmp = this;  //여기서 this는 해당 셀 자체
                tmp.st
                //this로 이렇게 풀 수 도 있구나.
                //this라는 키워드를 더 공부해봐야겠다.
            }
            else{
                //두번째 클릭했을때 tmp와 this랑 같은건가 비교하면됌
                if(tmp == this){
                    alert("같은 셀을 클릭했습니다.");
                    return;
                }
                //alert("두번째 클릭");
                if(tmp.code == this.code){
                    alert('정답');
                }
                else{
                    alert('같지 않습니다.'); 
                    //자바스크립트에서 스크립트 부분은 웹이 시작 되자마자 시작되는건가? 아니면 계속 돌고 있는 건가?
                    tmp.innerText = '';
                    this.innerText = '';
                    tmp.style.background = "";
                    this.style.background = "";
                }
                tmp = null;  //이렇게 해야 비교가 가능
            }
        }
    }
        
    
    
}
 
function start(){
    var message = document.createElement('p');
    message.innerText = '5초 후에 게임이 시작됩니다.';
    body.appendChild(message);
    var sec = 5;
    
    var fn = setInterval(function(){
        sec--;
        message.innerText = sec+'초 후에 게임이 시작됩니다.';
        if(sec == 0){
            message.innerText = '같은 알파벳 위치를 찾으세요';
            clearInterval(fn);
        }
    }, 1000);
    
    setTimeout(function(){    //한번 특정 시간동안 실행될 메소드
        cells = document.getElementById('puzzle').getElementsByTagName("div");
        for(var i = 0 ;i < size ; i++){
            cells[i].innerText = "";
        }
        
        //새로운 시작은 여기서 해야한다. 왜냐하면 밖에 있으면 5초도 잇지 않고 바로 시작하기 때문에.
        compare();
        
    }, 5000);
    
    
}
 
function main(){
    init();
    start();
}
 
 
window.onload = main;
Colored by Color Scripter
cs

아래는 css 파일이다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
body{
    background-color: #DDDDDD;
    
}

#puzzle {
    background-color: white;
    border: 1px solid #333333;
    width: 400px;
    height: 400px;
}

#puzzle .cell{
    border: 1px solid #cccccc;
    width: 100px;
    height: 100px;
    background: white;
    float : left;/* 정렬하기 위한 방법 */
    box-sizing: border-box;  /* 이걸 추가하면 박스가 4개로 딱 맞추어짐 */
    text-align: center;
    line-height: 100px;
}
Colored by Color Scripter
cs

내용은 주석에 달아놔서 상세 설명은 생략!


반응형
그리드형
저작자표시

'javascript' 카테고리의 다른 글

자바스크립트 마우스 클릭(click), out, 오버(over)시 색상 변경  (0) 2017.08.21
자바스크립트 마우스 오버시 이미지 변경(javascript onmouseover)  (0) 2017.08.21
자바스크립트로 간단한 퍼즐게임 만들기  (5) 2017.08.21
자바스크립트 Math  (0) 2017.08.16
자바스크립트 Number(), parseInt(), parseFloat(). 문자를 숫자로 변환  (0) 2017.08.16
자바스크립트 NaN, isNan() 메소드  (0) 2017.08.16
Tag
, , , , , , , ,
공유하기 링크
'javascript' Related Articles more
5 Comments
  • 프로필사진 1571min@naver.com 2019.01.13 10:43 코드 잘봤습니다 ㅎㅎ코드보다가 궁금한게 있는데 compare함수에서 for문안에 처음에 나오는 if 문 내분에있는
    tmp=this;
    tmp.st;
    이부분이 이해가 잘 안되는데 무슨 기능을 하고 .st의 의믜를 알고싶습니다
    댓글 메뉴 보기
    댓글메뉴
    댓글주소 수정/삭제 댓글쓰기
  • 프로필사진 오키여 이수진의 블로그 2019.01.13 15:34 신고 안녕하세요~
    this는 주석에 달아놓은 대로 말 그대로 셀 자체를 뜻합니다.

    지금 fot문을 보면 cells를 onclick를 했을 때 나오는 이벤트이잖아요?? 그래서 클릭 했을 때 tmp라는 변수에 해당 셀 자체의 값을 넣어주는 것입니다! 즉 임시변수에 현재 셀 값을 넣어주는 것이죠. 그리고 다음 클릭 시 이 임시 변수(tmp)와 현재 클릭한 변수를 비교하는 것입니다.

    그리고 tmp.st는 흠...
    저도 이 소스가 거의 2년전 소스라서 ㄷㄷ 잘 기억이 나지 않네요 ㅠㅠ 딱히 별 의미가 없어 보입니다.
    지금 생각해 보는 것은 tmp 변수의 st 라는 속성에다가 뭘 하는 것 같은데...ㅠㅠ 자바스크립트를 안한지가 너무 오래되서.. 잘 기억이 나지 않네요 ㅠㅠ 죄송합니다
    댓글 메뉴 보기
    댓글메뉴
    댓글주소 수정/삭제
  • 프로필사진 1571min@naver.com 2019.01.14 20:37 아 ㅎㅎ그렇군요ㅎㅎ
    댓글 메뉴 보기
    댓글메뉴
    댓글주소 수정/삭제 댓글쓰기
  • 프로필사진 frontcode 2020.05.18 20:37 cell.code = randNumArr[i] ; 에서
    .code가 뭔지 잘 모르겠습니다. 의미를 알고 싶어요!
    댓글 메뉴 보기
    댓글메뉴
    댓글주소 수정/삭제 댓글쓰기
  • 프로필사진 오키여 이수진의 블로그 2020.05.18 21:41 신고 안녕하세요.
    음.. 해당 글이 정말 오래되어서 ㅠㅠ 당시에 어떤 의도였는지 기억이 잘 나지는 않네요.
    지금 보니까 뭔가 숨겨진 값으로 어떤걸 비교하려고 했던 의도 였던 것으로 추측됩니다.
    현재 코드에서는 딱히 의미를 갖고 있지 않아 보여요 ㅎㅎ
    댓글 메뉴 보기
    댓글메뉴
    댓글주소 수정/삭제
댓글쓰기 폼
Prev 1 ··· 464 465 466 467 468 469 470 471 472 ··· 530 Next