From 6b5d16ddf75a8d2e0aaf2fbc018cae2bd4982af0 Mon Sep 17 00:00:00 2001 From: wnsdnn Date: Thu, 24 Dec 2020 18:42:34 +0900 Subject: [PATCH 1/3] wnsdnn --- index.html | 2 +- js/common.js | 78 +++++++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 78 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index dc699a4..3bd20f8 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,5 @@ - + 공 튕기기 diff --git a/js/common.js b/js/common.js index 2937bc6..51f09e6 100644 --- a/js/common.js +++ b/js/common.js @@ -1 +1,77 @@ -//write... \ No newline at end of file +//write... +window.onload = function(){ + ballmove(); +} + +//공 움직이기 + +let ball = document.querySelector('.ball'); +let x = 0; +let y = 0; +function playR(){ + x += 1; + ball.style.marginLeft = x+'px'; +} +function playL(){ + x -= 1; + ball.style.marginLeft = x+'px'; +} +function playB(){ + y -= 1; + ball.style.marginBottom = y+'px' +} +function playT(){ + y += 1; + ball.style.marginBottom = y+'px'; +} +let set = setInterval(playR,10) + +function ballmove(){ + // 스페이스바 누를시 공 멈추기/ 움직이기 + window.addEventListener('keydown', function(e){ + let key = e.key; + let bl = true; + while(bl){ + switch(key){ + case 32: + clearInterval(set) + bl = false; + break; + // 방향키로 공 움직이기 + case 37: + clearInterval(set) + set = setInterval(playL,10) + break; + case 38: + clearInterval(set) + set = setInterval(playT,10) + break; + case 39: + clearInterval(set) + set = setInterval(playR,10) + break; + case 40: + clearInterval(set) + set = setInterval(playB,10) + break; + } + } + if(bl == false){ + window.addEventListener('keydown', function(e){ + let key = e.key; + if(key == 32){ + bl =true + } + }) + } + }) +} +//벽에 닿으면 반대 방향으로 튕기기 + +// getBoundingClientRect + + + +//공이 멈춰 있을때 어떠한 조작이 안되게 하기 + + From fca1fc7a8dfba9e7e1409aa8fd4fc40d6402f865 Mon Sep 17 00:00:00 2001 From: wnsdnn Date: Thu, 24 Dec 2020 19:24:47 +0900 Subject: [PATCH 2/3] commit --- js/common.js | 57 +++++++++++++++++++++------------------------------- 1 file changed, 23 insertions(+), 34 deletions(-) diff --git a/js/common.js b/js/common.js index 51f09e6..b3289dd 100644 --- a/js/common.js +++ b/js/common.js @@ -29,40 +29,29 @@ let set = setInterval(playR,10) function ballmove(){ // 스페이스바 누를시 공 멈추기/ 움직이기 window.addEventListener('keydown', function(e){ - let key = e.key; - let bl = true; - while(bl){ - switch(key){ - case 32: - clearInterval(set) - bl = false; - break; - // 방향키로 공 움직이기 - case 37: - clearInterval(set) - set = setInterval(playL,10) - break; - case 38: - clearInterval(set) - set = setInterval(playT,10) - break; - case 39: - clearInterval(set) - set = setInterval(playR,10) - break; - case 40: - clearInterval(set) - set = setInterval(playB,10) - break; - } - } - if(bl == false){ - window.addEventListener('keydown', function(e){ - let key = e.key; - if(key == 32){ - bl =true - } - }) + let key = e.keyCode; + switch(key){ + case 32: + clearInterval(set) + bl = false; + break; + // 방향키로 공 움직이기 + case 37: + clearInterval(set) + set = setInterval(playL,10) + break; + case 38: + clearInterval(set) + set = setInterval(playT,10) + break; + case 39: + clearInterval(set) + set = setInterval(playR,10) + break; + case 40: + clearInterval(set) + set = setInterval(playB,10) + break; } }) } From 6338f4b3a9d5f72bed8680d47279a999f9f17b29 Mon Sep 17 00:00:00 2001 From: wnsdnn Date: Sun, 27 Dec 2020 18:39:30 +0900 Subject: [PATCH 3/3] =?UTF-8?q?=EC=99=84=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/common.js | 133 +++++++++++++++++++++++++++++---------------------- 1 file changed, 75 insertions(+), 58 deletions(-) diff --git a/js/common.js b/js/common.js index b3289dd..c560c69 100644 --- a/js/common.js +++ b/js/common.js @@ -1,66 +1,83 @@ //write... -window.onload = function(){ - ballmove(); -} - -//공 움직이기 - -let ball = document.querySelector('.ball'); -let x = 0; -let y = 0; -function playR(){ - x += 1; - ball.style.marginLeft = x+'px'; -} -function playL(){ - x -= 1; - ball.style.marginLeft = x+'px'; -} -function playB(){ - y -= 1; - ball.style.marginBottom = y+'px' -} -function playT(){ - y += 1; - ball.style.marginBottom = y+'px'; -} -let set = setInterval(playR,10) -function ballmove(){ - // 스페이스바 누를시 공 멈추기/ 움직이기 - window.addEventListener('keydown', function(e){ - let key = e.keyCode; - switch(key){ - case 32: - clearInterval(set) - bl = false; - break; - // 방향키로 공 움직이기 - case 37: - clearInterval(set) - set = setInterval(playL,10) - break; - case 38: - clearInterval(set) - set = setInterval(playT,10) - break; - case 39: - clearInterval(set) - set = setInterval(playR,10) - break; - case 40: - clearInterval(set) - set = setInterval(playB,10) - break; - } - }) -} //벽에 닿으면 반대 방향으로 튕기기 +let ball = document.querySelector('.ball'); +let fl = document.querySelector('.floor'); +let x = ball.getBoundingClientRect().left; // x에 ball의 left 값을 선언 +let y = ball.getBoundingClientRect().top; // y에 ball의 top 값을 선언 +let mx = 1; // mx의 초기값 (공의 스피드) +// let my = -0.5; // (대각선) +let my = 0; // my의 초기값 (공의 스피드) // (좌우상하) -// getBoundingClientRect - +//공 움직이기 +function move(){ + let br = ball.getBoundingClientRect(); + if(x >= window.innerWidth - br.width) mx = -1 // x의 값이 (화면의 가로값 - 공의 넓이)보다 크거나 같으면 mx를 -1로 + if(x <= 0) mx = 1 //x가 0보다 작거나 같으면 mx를 1로 + + if(y >= window.innerHeight - br.height - fl.clientHeight) my = -1 // y의 값이 (화면의 세로값 - 공의 높이)보다 크거나 같으면 my를 -1로 // (좌우상하) + if(y <= 0) my = 1 //y가 0보다 작거나 같으면 my를 1로 // (좌우상하) + // if(br.top >= window.innerHeight - br.height - fl.clientHeight) my = -0.5 // (대각선) + // if(br.top <= 0) my = 0.5 // (대각선) + + ball.style.left = x + "px"; //ball의 left 값을 x로 + x += mx; // x의 mx값을 추가 (x = x + mx) + ball.style.top = y + "px"; //ball의 top 값을 y로 + y += my; // y의 my값을 추가 (y = y + my) +} -//공이 멈춰 있을때 어떠한 조작이 안되게 하기 +let set = setInterval(move,0) // 처음 공 움직이기 +// 스페이스바 누를시 공 멈추기/ 움직이기 +window.addEventListener('keydown',stop) // 키보드의 키입력시 함수 실행 +let count = 0; // 멈추는데 쓸 것 +function stop(e){ + let key = e.keyCode; // 누른 키의 키코드 + if(key == 32){ + clearInterval(set) + count++; //count 1추가 + } + //공이 멈춰 있을때 어떠한 조작이 안되게 하기 + if(count == 2){ // count 2일때 실행 + // setInterval(move, 0) // <-- 이렇게 되면 가속됨;; + set = setInterval(move, 0) + count = 0; //count 초기화 + } + // 방향키로 공 움직이기 + // (대각선) + // switch(key){ + // case 37: + // mx = -1 + // break; + // case 38: + // my = -0.5 + // break; + // case 39: + // mx = 1 + // break; + // case 40: + // my = 0.5 + // break; + // } + // (좌우상하) + switch(key){ + case 37: + mx = -1; + my = 0 + break; + case 38: + my = -1; + mx = 0 + break; + case 39: + mx = 1; + my = 0 + break; + case 40: + my = 1; + mx = 0 + break; + } +} \ No newline at end of file