onerror=function(){alert("Works only on modern browsers.\nIf it gives error or does not display properly then see this from an updated browser. If you get an error on the Android version of this app then try to update your Android System Webview.")} alert("Tap anywhere to drop a block.\nStack the blocks one over another.\nLet's see how high can you build.\nComment your score.\n\nHope you like it.") var score=0; var requested=false var floors=0 //var audioDone=false; var allowMusic=confirm("Play Music?") var canvas=document.createElement("canvas") var canvas2=document.createElement("canvas") var final=document.createElement("div") var scoreBoard=document.createElement("div") canvas.start=function(){ scoreBoard.innerHTML="Score: 0
Floors: 0
Lives: ∞" scoreBoard.id="score" document.body.innerHTML="" canvas.height=innerHeight; canvas.width=innerWidth; canvas.id="main" final.appendChild(canvas); window.ctx=canvas.getContext("2d"); canvas2.height=100 canvas2.width=innerWidth canvas2.id="top" final.appendChild(canvas2) window.ctx2=canvas2.getContext("2d") final.id="final" final.appendChild(scoreBoard ) document.body.appendChild(final) window.coin=new sound("http://www.noiseforfun.com/audio/NFF-woody-02.mp3",0.8,true) window.bgMusic=new sound("https://ia800504.us.archive.org/15/items/SuperMarioBros.ThemeMusic/SuperMarioBros.mp3",0.5,false) window.laser=new sound("http://www.noiseforfun.com/audio/NFF-laser-zing.mp3",1.0,true) // bgMusic.sound.volume=0.0 //bgMusic.onload=function(){ if(allowMusic){ window.onclick=function(){bgMusic.start() coin.start() coin.stop() laser.start() laser.stop() bgMusic.play() window.onclick=function(){} // laser.play() } bgMusic.sound.onended=function(){ bgMusic.start() bgMusic.play() } coin.sound.onended=function(){ coin.start() coin.stop() } laser.sound.onended=function(){ laser.start() laser.stop() } } // } // alert(Object.getOwnPropertyNames(sound)) // var ctxs=[ctx,ctx2] // window.tryi=document.getElementById("try") } function sound(src,vol,restart) { this.sound = document.createElement("audio"); this.sound.src = src; this.sound.setAttribute("preload", "auto"); this.sound.setAttribute("controls", "none"); this.sound.style.display = "none"; document.body.appendChild(this.sound); this.start=function(){ this.sound.volume=vol this.sound.play() } this.play = function(){ this.sound.volume=vol if(restart){ this.sound.currentTime=0 } } this.stop = function(){ this.sound.volume=0.0 } } function request() { var d=final if (d.requestFullscreen) { d.requestFullscreen() } else if (d.webkitRequestFullscreen) { d.webkitRequestFullscreen() } else if (d.mozRequestFullScreen) { d.mozRequestFullScreen() } else if (d.msRequestFullscreen) { d.msRequestFullscreen() } } /*function createGradient(){ window.gradient = window.ctx.createLinearGradient(0, -tr, 0, canvas.height+tr); if(tr>400){ gradient.addColorStop("0.01","purple")} if(tr>5000){ gradient.addColorStop("0.001","black") } gradient.addColorStop("0.1","darkblue") gradient.addColorStop("1", "skyblue"); //gradient.addColorStop("0.5", "purple"); // gradient.addColorStop("1", "#ff6633"); }*/ var noOfTowers=0 var towers=[] var allComponents=[] var tower=new Image() tower.src="data:image/jpeg;base64,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" function component(context,x,y,width,height,color,speedY,accY,type,speedX,accX,callbackFunc){ allComponents.push(this) //this.canvas=canvas; this.x=x; this.y=y; this.width=width; this.height=height; this.color=color; this.speedY=speedY; this.speedX=speedX this.type=type; this.accY=accY; this.accX=accX this.trDone=false this.ctx=context this.isCleared=false if(this.color==tower&&this.ctx==ctx){ noOfTowers++; this.isTower=true; towers.push(this) this.dropped=false this.gone=false this.accY=window.globAcc this.no=noOfTowers this.fix=false } this.draw=function(){ if(this.type=="image"){ this.ctx.drawImage(this.color,this.x,this.y,this.width,this.height); }else{ this.ctx.fillStyle=this.color; this.ctx.fillRect(this.x,this.y,this.width,this.height); } }; /*this.clear=function(){ this.ctx.clearRect(this.x,this.y,this.width,this.height);}*/ this.update=function(){ // if(!undefined) { //this.clear() // if(this!==window.y){window.y.update()} if(this.isTower){ var max=towers.filter(x=>!x.gone&&x.dropped).map(x=>x.no).filter(x=>x!=this.no) max=max.length?max.reduce((x,y)=>x>y?x:y):Infinity; this.prev=towers.filter(x=>x.no==max)[0]||{dropped:true} if(this.dropped&&!this.gone&&!this.fix&&!this.prev.gone&&this.prev.dropped){ //console.log([this.no,this.y,this.prev.no,this.prev.y]) if(this.no===1&&this.y+this.height>canvas.height){ this.y= canvas.height-this.height // this.fix=true } if(this.no!==1&&this.prev.y=canvas.height&&this.isTower){ if(!this.dropped){ window.floors++ scoreBoard.innerHTML=`Score: ${score}
Floors: ${floors}
Lives: ∞` if(allowMusic){ coin.play() } this.dropped=true } } if(this.y<=canvas.height-tr&&(!this.gone||(this.gone&&this.y<=canvas.height-tr))||!this.isTower){ if((!this.dropped)||(this.dropped&&this.gone)){ this.speedY+=this.accY; this.speedX+=this.accX; this.x+=this.speedX; this.y+=this.speedY ; this.x=Math.floor(this.x) this.y=Math.floor(this.y) if(this.isTower&&this.y+this.height>=this.prev.y){ this.dropped=true if(Math.abs(this.x-this.prev.x)>this.width){ this.gone=true if(!this.toldGone1){ this.no=-1 noOfTowers-- this.toldGone1=true } }else{ window.score+=Math.floor(((this.width-Math.abs(this.x-this.prev.x))*window.globAcc/4))*20 window.floors++ scoreBoard.innerHTML=`Score: ${score}
Floors: ${floors}
Lives: ∞` if(allowMusic ){ coin.play() } } if(this.isTower&&this.dropped&&!this.gone&&!this.trDone&&this.no>=canvas.height/this.height-3){ window.mostTillNow=this.y translate() this.trDone=true } } } }else{ if(this.isTower){ if(!this.dropped){ } this.dropped=true; if(this.no!==1&&this.y>=canvas.height-tr&&this.toldGone1){ this.gone=true this.no=-1 if(!this.toldGone2){ // alert("Gone"/*+this.y+" "+(canvas.height-tr)*/) window.score-=500*Math.ceil(window.globAcc/2) scoreBoard.innerHTML=`Score: ${score}
Floors: ${floors}
Lives: ∞` if(allowMusic ){ laser.play() } this.toldGone2=true //this.clear() } } }} if(callbackFunc){callbackFunc.call(this)} if(!this.isCleared){ this.draw() } } } window.tr=0 window.currTr=0 window.trTBD=0 window.interval=null function translate(n=300){ if(!window.currTr&&!window.interval){ window.trTBD=n; window.interval=setInterval(_translate,1)}else{ window.trTBD+=n } //if(window.tr>-window.mostTillNow){ // clearInterval(window.interval) // window.trTBD-=-(-window.mostTillNow-window.tr)-200 //} // console.log(trTBD) } /*function what(a,b){ if(a>b){return -1} if(a==b){return 0} if(a"+[mostTillNow,tr]+"

") if(window.currTr>=window.trTBD||window.tr>-(window.mostTillNow-300)){ // console.log(o) clearInterval(window.interval) window.interval=null //console.log([window.currTr,window.interval,mostTillNow,tr,o.no]) // console.log(o) window.currTr=0 window.trTBD=0 return } tr+=Math.floor(10*window.globAcc) window.currTr+=Math.floor(10*window.globAcc) // document.getElementById("main").style.backgroundPosition=`top ${tr+1.25*innerHeight}px right 0` ctx.translate(0, Math.floor(10*window.globAcc)); // y.y=-tr // y.height+=currTr //createGradient() //ctx.clearRect(0,-tr,canvas.width,canvas.height+tr) //globUpdate() // y.color=gradient // if(currTr%50==0){ //console.log([window.trTBD,window.currTr,what(window.currTr,window.trTBD)])} } function moveDropper(){ var n=canvas2.width<=400?canvas2.width:400 var m=canvas.width<=400?0:canvas2.width/2-200; //if(!this.isCleared){ if(this.x>=n+m-this.width){ this.accX=-0.2-globAcc/2 this.speedX=this.speedX>0?0:this.speedX // console.log("1") // console.log(canvas2.width-this.width+" "+this.x) } if(this.x<=m){ this.accX=0.2+globAcc/2 this.speedX=this.speedX<0?0:this.speedX // console.log(this.x) } /*}else{ this.x=m this.speedX=0 this.accX=0 }*/ if(window.current){ this.isCleared=!window.current.dropped } } function globUpdate(){ ctx.clearRect(0,-tr,canvas.width,canvas.height+tr) ctx2.clearRect(0,0,canvas2.width,canvas2.height) allComponents.forEach(x=>x.update()) } window.globAcc=0.5 onload=function(){ canvas.start(); //createGradient() //window.y=new component(ctx,0,0,canvas.width,canvas.height,gradient,0,0,0,0,0,0,0); window.dropper= new component(ctx2,(canvas2.width-75)/2,0,75,100,tower,0,0,"image",0,0.2+globAcc/4,moveDropper); //var x=new component(40,200,75,100,tower,0,0.01,"image",0,0,0,0,0); //var z=new component(10,10,75,100,tower,0,0.01,"image",0,0,0,0,0); //moveDropper() document.addEventListener("click",function(event){ if(!window.requested){ request() } if(!dropper.isCleared){ window.current= new component(ctx,dropper.x,-tr,75,100,tower,0,window.globAcc,"image",0,0,0,0,0); if(window.globAcc<=4){ window.globAcc+=0.02 } }}) setInterval(function(){globUpdate();},1);}

Tower Bloxx Recreation [GAME]