var can; var c; const COLORS = { path: "#777777", pathHolder: "#DDDDDD", player: "#4281F5", playerTrail: "#3271E5", activePath: "#F5BC42", activePathShadow: "#D59C22", text: "#444444", bouncePad: "#45F542", portal: "#3355AA", portalConnection: "rgba(51, 85, 170, 0.3)", killBlock: "#990000", } var paths; var player; var camera; var atLevel = 0; var levels; window.onload = function() { can = document.getElementById("can"); can.width = window.innerWidth; can.height = window.innerHeight; c = can.getContext("2d"); can.addEventListener("mousedown", function(e) { switchPath(); }); /* can.addEventListener("touchstart", function(e) { switchPath(); });*/ levels = 11; atLevel = 0; reset(atLevel); loop(); } function reset(level) { /* paths = []; var s = "paths.push(new Path(0, 0, 60, false));"; while (true) { s += "paths.push(new Path(" + parseInt(Math.random() * can.width / 2) + ", " + parseInt(Math.random() * can.height / 2) + ", " + parseInt(Math.random() * can.width / 5) + ", " if (Math.random() < 0.75) { s += "false));" } else { s += "true));" break; } } console.log(s); eval(s); */ paths = []; if (level == 0) { paths.push(new Path(0, 0, 60, false)); paths.push(new Path(80, 0, 40, false)); paths.push(new Path(-50, 0, 150, false)); paths.push(new Path(-200, 0, 40, true)); //(tests) //paths[0].addEffect(new BouncePad(Math.PI/2)); //var p1 = new Portal(Math.PI); //var p2 = new Portal(Math.PI); //paths[1].addEffect(p1); //paths[2].addEffect(p2); //p1.exitPortal = p2; //p2.exitPortal = p1; //paths[0].addEffect(new KillBlock(Math.PI)); } else if (level == 1) { paths.push(new Path(0, 0, 60, false)); paths.push(new Path(86, 108, 100, false)); paths.push(new Path(270, 140, 131, true)); } else if (level == 2) { paths.push(new Path(0, 0, 60, false)); paths.push(new Path(64, 0, 158, false)); paths.push(new Path(236, 194, 99, false)); paths.push(new Path(149, 117, 150, false)); paths.push(new Path(402, 111, 87, true)); } else if (level == 3) { paths.push(new Path(0, 0, 60, false)); paths.push(new Path(49, 142, 96, false)); paths.push(new Path(530, 358, 179, false)); paths.push(new Path(150, 323, 220, false)); paths.push(new Path(721, 138, 160, false)); paths.push(new Path(933, 12, 235, true)); } else if (level == 4) { paths.push(new Path(0, -80, 60, false)); paths.push(new Path(283, 215, 112, false)); paths.push(new Path(124, 65, 246, false)); paths.push(new Path(139, 128, 112, true)); } else if (level == 5) { paths.push(new Path(0, 0, 60, false)); paths.push(new Path(217, 257, 171, false)); paths.push(new Path(0, 110, 173, false)); paths.push(new Path(963, 33, 60, false)); paths.push(new Path(921, 144, 83, true)); var p1 = new Portal(Math.PI / 3); var p2 = new Portal(Math.PI * 2 / 3); paths[1].addEffect(p1); paths[3].addEffect(p2); p1.exitPortal = p2; p2.exitPortal = p1; } else if (level == 6) { paths.push(new Path(0, 0, 60, false)); paths.push(new Path(40, 262, 140, false)); paths.push(new Path(202, 27, 256, false)); paths.push(new Path(331, 210, 65, true)); paths[2].addEffect(new KillBlock(Math.PI * 2 / 3)); } else if (level == 7) { paths.push(new Path(0, 0, 60, false)); paths.push(new Path(529, 111, 315, false)); paths.push(new Path(47, 56, 130, false)); paths.push(new Path(44, 31, 75, false)); paths.push(new Path(557, 311, 110, false)); paths.push(new Path(220, 56, 206, false)); paths.push(new Path(427, 372, 225, true)); } else if (level == 8) { paths.push(new Path(0, 0, 60, false)); paths.push(new Path(429, 170, 168, false)); paths.push(new Path(174, 161, 220, false)); paths.push(new Path(546, 666, 232, false)); paths.push(new Path(53, 237, 259, false)); paths.push(new Path(742, 653, 109, true)); var p1 = new Portal(0); var p2 = new Portal(Math.PI / 2); paths[2].addEffect(p1); paths[3].addEffect(p2); p1.exitPortal = p2; p2.exitPortal = p1; paths[2].addEffect(new KillBlock(Math.PI)); } else if (level == 9) { paths.push(new Path(0, 0, 60, false)); paths.push(new Path(322, 19, 217, false)); paths.push(new Path(101, 126, 168, false)); paths.push(new Path(514, 200, 84, true)); paths[1].addEffect(new KillBlock(0)); paths[1].addEffect(new BouncePad(Math.PI * 2 / 3)); } else if (level == 10) { paths.push(new Path(0, 0, 60, false)); paths.push(new Path(81, 154, 227, false)); paths.push(new Path(58, 10, 80, false)); paths.push(new Path(322, 261, 139, true)); paths[1].addEffect(new KillBlock(Math.PI)); } else if (level == 11) { paths.push(new Path(-30, 0, 60, false)); paths.push(new Path(158, 10, 241, false)); paths.push(new Path(29, 179, 48, false)); paths.push(new Path(0, 100, 45, false)); paths.push(new Path(80, 80, 40, true)); paths[0].addEffect(new BouncePad(Math.PI / 10)); paths[0].addEffect(new BouncePad(Math.PI * 2 / 3)); } player = new Player(paths[0], -paths[0].rotation); paths[0].active = true; } function loop() { c.fillStyle = "#FFFFFF"; c.fillRect(0, 0, can.width, can.height); c.fillStyle = COLORS.text; c.fillText("level " + atLevel + "/" + levels, 30, 30); if (player.currentPath !== null) { var xy = player.calcCameraPosition(); camera = { x: xy[0] - can.width / 2, y: xy[1] - can.height / 2 } } for (var i = 0; i < paths.length; i++) { paths[i].update(); paths[i].showPathHolder(c, camera.x, camera.y); } for (var i = 0; i < paths.length; i++) { paths[i].showPath(c, camera.x, camera.y); } player.update(); player.show(c, camera.x, camera.y); requestAnimationFrame(loop); } function switchPath() { if (player.currentPath !== null) { if (player.atGoal) { atLevel = (atLevel + 1) % levels; reset(atLevel); } else { var x = player.currentPath.middleX + player.currentPath.radius * Math.cos(player.currentPath.rotation + player.offsetAngle); var y = player.currentPath.middleY + player.currentPath.radius * Math.sin(player.currentPath.rotation + player.offsetAngle); player.goingRight = !player.goingRight; player.currentPath.active = false; for (var i = 0; i < paths.length; i++) { if (!Object.is(paths[i], player.currentPath)) { if (paths[i].touchesPoint(x, y)) { player.offsetAngle = Math.atan2(y - paths[i].middleY, x - paths[i].middleX) - paths[i].rotation; player.currentPath = paths[i]; paths[i].active = true; if (paths[i].isGoal) { player.atGoal = true; } return; } } } player.currentPath = null; } } else { reset(atLevel); } } function Player(currentPath, offsetAngle) { this.currentPath = currentPath; this.offsetAngle = offsetAngle; this.goingRight = true; this.radius = 8; this.trail = []; this.trailLength = 30; this.atGoal = false; this.timeSinceTeleport = 0; this.show = function(c, offsetX, offsetY) { if (this.currentPath !== null) { this.currentPath.showPath(c, offsetX, offsetY); c.strokeStyle = COLORS.playerTrail; for (var i = 1; i < this.trail.length; i++) { c.beginPath(); c.lineWidth = i / this.trail.length * this.radius; c.moveTo(this.trail[i - 1][0] - offsetX, this.trail[i - 1][1] - offsetY); c.lineTo(this.trail[i][0] - offsetX, this.trail[i][1] - offsetY); c.stroke(); } c.lineWidth = 1; var x = this.currentPath.middleX - offsetX + this.currentPath.radius * Math.cos(this.currentPath.rotation + this.offsetAngle); var y = this.currentPath.middleY - offsetY + this.currentPath.radius * Math.sin(this.currentPath.rotation + this.offsetAngle); this.trail.push([x + offsetX, y + offsetY]); c.fillStyle = COLORS.player; c.beginPath(); c.arc(x, y, this.radius, 0, 2 * Math.PI); c.fill(); if (this.trail.length > this.trailLength) { this.trail.splice(0, 1); } } } this.update = function() { if (this.currentPath !== null) { for (var i = 0; i < this.currentPath.pathEffects.length; i++) { if (this.currentPath.pathEffects[i].touchingPlayer(this)) { if (this.currentPath.pathEffects[i].type == "bouncePad") { this.goingRight = !this.goingRight; this.currentPath.rotationSpeed *= -1; } else if (this.currentPath.pathEffects[i].type == "portal" && this.timeSinceTeleport > 60) { this.currentPath.active = false; this.currentPath = this.currentPath.pathEffects[i].exitPortal.path; this.currentPath.active = true; this.offsetAngle = -this.currentPath.rotation + this.currentPath.pathEffects[i].angle; this.timeSinceTeleport = 0; } else if (this.currentPath.pathEffects[i].type == "killBlock") { this.currentPath = null; return; } } } this.currentPath.speedUp(this.goingRight); this.timeSinceTeleport++; } } this.calcCameraPosition = function() { var x = this.currentPath.middleX + this.currentPath.radius * Math.cos(this.currentPath.rotation + this.offsetAngle); var y = this.currentPath.middleY + this.currentPath.radius * Math.sin(this.currentPath.rotation + this.offsetAngle); return [x, y]; } } function Path(middleX, middleY, radius, isGoal) { this.middleX = middleX; this.middleY = middleY; this.radius = radius; this.pathWidth = 7; this.pathHolderWidth = 3; this.active = false; this.isGoal = isGoal; this.rotation = 2 * Math.PI * Math.random(); this.rotationSpeed = 0; this.maxRotationSpeed = Math.PI / this.radius; this.pathEffects = []; this.addEffect = function(effect) { this.pathEffects.push(effect) effect.path = this; } this.speedUp = function(goingRight) { if (goingRight) { this.rotationSpeed += (this.maxRotationSpeed - this.rotationSpeed) / 30; } else { this.rotationSpeed -= (this.maxRotationSpeed + this.rotationSpeed) / 30; } } this.update = function() { this.rotation += this.rotationSpeed; this.rotationSpeed *= 0.99; } this.showPathHolder = function(c, offsetX, offsetY) { c.strokeStyle = COLORS.pathHolder; c.lineWidth = this.pathHolderWidth; var pathHolders = 4; for (var i = 0; i < pathHolders; i++) { c.beginPath(); c.moveTo(this.middleX - offsetX, this.middleY - offsetY); var x = this.middleX - offsetX + this.radius * Math.cos(this.rotation + (2 * Math.PI * i / pathHolders)) var y = this.middleY - offsetY + this.radius * Math.sin(this.rotation + (2 * Math.PI * i / pathHolders)) c.lineTo(x, y); c.stroke(); } } this.showPath = function(c, offsetX, offsetY) { if (this.isGoal) { if (this.active) { c.lineWidth = this.pathWidth * 1.75; c.strokeStyle = COLORS.activePathShadow; c.beginPath(); c.arc(this.middleX - offsetX, this.middleY - offsetY, this.radius, 0, 2 * Math.PI); c.stroke(); } c.lineWidth = this.pathWidth; c.strokeStyle = "#000000"; c.beginPath(); c.arc(this.middleX - offsetX, this.middleY - offsetY, this.radius, 0, 2 * Math.PI); c.stroke(); c.strokeStyle = "#FFFFFF"; c.beginPath(); c.setLineDash([10]); c.arc(this.middleX - offsetX, this.middleY - offsetY, this.radius, 0, 2 * Math.PI); c.stroke(); c.setLineDash([]); } else { c.lineWidth = this.pathWidth; if (this.active) { c.strokeStyle = COLORS.activePathShadow; c.beginPath(); c.lineWidth = this.pathWidth * 1.75; c.arc(this.middleX - offsetX, this.middleY - offsetY, this.radius, 0, 2 * Math.PI); c.stroke(); c.lineWidth = this.pathWidth c.strokeStyle = COLORS.activePath; c.beginPath(); c.arc(this.middleX - offsetX, this.middleY - offsetY, this.radius, 0, 2 * Math.PI); c.stroke(); } else { c.lineWidth = this.pathWidth c.strokeStyle = COLORS.path; c.beginPath(); c.arc(this.middleX - offsetX, this.middleY - offsetY, this.radius, 0, 2 * Math.PI); c.stroke(); } } for (var i = 0; i < this.pathEffects.length; i++) { this.pathEffects[i].show(c, offsetX, offsetY); } } this.touchesPoint = function(x, y) { return Math.abs(Math.hypot(this.middleX - x, this.middleY - y) - this.radius) < this.pathWidth * 2; //more forgiving XD } } function BouncePad(angle) { this.angle = angle; this.radius = 10; this.path = null; this.type = "bouncePad"; this.touchingPlayer = function(player) { var playerX = player.currentPath.middleX + player.currentPath.radius * Math.cos(player.currentPath.rotation + player.offsetAngle); var playerY = player.currentPath.middleY + player.currentPath.radius * Math.sin(player.currentPath.rotation + player.offsetAngle); var thisX = this.path.middleX + this.path.radius * Math.cos(this.angle); var thisY = this.path.middleY + this.path.radius * Math.sin(this.angle); return Math.hypot(playerX - thisX, playerY - thisY) < this.radius; } this.show = function(c, offsetX, offsetY) { c.beginPath(); c.strokeStyle = COLORS.bouncePad; c.lineWidth = this.radius / 3; var x1 = this.path.middleX - offsetX + this.path.radius * 0.85 * Math.cos(this.angle); var y1 = this.path.middleY - offsetY + this.path.radius * 0.85 * Math.sin(this.angle); var x2 = this.path.middleX - offsetX + this.path.radius * 1.15 * Math.cos(this.angle); var y2 = this.path.middleY - offsetY + this.path.radius * 1.15 * Math.sin(this.angle); c.moveTo(x1, y1); c.lineTo(x2, y2); c.stroke(); c.beginPath(); c.fillStyle = COLORS.bouncePad; c.arc(x1, y1, c.lineWidth, 0, 2 * Math.PI); c.fill(); c.beginPath(); c.arc(x2, y2, c.lineWidth, 0, 2 * Math.PI); c.fill(); } } function Portal(angle) { this.angle = angle; this.radius = 15; this.path = null; this.type = "portal"; this.exitPortal = null; this.showRadius = [0, 5, 10, 15]; this.touchingPlayer = function(player) { var playerX = player.currentPath.middleX + player.currentPath.radius * Math.cos(player.currentPath.rotation + player.offsetAngle); var playerY = player.currentPath.middleY + player.currentPath.radius * Math.sin(player.currentPath.rotation + player.offsetAngle); var thisX = this.path.middleX + this.path.radius * Math.cos(this.angle); var thisY = this.path.middleY + this.path.radius * Math.sin(this.angle); return Math.hypot(playerX - thisX, playerY - thisY) < this.radius; } this.show = function(c, offsetX, offsetY) { var thisX = this.path.middleX - offsetX + this.path.radius * Math.cos(this.angle); var thisY = this.path.middleY - offsetY + this.path.radius * Math.sin(this.angle); var exitX = this.exitPortal.path.middleX - offsetX + this.exitPortal.path.radius * Math.cos(this.exitPortal.angle); var exitY = this.exitPortal.path.middleY - offsetY + this.exitPortal.path.radius * Math.sin(this.exitPortal.angle); c.strokeStyle = COLORS.portal; c.lineWidth = 3; for (var i = 0; i < this.showRadius.length; i++) { c.beginPath(); c.arc(thisX, thisY, this.showRadius[i], 0, 2 * Math.PI); c.stroke(); this.showRadius[i] = (this.showRadius[i] + 0.125) % 16; } c.beginPath(); c.strokeStyle = COLORS.portalConnection; c.setLineDash([3, 5]); c.lineWidth = 2; c.moveTo(thisX, thisY); c.lineTo(exitX, exitY); c.stroke(); c.setLineDash([]); } } function KillBlock(angle) { this.angle = angle; this.radius = 10; this.path = null; this.type = "killBlock"; this.touchingPlayer = function(player) { var playerX = player.currentPath.middleX + player.currentPath.radius * Math.cos(player.currentPath.rotation + player.offsetAngle); var playerY = player.currentPath.middleY + player.currentPath.radius * Math.sin(player.currentPath.rotation + player.offsetAngle); var thisX = this.path.middleX + this.path.radius * Math.cos(this.angle); var thisY = this.path.middleY + this.path.radius * Math.sin(this.angle); return Math.hypot(playerX - thisX, playerY - thisY) < this.radius; } this.show = function(c, offsetX, offsetY) { c.beginPath(); c.strokeStyle = COLORS.killBlock; c.lineWidth = this.radius / 3; var x1 = this.path.middleX - offsetX + this.path.radius * 0.85 * Math.cos(this.angle); var y1 = this.path.middleY - offsetY + this.path.radius * 0.85 * Math.sin(this.angle); var x2 = this.path.middleX - offsetX + this.path.radius * 1.15 * Math.cos(this.angle); var y2 = this.path.middleY - offsetY + this.path.radius * 1.15 * Math.sin(this.angle); c.moveTo(x1, y1); c.lineTo(x2, y2); c.stroke(); c.beginPath(); c.fillStyle = COLORS.killBlock; c.arc(x1, y1, c.lineWidth, 0, 2 * Math.PI); c.fill(); c.beginPath(); c.arc(x2, y2, c.lineWidth, 0, 2 * Math.PI); c.fill(); } }

spin path || game v2