alert("LIKE IT AND LEAVE A COMMENT IF YOU WANT MORE LEVELS\n\nIF THERE IS NO RESPONSE, CLICK ON THE WINDOW\nTOUCH DEVICES NOT SUPPORTED\n\nCONTROLS\nMOVE - CURSORS\nJUMP - A\nUSE SWITCH - S\nRESET/CHANGE LEVEL - NUMPAD") function id(a) {return document.getElementById(a);} let keyDown = [] let scene let loading = false let camera = { x: 0, y: 0, zoom: 1, update: function() { translate(this.x * this.zoom, this.y * this.zoom) scale(this.zoom) }, follow: function(objX, objY, posX, posY) { this.x = posX / this.zoom - objX this.y = posY / this.zoom - objY } } const g = 0.2 const level1 = { player: [50,-40], platforms: [ [0,0,75,-20], [75,-20,150,0], [300,0,500,0], [420,-40,480,-40,true,[[420,-40],[420,-160]],[200,200]], [0,-200,400,-200], ], walls: [ [0,0,-300], [400,-200,-190], [500,0,-300], ], roofs: [ [0,-190,400,-190], [0,-300,500,-300] ], obstacles: [ [150,0,300,0], [200,-200,200,-300] ], switches: [ [300,-250,[1]] ], }, level2 = { player: [50,-10], platforms: [ [0,0,100,0] ], walls: [], roofs: [], obstacles: [], switches: [], } function setup() { createCanvas(innerWidth, innerHeight) camera.zoom = (width + height) / 800 changeScene(new GameScene(level1)) } function draw() { if (loading == true) { background(0, 0, 0, 25) } else { scene.update() } } function windowResized() { resizeCanvas(windowWidth, windowHeight) camera.zoom = (width + height) / 800 } function keyPressed() { keyDown.push(key) if (loading == false) { switch (key) { case "1": changeScene(new GameScene(level1)) break case "2": changeScene(new GameScene(level2)) } } } function keyReleased() { let idx = keyDown.indexOf(key) if (idx != -1) keyDown.splice(idx, 1) } onload = function() { id("button1").addEventListener("touchstart", e => { if(e.changedTouches) e = e.changedTouches[0]; keyDown.push("ArrowLeft"); }); id("button1").addEventListener("touchend", e => { if(e.changedTouches) e = e.changedTouches[0]; let idx = keyDown.indexOf("ArrowLeft"); if (idx != -1) keyDown.splice(idx, 1); }); id("button2").addEventListener("touchstart", e => { if(e.changedTouches) e = e.changedTouches[0]; keyDown.push("ArrowRight"); }); id("button2").addEventListener("touchend", e => { if(e.changedTouches) e = e.changedTouches[0]; let idx = keyDown.indexOf("ArrowRight"); if (idx != -1) keyDown.splice(idx, 1); }); id("button4").addEventListener("touchstart", e => { if(e.changedTouches) e = e.changedTouches[0]; keyDown.push("a"); }); id("button4").addEventListener("touchend", e => { if(e.changedTouches) e = e.changedTouches[0]; let idx = keyDown.indexOf("a"); if (idx != -1) keyDown.splice(idx, 1); }); id("button3").addEventListener("touchstart", e => { if(e.changedTouches) e = e.changedTouches[0]; keyDown.push("s"); }); id("button3").addEventListener("touchend", e => { if(e.changedTouches) e = e.changedTouches[0]; let idx = keyDown.indexOf("s"); if (idx != -1) keyDown.splice(idx, 1); }); } // Game classes function GameScene(data, bg = color(205)) { this.bg = bg this.player = new Mover(...data.player) this.platforms = [] for (let i in data.platforms) this.platforms.push(new Platform(...data.platforms[i])) this.findNb() this.walls = [] for (let i in data.walls) this.walls.push(new Wall(...data.walls[i])) this.roofs = [] for (let i in data.roofs) this.roofs.push(new Roof(...data.roofs[i])) this.obstacles = [] for (let i in data.obstacles) this.obstacles.push(new Obstacle(...data.obstacles[i])) this.switches = [] for (let i in data.switches) this.switches.push(new Switch(...data.switches[i])) } GameScene.prototype.update = function() { for (let i in this.platforms) this.platforms[i].update() this.player.control() this.player.update() camera.follow(this.player.x, this.player.y, width / 2, height / 2) camera.update() background(this.bg) for (let i=0; i 100 ? fill(255,255,0) : fill(55) } rect(this.x - this.w1 / 2, this.y - this.h1 / 2, this.w1, this.h1) } Mover.prototype.control = function() { if (keyDown.includes("ArrowLeft")) { this.vx = -this.speed } else if (keyDown.includes("ArrowRight")) { this.vx = this.speed } else { this.vx = 0 } if (keyDown.includes("a")) { if (this.vy == 0) { this.pidx = [] this.vy = -this.jump } let idx = keyDown.indexOf("a") keyDown.splice(idx, 1) } if (keyDown.includes("s")) { for (let i = 0; i < scene.switches.length; i++) { if (this.x + this.w1 / 2 > scene.switches[i].x - scene.switches[i].w / 2 && this.x - this.w1 / 2 < scene.switches[i].x + scene.switches[i].w / 2 && this.y + this.h1 / 2 > scene.switches[i].y - scene.switches[i].w / 2 && this.y - this.h1 / 2 < scene.switches[i].y + scene.switches[i].w / 2) { scene.switches[i].active = scene.switches[i].active ? false : true for (let idx of scene.switches[i].oidx) scene.obstacles[idx].active = scene.switches[i].active break } } let idx = keyDown.indexOf("s") keyDown.splice(idx, 1) } } Mover.prototype.detectCollision = function() { // obstacles for (let i = 0; i < scene.obstacles.length; i++) { if (scene.obstacles[i].active == false) continue if ((scene.obstacles[i].x1 < this.x - this.w1 / 2 && scene.obstacles[i].x2 < this.x - this.w1 / 2) || (scene.obstacles[i].x1 > this.x + this.w1 / 2 && scene.obstacles[i].x2 > this.x + this.w1 / 2) || (scene.obstacles[i].y1 < this.y - this.h1 / 2 && scene.obstacles[i].y2 < this.y - this.h1 / 2) || (scene.obstacles[i].y1 > this.y + this.h1 / 2 && scene.obstacles[i].y2 > this.y + this.h1 / 2)) continue if ((this.x - this.w1 / 2 <= scene.obstacles[i].x1 && this.x + this.w1 / 2 >= scene.obstacles[i].x1 && this.x - this.w1 / 2 <= scene.obstacles[i].x2 && this.x + this.w1 / 2 >= scene.obstacles[i].x2) || (this.y - this.h1 / 2 <= scene.obstacles[i].y1 && this.y + this.h1 / 2 >= scene.obstacles[i].y1 && this.y - this.h1 / 2 <= scene.obstacles[i].y2 && this.y + this.h1 / 2 >= scene.obstacles[i].y2) || (this.y - this.h1 / 2 <= scene.obstacles[i].y1 && this.y + this.h1 / 2 >= scene.obstacles[i].y1 && this.x - this.w1 / 2 <= scene.obstacles[i].x1 && this.x + this.w1 / 2 >= scene.obstacles[i].x1) || (this.y - this.h1 / 2 <= scene.obstacles[i].y2 && this.y + this.h1 / 2 >= scene.obstacles[i].y2 && this.x - this.w1 / 2 <= scene.obstacles[i].x2 && this.x + this.w1 / 2 >= scene.obstacles[i].x2)) { this.alive = false break } let count = 0 let points = [ [this.x - this.w1 / 2, this.y - this.h1 / 2], [this.x - this.w1 / 2, this.y + this.h1 / 2], [this.x + this.w1 / 2, this.y - this.h1 / 2], [this.x + this.w1 / 2, this.y + this.h1 / 2], ] for (let j in points) { if (Math.hypot(points[j][0] - scene.obstacles[i].x1, scene.obstacles[i].y2 - points[j][1]) > Math.hypot(scene.obstacles[i].x2 - points[j][0], points[j][1] - scene.obstacles[i].y1)) count++ } if (count > 0 && count < 4) { this.alive = false break } } // roofs for (let i = 0; i < scene.roofs.length; i++) { if (this.x + this.w1 / 2 > scene.roofs[i].x1 && this.x - this.w1 / 2 < scene.roofs[i].x2) { let py = Math.max(scene.roofs[i].getY(this.x - this.w1 / 2), scene.roofs[i].getY(this.x + this.w1 / 2)) if (Math.abs(this.y - this.h1 / 2 - py) <= Math.hypot(this.vy, this.vx)) { if (this.vy < 0) this.vy = 0 } } } // walls for (let i = 0; i < scene.walls.length; i++) { if (this.y + this.h1 / 2 > scene.walls[i].y1 && this.y - this.h1 / 2 < scene.walls[i].y2) { if (Math.abs(this.x + this.w1 / 2 - scene.walls[i].x) <= Math.abs((this.vx) / 2) && (this.vx > 0 || this.pidx.find(a => this.vx + scene.platforms[a.i].getV()[0] > 0) )) { this.vx = 0 if (this.pidx.length) { for (let j = 0; j < this.pidx.length; j++) this.pidx[j].distX = scene.walls[i].x - scene.platforms[this.pidx[j].i].x1 - this.w1 / 2 } else { this.x = scene.walls[i].x - this.w1 / 2 } } else if (Math.abs(this.x - this.w1 / 2 - scene.walls[i].x) <= Math.abs((this.vx) / 2) && (this.vx < 0 || this.pidx.find(a => this.vx + scene.platforms[a.i].getV()[0] < 0) )) { this.vx = 0 if (this.pidx.length) { for (let j = 0; j < this.pidx.length; j++) this.pidx[j].distX = scene.walls[i].x - scene.platforms[this.pidx[j].i].x1 + this.w1 / 2 } else { this.x = scene.walls[i].x + this.w1 / 2 } } } } // platforms // removing old for (let i = 0; i < this.pidx.length; i++) { let py = Math.min(scene.platforms[this.pidx[i].i].getY(this.x - this.w1 / 2), scene.platforms[this.pidx[i].i].getY(this.x + this.w1 / 2)) if (this.x + this.w1 / 2 < scene.platforms[this.pidx[i].i].x1 + scene.platforms[this.pidx[i].i].getV()[0] || this.x - this.w1 / 2 > scene.platforms[this.pidx[i].i].x2 - scene.platforms[this.pidx[i].i].getV()[0] || (this.y + this.h1 / 2 - py) > Math.abs(scene.platforms[this.pidx[i].i].getV()[1]) * 2 + Math.abs(this.vx * scene.platforms[this.pidx[i].i].getDiff()) + 1) { this.pidx.splice(i, 1) i-- } } if (this.pidx.find(a => scene.platforms[a.i].move == true)) { for (let i = 0; i < this.pidx.length; i++) { if (scene.platforms[this.pidx[i].i].move == false) { this.pidx.splice(i, 1) i-- } } } // adding new if (this.pidx.length) { let nbidx = [] for (let i = 0; i < this.pidx.length; i++) { nbidx = nbidx.concat(scene.platforms[this.pidx[i].i].nbidx) } for (let i = 0; i < nbidx.length; i++) { if (this.x + this.w1 / 2 > scene.platforms[nbidx[i]].x1 && this.x - this.w1 / 2 < scene.platforms[nbidx[i]].x2) { if (!this.pidx.find(a => a.i == nbidx[i])) this.pidx.push({i: nbidx[i], distX: this.x - scene.platforms[nbidx[i]].x1}) } } } for (let i = 0; i < scene.platforms.length; i++) { if (this.x + this.w1 / 2 > scene.platforms[i].x1 && this.x - this.w1 / 2 < scene.platforms[i].x2) { let py = Math.min(scene.platforms[i].getY(this.x - this.w1 / 2), scene.platforms[i].getY(this.x + this.w1 / 2)) if (Math.abs(this.y + this.h1 / 2 - py) <= Math.hypot(this.vy, this.vx * scene.platforms[i].getDiff()) + Math.abs(scene.platforms[i].getV()[1]) && (this.vy >= 0 || ((this.vy / this.vx) * scene.platforms[i].getDiff() > 0 && Math.abs(this.vy / this.vx) < Math.abs(scene.platforms[i].getDiff()) )) ) { if (!this.pidx.find(a => a.i == i)) this.pidx.push({i: i, distX: this.x - scene.platforms[i].x1}) } } } } Mover.prototype.update = function() { if (this.alive == false) return this.detectCollision() if (this.pidx.length) { for (let i = 0; i < this.pidx.length; i++) this.pidx[i].distX += this.vx } else { this.x += this.vx } if (this.pidx.length) { this.vy = 0 let y = 999999 var idx for (let i = 0; i < this.pidx.length; i++) { let a = 1 if (scene.platforms[this.pidx[i].i].getDiff() > 0) a = -1 let py = Math.min(scene.platforms[this.pidx[i].i].getY(this.x - this.w1 / 2 - a * this.vx), scene.platforms[this.pidx[i].i].getY(this.x + this.w1 / 2 + a * this.vx)) if (py < y) { y = py idx = this.pidx[i] } } this.x = scene.platforms[idx.i].x1 + idx.distX this.y = y - this.h1 / 2 } else { if (this.vy < 30 * g) this.vy += g } this.y += this.vy } function Platform(x1, y1, x2, y2, move = false, path = [], dur = []) { this.x1 = Math.min(x1, x2) this.y1 = y1 this.x2 = Math.max(x2, x1) this.y2 = y2 this.nbidx = [] this.move = move this.path = path this.dur = dur this.step = 0 this.t = 0 } Platform.prototype.display = function() { stroke(0) line(this.x1, this.y1, this.x2, this.y2) } Platform.prototype.update = function() { if (this.move) { if (++this.t >= this.dur[this.step]) { this.t = 0 if (++this.step >= this.path.length) this.step = 0 } let [vx, vy] = this.getV() this.x1 += vx this.x2 += vx this.y1 += vy this.y2 += vy } } Platform.prototype.getV = function() { if (this.move == false) return [0, 0] let next = this.step == this.path.length - 1 ? 0 : this.step + 1 return [(this.path[next][0] - this.path[this.step][0]) / this.dur[this.step], (this.path[next][1] - this.path[this.step][1]) / this.dur[this.step]] } Platform.prototype.getDiff = function() { return (this.y2 - this.y1) / (this.x2 - this.x1) } Platform.prototype.getY = function(x) { if (x < this.x1) { return this.y1 } else if (x > this.x2) { return this.y2 } else { return this.y1 + this.getDiff() * (x - this.x1) } } function Wall(x,y1,y2) { this.x = x this.y1 = Math.min(y1, y2) this.y2 = Math.max(y2, y1) } Wall.prototype.display = function() { stroke(0) line(this.x, this.y1, this.x, this.y2) } function Roof(x1, y1, x2, y2) { this.x1 = Math.min(x1, x2) this.y1 = y1 this.x2 = Math.max(x2, x1) this.y2 = y2 } Roof.prototype.display = function() { stroke(0) line(this.x1, this.y1, this.x2, this.y2) } Roof.prototype.getDiff = function() { return (this.y2 - this.y1) / (this.x2 - this.x1) } Roof.prototype.getY = function(x) { if (x < this.x1) { return this.y1 } else if (x > this.x2) { return this.y2 } else { return this.y1 + this.getDiff() * (x - this.x1) } } function Obstacle(x1, y1, x2, y2, active = true) { this.x1 = Math.min(x1, x2) this.y1 = y1 this.x2 = Math.max(x2, x1) this.y2 = y2 this.active = active } Obstacle.prototype.display = function() { if (this.active) { noFill() stroke(255, 255, 0) let len = Math.hypot(this.x1 - this.x2, this.y1 - this.y2) let dist = 6 beginShape() for (let i = 0; i < len / dist; i++) { vertex(this.x1 + this.getVec()[0] * (i * dist / len) + this.getVec(1)[1] * random(-1, 1) * 6, this.y1 + this.getVec()[1] * (i * dist / len) + this.getVec(1)[0] * random(-1, 1) * 6) } vertex(this.x2, this.y2) endShape() } stroke(0) fill(255) ellipse(this.x1, this.y1, 6, 6) ellipse(this.x2, this.y2, 6, 6) } Obstacle.prototype.getVec = function(n = false) { let vec = [this.x2 - this.x1, this.y2 - this.y1] if (n) { let max = Math.max(Math.abs(vec[0]), Math.abs(vec[1])) vec[0] /= max vec[1] /= max } return vec } function Switch(x, y, oidx = [], active = true) { this.x = x this.y = y this.w = 10 this.active = active this.oidx = oidx } Switch.prototype.display = function() { stroke(0) fill(105) rect(this.x - this.w / 2, this.y - this.w / 2, this.w, this.w) noStroke() this.active ? fill(55, 255, 55) : fill(255, 0, 0) ellipse(this.x, this.y, this.w / 2, this.w / 2) } // additional function changeScene(newscene) { loading = true scene = newscene setTimeout(function() { loading = false }, 1000) }

2D platformer game beta [Try it!]