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
124
|
<!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, switchState
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
switchState = 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>
|
