- Westudy 2주차 프로젝트
mini game
› 기간
약 5일간
› skill
html
css
javascript
git
› coding and study 정리 하면서...
✔ querySelector() , querySelectorAll() 요소접근
document.querySelector(selectors);
document.querySelectorAll(selectors);
querySelector();
selectors -> #selectors , .selectors , selectors
가진 요소들을 찾아 반환해서 변수에 대입 할 수 있다.
EX - 클래스 요소를 가진 start-btn을 startBtn 변수에 대입
const startBtn = document.querySelector(".start-btn");querySelectorAll();
querySelector();와 동일하지만 모든 요소들을 찾아 배열 형태로 반환한다.
✔ Arrow function
function 키워드 대신에 => 를 이용해서 간단한 방법으로 함수를 선언할 수 있다.
1) function 정의 및 호출
function add(a, b) {
return a + b;
}
add(1,5);
function hello(messages) {
console.log(`Hello ${messages}!`);
}
hello('test');
2) Arrow function 정의 및 호출
const add = (a,b) => {
return a + b;
}
const sum = add(1,2);
console.log(sum)
const hello = (messages) => {
console.log(`hello, ${messages}!`);
}
hello('Good');
✔ setInterval() , setTimeout()
setTimeout은 일정 시간 간격 이후에 함수가 한번 실행
setInterval은 일정 시간 간격으로 함수가 주기적으로 실행
✔ addEventListener()
사용자가 버튼을 클릭할 때 이벤트가 일어나는 메서드 리스너
element.addEventListener(event, function, useCapture);
Btn.addEventListener("click", () => {
console.log('Event Click');
});✔ createElement(), classList.add(), classList.contains(), innerHTML
span 태그를 생성한다.
const tag = document.createElement("span");
span 태그에 span__class를 추가 시킨다.
span.classList.add("span__class");
span 태그안에 <div class="inner-span">CONTENT</div> HTML을 재설정
span.innerHTML =
<div class="inner-span">CONTENT</div>;
span 태그에 inner-span 이라는 클래스가 존재하면,
true 아니면 false를 return 해준다.
span.classList.contains("inner-span");
✔ push(), removeChiled()
push()는 배열 끝에 요소를 추가한다.
const alphabet = ['A', 'C', 'D']; alphabet.push('B');
removeChiled()는 자식 노드를 제거하고 반환하는 메서드
[HTML] <div id="parents"> <div id="child"></div> </div> [javascript] let node = document.getElementById("child"); if (node.parentNode) { node.parentNode.removeChild(node); }
[ 1to50 Mini game code review ]
// init() 함수 정의
// 버튼을 클릭하면, addEventListener 메서드로 클릭하면 // start() 함수 실행
const init = () => {
startBtn.addEventListener("click", () => {
if (started) {
return false;
}
start();
startBtn.style.display="none";
});
}
// start() 함수 정의
const start = () => {
clearBoard();
clearBlcok();
blockRender();
status = 1;
startTime = new Date();
setTimer();
}
//Board 내용을 지우는 기능
const clearBoard = () => {
board.innerHTML = "";
}
//Random 으로 배열에 넣는 기능
const clearBlcok = () => {
started = true;
let arr1 = [];
let arr2 = [];
for(let i = 1; i <= 25; i++){
arr1.push(i); // 배열 25개를 i에 push
arr2.push(i + 25); // i + 25 만큼 arr2 push
}
for(let i = 0; i < 25; i++){
let idx = Math.floor(Math.random() * (25 - i)); // 25-i 만큼 random으로 돌린 다음 idx 변수에 넣어준다.
blocks.push(arr1[idx]);
arr1[idx] = arr1[25 - i - 1]; //중복 제거
}
for(let i = 0; i < 25; i++){
let idx = Math.floor(Math.random() * (25 - i));
blocks.push(arr2[idx]);
arr2[idx] = arr2[25 - i - 1];
}
}
//block rendering 5x5 (block, inner-block)
const blockRender = () => {
blocks.forEach((data, idx) => {
let left = ((idx + 1) % 5) * 100;
let top = (Math.floor((idx + 1) / 5) % 5) * 100;
let type = Math.ceil((idx + 1) / 25);
const block = document.createElement("div");
block.classList.add("block");
block.classList.add("type-" + type);
block.innerHTML = `<div class="inner-block" onclick="clickTile(this);"> ${data} </div>`;
block.style.left = left + "px";
block.style.top = top + "px";
blocks.push(block);
board.append(block);
});
}
// 1~50까지 타일을 클릭할 때 나타나는 기능
// tile을 클릭하면 statusCheck를 하는 기능
const clickTile = (tile) => {
if(tile.classList.contains("inner-block")){
let data = tile.innerText;
if(statusCheck(data)){ //true 이면 blockpop 함수 실행
blockPop(tile.parentNode); // 인자값은 tile의 부모를 파라미터로 값으로 보낸다.
nextStatus();
}
if(endChaek()){
end();
}
}
}
//status을 체크 하는 기능
//data와 status를 비교해서 맞으면 true 아니면 false를 리턴
const statusCheck = (data) => {
if(data == status){
return true;
}else{
return false;
}
}
//status를 한개씩 증가 시키는 함수
const nextStatus = () => {
status++;
}
// endChaek 함수를 통해 status가 51이면 true를 반환
const endChaek = () => {
if(status === 51){
return true;
}else{
return false;
}
}
//end class 추가 후 block을 한개씩 지워줌
const blockPop = (node) => {
node.classList.add("end");
setTimeout(() => {
board.removeChild(node);
}, 1000);
}
// 타이머를 출력하는 기능
const printTime = (text) => {
timer.innerText = text;
}
// 일정 함수가 주기적으로 실행
const setTimer = () => {
let timer = null;
timer = setInterval(() => {
printTime(getTime());
});
}
// 시간을 구하는 함수
const getTime = () => {
let now = new Date();
let temp = now - startTime;
let m = Math.floor((temp % (1000 * 60 * 60)) / (1000 * 60));
let s = Math.floor((temp % (1000 * 60)) / 1000);
let ms = Math.floor(temp % (1000 * 60) % 1000);
function intToTime(i){
return i >= 10 ? i : "0" + i;
}
return intToTime(m) + ":" + intToTime(s) + ":" + ms;
}
// mini 게임 종료
const end = () => {
started = true;
clearInterval(timer);
printTime("");
alert("게임 클리어 , 기록 : " + getTime());
location.reload();
}
window.onload = () => {
init();
}
kyday63@gamil.com