MITxPro/screenSaverPacmen.html at main · powerlesbian/MITxPro · 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
<html>
<SCRIPT>
    var pos = 0;
    const pacArray = [
        ['PacMan1.png', 'PacMan2.png'],
        ['PacMan3.png', 'PacMan4.png']
    ]; //This array holds the pacmen images
    var direction = 0;
    var focus = 0;
    const pacMen = []; // This array holds all the pacmen

    function setToRandom(scale) {
        return {
            x: Math.random() * scale,
            y: Math.random() * scale
        }
    }
    // Factory to make a PacMan at a random position with random velocity
    function makePac() {
        // returns an object with random values scaled {x: 33, y: 21}
        let velocity = setToRandom(10); // {x:?, y:?}
        let position = setToRandom(300);
        // Add image to div id = game
        let game = document.getElementById('game');
        let newimg = document.createElement('img');
        newimg.style.position = 'absolute';
        newimg.src = pacArray[direction][focus];
        newimg.width = 100;
        //
        // set position here

        //NEED TO ADD CODE HERE!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

newimg.style.left = position.x+300;
newimg.style.top = position.y+100;


        // add new Child image to game
        game.appendChild(newimg);
        // return details in an object
        return {
            position,
            velocity,
            newimg
        }
    }

    function update() {
        //loop over pacmen array and move each one and move image in DOM
        pacMen.forEach((item) => {
            checkCollisions(item)
            item.position.x += item.velocity.x;
            item.position.y += item.velocity.y;

            item.newimg.style.left = item.position.x;
            item.newimg.style.top = item.position.y;

        })
        setTimeout(update, 20);
    }
    function stopPlease (){
// ask all pacmen to stop moving
pacMen.splice(0,pacMen.length);
    }

    function checkCollisions(item) {
        //
        // detect collision with all walls and make pacman bounce
        ////NEEDS TO ADD CODE HERE!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
        focus = (focus + 1) % 2;

if (item.position.x +item.velocity.x +item.newimg.width >window.innerWidth || item.position.x +item.velocity.x <0)
item.velocity.x= -item.velocity.x;

if (item.position.y +item.velocity.y +item.newimg.height >window.innerHeight || item.position.y +item.velocity.y <0)
item.velocity.y=-item.velocity.y;


    }

    function makeOne() {
        pacMen.push(makePac()); // add a new PacMan
    }


</SCRIPT>

<body>
    <div id='game'>
        <button onclick='makeOne()' width='500' height='80'>Add PacMan</button>
        <button onclick='update()' width='500' height='80'>Start Floating</button>
        <button onclick='stopPlease()' width='500' height='80'>Stop Craziness</button>

    </div>
</body>

</html>