aboutsummaryrefslogtreecommitdiff
path: root/src/paperflight/index.html
blob: 731b92e2fac1a799ee5cd04696bbb662991785fb (plain)
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
115
116
117
118
119
120
121
122
123
<!doctype html>
<html lang="en">

<head>
    <title>Paper Flight</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" type="text/css" href="/paperflight/styles.css">
</head>

<body style="padding:0; margin:0; overflow:hidden;">
    <canvas id="canvas"></canvas>
    <script src="/highscore.js"></script>
    <script>
        var width = 800
        var height = 600
        var fps = 60
    </script>
    <script src="/paperflight/update.js"></script>
    <script src="/paperflight/draw.js"></script>
    <script src="/paperflight/levels.js"></script>
    <script>
        var username = undefined

        var score, plane, gameInterval, currLevelIndex, currLevel, t, collected, startLevel

        var DEFAULT_VX = 3
        var DEFAULT_VY = 0.5
        var UP_VX = 1
        var UP_VY = 0.1
        var DOWN_VX = 5
        var DOWN_VY = 2

        window.onload = function () {
            canvas = document.getElementById("canvas");
            canvas.width = width
            canvas.height = height
            ctx = canvas.getContext("2d");
            document.addEventListener("keydown", keyDown);
            document.addEventListener("keyup", keyUp);
            document.addEventListener("click", mouseClick);
            init();
            draw()
        }
        function init() {
            if (gameInterval) {
                clearInterval(gameInterval)
            }
            score = 0
            t = 0
            plane = {
                x: 30,
                y: height / 4,
                vx: DEFAULT_VX,
                vy: DEFAULT_VY,
                width: 30,
                height: 10,
                dir: 1
            }
            setLevel(1)
            gameInterval = window.setInterval(function () {
                update();
                draw()
            }, 1000 / fps)
        }
        function setLevel(to) {
            currLevelIndex = to
            currLevel = levels[currLevelIndex]
            currLevel.items = currLevel.items.slice()
            collected = 0
            startLevel = false
        }
        function atExit() {
            return (Math.sqrt(Math.pow(plane.x - currLevel.exit.x, 2) + Math.pow(plane.y - currLevel.exit.y, 2)) < 20
                || Math.sqrt(Math.pow(plane.x + plane.width - currLevel.exit.x, 2) + Math.pow(plane.y - currLevel.exit.y, 2)) < 20)
                && collected >= currLevel.coinsNeeded
        }
        function gameOver() {
            ctx.font = "20px Courier"
            ctx.fillStyle = "black"
            ctx.fillText("Game Over!", 200, 200);
            window.clearInterval(gameInterval)
        }
        function keyDown(e) {
            startLevel = true
            switch (e.key) {
                case "ArrowLeft": // LEFT
                    plane.dir = -1
                    break;
                case "ArrowRight": // RIGHT
                    plane.dir = 1
                    break;
                case "ArrowUp":
                    plane.vx = UP_VX
                    plane.vy = UP_VY
                    break;
                case "ArrowDown":
                    plane.vx = DOWN_VX
                    plane.vy = DOWN_VY
                    break;
                case "R":
                case "r":
                    init()
                    break;

            }
        }
        function keyUp(e) {
            switch (e.key) {
                case "ArrowUp":
                case "ArrowDown":
                    plane.vx = DEFAULT_VX
                    plane.vy = DEFAULT_VY
                    break;
            }
        }
        function mouseClick(e) {
            console.log(e.x, e.y)
        }
    </script>
</body>

</html>