kim

README.md

@@ -1,16 +1,10 @@
-# 웹기능반 공튕기기 과제
-
-## 🚀미션
-
-### (1) 포크떠서 PR로 올리기
-### (2) 서로 코드리뷰 해주기
-+ [코드리뷰 가이드](https://github.com/JaeYeopHan/tip-archive/issues/13)
+# 공튕기기 과제
 
 ## 🎯요구사항
 
-- [ ] 문서를 로딩하면 공이 움직이기
-- [ ] 공이 벽에 닿으면 반대 방향으로 튕기기
-- [ ] 방향키를 눌러 방향조절하기
-- [ ] 스페이스 바를 누르면 공 멈추기 / 한번 더 누르면 다시 움직이게 하기
-- [ ] 공이 멈춘 상태에서는 어떠한 조작도 입력되지 않게 하기
-- [ ] 코드에 주석달기
+- 문서를 로딩하면 공이 움직이기
+- 공이 벽에 닿으면 반대 방향으로 튕기기
+- 방향키를 눌러 방향조절하기
+- 스페이스 바를 누르면 공 멈추기 / 한번 더 누르면 다시 움직이게 하기
+- 공이 멈춘 상태에서는 어떠한 조작도 입력되지 않게 하기
+- 코드에 주석달기

js/common.js

@@ -1 +1,56 @@
-//write...
+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
+        }
+    })
+
+};