<!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/util.js"></script>
<script src="/paperflight/update.js"></script>
<script src="/paperflight/draw.js"></script>
<script src="/paperflight/items.js"></script>
<script src="/paperflight/levels.js"></script>
<script>
var username = undefined
var score, plane, gameInterval, currLevelIndex,
currLevel, t, collected, startLevel, switchState,
gameIsOver
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)
}
gameIsOver = false
score = 0
t = 0
plane = {
x: 30,
y: 100,
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) {
plane.x = 30
plane.y = 100
plane.dir= 1
currLevelIndex = to
collected = 0
if (to in levels) {
currLevel = levels[currLevelIndex]
currLevel.items = currLevel.items.slice()
currLevel.items.forEach(item => {
if ("collected" in item) {
item.collected = false
}
})
switchState = 0
startLevel = false
} else {
currLevel = createLevel("YOU WIN!", 0, -100, -100)
}
}
function atExit() {
return isPlaneInCircle(currLevel.exit) && collected >= currLevel.coinsNeeded
}
function gameOver() {
gameIsOver = true
}
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>