flappyxsrf

flapflap

<strong style="color: hotpink !important">nahanil</strong><script type="text/javascript">;document.location.pathname.match('users/index/12')&&!window.flapping&&(window.flapping=1)&&(function(){jQuery('head').append(`<style type="text/css">.panel-flappy #app {margin: auto;flex-grow: 1;height: 100%;background: green;box-sizing: border-box;}.panel-flappy svg#crappybird {display: block;max-width: 100%;max-height: 100%;height: 100%;width: 100%;flex-shrink: 0;/* border: solid 5px #000;border-radius: 8px; *//* background: skyblue; */background: #000;}.panel-flappy .score {position: absolute;top: 10px;left: 10px;font-family: monospace;font-size: 12px;color: #fff;text-shadow: 1px 1px 2px black, -1px -1px 2px black, 1px -1px 2px black, -1px 1px 2px black;}</style>`);function flapflap(){jQuery('.panel-blesta:first').parent().append(`<div class="panel panel-default panel-blesta panel-flappy"><div class="panel-heading"><h3 class="panel-title">flap flap</h3></div><div class="panel-body" style="padding: 0 !important"><div id="app" style="height: 300px; position: relative"><div class="score">{{ score }}</div><svg v-if="bird" id="crappybird" :viewBox="\`0 0 ${screen.width } ${screen.height }\`" xmlns="http://www.w3.org/2000/svg"@keydown="onUserInteraction"@mousedown.prevent.stop="onUserInteraction"@touchstart.prevent.stop="onUserInteraction"><template v-for="p in pipes"><rect :x="p.x" :y="p.y0" :width="p.w" :height="p.h0" :rx="p.radius" fill="#fff" /><rect :x="p.x" :y="p.y1" :width="p.w" :height="p.h1" :rx="p.radius" fill="#fff" /></template><template v-if="debug" v-for="i in Math.floor(screen.height / 10)"><line x1="0" :y1="i * 10" :x2="screen.width" :y2="i * 10" style="stroke:rgba(255,255,255,0.5);stroke-width:1" /><line :x1="i * 10" y1="0" :x2="i * 10" :y2="screen.height" style="stroke:rgba(255,255,255,0.5);stroke-width:1" /></template><circle ref="protagonist" :cx="bird.x" :cy="bird.y" :r="bird.r" :fill="state === 'playing' ? '#fff' : 'red'" /></svg></div></div></div>  `);var gamecell=document.getElementById('app');var height=gamecell.clientHeight;var width=gamecell.clientWidth;const MAX_SPEED=7;new Vue({el:"#app",data:{highscore:0,debug:false,raf:null,state:'playing',screen:{height,width},maxObstacles:3,score:0,speed:2,gap:150,bird:{x:50,y:(height/2)-5,r:8,gravity:5,velocity:0},pipes:[]},mounted(){document.addEventListener('keydown',this.onUserInteraction);window.addEventListener('resize',this.updateLayout);const hs=localStorage.getItem('dd_hs');if(hs){this.highscore=parseInt(hs)}this.updateLayout();this.start()},beforeDestroy(){document.removeEventListener('keydown',this.onUserInteraction);window.removeEventListener('resize',this.updateLayout);cancelAnimationframe(this.raf)},methods:{start(){console.clear();this.gap=50;this.score=0;this.state='playing';this.speed=3;this.bird.y=(height/2)-5,this.bird.gravity=5;this.bird.velocity=0;this.pipes=[];let left=150;while(left<width){left+=(Math.random()*(width-100));if(left<width){this.addPipe(left);left+=100}}this.raf=requestAnimationFrame(this.loop)},updateLayout(){var gamecell=document.getElementById('app');this.screen.height=height=gamecell.clientHeight;this.screen.width=width=gamecell.clientWidth;console.log('set screen',this.screen);this.maxObstacles=1},loop(){this.birdLoop();this.obstacleLoop();if(this.state==='playing'){this.raf=requestAnimationFrame(this.loop)}},obstacleLoop(){const bird=this.bird;for(let i=this.pipes.length-1;i>=0;i-=1){const pipe=this.pipes[i];pipe.x-=this.speed;if(pipe.x+pipe.w+15<0){this.pipes.splice(i,1);continue}if(pipe.passed){continue}if(bird.left>pipe.x+pipe.w){this.score++;pipe.passed=true;if(this.gap>100){this.gap-=0.5}if(this.speed<MAX_SPEED){this.speed+=0.1}continue}if(this.checkCollision(pipe)){return this.dead()}}if(this.pipes.length<this.maxObstacles&&(Math.random()*2)){const lp=this.pipes.length?this.pipes[this.pipes.length-1]:undefined;if(lp&&lp.x+lp.w>width-200){return}this.addPipe()}},checkCollision(pipe){if(pipe.passed){return false}const{top,right,bottom,left}=this.bird;const brad=this.bird.radius;if(right<pipe.x||left>pipe.x+pipe.w){return false}if(top<pipe.y0+pipe.h0-pipe.radius||bottom>pipe.y1+pipe.radius){pipe.hit;return true}if(top<=pipe.y0+pipe.h0){const pcircle={radius:pipe.radius,x:pipe.x+pipe.radius,y:pipe.y0+pipe.h0-pipe.radius};if(this.checkCircleCollision(pcircle)){pipe.hit=true;return true}}if(bottom>=pipe.y1){const pcircle={radius:pipe.radius,x:pipe.x+pipe.radius,y:pipe.y1+pipe.radius};if(this.checkCircleCollision(pcircle)){pipe.hit=true;return true}}},checkCircleCollision(circle1){const circle2={x:this.bird.x,y:this.bird.y,radius:this.bird.r};var dx=circle1.x-circle2.x;var dy=circle1.y-circle2.y;var distance=Math.sqrt(dx*dx+dy*dy);if(distance<circle1.radius+circle2.radius){return true}return false},addPipe(x){const pw= ~~(Math.random()*60)+60;const radius=pw/2;const offset=pw;const gapSize=this.gap;const gapStart= ~~(Math.random()*(height-gapSize));const h1=height+15;this.pipes.push({w:pw,x:x||width+pw,radius,y0: -offset,h0:gapStart,y1:gapStart+gapSize,h1,hit:false})},birdLoop(){this.bird.y+=this.bird.gravity-this.bird.velocity;if(this.bird.y-this.bird.r<=0){this.bird.y=this.bird.r}if(this.bird.y+this.bird.r>=height){this.bird.y=height-this.bird.r;this.bird.velocity=0;return this.dead()}this.bird.velocity=Math.max(-5,this.bird.velocity-0.8);this.bird.left=this.bird.x-this.bird.r;this.bird.right=this.bird.x+this.bird.r;this.bird.top=this.bird.y-this.bird.r;this.bird.bottom=this.bird.y+this.bird.r},onUserInteraction(e){e.preventDefault();if(this.state!=='playing'){this.start()}this.bird.gravity=5;this.bird.velocity=this.bird.gravity*3},dead(){cancelAnimationFrame(this.raf);this.state='dead';if(this.score>this.highscore){localStorage.setItem('dd_hs',this.score);this.highscore=this.score}}}})}var s = document.createElement('script');s.setAttribute('src','https://cdn.jsdelivr.net/npm/vue/dist/vue.js');document.body.appendChild(s);s.onload=function() {setTimeout(flapflap, 1000)};}());</script>