hvsys/snake.html at main · domiK66/hvsys · 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
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
        <title>HVSYS secure webserver - Snake Game</title>
    </head>
    <body>
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
            <div class="container-xl">
                <a class="navbar-brand" href="/">HVSYS_Project_1_15</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample07XL" aria-controls="navbarsExample07XL">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarsExample07XL">
                    <ul class="navbar-nav ml-auto">
                        <li class="nav-item active">
                            <a class="nav-link" href="/">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/guestbook.php">Guestbook</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/snake.html">Snake Game JS</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="https://github.com/domiK66/hvsys">Github</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <div class="container" role="main">
            <h2 class="mt-4">Simple JavaScript - Snake Game</h2>
            <canvas id="gc" width="400" height="400"></canvas>
            <p class="mt-4">Project by Dominik Kainz, Mensur Bukarevic & Lukas Dworacek
            </p>
            <p>
                Copyright by <a href="https://www.fh-joanneum.at">www.fh-joanneum.at</a>
            </p>
        </div>

        <script>
        window.onload=function() {
            canv=document.getElementById("gc");
            ctx=canv.getContext("2d");
            document.addEventListener("keydown",keyPush);
            setInterval(game,1000/15);
        }
        px=py=10;
        gs=tc=20;
        ax=ay=15;
        xv=yv=0;
        trail=[];
        tail = 5;
        function game() {
            px+=xv;
            py+=yv;
            if(px<0) {
                px= tc-1;
            }
            if(px>tc-1) {
                px= 0;
            }
            if(py<0) {
                py= tc-1;
            }
            if(py>tc-1) {
                py= 0;
            }
            ctx.fillStyle="black";
            ctx.fillRect(0,0,canv.width,canv.height);

            ctx.fillStyle="lime";
            for(var i=0;i<trail.length;i++) {
                ctx.fillRect(trail[i].x*gs,trail[i].y*gs,gs-2,gs-2);
                if(trail[i].x==px && trail[i].y==py) {
                    tail = 5;
                }
            }
            trail.push({x:px,y:py});
            while(trail.length>tail) {
            trail.shift();
            }

            if(ax==px && ay==py) {
                tail++;
                ax=Math.floor(Math.random()*tc);
                ay=Math.floor(Math.random()*tc);
            }
            ctx.fillStyle="red";
            ctx.fillRect(ax*gs,ay*gs,gs-2,gs-2);
        }
        function keyPush(evt) {
            switch(evt.keyCode) {
                case 37:
                    xv=-1;yv=0;
                    break;
                case 38:
                    xv=0;yv=-1;
                    break;
                case 39:
                    xv=1;yv=0;
                    break;
                case 40:
                    xv=0;yv=1;
                    break;
            }
        }
        </script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
    </body>
</html>