1-HTML-CSS-JavaScript/matching-game.html at master · chaparin/1-HTML-CSS-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
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="robots" content="noindex,nofollow">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pattern Matching Game</title>
    <style>
        img {
            position: absolute;
        }
        div {
            position: absolute;
            width: 500px;
            height: 500px;
        }
        #rightSide {
            left: 500px;
            border-left: 1px solid;
        }
        #bottom {
            top: 700px;
        }
    </style>
</head>
<body>
    <h1>Pattern Matching Game</h1>
    <p>Click on the extra smiling face on the left.</p>
    <div id="leftSide"></div>
    <div id="rightSide"></div>
    <script>
        window.addEventListener('load', generateFaces);
        let numberOfFaces = 5;
        const theLeftSide = document.getElementById('leftSide');
        const theRightSide = document.getElementById('rightSide');

        function generateFaces() {
            for (let i = 0; i < numberOfFaces; i++) {
                let face = document.createElement('img');
                face.src = 'images/smile.png';
                let randomTop = Math.floor(Math.random() * 400) + 1;
                let randomLeft = Math.floor(Math.random() * 400) + 1;

                face.style.top = randomTop + 'px';
                face.style.left = randomLeft + 'px';

                theLeftSide.appendChild(face);
            }
            const leftSideImages = theLeftSide.cloneNode(true);
            leftSideImages.removeChild(leftSideImages.lastChild);
            theRightSide.appendChild(leftSideImages);
            theLeftSide.lastChild.addEventListener('click', nextLevel);
            document.body.addEventListener('click', gameOver);
        }

        function nextLevel(event) {
            event.stopPropagation();
            numberOfFaces += 5;
            while (theLeftSide.firstChild) {
                theLeftSide.removeChild(theLeftSide.firstChild);
            }
            while (theRightSide.firstChild) {
                theRightSide.removeChild(theRightSide.firstChild);
            }
            generateFaces();
        }

        function gameOver() {
            alert('Game over!');
            document.body.removeEventListener('click', gameOver);
            theLeftSide.lastChild.removeEventListener('click', nextLevel);
        }
    </script>
    <div id="bottom">
        <h2>The code used to build this game:</h2>
            <ul>
                <li><a href="https://github.com/chaparin/1-HTML-CSS-JavaScript/blob/master/matching-game.html" target="_blank">matching-game.html</a></li>
            </ul>
    </div>
</body>
</html>