var can; var c; var game; const CONSTANTS = { GAME_BACKGROUND_COLOR: "#446699", LIFES_COLOR: "#999999", LIFES_BORDER_COLOR: "#666666", TRAVEL_DISTANCE_TEXT_COLOR: "#DAEFEA", PLANET_COLOR: "#996644", PLANET_BORDER_COLOR: "#794624", PLANET_CRATER_COLOR: "#895634", PLANET_CRATER_SHADOW_COLOR: "#794624", PLAYER_BODY_COLOR: "#797979", PLAYER_DAMAGED_BODY_COLOR: "#997979", TRAP_FACTORY_COLOR: "#693614", TRAP_FACTORY_BORDER_COLOR: "#491605", TRAP_FACTORY_SCREW_COLOR: "#999999", SPIKE_COLOR: "#999999", WRECKINGBALL_COLOR: "#777777", WRECKINGBALL_CHAIN_COLOR: "#999999", BOUNCINGBALL_COLOR: "#AA0000", PLAYER_JUMP_FORCE: 14, PLAYER_SECONDJUMP_FORCE: 10, PLAYER_GRAVITY_FORCE: 1, BOUNCINGBALL_GRAVITY_FORCE: 0.5, } document.addEventListener("touchstart", function(e){ try{ e.preventDefault(); }catch(Exception){ } game = game.input(); }); document.addEventListener("mousedown", function(e){ game = game.input(); }); document.addEventListener("keydown", function(e){ if(e.keyCode == 32){ game = game.input(); } }); window.onload = function(){ can = document.getElementById("can"); can.width = window.innerWidth; can.height = window.innerHeight; game = new Game(can); animate(); } function animate(){ game.showAll(); game.updateAll(); requestAnimationFrame(animate); } function Game(can) { this.can = can; this.c = can.getContext("2d"); this.planet = new Planet(this.can.width / 2, this.can.height / 2, this.can.width / 3.5); this.planetRotationSpeed = 0.01; this.TrapFactory = new TrapFactory(this.can.width / 2, this.can.height / 2, this.planet.radius); this.player = new Player(this.can.width / 2, can.height / 2 - this.planet.radius, can.width / 30, can.height / 20); this.travelDistance = 0; this.spawnRate = 40; this.traps = []; this.frameCount = 0; this.showAll = function() { this.c.fillStyle = CONSTANTS.GAME_BACKGROUND_COLOR; this.c.fillRect(0, 0, this.can.width, this.can.height); this.planet.show(this.c); this.player.show(this.c); for (var i = 0; i < this.traps.length; i++) { this.traps[i].show(this.c); } this.TrapFactory.show(this.c); if (this.player.lifes >= 0) { this.c.fillStyle = CONSTANTS.TRAVEL_DISTANCE_TEXT_COLOR; //traveldistance this.c.font = "15px arial"; this.c.fillText("distance: " + this.travelDistance.toFixed(2), this.can.width / 15, this.can.height / 15); for (var i = 0; i < this.player.lifes; i++) { //lifes var x = this.can.width - ((i + 3) * this.can.width / 40) var y = this.can.height / 40; var d = this.can.width / 100; this.c.fillStyle = CONSTANTS.LIFES_COLOR; this.c.strokeStyle = CONSTANTS.LIFES_BORDER_COLOR; this.c.beginPath(); this.c.moveTo(x + 2 * d, y + d); this.c.lineTo(x + d, y); this.c.lineTo(x + 3 * d, y); this.c.lineTo(x + 3 * d, y + 2 * d); this.c.lineTo(x + 6 * d, y + 5 * d); this.c.lineTo(x + 5 * d, y + 6 * d); //mirrored this.c.lineTo(x + 2 * d, y + 3 * d); this.c.lineTo(x, y + 3 * d); this.c.lineTo(x, y + d); this.c.lineTo(x + d, y + 2 * d); this.c.fill(); this.c.stroke(); } }else{ this.c.fillStyle = "rgba(0, 0, 0, 0.5)"; this.c.fillRect(0, 0, this.can.width, this.can.height); this.c.fillStyle = "rgba(255, 255, 255, 0.5)"; this.c.font = "30px arial"; this.c.textAlign = "center"; this.c.textBaseline = "middle"; this.c.fillText("press to try again", this.can.width / 2, this.can.height / 2); } } this.updateAll = function() { this.planet.rotateBy(-this.planetRotationSpeed); if (this.player.lifes >= 0) { this.planetRotationSpeed += 0.00001; this.travelDistance += this.planetRotationSpeed; this.player.update(); if (this.frameCount % Math.round(this.spawnRate) === 0) { var trap = this.TrapFactory.createTrap(); if (trap !== null) { this.traps.push(trap); } this.spawnRate *= 0.995; //console.log(Math.round(this.spawnRate)); } } for (var i = this.traps.length - 1; i >= 0; i--) { this.traps[i].moveBy(-this.planetRotationSpeed); if (this.traps[i].touchingPlayer(this.player)) { this.player.hit(); } if (this.traps[i].angle < -Math.PI * 2.75) { //back in fractory this.traps.splice(i, 1); this.TrapFactory.upgrade(); } } this.frameCount++; } this.input = function(){ if (this.player.lifes >= 0) { this.player.jump(); return this; }else{ return new Game(this.can); } } } function Planet(middleX, middleY, radius) { this.middleX = middleX; this.middleY = middleY; this.radius = radius; this.craters = []; do{ var r = Math.random() * this.radius / 10 + this.radius / 30; var a = Math.random() * 2 * Math.PI; var d = (this.radius - r) * Math.random(); this.craters.push({ "radius": r, "angle": a, "distance": d }); }while(Math.random() < 0.9); this.rotation = 0; this.show = function(c) { //planet c.fillStyle = CONSTANTS.PLANET_COLOR; c.strokeStyle = CONSTANTS.PLANET_BORDER_COLOR; c.beginPath(); c.arc(this.middleX, this.middleY, this.radius, 0, 2 * Math.PI); c.fill(); c.stroke(); //craters (shadow) c.fillStyle = CONSTANTS.PLANET_CRATER_SHADOW_COLOR; for(var i=0;i= 100){ if(Math.random() < 0.5){ this.trapPoints -= 100; return null; } } if(this.trapPoints >= 80){ if(Math.random() < 0.5){ this.trapPoints -= 80; return null; } } if(this.trapPoints >= 60){ if(Math.random() < 0.5){ this.trapPoints -= 60; return null; } } */ if(this.trapPoints >= 50){ if(Math.random() < 0.5){ this.trapPoints -= 50; return new BouncingBall(this.middleX, this.middleY, this.angle1, this.planetRadius * 1.3 + (this.planetRadius * 0.2) * Math.random(), this.planetRadius); } } if(this.trapPoints >= 25){ if(Math.random() < 0.5){ this.trapPoints -= 25; return new WreckingBall(this.middleX, this.middleY, this.angle1, this.planetRadius + (this.radius - this.planetRadius*120/100) * Math.random(), this.planetRadius/20); } } /* if(this.trapPoints >= 12){ if(Math.random() < 0.5){ this.trapPoints -= 12; return null; } } */ if(this.trapPoints >= 5){ if(Math.random() < 0.5){ this.trapPoints -= 5; return new Spike(this.middleX, this.middleY, this.angle1, this.planetRadius); } } return null; } this.upgrade = function(){ this.trapPointAdd += 1; } } function Player(middleX, bottomY, width, height) { this.middleX = middleX; this.bottomY = bottomY; this.width = width; this.height = height; this.floorY = bottomY; this.onGround = true; this.secondJumpAvailable = true; this.ySpeed = 0; this.invincibilityFrames = -1; this.lifes = 3; this.show = function(c) { if(this.lifes < 0){ return; } if(this.invincibilityFrames >= 0){ if(this.invincibilityFrames % 20 < 15){ c.fillStyle = CONSTANTS.PLAYER_DAMAGED_BODY_COLOR; c.fillRect(this.middleX - this.width / 2, this.bottomY - this.height, this.width, this.height); } }else{ //body c.fillStyle = CONSTANTS.PLAYER_BODY_COLOR; c.fillRect(this.middleX - this.width / 2, this.bottomY - this.height, this.width, this.height); } } this.update = function() { if(this.lifes < 0){ return; } this.bottomY += this.ySpeed; if (this.bottomY >= this.floorY) { this.ySpeed = 0; this.bottomY = this.floorY; this.onGround = true; this.secondJumpAvailable = true; } else { this.ySpeed += CONSTANTS.PLAYER_GRAVITY_FORCE; } this.invincibilityFrames -= 1; } this.hit = function(){ if(this.invincibilityFrames < 0){ this.invincibilityFrames = 120; this.lifes--; } } this.jump = function() { if (this.onGround) { this.ySpeed = -CONSTANTS.PLAYER_JUMP_FORCE; }else if(this.secondJumpAvailable){ this.secondJumpAvailable = false; this.ySpeed = -CONSTANTS.PLAYER_SECONDJUMP_FORCE; } this.onGround = false; } this.containsPoint = function(x, y){ return this.middleX - this.width/2 < x && this.middleX + this.width/2 > x && this.bottomY > y && this.bottomY - this.height < y; } } function Spike(middleX, middleY, angle, radius){ this.middleX = middleX; this.middleY = middleY; this.angle = angle; this.radius = radius; this.angleDiff = 0.03; this.show = function(c){ c.fillStyle = CONSTANTS.SPIKE_COLOR; c.beginPath(); c.moveTo(this.middleX + this.radius * Math.cos(this.angle - this.angleDiff), this.middleY + this.radius * Math.sin(this.angle - this.angleDiff)); c.lineTo(this.middleX + this.radius * Math.cos(this.angle + this.angleDiff), this.middleY + this.radius * Math.sin(this.angle + this.angleDiff)); c.lineTo(this.middleX + this.radius * 1.2 * Math.cos(this.angle), this.middleY + this.radius * 1.2 * Math.sin(this.angle)); c.fill(); } this.moveBy = function(a){ this.angle += a; } this.touchingPlayer = function(player){ var thisX = this.middleX + this.radius * 1.1 * Math.cos(this.angle); var thisY = this.middleY + this.radius * 1.1 * Math.sin(this.angle); if(player.middleX - player.width/2 < thisX && player.middleX + player.width/2 > thisX){ if(player.bottomY > thisY && player.bottomY - player.height < thisY){ return true; } } return false; } } function WreckingBall(middleX, middleY, angle, radius, ballRadius){ this.middleX = middleX; this.middleY = middleY; this.angle = angle; this.radius = radius; this.ballRadius = ballRadius; this.show = function(c){ //chain c.strokeStyle = CONSTANTS.WRECKINGBALL_CHAIN_COLOR; c.setLineDash([this.radius / 30, this.radius / 30]); c.beginPath(); c.moveTo(this.middleX + this.radius * Math.cos(this.angle), this.middleY + this.radius * Math.sin(this.angle)); c.lineTo(this.middleX, this.middleY) c.stroke(); c.setLineDash([]); //ball c.fillStyle = CONSTANTS.WRECKINGBALL_COLOR; c.beginPath(); c.arc(this.middleX + this.radius * Math.cos(this.angle), this.middleY + this.radius * Math.sin(this.angle), this.ballRadius, 0, 2*Math.PI); c.fill(); } this.moveBy = function(a){ this.angle += 2*a; } this.touchingPlayer = function(player){ var asRect = { middleX: this.middleX + this.radius * Math.cos(this.angle), middleY: this.middleY + this.radius * Math.sin(this.angle), width: this.ballRadius, height: this.ballRadius } return player.containsPoint(asRect.middleX - asRect.width/2, asRect.middleY - asRect.height/2) || player.containsPoint(asRect.middleX - asRect.width/2, asRect.middleY + asRect.height/2) || player.containsPoint(asRect.middleX + asRect.width/2, asRect.middleY - asRect.height/2) || player.containsPoint(asRect.middleX + asRect.width/2, asRect.middleY + asRect.height/2); } } function BouncingBall(middleX, middleY, angle, radius, planetRadius){ this.middleX = middleX; this.middleY = middleY; this.angle = angle; this.radius = radius; this.planetRadius = planetRadius; this.ballRadius = planetRadius / 30; this.distanceFromPlanet = this.radius - this.planetRadius; this.distanceSpeed = 0; this.show = function(c){ c.fillStyle = CONSTANTS.BOUNCINGBALL_COLOR; c.beginPath(); c.arc(this.middleX + (this.planetRadius + this.distanceFromPlanet) * Math.cos(this.angle), this.middleY + (this.planetRadius + this.distanceFromPlanet) * Math.sin(this.angle), this.ballRadius, 0, 2 * Math.PI); c.fill(); } this.moveBy = function(a){ this.angle += a; this.distanceSpeed += -CONSTANTS.BOUNCINGBALL_GRAVITY_FORCE; this.distanceFromPlanet += this.distanceSpeed; if(this.distanceFromPlanet < 0){ this.distanceFromPlanet = 0; this.distanceSpeed *= -1; } } this.touchingPlayer = function(player){ var asRect = { middleX: this.middleX + (this.planetRadius + this.distanceFromPlanet) * Math.cos(this.angle), middleY: this.middleY + (this.planetRadius + this.distanceFromPlanet) * Math.sin(this.angle), width: this.ballRadius, height: this.ballRadius } return player.containsPoint(asRect.middleX - asRect.width/2, asRect.middleY - asRect.height/2) || player.containsPoint(asRect.middleX - asRect.width/2, asRect.middleY + asRect.height/2) || player.containsPoint(asRect.middleX + asRect.width/2, asRect.middleY - asRect.height/2) || player.containsPoint(asRect.middleX + asRect.width/2, asRect.middleY + asRect.height/2); } }

Trap Planet || game unfinished v1