세로형
Notice
Recent Posts
Recent Comments
Link
04-24 00:01
«   2024/04   »
일 월 화 수 목 금 토
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
Tags more
Archives
Today
Total
관리 메뉴

꿈 많은 사람의 이야기

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

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
자바스크립트 Math  (0) 2017.08.16
자바스크립트 Number(), parseInt(), parseFloat(). 문자를 숫자로 변환  (0) 2017.08.16
자바스크립트 NaN, isNan() 메소드  (0) 2017.08.16
공유하기 링크
'javascript' Related Articles more
Comments