// Canvas and animation var c, ctx, t; // Bird and frames per second var bird, ground, bonus; var frames = 60; var multiplier = 25; // Flag if the user has lost and time needed to spawn a new pipe var lost = false; var time = 1; // Score, level and rank variables var score = 0; var level = 1; var rank = 'Bronze'; // Object that has the colour of the badge and the pipes' colours var col = { fill: 'peru', stroke: 'darkkhaki' }; var colours = ["green", "red", "purple", "indigo", "orange", "blue", "#7FFF00"]; // Messages variables var badges = 0; // Text object that has properties of the text that shows the bonus var texts; var challenges = { won: 0, lost: 0 } // Sololearn's logo in the background var image = { x: 0, y: 0, width: 450, height: 500 } // Scores and total score variables. var scoreAdded = 0; var totalScore = 0; var highscore = 0; // Array that contains all pipes var pipes = []; var badgesPics = [ ['https://api.sololearn.com/Uploads/Achievements/64.png', '#00acc1'], ['https://api.sololearn.com/Uploads/Achievements/80.png', '#ffb300'], ['https://api.sololearn.com/Uploads/Achievements/76.png', '#0288d1'], ['https://api.sololearn.com/Uploads/Achievements/73.png', '#bf360c'], ['https://api.sololearn.com/Uploads/Achievements/78.png', '#3f51b5'], ['https://api.sololearn.com/Uploads/Achievements/95.png', '#1565c0'] ]; // Loading animation document.onreadystatechange = function () { var state = document.readyState if (state == 'interactive') { document.getElementById('contents').style.visibility="hidden"; } else if (state == 'complete') { setTimeout(function(){ document.getElementById('interactive'); document.getElementById('load').style.visibility="hidden"; document.getElementById('contents').style.visibility="visible"; },1000); } } window.onload = function() { c = document.getElementById('c'); ctx = c.getContext('2d'); info = document.getElementById('info'); scoreStats = document.getElementById('score'); resetBtn = document.getElementById('reset'); popUp = document.getElementById('back'); /* * Makes the canvas responsive for calculators and mobiles * Adds events, click and keydown for the bird */ if(/iphone|ipad|android/im.test(navigator.userAgent)) { // Canvas size c.width = window.innerWidth * 0.97; c.height = window.innerHeight * 0.795; // Top part size info.style.width = window.innerWidth * 0.97; info.style.height = window.innerHeight * 0.17; // Background size image.width = c.width; image.height = c.height; // Pop-up size popUp.style.width = 400 / 450 * c.width + 'px'; popUp.style.height = 4 / 5 * c.height + 'px'; popUp.style.marginTop = info.style.height + 1 / 10 * c.width + 'px'; c.addEventListener('touchstart', function() { if (!lost) { bird.lift(); } }); } else { document.addEventListener('keydown', function(evt) { if (evt.keyCode === 32) { if (!lost) { bird.lift(); } } }); } bird = new Bird(); ground = new Ground(); pipes.push(new Pipe()); t = setInterval(draw, 1000/frames); } /* Reset function! It resets the pipes and bonuses, set the bird to default */ function resetGame() { lost = false; pipes = []; bonus = null; score = 0; bird.x = 60; bird.y = c.height/2; } // The main function where everything happens function draw() { ctx.clearRect(0,0,c.width, c.height) if (time % frames === 0) { // Adding pipes time = 0; pipe = new Pipe(); pipes.push(pipe); // Ading bonus if (!bonus) { if (random(0,10) < 10) { var last = pipes[pipes.length-1]; var choose = choice(['badge', 'challenge']); if (choose == 'badge') { // Badge is between the pipes var bonusX = last.x + last.w/2; var bonusY = last.y2 - last.spacing/2; var bonusR = last.w/2+5; } else { var bonusR = 20; var bonusY = random(bonusR, ground.y - bonusR); // If there is one pipe, the star should be between the 0 and the pipe if (pipes.length <= 1) { // Otherwise, between the pipe and the end if (last.x > 250) { var bonusX = random(150, last.x - bonusR); } else { var bonusX = random(last.x + bonusR, c.width - bonusR); } } else { // If there's more, we need to put the star between two pipes var last2 = pipes[pipes.length - 2]; var bonusX = random(last2.x +last2.w + bonusR, last.x - last.w - bonusR); } } bonus = new Bonus(choose, bonusX, bonusY, bonusR, last.speed); } } } // Background image var avatar = new Image(); avatar.src = 'https://drive.google.com/uc?id=0B0Ilp8TihutrZXBRNzBITmhMYVNQMnAtcVhjOVhCdEFKVEc4'; avatar.onload = function() { ctx.beginPath(); } ctx.drawImage(avatar, image.x, image.y, image.width, image.height); // Bonuses functionality if (bonus) { bonus.update(); bonus.draw(); if (bonus.offscreen()) { bonus = null; } else { if (bonus.death(bird)) { bonus.giveXP(); texts = { text: bonus.text, size: 40, colour: bonus.colour, y: c.height/2, xp: bonus.xp, xpX: random(100, c.width - 100), xpY: random(100, c.height - 100) }; bonus = null; } else if (bonus.type == 'challenge' && bird.x > bonus.x + bonus.radius) { challenges.lost++; // Change the text to lost a challenge bonus.text = 'You lost a challenge'; bonus.xp = Math.floor(map_range(level, 1, 37, -1, -32)); bonus.giveXP(); // I had to assign this again... Not quite a clean code but I will improve it texts = { text: bonus.text, size: 40, colour: bonus.colour, y: c.height/2, xp: bonus.xp, xpX: random(100, c.width - 100), xpY: random(100, c.height - 100) }; bonus = null; } } } // Displays text if (!lost) { if (texts) { if (texts.size > 5) { // Displays what happened showBonus(c.width/2, texts.y, texts.text, texts.size, texts.colour); // Displays score var sign = texts.text != 'You lost a challenge' ? '+' : ''; showBonus(texts.xpX, texts.xpY, sign + texts.xp + ' XP', 20, texts.colour); texts.size -= 1; texts.y -= 2; } } } // Pipes functionality for (var i = pipes.length-1; i >= 0; i--) { pipes[i].show(); pipes[i].update(); if (pipes[i].offscreen()) { pipes.splice(i, 1); } if (pipes[i].hit(bird)) { lost = true; score = 0; //clearInterval(t); } } // Showing bird, ground, score and updating stats showScore(); updateScore(); updateLevel(); updateRank(); updateStats(); ground.show(); bird.show(); bird.update(); time++; } function Ground() { this.height = 30; this.width = c.width; this.x = 0; this.y = c.height - this.height; this.show = function() { ctx.fillStyle = 'orange'; ctx.fillRect(ground.x, ground.y, ground.width, ground.height); ctx.fillStyle = 'green'; ctx.fillRect(ground.x, ground.y, ground.width, ground.height-20); } } function Pipe() { this.spacing = random(125,175); this.height_top = random(50, c.height - this.spacing - 100); this.height_bottom = c.height - (this.spacing + this.height_top) this.w = 30; this.x = c.width; this.y1 = 0; this.y2 = c.height - this.height_bottom; this.speed = 3; this.col = colours[random(0,colours.length-1)]; this.hit = function(bird) { if (bird.x + bird.r > this.x && bird.x < this.x + this.w) { if ((bird.y + bird.r > 0 && bird.y - bird.r < this.height_top) || (bird.y + bird.r > this.y2 && bird.y - bird.r < c.height)) { bird.x = this.x - bird.r; return true; } else { score += multiplier; } } return false; } this.show = function() { ctx.fillStyle = this.col; // top ctx.fillRect(this.x, this.y1, this.w, this.height_top); // bottom ctx.fillRect(this.x, this.y2, this.w, this.height_bottom); } this.update = function() { this.x -= this.speed; } this.offscreen = function() { return this.x < -this.w; } } function Bird() { this.x = 60; this.y = c.height / 2; this.spikes = 5; this.sw = 5; this.radius = c.width * 0.05; this.width = c.width * 0.035; this.height = c.width * 0.0175; this.r = this.radius + this.sw; this.velocity = 0; this.gravity = 0.3; this.upThrust = 5; this.lift = function() { this.velocity = -this.upThrust; } this.show = function() { ctx.beginPath(); ctx.fillStyle = col.fill; ctx.strokeStyle = col.stroke; ctx.lineWidth = this.sw; // Circle ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI); ctx.fill(); ctx.stroke(); // Star ctx.fillStyle = 'white'; drawStar(ctx, this.x, this.y, this.spikes, this.width, this.height); ctx.fill(); ctx.closePath(); } this.update = function() { this.y += this.velocity; this.velocity += this.gravity; if (this.y - this.r < 0) { this.y = this.r; } if (this.y + this.r > ground.y) { this.y = ground.y - this.r; } } } /** Other functions!!! * showStats(); Shows the pop-up; * hideStats(); Hides the pop-up; * updateStats(); Updates the stats of the user (highscore, badges and challenges); * choice(choices); Takes a random choice from an array * @param {Array} choices - Array where we take a random choice; * showBonus(); Displays text of the bonus received; * @param {number} x - X-pos of the text; * @param {number} y - X-pos of the text; * @param {string} text - The text which has to be displayed; * @param {number} size - Size of the text; * @param {string} colour - Colour represented as a string; * showScore(); Display score on canvas; * dist(x1,y1,x2,y2); Returns the distance between two vectors; * @param {number} x1 - X-pos of first vector; * @param {number} y1 - Y-pos of first vector; * @param {number} x1 - X-pos of second vector; * @param {number} y2 - Y-pos of second vector; * updateScore(); Update the total score; * random(min, max); Returns a random integer from a given range: * @param {number} min - Minimum number from the range; * @param {number} max - Maximum number from the range; * changeBtn(); Returns the text of the reset button. If the user lost, will return 'Start Again', otherwise it will return 'Reset'; * updateRank(); Updates the rank of the user; * updateLevel(); Updates the level of the user; * drawStar(ctx,cx,cy,spikes,outerRadius,innerRadius); Draws a star with given arguments; * @param {CanvasRenderingContext2D} ctx. Canvas' context; * @param {number} cx - X-position of the centre; * @param {number} cy - Y-position of the centre; * @param {number} spikes - Number of spikes; * @param {number} outerRadius - Dimension in px of the outeradius; * @param {number} innerRadius - Dimension in px of the inneradius; * map_range(value, low1, high1, low2, high2); Maps a value with two ranges given; * @param {number} value - A value; * @param {number} low1 - Lowest point of the first range; * @param {number} high1 - Highest point of the first range; * @param {number} low2 - Lowest point of the second range; * @param {number} high2 - Highest point of the second range; */ function showStats() { document.getElementById('back').style.visibility='visible'; document.getElementById('stats').style.visibility='visible'; } function hideStats() { document.getElementById('back').style.visibility='hidden'; document.getElementById('stats').style.visibility='hidden'; } function updateStats() { var stats = document.getElementById('stats'); var endSw = challenges.won === 1 ? '' : 's'; var endSl = challenges.lost === 1 ? '' : 's'; var text = { header: 'Stats', highscore: 'Highscore: ' + highscore, badges: 'Badges: ' + badges, won: 'You won ' + challenges.won + ' challenge' + endSw, lost: 'You lost ' + challenges.lost + ' challenge' + endSl, image: "

