"use strict";class Entity{constructor(d,a,b){this.pos=d,this.size=a,this.degs=b,this.direction=Maths.calcVelocity(b),this.speed=0,this.color=Util.randomRGB()}get top(){return this.pos.y}get bottom(){return this.pos.y+this.size.y}get left(){return this.pos.x}get right(){return this.pos.x+this.size.x}set top(b){this.pos.y=b}set bottom(b){this.pos.y=b-this.size.y}set left(b){this.pos.x=b}set right(b){this.pos.x=b-this.size.x}get center(){return new Vector(this.pos.x+this.size.x/2,this.pos.y+this.size.x/2)}render(){}update(){}}class Ball extends Entity{update(b){return this.pos.x+=this.direction.x*b*this.speed,this.pos.y+=this.direction.y*b*this.speed,this.checkScreenColision(),!1}render(b){b.fillStyle=this.color,b.beginPath(),b.arc(...this.pos,this.size.x,0,2*Math.PI),b.fill(),b.closePath()}checkScreenColision(){this.right>=SCREEN_WIDTH?(this.direction.x*=-1,this.right=SCREEN_WIDTH):0>=this.left&&(this.direction.x*=-1,this.left=0),0>=this.top?(this.direction.y*=-1,this.top=0):this.bottom>=SCREEN_HEIGHT&&(this.direction.y*=-1,this.bottom=SCREEN_HEIGHT)}static create(e){const{random:f}=Maths,b=new EntityStore;for(let a=0;asetTimeout(a,c))}static randomRGB(){const{random:b}=Maths;return`rgb(${b(0,255)}, ${b(0,255)}, ${b(0,255)})`}}class Renderer{constructor(c){this.lt=0,this.dt=0,this.request,this.running=!1,this.minFPS=25,window.requestAnimationFrame=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame,this.update=a=>{this.dt=a-this.lt,this.running&&a&&(0|1e3/this.dt)>this.minFPS&&c(this.dt),this.lt=a,this.request=window.requestAnimationFrame(this.update)}}stop(){this.running&&(window.cancelAnimationFrame(this.request),delete this.request,this.running=!1)}pause(){this.running=!1}continue(){this.running=!0}start(){this.running||(this.running=!0,this.request=window.requestAnimationFrame(this.update))}}var lang=navigator.language.split("-")[0].toLowerCase();var author="Luis Calderon";let confirmContent1="es"==lang?`Toca la pantalla para iniciar una onda.

Trata de atrapar la mayor cantidad de bolas posibles. Cada bola crea una nueva onda que puede atrapar nuevas bolas.`:`Tap the screen to start a ripple.

Try to catch as many balls. Each ball caught creates a new ripple that can catch new balls`,confirmContent2="es"==lang?`Las bolas son generadas aleatoriamente de 70 a 100.

-Los puntos se consiguen atrapando bolas.

Por cada bola atrapada el escore aumenta 5 multiplicado por el numero de ondas actuales.`:`-The balls are randomly generated from 70 to 100.

-Points are earned by catching balls.

-For each ball the score increases 5 multiplied by the number of current ripples.`;var fc ={ apiKey: "AIzaSyD37GI5NyaavB0pNQHeKZyDDG6ocq1B75g", authDomain: "rprf-d3a03.firebaseapp.com", databaseURL: "https://rprf-d3a03.firebaseio.com", projectId: "rprf-d3a03", storageBucket: "rprf-d3a03.appspot.com", messagingSenderId: "744480332049", appId: "1:744480332049:web:937f30e73f050013f6d4b0", measurementId: "G-1E9941VWYM" }; firebase.initializeApp(fc);var dbRef=firebase.database().ref();var SCREEN_WIDTH=350{$("#leaderBoard").classList.remove("active")},$("#leaderboard-open").onclick=()=>{setData(n,a),openLeaderBoard()},$(`#${userName.replace(/ /g,"-")}`).classList.add("currentPlayer");await Util.sleep(1000);let n=0,a=0;$("#userName").innerHTML=userName,$("#youAre").innerHTML=getUserPosition(),setData(n,a);const{createScreen:o}=Util,d=o(SCREEN_WIDTH,SCREEN_HEIGHT),{context:e,canvas:f}=d;e.fillStyle="#060606",e.fillRect(0,0,SCREEN_WIDTH,SCREEN_HEIGHT),e.font="20px sans-sreif",document.body.appendChild(f);f.width=SCREEN_WIDTH=350{m()},f.onclick=d=>{const{clientX:g,clientY:b}=d;if(!inGame){const c=f.getBoundingClientRect(),a=Math.round(g-c.left),d=Math.round(b-c.top);p.add(new Ripple(new Vector(a,d),new Vector(3,3),Util.randomRGB()))}inGame=!0};const r=new Renderer(function(b){e.font="20px sns-serif";e.fillStyle="rgba(0, 0, 0, 0.12)",e.fillRect(0,0,SCREEN_WIDTH,SCREEN_HEIGHT);for(let c of g)c.render(e),c.update(b);for(let d of p){d.render(e),d.update(b)&&p.delete(d);for(let a of g)overlap(d,a)&&(p.add(new Ripple(new Vector(...a.pos),new Vector(3,3),a.color)),n+=5*p.length,g.delete(a),i++)}inGame&&0===p.length&&(inGame=!1,n>a&&(a=n),gameOver(n,a,m),n=0),e.fillStyle="#fff",e.fillText(`${i} / ${q}`,10,20),e.fillText(`Ripples: ${p.length}`,10,40),e.fillText(`Score: ${n}`,10,60)});r.start()};const $=b=>document.querySelector(b);function getUserPosition(){let c=1;for(let a of playerList){if(a.name==userName)return c;c++}};function createPlayerScore(e,a,b){const c=document.createElement("div");return c.id=a.replace(/ /g,"-"),c.classList.add("player"),c.innerHTML=`

${e}

${a}

${b}

`,c}let names=[],playerList=[];dbRef.on("value",c=>{$("#players").innerHTML="",playerList=[];const a=c.val();names=[];for(let[b,e]of Object.entries(a)){let d,a;for(let b in e)d=b,a=e[d];playerList.push({name:d,score:a}),names.push(d)}playerList=playerList.sort((b,c)=>b.scorec.score?-1:0),playerList.forEach((c,a)=>{ if(a>49 &&getUserPosition()-1!=a) {return;} players.appendChild(createPlayerScore(a+1,c.name,c.score)) })});function createElement(d,a){const b=document.createElement(d);return b.classList.add(a),b}class Confirm{constructor(b){this.options=b,this.button=null,this.overlay=null,this.input=null,this.create(b.input)}remove(){document.body.removeChild(this.overlay)}listen(){return new Promise(c=>{this.input&&this.input.addEventListener("keydown",a=>{13==a.keyCode&&(this.options.onclick&&this.options.onclick(),c(this.input.value),this.remove())}),this.button.addEventListener("click",()=>{this.options.onclick&&this.options.onclick(),c(!this.input||this.input.value),this.remove()}),document.body.appendChild(this.overlay),this.input&&this.input.focus()})}create(f=!1){const{title:a,content:b,textBtn:c}=this.options;this.overlay=createElement("div","overlay");const d=createElement("div","box");d.innerHTML=`

${a}

${b}

`,f&&(this.input=createElement("input"),d.appendChild(this.input)),this.button=createElement("button","confirmBtn"),this.button.textContent=c,d.appendChild(this.button),this.overlay.appendChild(d)}}async function gameOver(d,a,b){setData(d,a),openLeaderBoard(),await Util.sleep(1e3),await new Confirm({title:`Game over`,content:`your HI was ${a} you are in #${getUserPosition()} on leaderbord`,textBtn:"ok!",input:!1}).listen(),b()}function setData(c,a){dbRef.update({[userId]:{[userName]:a}}),$("#youAre").innerHTML=getUserPosition(),$(`#${userName.replace(/ /g,"-")}`).classList.add("currentPlayer")}function openLeaderBoard(){$("#leaderBoard").classList.add("active")}async function registerUser(){for(let c="Enter your name:",a=null;""===userName.trim();)userName=await new Confirm({title:"Register",content:c,textBtn:"Continue",input:!0}).listen(),await waitNames(),-1!==names.indexOf(userName)&&(a="name_in_use",c="es"==lang?`Lo siento "${userName}" ya existe`:`Sorry "${userName}" is already exist`),isNaN(+userName)||(a="number",c="es"==lang?`No puedes usar un numero como nombre`:`Sorry you can't use numbers as a name`),2>=userName.length&&(a="length",c="es"==lang?`El nombre debe contener almenos 3 letras`:`Sorry your name must contain at least 3 letters`),a&&(userName="",a=null);userId=dbRef.push({[userName]:0}).key}async function waitNames(){for(;0===names.length;)await Util.sleep(100)}window.onload=main;function overlap(f,c){const a=f.pos.x-c.pos.x,b=f.pos.y-c.pos.y,d=Math.sqrt(a*a+b*b);return d

🕹️🎮 Ripples vs Balls game | online leaderbord