From 2b7c671cc2504494dae1627c5cf3c82e4af2b555 Mon Sep 17 00:00:00 2001 From: kimjuneseo Date: Thu, 24 Dec 2020 18:56:26 +0900 Subject: [PATCH 1/3] kim --- README.md | 20 +++++++------------- js/common.js | 26 +++++++++++++++++++++++++- 2 files changed, 32 insertions(+), 14 deletions(-) diff --git a/README.md b/README.md index 1044c37..0728ae8 100644 --- a/README.md +++ b/README.md @@ -1,16 +1,10 @@ -# 웹기능반 공튕기기 과제 - -## 🚀미션 - -### (1) 포크떠서 PR로 올리기 -### (2) 서로 코드리뷰 해주기 -+ [코드리뷰 가이드](https://github.com/JaeYeopHan/tip-archive/issues/13) +# 공튕기기 과제 ## 🎯요구사항 -- [ ] 문서를 로딩하면 공이 움직이기 -- [ ] 공이 벽에 닿으면 반대 방향으로 튕기기 -- [ ] 방향키를 눌러 방향조절하기 -- [ ] 스페이스 바를 누르면 공 멈추기 / 한번 더 누르면 다시 움직이게 하기 -- [ ] 공이 멈춘 상태에서는 어떠한 조작도 입력되지 않게 하기 -- [ ] 코드에 주석달기 +- 문서를 로딩하면 공이 움직이기 +- 공이 벽에 닿으면 반대 방향으로 튕기기 +- 방향키를 눌러 방향조절하기 +- 스페이스 바를 누르면 공 멈추기 / 한번 더 누르면 다시 움직이게 하기 +- 공이 멈춘 상태에서는 어떠한 조작도 입력되지 않게 하기 +- 코드에 주석달기 diff --git a/js/common.js b/js/common.js index 2937bc6..59e3a40 100644 --- a/js/common.js +++ b/js/common.js @@ -1 +1,25 @@ -//write... \ No newline at end of file +window.onload = () => { + let ball = document.getElementsByClassName('ball')[0] //ball이라는 클래스를 가져옴 + let bg = document.getElementsByClassName('floor')[0] //floor이라는 클래스를 가져옴 + let rect = ball.getBoundingClientRect() //볼의 네방향의 좌표를 가져옴 + let x = rect.left //x의 left + let mx = 1 + let y = rect.top //y의 top + let my = 1 // + + function move() { + if (x >= window.innerWidth - rect.width) {mx = -1} //x가 창안에 가로보다 커지거나 같아지면 mx가 -1 바낌 + if (y >= window.innerHeight - bg.clientHeight - rect.height) {my = -1} //x가 창안에 가로보다 커지거나 같아지면 mx가 -1 바낌 + if(x == 0){mx = 1} //x가 왼쪽 끝에 다으면 다시 mx가 1이됨 + if(y == 0){my = 1} //x가 왼쪽 끝에 다으면 다시 mx가 1이됨 + ball.style.left = x + 'px' + x += mx //x = x+mx + ball.style.top = y + 'px' + y += my //x = x+mx + + } + //console.log(bg.clientWidth) + + setInterval(move, 1) //함수 실행 , 시간 + +} \ No newline at end of file From a25ff75c20f82973c54840f4c21523ac7d3826d0 Mon Sep 17 00:00:00 2001 From: kimjuneseo Date: Sun, 27 Dec 2020 16:36:47 +0900 Subject: [PATCH 2/3] june --- js/11.js | 57 ++++++++++++++++++++++++++++++++++++ js/common.js | 81 ++++++++++++++++++++++++++++++++++++---------------- 2 files changed, 113 insertions(+), 25 deletions(-) create mode 100644 js/11.js diff --git a/js/11.js b/js/11.js new file mode 100644 index 0000000..8b056a7 --- /dev/null +++ b/js/11.js @@ -0,0 +1,57 @@ +//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; + } + }) +} \ No newline at end of file diff --git a/js/common.js b/js/common.js index 59e3a40..afb7eac 100644 --- a/js/common.js +++ b/js/common.js @@ -1,25 +1,56 @@ -window.onload = () => { - let ball = document.getElementsByClassName('ball')[0] //ball이라는 클래스를 가져옴 - let bg = document.getElementsByClassName('floor')[0] //floor이라는 클래스를 가져옴 - let rect = ball.getBoundingClientRect() //볼의 네방향의 좌표를 가져옴 - let x = rect.left //x의 left - let mx = 1 - let y = rect.top //y의 top - let my = 1 // - - function move() { - if (x >= window.innerWidth - rect.width) {mx = -1} //x가 창안에 가로보다 커지거나 같아지면 mx가 -1 바낌 - if (y >= window.innerHeight - bg.clientHeight - rect.height) {my = -1} //x가 창안에 가로보다 커지거나 같아지면 mx가 -1 바낌 - if(x == 0){mx = 1} //x가 왼쪽 끝에 다으면 다시 mx가 1이됨 - if(y == 0){my = 1} //x가 왼쪽 끝에 다으면 다시 mx가 1이됨 - ball.style.left = x + 'px' - x += mx //x = x+mx - ball.style.top = y + 'px' - y += my //x = x+mx - - } - //console.log(bg.clientWidth) - - setInterval(move, 1) //함수 실행 , 시간 - -} \ No newline at end of file +window.onload = function () { re() } +let ball = document.getElementsByClassName('ball')[0] //ball이라는 클래스를 가져옴 +let bg = document.getElementsByClassName('floor')[0] //floor이라는 클래스를 가져옴 +let rect = ball.getBoundingClientRect() //볼의 네방향의 좌표를 가져옴 +let x = rect.left //x의 left +let mx = 0.5 +let y = rect.top //y의 top +let my = 0.5 + + +//움직이고 튕기기 +function move() { + if (x >= window.innerWidth - rect.width) { mx = -0.5 } //x가 창안에 가로보다 커지거나 같아지면 mx가 -1 바낌 + if (y >= window.innerHeight - bg.clientHeight - rect.height) { my = -0.5 } //x가 창안에 가로보다 커지거나 같아지면 mx가 -1 바낌 + if (x == 0) { mx = 0.5 } //x가 왼쪽 끝에 다으면 다시 mx가 1이됨 + if (y == 0) { my = 0.5 } //x가 왼쪽 끝에 다으면 다시 mx가 1이됨 + ball.style.left = x + 'px' + x += mx //x = x+mx + ball.style.top = y + 'px' + y += my //x = x+mx +} + +let res = setInterval(move, 1) //함수 실행 , 시간 + + + +let stopped = false +//키보드 조작 +function re() { + window.addEventListener('keydown', function (e) { + let key = e.keyCode; + + if (key == 32 && !stopped) { //스페이스 + clearInterval(res) + stopped = true + } else if (key == 32 && stopped) { + res = setInterval(move, 1) + stopped = false + } + if (key == 37) { //좌 + mx = -0.5 + + } if (key == 38) {//상 + + my = -0.5 + + } if (key == 39) {//우 + + mx = 0.5 + + } if (key == 40) {//하 + my = 0.5 + } + }) + +}; \ No newline at end of file From 7ca9f09ff6aa937c6464de5068596e5108b02d78 Mon Sep 17 00:00:00 2001 From: kimjuneseo Date: Sun, 27 Dec 2020 16:37:16 +0900 Subject: [PATCH 3/3] kim --- js/11.js | 57 -------------------------------------------------------- 1 file changed, 57 deletions(-) delete mode 100644 js/11.js diff --git a/js/11.js b/js/11.js deleted file mode 100644 index 8b056a7..0000000 --- a/js/11.js +++ /dev/null @@ -1,57 +0,0 @@ -//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; - } - }) -} \ No newline at end of file