" } var allText = text.header + '
'+text.highscore + '
' + text.badges + '

' + text.won + '
' + text.lost + '
'+text.image; stats.innerHTML = allText; // Highscore: 0 //
// Badges: 0 //

// You won 0 challenges //
// You lost 0 challenges } function choice(choices) { var index = Math.floor(Math.random() * choices.length); return choices[index]; } function showBonus(x, y, text, size, colour) { ctx.fillStyle = colour; ctx.textAlign = 'center'; ctx.font = 'bold '+ size +'px Calibri'; ctx.fillText(text, x, y); } function showScore() { ctx.textAlign = 'center'; ctx.font = 'bold 50px Calibri'; ctx.fillStyle = 'black'; ctx.fillText(score + ' XP', c.width/2,c.height/4); } function dist(x1, y1, x2, y2) { var dx = x2 - x1; var dy = y2 - y1; return Math.sqrt(Math.pow(dy,2) + Math.pow(dx, 2)); } function updateScore() { if (score === 0) { totalScore += scoreAdded; } scoreAdded = score; if (this.totalScore === NaN) { this.totalScore = 0; } if (score > highscore) { highscore = score; } scoreStats.innerHTML = 'Level '+ level +' - '+ rank +' - ' + (totalScore+score) + ' XP
'; resetBtn.innerHTML = changeBtn(); } function random(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } function changeBtn() { if (lost) { return 'Start Again'; } else { return 'Reset'; } } function updateRank() { rankNow = rank; if (level <= 4) { rank = 'Bronze'; } else if (level <= 9) { rank = 'Silver'; col.fill = 'silver'; col.stroke = 'lightgray'; } else if (level <= 13) { rank = 'Gold'; col.fill = 'gold'; col.stroke = 'yellow'; } else if (level <= 16) { rank = 'Platinum'; col.fill = '#1b1b53'; col.stroke = '#53698b'; } else if (level <= 21) { rank = 'Ruby'; col.fill = '#990e16'; col.stroke = '#f44336'; } else if (level <= 27) { rank = 'Emerald'; col.fill = '#1f7e05'; col.stroke = '#15bb03'; } else if (level <= 36) { rank = 'Amethyst'; col.fill = '#b21595'; col.stroke = '#de78a7'; } else { rank = 'Diamond'; col.fill = '#143dcd'; col.stroke = '#10dcea'; } } function updateLevel() { levelNow = level; if (totalScore + score <= 200) { level = '1'; } else if (totalScore + score <= 500) { level = '2'; } else if (totalScore + score <= 1000) { level = '3'; } else if (totalScore + score <= 1500) { level = '4'; } else if (totalScore + score <= 2100) { level = '5'; } else if (totalScore + score <= 2700) { level = '6'; } else if (totalScore + score <= 3500) { level = '7'; } else if (totalScore + score <= 4500) { level = '8'; } else if (totalScore + score <= 6000) { level = '9'; } else if (totalScore + score <= 7300) { level = '10'; } else if (totalScore + score <= 8700) { level = '11'; } else if (totalScore + score <= 10000) { level = '12'; } else if (totalScore + score <= 12000) { level = '13'; } else if (totalScore + score <= 14000) { level = '14'; } else if (totalScore + score <= 16000) { level = '15'; } else if (totalScore + score <= 18500) { level = '16'; } else if (totalScore + score <= 20000) { level = '17'; } else if (totalScore + score <= 23000) { level = '18'; } else if (totalScore + score <= 26000) { level = '19'; } else if (totalScore + score <= 30000) { level = '20'; } else if (totalScore + score <= 34500) { level = '21'; } else if (totalScore + score <= 38000) { level = '22'; } else if (totalScore + score <= 43000) { level = '23'; } else if (totalScore + score <= 50000) { level = '24'; } else if (totalScore + score <= 56000) { level = '25'; } else if (totalScore + score <= 65000) { level = '26'; } else if (totalScore + score <= 70000) { level = '27'; } else if (totalScore + score <= 80000) { level = '28'; } else if (totalScore + score <= 90000) { level = '29'; } else if (totalScore + score <= 100000) { level = '30'; } else if (totalScore + score <= 200000) { level = '31'; } else if (totalScore + score <= 300000) { level = '32'; } else if (totalScore + score <= 500000) { level = '33'; } else if (totalScore + score <= 700000) { level = '34'; } else if (totalScore + score <= 850000) { level = '35'; } else if (totalScore + score <= 1000000) { level = '36'; } else { level = '37'; } } function drawStar(ctx,cx,cy,spikes,outerRadius,innerRadius){ var rot=Math.PI/2*3; var x=cx; var y=cy; var step=Math.PI/spikes; ctx.beginPath(); ctx.moveTo(cx,cy-outerRadius); for(i=0;i this.x - this.radius && bird.x - bird.r < this.x + this.radius) { if (bird.y + bird.r > this.y - this.radius && bird.y - bird.r < this.y + this.radius) { return true; } } else { return false; } } this.draw = function() { if (this.type === 'badge') { var badge = new Image(); badge.src = this.url[0]; badge.onload = function() { ctx.beginPath(); } ctx.fillStyle = this.url[1]; ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI, true); ctx.fill(); ctx.drawImage(badge, this.x-this.radiusImg/2, this.y-this.radiusImg/2, this.radiusImg, this.radiusImg); } else { ctx.fillStyle = this.colour; drawStar(ctx, this.x, this.y, 5, this.radius, this.radius-10); ctx.fill(); } } this.update = function() { this.x -= this.speed; } this.giveXP = function() { if (this.type === 'badge') { if (random(0,100) <= 3) { this.xp = random(200, 1000) } else { this.xp = random(10, 100); } badges++; } else { if (!lost) { if (this.death(bird)) { this.xp = map_range(level, 1, 37, 32, 1); challenges.won++; } } } this.xp = Math.round(this.xp); score += this.xp; } this.offscreen = function() { return this.x < -this.radius * 2; } }

Flappy Sololearn (BETA)