꿈 많은 사람의 이야기

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

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