var can; var c; var cameraHeight = -20; var score = 0; var highscore = 0; var jumper; var platfroms; var springs; var bullets; var monsters; var equipables; var lost = false; var BACKGROUND; var xAngle = 0; var yAngle = 0; var zAngle = 0; window.ondevicemotion = function(event) { xAngle = event.accelerationIncludingGravity.x yAngle = event.accelerationIncludingGravity.y zAngle = event.accelerationIncludingGravity.z } var PLATFORMWIDTH = 42; var paused = false; var platformTypes = { constMover: 0, onJumpMover: 1, noMover: 2, phase: 3, oneJumpBreaker: 4, noJumpBreaker: 5, uninteractable: 6, exploding: 7, phaseColor: 1, phaseAdding: true, phaseCounter: 90, updatePhase: function(){ if(this.phaseAdding){ if(this.phaseColor >= 1){ if(this.phaseCounter < 0){ this.phaseAdding = false; }else{ this.phaseCounter--; } }else{ this.phaseColor += 0.025; this.phaseCounter = 90; } }else{ if(this.phaseColor <= 0){ if(this.phaseCounter < 0){ this.phaseAdding = true; }else{ this.phaseCounter--; } }else{ this.phaseColor -= 0.025; this.phaseCounter = 90; } } }, currentBiome: 2, currentBiomeSize: 10, updateBiome: function(){ if(this.currentBiomeSize < 0){ this.currentBiome = Math.floor(Math.random() * 6); this.currentBiomeSize = parseInt(Math.random() * 25) + 5; }else{ this.currentBiomeSize--; } }, previouslyGaveType: 2, giveType: function(){ if(this.currentBiome == this.constMover){ if(this.previouslyGaveType >= this.noJumpBreaker){ this.previouslyGaveType = this.constMover; return this.previouslyGaveType; }else{ if(Math.random() < 0.2){ this.previouslyGaveType = Math.round(this.noJumpBreaker + Math.random()); return this.previouslyGaveType; }else{ this.previouslyGaveType = this.constMover; return this.previouslyGaveType; } } }else if(this.currentBiome == this.onJumpMover){ if(this.previouslyGaveType >= this.noJumpBreaker){ this.previouslyGaveType = this.onJumpMover; return this.previouslyGaveType; }else{ if(Math.random() < 0.3){ this.previouslyGaveType = Math.round(this.noJumpBreaker + Math.random()); return this.previouslyGaveType; }else{ this.previouslyGaveType = this.onJumpMover; return this.previouslyGaveType; } } }else if(this.currentBiome == this.noMover){ if(this.previouslyGaveType >= this.noJumpBreaker){ this.previouslyGaveType = this.noMover; return this.previouslyGaveType; }else{ if(Math.random() < 0.4){ this.previouslyGaveType = Math.round(this.noJumpBreaker + Math.random()); return this.previouslyGaveType; }else{ this.previouslyGaveType = this.noMover; return this.previouslyGaveType; } } }else if(this.currentBiome == this.phase){ this.previouslyGaveType = this.phase; return this.previouslyGaveType; }else if(this.currentBiome == this.oneJumpBreaker){ if(this.previouslyGaveType >= this.noJumpBreaker){ this.previouslyGaveType = this.oneJumpBreaker; return this.previouslyGaveType; }else{ if(Math.random() < 0.1){ this.previouslyGaveType = Math.round(this.noJumpBreaker + Math.random()); return this.previouslyGaveType; }else{ this.previouslyGaveType = this.oneJumpBreaker; return this.previouslyGaveType; } } }else if(this.currentBiome == this.noJumpBreaker){ if(this.previouslyGaveType >= this.noJumpBreaker){ this.previouslyGaveType = this.noMover; return this.previouslyGaveType; }else{ this.previouslyGaveType = Math.round(this.noJumpBreaker + Math.random()); return this.previouslyGaveType; } }else{ //default (avoid bugs) this.previouslyGaveType = this.noMover; return this.noMover; } } } document.addEventListener('touchstart', function(e){ var x = (e.clientX || e.targetTouches[0].clientX); var y = (e.clientY || e.targetTouches[0].clientY); e.preventDefault(); if(lost){ reset(); }else{ if(paused){ paused = false; }else if(x > can.width - 50 && y < 50){ paused = true; }else{ jumper.shootBullet(x, y); } } }); window.onload = function(){ can = document.getElementById("c"); can.width = window.innerWidth; can.height = window.innerHeight; c = can.getContext("2d"); BACKGROUND = new Image(); BACKGROUND.src = "https://dl.dropbox.com/s/ox77o1y72fs1s3h/Background.png?raw=1"; reset(); animate(); } function reset(){ lost = false; jumper = new Jumper(); platforms = []; springs = []; equipables = []; for(var i=1;i<(can.width/PLATFORMWIDTH);i++){ platforms.push(new Platform(parseInt(i * PLATFORMWIDTH) - PLATFORMWIDTH/2 + PLATFORMWIDTH*(i/(can.width/PLATFORMWIDTH)), parseInt((Math.random()-0.5)*35), platformTypes.noMover)); } for(var i=1;i<=7;i++){ platforms.push(new Platform(parseInt(Math.random() * (can.width-PLATFORMWIDTH-10) + PLATFORMWIDTH/2 + 5), -i * 72 - 72, platformTypes.noMover)); if(Math.random() < 0.2){ platforms[platforms.length-1].addSpring(); } } bullets = []; monsters = []; cameraHeight = -can.height*5/6; score = 0; } function animate(){ c.fillStyle = "#FFFFFF"; c.fillRect(0, 0, can.width, can.height); c.drawImage(BACKGROUND, 0, Math.max(can.height-BACKGROUND.height/2, Math.min(0, can.height-BACKGROUND.height/2 - 46.5 - cameraHeight/10)), BACKGROUND.width/2, BACKGROUND.height/2); for(var i=0;i cameraHeight + can.height/2 + 40){ cameraHeight++; } } } jumper.userInteraction(); jumper.update(); platformTypes.updatePhase(); for(var i=platforms.length-1;i>=0;i--){ if(platforms[i].y > cameraHeight + can.height){ platforms.splice(i, 1); platformTypes.updateBiome(); platforms.push(new Platform(Math.random() * (can.width-PLATFORMWIDTH-10) + PLATFORMWIDTH/2 + 5, platforms[platforms.length-1].y - 72, platformTypes.giveType())); if(Math.random() < 0.2 && platforms[platforms.length-1].type < platformTypes.noJumpBreaker){ platforms[platforms.length-1].addSpring(); }else if(Math.random() < 0.05 && platforms[platforms.length-1].type < platformTypes.noJumpBreaker && platforms[platforms.length-2].type < platformTypes.noJumpBreaker && monsters.length == 0){ monsters.push(new Monster(platforms[platforms.length-1], platforms[platforms.length-1].x, platforms[platforms.length-1].y - 40)); }else if(Math.random() < 0.01 && platforms[platforms.length-1].type < platformTypes.noJumpBreaker){ equipables.push(new Jetpack(platforms[platforms.length-1], platforms[platforms.length-1].x, platforms[platforms.length-1].y)); } }else{ if(platforms[i].type != platformTypes.uninteractable && !lost){ jumper.platformInteraction(platforms[i]); platforms[i].update(); } } } for(var i=springs.length-1;i>=0;i--){ if(springs[i].y > cameraHeight + can.height){ springs.splice(i, 1); }else{ if(!lost){ jumper.springInteraction(springs[i]); } springs[i].update(); } } for(var i=bullets.length-1;i>=0;i--){ bullets[i].update(); if(bullets[i].y < cameraHeight - can.height){ bullets.splice(i, 1); } } for(var i=monsters.length-1;i>=0;i--){ monsters[i].update(); if(!lost){ if(jumper.monsterInteraction(monsters[i]) || monsters[i].y > cameraHeight + can.height + 40){ monsters.splice(i, 1); }else{ for(var j=bullets.length-1;j>=0;j--){ if(monsters[i].hitByBullet(bullets[j])){ monsters.splice(i, 1); bullets.splice(j, 1); break; } } } } } for(var i=equipables.length-1;i>=0;i--){ if(equipables[i].y > cameraHeight + can.height + 40){ equipables.splice(i, 1); }else{ equipables[i].update(); jumper.equipableInteraction(equipables[i]); } } if(jumper.y > cameraHeight + can.height || lost){ if(jumper.ySpeed < 0){ jumper.ySpeed = 0; } lost = true; c.fillStyle = "#000000"; c.font = "30px arial"; c.textAlign = "center"; c.fillText("press to play again", can.width/2, can.height/2); } }else{ c.fillStyle = "rgba(0, 0, 0, 0.3)"; c.fillRect(0, 0, can.width, can.height); c.fillStyle = "#000000"; c.font = c.font = "30px arial"; c.textAlign = "center"; c.fillText("press to continue", can.width/2, can.height/2); } requestAnimationFrame(animate); } function dist(x1, y1, x2, y2){ if(x2 > x1){ return Math.sqrt((x2-x1)*(x2-x1) + (y2-y1)*(y2-y1)); }else{ return Math.sqrt((x1-x2)*(x1-x2) + (y1-y2)*(y1-y2)); } } function getSpeedOfJumpheight(height, yAddAdd){ var y = 0; var yAdd = 0; while(y < height){ y += yAdd; yAdd += yAddAdd; } return (-yAdd); } function Jumper(){ this.x = can.width/2; this.y = -35; this.xSpeed = 0; this.ySpeed = 0; this.g = 0.35; this.normalJump = getSpeedOfJumpheight(160, this.g); this.monsterJump = getSpeedOfJumpheight(300, this.g); this.springJump = getSpeedOfJumpheight(500, this.g); this.w = 30; this.h = 30; this.equiped = null; this.show = function(){ c.fillStyle = "#00FF00"; c.fillRect(this.x - this.w/2, this.y - this.h/2 - cameraHeight, this.w, this.h * 3/4); if(this.xSpeed < 0){ c.beginPath(); c.arc(this.x, this.y - this.h/2 - cameraHeight, this.w/2, 0, 2*Math.PI); c.fill(); for(var i=0;i<4;i++){ var x = this.x + this.w/3 -(i*this.w/4); var y = this.y + this.h/4 - cameraHeight; c.beginPath(); c.moveTo(x, y); c.lineTo(x, y + this.h/4); c.stroke(); c.beginPath(); c.moveTo(x, y + this.h/4); c.lineTo(x-5, y + this.h/4); c.stroke(); } c.fillRect(this.x - this.w/2 - 15, this.y - this.h/2 - cameraHeight, 15, 5); c.fillStyle = "#000000"; c.beginPath(); c.arc(this.x - this.w/5, this.y - this.h/2 - cameraHeight, 2, 0, 2*Math.PI); c.fill(); if(this.equiped != null){ c.fillStyle = "#FFB300"; c.fillRect(this.x + this.w/2 - 5, this.y - cameraHeight - 25, 10, 20); } }else{ c.beginPath(); c.arc(this.x, this.y - this.h/2 - cameraHeight, this.w/2, 0, 2*Math.PI); c.fill(); for(var i=0;i<4;i++){ var x = this.x + this.w/3 -(i*this.w/4); var y = this.y + this.h/4 - cameraHeight; c.beginPath(); c.moveTo(x, y); c.lineTo(x, y + this.h/4); c.stroke(); c.beginPath(); c.moveTo(x, y + this.h/4); c.lineTo(x+5, y + this.h/4); c.stroke(); } c.fillRect(this.x + this.w/2, this.y - this.h/2 - cameraHeight, 15, 5); c.fillStyle = "#000000"; c.beginPath(); c.arc(this.x + this.w/5, this.y - this.h/2 - cameraHeight, 2, 0, 2*Math.PI); c.fill(); if(this.equiped != null){ c.fillStyle = "#FFB300"; c.fillRect(this.x - this.w/2 - 5, this.y - cameraHeight - 25, 10, 20); } } } this.update = function(){ if(this.equiped != null){ this.equiped.lifeTime--; if(this.equiped.lifeTime < 0){ this.equiped = null; }else{ this.ySpeed += this.equiped.speedAdd; } } while(this.x < 0){ this.x += can.width; } while(this.x > can.width){ this.x -= can.width; } this.y += this.ySpeed; this.x += this.xSpeed; this.ySpeed += this.g; this.xSpeed *= 0.8; /* if(this.ySpeed > 12){ this.ySpeed = 12; } */ } this.platformInteraction = function(p){ if(this.ySpeed > 0){ if(this.x - this.w/2 < p.x + p.w/2 && this.x + this.w/2 > p.x - p.w/2){ if(this.y + this.h/2 > p.y + p.h/2 && this.y + this.h/2 < p.y + p.h/2 + 15){ if(p.type == platformTypes.onJumpMover){ this.ySpeed = this.normalJump; this.y = p.y - p.h/2 - this.h/2; for(var i=0;i 0){ if(this.x - this.w/2 < s.x + s.w/2 && this.x + this.w/2 > s.x - s.w/2){ if(this.y - this.h/2 < s.y + s.h/2 && this.y + this.h/2 > s.y - s.h/2){ this.ySpeed = this.springJump; this.y = s.y - s.h/2 - this.h/2; } } } } this.monsterInteraction = function(m){ if(this.ySpeed > - 19 && dist(this.x, this.y, m.x, m.y) < m.r + this.w){ if(this.ySpeed > 0){ this.ySpeed = this.monsterJump; return true; }else{ if(this.equiped == null){ lost = true; } return false; } } return false; } this.userInteraction = function(){ this.xSpeed += xAngle; } this.shootBullet = function(targetX, targetY){ var angle = Math.asin((targetX-this.x)/dist(targetX, targetY, this.x, this.y-cameraHeight)); var xSpeed = Math.sin(angle)*15; var ySpeed = -Math.cos(angle)*15; bullets.push(new Bullet(this.x, this.y, xSpeed, ySpeed)); } this.equipableInteraction = function(q){ if(this.ySpeed > -20 && this.equiped == null && dist(this.x, this.y, q.x, q.y) < q.r/2 + this.w){ this.equiped = q; this.ySpeed = -20; } } } function Platform(x, y, type){ this.x = x; this.y = y; this.w = PLATFORMWIDTH; this.h = parseInt(PLATFORMWIDTH/4); this.x_ = x; this.type = type; this.lifeTime = 90; if(this.type == platformTypes.constMover){ this.xSpeed = 2; }else{ this.xSpeed = 0; } this.show = function(){ if(this.type == platformTypes.phase){ c.fillStyle = "rgba(108, 0, 255, " + platformTypes.phaseColor + ")"; c.fillRect(this.x - this.w/2, this.y - this.h/2 - cameraHeight, this.w, this.h); }else if(this.type == platformTypes.constMover){ c.fillStyle = "rgba(180, 180, 180, 1)"; c.fillRect(this.x - this.w/2, this.y - this.h/2 - cameraHeight, this.w, this.h); }else if(this.type == platformTypes.onJumpMover){ c.fillStyle = "rgba(30, 30, 30, 1)"; c.fillRect(this.x - this.w/2, this.y - this.h/2 - cameraHeight, this.w, this.h); }else if(this.type == platformTypes.oneJumpBreaker){ c.fillStyle = "rgba(180, 180, 70, 1)"; c.fillRect(this.x - this.w/2, this.y - this.h/2 - cameraHeight, this.w, this.h); }else if(this.type == platformTypes.noJumpBreaker){ c.fillStyle = "rgba(255, 96, 96, 0.75)"; c.fillRect(this.x + 3, this.y - this.h/2 - cameraHeight, this.w/2 - 3, this.h); c.fillRect(this.x - this.w/2, this.y - this.h/2 - cameraHeight, this.w/2, this.h); }else if(this.type == platformTypes.exploding){ c.fillStyle = "rgba(" + parseInt(180 + (90-this.lifeTime)*2) + ", " + parseInt(180 - (90-this.lifeTime)*2) + ", 70, 1)"; c.fillRect(this.x - this.w/2, this.y - this.h/2 - cameraHeight, this.w, this.h); }else if(this.type == platformTypes.uninteractable){ }else{ c.fillStyle = "rgba(96, 96, 96, 1)"; c.fillRect(this.x - this.w/2, this.y - this.h/2 - cameraHeight, this.w, this.h); } } this.update = function(){ if(this.type == platformTypes.constMover){ this.x += this.xSpeed; if(this.x < this.w){ this.xSpeed *= -1; this.x = this.w; }else if(this.x > can.width - this.w){ this.xSpeed *= -1; this.x = can.width - this.w; } }else if(this.type == platformTypes.onJumpMover){ this.x -= (this.x - this.x_)/10; }else if(this.type == platformTypes.exploding){ if(this.lifeTime < 15){ this.type = platformTypes.uninteractable; }else{ this.lifeTime--; } } } this.moveSomewhere = function(){ if(Math.random() < 0.5){ this.x_ += PLATFORMWIDTH*2; if(this.x_ > can.width-PLATFORMWIDTH/2-5){ this.x_ -= PLATFORMWIDTH*4; } }else{ this.x_ -= PLATFORMWIDTH*2; if(this.x_ < PLATFORMWIDTH/2 + 5){ this.x_ += PLATFORMWIDTH*4; } } } this.addSpring = function(){ springs.push(new Spring(this, parseInt((Math.random()*2-1) * (PLATFORMWIDTH/3)), -this.h/2 - parseInt(PLATFORMWIDTH/5)/2)); } } function Spring(platform, xOffset, yOffset){ this.p = platform this.x = this.p.x + xOffset; this.y = this.p.y + yOffset; this.xOffset = xOffset; this.yOffset = yOffset; this.w = parseInt(PLATFORMWIDTH/4); this.h = parseInt(PLATFORMWIDTH/4); this.show = function(){ c.fillStyle = "#77DD55"; c.fillRect(this.x - this.w/2, this.y - this.h/2 - cameraHeight, this.w, this.h); } this.update = function(){ this.x = this.p.x + this.xOffset; this.y = this.p.y + this.yOffset; if(this.p == null || this.p.type == platformTypes.uninteractable || this.p.type == platformTypes.noJumpBreaker){ this.y = -100; } } } function Bullet(x, y, xSpeed, ySpeed){ this.x = x; this.y = y; this.xSpeed = xSpeed; this.ySpeed = ySpeed; this.r = 8; this.show = function(){ c.fillStyle = "#EEEE00"; c.beginPath(); c.arc(this.x, this.y - cameraHeight, this.r, 0, 2*Math.PI); c.fill(); } this.update = function(){ this.x += this.xSpeed; this.y += this.ySpeed; } } function Monster(platform, x, y){ this.p = platform; this.x = x; this.y = y; this.r = 25; this.phase = -3; this.phaseAdd = 1; this.update = function(){ this.x = this.p.x; this.y = this.y + this.phase/2; if(this.phase < -3){ this.phaseAdd = 1; }else if(this.phase > 3){ this.phaseAdd = -1; } this.phase += this.phaseAdd/2; } this.show = function(){ c.fillStyle = "#FF0000"; c.beginPath(); c.arc(this.x, this.y - cameraHeight, this.r, 0, 2*Math.PI); c.fill(); c.strokeStyle = "#000000"; c.beginPath(); c.moveTo(this.x - this.r/2, this.y - cameraHeight); c.lineTo(this.x, this.y + this.r/2 - cameraHeight); c.lineTo(this.x + this.r/2, this.y - cameraHeight); c.lineTo(this.x, this.y + this.r/4 - cameraHeight); c.lineTo(this.x - this.r/2, this.y - cameraHeight); c.stroke(); c.fillStyle = "#000000"; c.beginPath(); c.arc(this.x - this.r/3, this.y - (this.r/3) - cameraHeight, this.r/7, 0, 2*Math.PI); c.fill(); c.fillStyle = "#000000"; c.beginPath(); c.arc(this.x + this.r/3, this.y - (this.r/3) - cameraHeight, this.r/7, 0, 2*Math.PI); c.fill(); c.beginPath(); c.moveTo(this.x - this.r/2, this.y - (this.r/2) - cameraHeight); c.lineTo(this.x, this.y - (this.r/3) - cameraHeight); c.stroke(); c.beginPath(); c.moveTo(this.x + this.r/2, this.y - (this.r/2) - cameraHeight); c.lineTo(this.x, this.y - (this.r/3) - cameraHeight); c.stroke(); c.beginPath(); c.moveTo(this.x - this.r, this.y - cameraHeight); c.lineTo(this.x - this.r - 5, this.y + (this.r/3) - cameraHeight); c.stroke(); c.beginPath(); c.moveTo(this.x + this.r, this.y - cameraHeight); c.lineTo(this.x + this.r + 5, this.y + (this.r/3) - cameraHeight); c.stroke(); } this.hitByBullet = function(b){ return (dist(this.x, this.y, b.x, b.y) < this.r); } } function Jetpack(platform, x, y){ this.p = platform; this.x = x; this.y = y; this.r = 25; this.lifeTime = 120; this.speedAdd = -0.5; this.update = function(){ this.x = this.p.x; this.y = this.p.y; } this.show = function(){ c.fillStyle = "#FFB300"; c.fillRect(this.x - 5, this.y - cameraHeight - 25, 10, 20); } }

Doodle Jump || mobile/devicemotion only