Notice
Recent Posts
Recent Comments
Link
01-24 05:47
꿈 많은 사람의 이야기
자바스크립트로 간단한 퍼즐게임 만들기 본문
반응형
아래는 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 |
자바스크립트로 간단한 퍼즐게임 만들기 (5) | 2017.08.21 |
자바스크립트 Math (0) | 2017.08.16 |
자바스크립트 Number(), parseInt(), parseFloat(). 문자를 숫자로 변환 (0) | 2017.08.16 |
자바스크립트 NaN, isNan() 메소드 (0) | 2017.08.16 |
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 신고 안녕하세요.
음.. 해당 글이 정말 오래되어서 ㅠㅠ 당시에 어떤 의도였는지 기억이 잘 나지는 않네요.
지금 보니까 뭔가 숨겨진 값으로 어떤걸 비교하려고 했던 의도 였던 것으로 추측됩니다.
현재 코드에서는 딱히 의미를 갖고 있지 않아 보여요 ㅎㅎ