From 1855e0c673b06399ca89aa0c705d30b1a9ea3b97 Mon Sep 17 00:00:00 2001 From: Mark Powers Date: Wed, 13 May 2020 10:53:44 -0500 Subject: Add sim and paperflight games --- src/index.html | 6 +- src/index.js | 2 + src/paperflight/index.html | 123 +++++++++++++++++++++++++ src/paperflight/server.js | 11 +++ src/paperflight/static/draw.js | 74 +++++++++++++++ src/paperflight/static/levels.js | 94 ++++++++++++++++++++ src/paperflight/static/styles.css | 4 + src/paperflight/static/update.js | 48 ++++++++++ src/sim/index.html | 183 ++++++++++++++++++++++++++++++++++++++ src/sim/server.js | 10 +++ src/sim/static/items.js | 21 +++++ src/sim/static/styles.css | 4 + src/sim/static/tiles.js | 73 +++++++++++++++ 13 files changed, 651 insertions(+), 2 deletions(-) create mode 100644 src/paperflight/index.html create mode 100644 src/paperflight/server.js create mode 100644 src/paperflight/static/draw.js create mode 100644 src/paperflight/static/levels.js create mode 100644 src/paperflight/static/styles.css create mode 100644 src/paperflight/static/update.js create mode 100644 src/sim/index.html create mode 100644 src/sim/server.js create mode 100644 src/sim/static/items.js create mode 100644 src/sim/static/styles.css create mode 100644 src/sim/static/tiles.js (limited to 'src') diff --git a/src/index.html b/src/index.html index f210089..75d8c00 100644 --- a/src/index.html +++ b/src/index.html @@ -41,8 +41,10 @@
  • Snake
  • Stacker
  • Math mini games
  • - -
  • Cosmic Cargo (itch.io)
  • +
  • Picture pieces
  • +
  • Cosmic Cargo
  • +
  • Sim
  • +
  • Paper Flight
  • diff --git a/src/index.js b/src/index.js index 0b1e6fe..9e50928 100644 --- a/src/index.js +++ b/src/index.js @@ -82,6 +82,8 @@ server.load("./math/server", models, jwtFunctions, database) server.load("./cosmic-cargo/server", models, jwtFunctions, database) server.load("./quiz-bunny/server", models, jwtFunctions, database) server.load("./pp/server", models, jwtFunctions, database) +server.load("./sim/server", models, jwtFunctions, database) +server.load("./paperflight/server", models, jwtFunctions, database) // Start the server server.listen(config.port); diff --git a/src/paperflight/index.html b/src/paperflight/index.html new file mode 100644 index 0000000..731b92e --- /dev/null +++ b/src/paperflight/index.html @@ -0,0 +1,123 @@ + + + + + Paper Flight + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/paperflight/server.js b/src/paperflight/server.js new file mode 100644 index 0000000..1f05de2 --- /dev/null +++ b/src/paperflight/server.js @@ -0,0 +1,11 @@ +function setUpRoutes(server, models, jwtFunctions, database) { + server.get('/paperflight', (req, res) => res.sendFile(__dirname + "/index.html")) + server.get('/paperflight/styles.css', (req, res) => res.sendFile(__dirname + "/static/styles.css")) + server.get('/paperflight/levels.js', (req, res) => res.sendFile(__dirname + "/static/levels.js")) + server.get('/paperflight/update.js', (req, res) => res.sendFile(__dirname + "/static/update.js")) + server.get('/paperflight/draw.js', (req, res) => res.sendFile(__dirname + "/static/draw.js")) +} + +module.exports = { + setUpRoutes +}; 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 diff --git a/src/sim/index.html b/src/sim/index.html new file mode 100644 index 0000000..b9330e0 --- /dev/null +++ b/src/sim/index.html @@ -0,0 +1,183 @@ + + + + + Sim + + + + + + +
    +
    Population:
    +
    Gold:
    +
    Resources:
    + +
    + +
    +
    + + + + + + + \ No newline at end of file diff --git a/src/sim/server.js b/src/sim/server.js new file mode 100644 index 0000000..5328b03 --- /dev/null +++ b/src/sim/server.js @@ -0,0 +1,10 @@ +function setUpRoutes(server, models, jwtFunctions, database) { + server.get('/sim', (req, res) => res.sendFile(__dirname + "/index.html")) + server.get('/sim/styles.css', (req, res) => res.sendFile(__dirname + "/static/styles.css")) + server.get('/sim/tiles.js', (req, res) => res.sendFile(__dirname + "/static/tiles.js")) + server.get('/sim/items.js', (req, res) => res.sendFile(__dirname + "/static/items.js")) +} + +module.exports = { + setUpRoutes +}; diff --git a/src/sim/static/items.js b/src/sim/static/items.js new file mode 100644 index 0000000..40f73f1 --- /dev/null +++ b/src/sim/static/items.js @@ -0,0 +1,21 @@ +tileMap = { + 0: Mountain, + 1: Forest, + 2: Town, +} + +function getScout() { + return { + id: 1, + text: "scout", + cost: 2, + callback: function () { + var type = tileMap[Math.floor(Math.random() * 3)] + var tile = new type() + status = `Your scout found a ${tile.name}. Click to place it.` + return { + tile: tile + } + } + } +} \ No newline at end of file diff --git a/src/sim/static/styles.css b/src/sim/static/styles.css new file mode 100644 index 0000000..febe7a0 --- /dev/null +++ b/src/sim/static/styles.css @@ -0,0 +1,4 @@ +button { + background-color: lavender; + padding: 10px 20px; +} \ No newline at end of file diff --git a/src/sim/static/tiles.js b/src/sim/static/tiles.js new file mode 100644 index 0000000..5b31d19 --- /dev/null +++ b/src/sim/static/tiles.js @@ -0,0 +1,73 @@ +function Mountain() { + this.name = "mountain" +} +Mountain.prototype.draw = function (x, y, size) { + ctx.fillStyle = "gray" + ctx.beginPath(); + ctx.moveTo(x * size + size / 2, y * size); + ctx.lineTo(x * size, (1 + y) * (size)); + ctx.lineTo((1 + x) * (size), (1 + y) * (size)); + ctx.stroke(); + ctx.fill(); +} +Mountain.prototype.update = function () { + var event = undefined + if(Math.random() < 0.1){ + event = function(){ + + } + } + return { + gold: 1, + event: event + } +} + +function Forest() { + this.name = "forest" +} +Forest.prototype.draw = function (x, y, size) { + ctx.fillStyle = "green" + ctx.beginPath(); + ctx.moveTo(x * size + size / 2, y * size); + ctx.lineTo(x * size, (1 + y) * (size)); + ctx.lineTo((1 + x) * (size), (1 + y) * (size)); + ctx.stroke(); + ctx.fill(); +} +Forest.prototype.update = function () { + var event = {} + if(Math.random() < 0.1){ + event.status = "A tree monster taks half of your" + } + return { + resources: Math.floor(Math.random() * 5), + event: event + } +} + +function Town() { + this.name = "town" +} +Town.prototype.draw = function (x, y, size) { + ctx.fillStyle = "brown" + ctx.stokeStyle = "brown" + ctx.beginPath(); + ctx.moveTo(x * size + size / 2, y * size); + ctx.lineTo(x * size, (1 + y) * (size)); + ctx.lineTo((1 + x) * (size), (1 + y) * (size)); + ctx.stroke(); + ctx.fill(); +} +Town.prototype.update = function () { + var event = undefined + if(Math.random() < 0.1){ + event = function(){ + + } + } + return { + population: Math.floor(Math.random() * 4) - 1, + event: event + } +} -- cgit v1.2.3