ballMovement/script.js at main · cattmassidy528/ballMovement · GitHub

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


var area = document.getElementById("area")
var amount = 1
var ballWidth = 40
var rightMax = 300 - ballWidth
var leftMax = 0
var Xpos = 0
var Ypos = 0
var YMin = 0
var Yamount = 1
var YMax = 300
console.log(area.style)
function create() {
    var ball = document.createElement("div")
    ball.classList.add('ball')
    area.appendChild(ball)

    function moveIt() {
    // SERIOUSLY?? this easy? ..i hate everything.
        Xpos = Xpos + amount
        ball.style.left = Xpos + 'px'
        Ypos = Ypos + Yamount
        ball.style.top = Ypos + 'px'
        if (Xpos > rightMax) {
            amount = --amount
        }
        if (Xpos < leftMax) {
            amount = ++amount
        }
        if(Ypos < YMin) {
            Yamount = ++Yamount
        }
        if (Ypos > YMax) {
            Yamount = --Yamount
        }
    }
    setInterval(moveIt,10)
}
create()


//var reverse = reverse
//
//const area = {
//    el: document.getElementById("area"),
//    height: 600,
//    width: 400,
//}
//
//function initArea() {
//    area.el.style.width = area.width + 'px'
//    area.el.style.height = area.height + 'px'
//    document.body.appendChild(area.el)
//}
//initArea()
//
//const ball = {
//    be: document.createElement('div'),
//    amount:  10,
//
//    fu: (ball) => {
//        ball.classList.add('ball')
//        area.el.appendChild(ball)
//    },
//    forward: () => {
//        ball.amount =  ball.amount + 5
//        ball.be.style.left = ball.amount + 'px'
//        //wack()
//    },
//    backward: () => {
//        ball.amount =  ball.amount - 5
//        ball.be.style.left = ball.amount + 'px'
//
//    },
//    up: () => {
//        ball.amount =  ball.amount + 5
//        ball.be.style.top = ball.amount + 'px'
//    }
//}
//ball.fu(ball.be)
//
//let anotherBall
//
//
//function gimmeBounds() {
//
//    let ballBounds = ball.be.getBoundingClientRect(ball)
//    console.log(ballBounds)
//}
//
//gimmeBounds()
//
////function wack() {
//    if (ball.amount === 100) {
//        clearInterval(int)
//        let backInt = setInterval(ball.backward, 100)
//    }
//    if(ball.amount < 0) {
//        clearInterval(backInt)
//        setInterval(ball.forward, 100)
//    }
//
//}