JavaScript/box.js at master · adeane89/JavaScript · 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
document.onkeypress = function(e){
    var box = document.getElementsByTagName("box")[0];

    var top = window.getComputedStyle(box).top;
    var left = window.getComputedStyle(box).left;
    var xPosition = window.getComputedStyle(box).backgroundPositionX;
    var yPosition = window.getComputedStyle(box).backgroundPositionY;

    top = top.replace("px", "");
    top = parseInt(top);
    left = left.replace("px", "");
    left = parseInt(left);

    xPosition = xPosition.replace("px", "");
    xPosition = parseInt(xPosition);
    yPosition = yPosition.replace("px", "");
    yPosition = parseInt(yPosition);

    var pressed = e.key;

    //Set the new top and left positions of the box by updating the property!
    if (pressed == "w") {
        top -= 10;
        yPosition -= 56.25;
    } else if (pressed == "a") {
        left -= 10;
        xPosition -= 56.25;
    } else if (pressed == "s") {
        top += 10;
        yPosition += 56.25;
    } else if (pressed == "d") {
        left += 10;
        xPosition += 56.25;
        if (xPosition <= -168.75) {
            xPosition = 0;
        }
    }


    box.style.top = top + "px";
    box.style.backgroundPositionX = xPosition + "px";
    box.style.left = left + "px";
    box.style.backgroundPositionY = yPosition + "px";

    console.log(e.key);

}