thedetectorsprojects.github.io/game.html at master · Devanshops/thedetectorsprojects.github.io · 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
<!DOCTYPE html>
<html>
    <head>
        <title>Games</title>
        <link rel="stylesheet" type="text/css" href="game.css">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
            integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    </head>
    <body>
        <h1 class="demo">The Classic</h1><br>
        <div class="menu-place">
            <div class="menu-but">
                <input type="checkbox" id="menu-check" />
                <label for="menu-check" class="menu-label">
                    <div class="menu-text"></div>
                </label>
            </div>
        </div>
        <canvas id="gameCanvas" width="1200" height="720" ></canvas>

        <br><br><br><br><br><br><br><br><br><br><br><br>
        <div class="parallax">
            <h2 class="The">The</h2>
            <h1 class="start">
                <span class="end1">D</span><span class="middle1">etector</span>
                <span class="middle2"><i class="fas fa-camera-retro"></i></span><span class="end2">s</span>
            </h1>
        </div>
    </body>


    <script type="text/javascript">
        var p1y=p2y=40,
            pt=10,
            ph=100,
            bx=by=50,
            bd=5,
            xv=yv=4,
            score1=score2=0,
            ais=4;
        window.onload=function(){
            c=document.getElementById("gameCanvas");
            cc=c.getContext('2d');
            setInterval(update,1000/30);
            c.addEventListener('mousemove',function(e){
                p1y=e.clientY-ph/2;
              //  p2y=e.clientY-ph/2;
            })
        }
        function reset(){
            bx=c.width/2;
            by=c.height/2;
            xv=-xv;
            yv=3;
        }
        function update(){
            bx+=xv;
            by+=yv;
            if(by<0 && yv<0){
                yv=-yv;
            }
            if(by>c.height && yv>0){
                yv=-yv
            }
            if(bx<0){
                if(by>p1y && by<p1y+ph){
                    xv=-xv
                    dy=by-(p1y+ph/2);
                    yv=dy*0.3;
                } else {
                    score2++;
                    reset();
                }
            }
            if(bx>c.width){
                if(by>p1y && by<p2y+ph){
                    xv=-xv
                    dy=by-(p2y+ph/2);
                    yv=dy*0.3;
                } else {
                    score1++;
                    reset();
                }
            }


            if(p2y+ph/2<by){
                p2y+=ais;
            } else {
                p2y-=ais;
            }

            cc.fillStyle='black';
            cc.fillRect(0,0,c.width,c.height);

            cc.fillStyle='white';
            cc.fillRect(0,p1y,pt,ph);
            cc.fillRect(c.width-pt,p2y,pt,ph);
            cc.fillRect(bx-bd/2,by,bd,bd);
            cc.fillText(score1,100,100);
            cc.fillText(score2,c.width,100,100);
            //cc.fillRect()
        }
    </script>
</html>