아래는 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 |
아래는 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 |
내용은 주석에 달아놔서 상세 설명은 생략!
반응형
그리드형
'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 |
