diff options
Diffstat (limited to 'src/paperflight/static')
| -rw-r--r-- | src/paperflight/static/draw.js | 74 | ||||
| -rw-r--r-- | src/paperflight/static/levels.js | 94 | ||||
| -rw-r--r-- | src/paperflight/static/styles.css | 4 | ||||
| -rw-r--r-- | src/paperflight/static/update.js | 48 |
4 files changed, 220 insertions, 0 deletions
diff --git a/src/paperflight/static/draw.js b/src/paperflight/static/draw.js new file mode 100644 index 0000000..fe0cad5 --- /dev/null +++ b/src/paperflight/static/draw.js @@ -0,0 +1,74 @@ +function draw() { + ctx.fillStyle = "#4444ff" + ctx.fillRect(0, 0, width, height) + + drawPlane() + currLevel.items.forEach(item => { + item.draw() + }) + drawExit(currLevel.exit) + + ctx.fillStyle = "#222" + ctx.font = "20px Courier" + ctx.fillText(`Level ${currLevelIndex} (${collected}/${currLevel.coinsNeeded}) - Time ${Math.round(t / fps / 60)}:${Math.round(t / fps) % 60}`, 20, 20) + +} +function drawPlane() { + ctx.fillStyle = "#fff" + ctx.strokeStyle = "#111" + ctx.lineWidth = 3 + ctx.beginPath(); + if (plane.dir < 0) { + ctx.moveTo(plane.x + plane.width, plane.y); + ctx.lineTo(plane.x, plane.y); + ctx.lineTo(plane.x + plane.width + 4, plane.y + plane.height); + ctx.lineTo(plane.x + plane.width, plane.y); + } else { + ctx.moveTo(plane.x, plane.y); + ctx.lineTo(plane.x + plane.width, plane.y); + ctx.lineTo(plane.x + 4, plane.y + plane.height); + ctx.lineTo(plane.x, plane.y); + } + ctx.stroke(); + ctx.fill(); +} +function drawVent() { + ctx.fillStyle = "#ccc" + ctx.fillRect(this.x, this.y, this.width, 10) + ctx.fillStyle = "white" + var yDelta = Math.sin(t / 30) * 40 + for (var i = this.y; i > 30; i -= 60) { + ctx.fillRect(this.x, this.y - i + yDelta, 1, 8) + ctx.fillRect(this.x+this.width/2-2, this.y - i + yDelta/2, 1, 12) + ctx.fillRect(this.x+this.width-2, this.y - i + yDelta, 1, 8) + } +} +function drawBlock() { + ctx.fillStyle = "#0d0" + ctx.fillRect(this.x, this.y, this.width, this.height) +} +function drawRamp() { + ctx.fillStyle = "#0d0" + var delta = this.width * this.slope + ctx.beginPath() + ctx.moveTo(this.x, this.y) + // Note we subtract beause y=0 is top + ctx.lineTo(this.x + this.width, this.y - delta) + ctx.lineTo(this.x + this.width, this.y + this.height - delta) + ctx.lineTo(this.x, this.y + this.height) + ctx.lineTo(this.x, this.y) + ctx.stroke() + ctx.fill() +} +function drawCoin() { + ctx.fillStyle = "yellow" + ctx.beginPath(); + ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2) + ctx.fill() +} +function drawExit(exit) { + ctx.fillStyle = "green" + ctx.beginPath() + ctx.arc(exit.x, exit.y, 20, 0, Math.PI * 2) + ctx.fill() +}
\ No newline at end of file diff --git a/src/paperflight/static/levels.js b/src/paperflight/static/levels.js new file mode 100644 index 0000000..d826095 --- /dev/null +++ b/src/paperflight/static/levels.js @@ -0,0 +1,94 @@ +var levels = { + 1: { + coinsNeeded: 5, + exit: { + x: 40, + y: 460 + }, + items: [{ + draw: drawVent, + update: updateVent, + x: 420, + y: 580, + width: 60 + }, + { + draw: drawRamp, + update: updateRamp, + x: 0, + y: 0, + slope: 0, + width: 800, + height: 40 + }, + { + draw: drawCoin, + update: updateCoin, + x: 40, + y: 80, + radius: 10 + }, + { + draw: drawVent, + update: updateVent, + x: 120, + y: 100, + width: 280 + }, + { + draw: drawBlock, + update: updateBlock, + x: 580, + y: 200, + width: 10, + height: 250 + }, + { + draw: drawCoin, + update: updateCoin, + x: 700, + y: 240, + radius: 10 + }, + { + draw: drawCoin, + update: updateCoin, + x: 700, + y: 320, + radius: 10 + }, + { + draw: drawCoin, + update: updateCoin, + x: 700, + y: 400, + radius: 10 + }, + { + draw: drawRamp, + update: updateRamp, + x: 70, + y: 410, + slope: 2/5, + width: 200, + height: 10 + }, + { + draw: drawRamp, + update: updateRamp, + x: 70, + y: 470, + slope: 2/5, + width: 200, + height: 10 + }, + { + draw: drawCoin, + update: updateCoin, + x: 170, + y: 405, + radius: 10 + }, + ] + } +}
\ No newline at end of file diff --git a/src/paperflight/static/styles.css b/src/paperflight/static/styles.css new file mode 100644 index 0000000..febe7a0 --- /dev/null +++ b/src/paperflight/static/styles.css @@ -0,0 +1,4 @@ +button { + background-color: lavender; + padding: 10px 20px; +}
\ No newline at end of file diff --git a/src/paperflight/static/update.js b/src/paperflight/static/update.js new file mode 100644 index 0000000..296308f --- /dev/null +++ b/src/paperflight/static/update.js @@ -0,0 +1,48 @@ +function update() { + t++ + score++ + if(startLevel){ + plane.x += plane.vx * plane.dir + plane.y += plane.vy + } + if (plane.x < 0 || plane.x > width - plane.width || plane.y < 0 || plane.y + plane.height > height) { + gameOver() + } + currLevel.items.forEach(item => { + item.update() + }) + currLevel.items = currLevel.items.filter(item => !item.collected ) + if (atExit()) { + console.log("exit!") + } +} +function updateVent() { + if (plane.x >= this.x - plane.width && plane.x <= this.x + this.width && plane.y < this.y) { + plane.y -= 2 + } +} +function updateBlock() { + if (plane.x >= this.x - plane.width && plane.x <= this.x + this.width + && plane.y >= this.y - plane.height && plane.y <= this.y + this.height) { + gameOver() + } +} +function isPointInRamp(x, y, ramp) { + var yDelta = (x - ramp.x) * ramp.slope + return ramp.x < x && x < ramp.x + ramp.width && ramp.y < y + yDelta && y + yDelta < ramp.y + ramp.height +} +function updateRamp() { + if (isPointInRamp(plane.x, plane.y, this) || + isPointInRamp(plane.x + plane.width, plane.y, this) || + isPointInRamp(plane.x + plane.width, plane.y + plane.height, this) || + isPointInRamp(plane.x, plane.y + plane.height, this)) { + gameOver() + } +} +function updateCoin(){ + if( Math.sqrt(Math.pow(plane.x - this.x, 2) + Math.pow(plane.y - this.y, 2)) < this.radius + || Math.sqrt(Math.pow(plane.x + plane.width - this.x, 2) + Math.pow(plane.y - this.y, 2)) < this.radius){ + this.collected = true + collected++ + } +}
\ No newline at end of file |