Game Inside of a QR Code

Note: Unfortunately, QR code readers don't really like data URLs, so you will probably have to copy the text you extract from the URL into your browser. Just paste it in the bar at the top like any other link.

Fun little (*checks time*) 6 hour coding adventure. Inspired by this MattKC video, of course. But instead of writing assembly to try to squeeze as much data into the images as is possible, I just decided to do it in Javascript, HTML, and CSS. Why reinvent the wheel when every cell phone has a fully-functional web browser? That being said, this game is 100% offline and does not need an internet connection. It is, as mentioned, completely stored within the QR code. It kind of doesn't perform well on mobile, ironically enough, but it does work. You just need to lead your clicks a little bit. Goal is to get 30 points in the shortest time possible.

If you want to share it, don't link this page--just post the QR code somewhere! I might make stickers and stick them places. That was kind of an inciting idea for doing this. Fun little real-world Easter eggs for commuters. Could be cool idk. If the data URL worked better, I would.

QR code generated using this website.

In case of any difficulties, here's the full code:

data:text/html,<style type="text/css">*{color:HoneyDew;font-size:120%}body{background:MediumSeaGreen}button{width:15%;height:10%;background-color:DarkSeaGreen;border:5px solid MediumAquaMarine;border-radius:10px}.foot{position:fixed;text-align:center;bottom:0px;width:100%}</style><button id="move" onclick="bVel()">Click me!</button><script>const button=document.getElementById("move"); button.style.position="absolute"; let W=window.innerWidth; let H=window.innerHeight; let points=0; let startT=performance.now(); let x=0.425*W; let y=0.45*H; let vx=0; let vy=0; window.addEventListener("resize",(event)=>{W=window.innerWidth; H=window.innerHeight}); let bVel=()=>{if (points<30) {x=0.70*W*Math.random()+0.15*W; y=0.8*H*Math.random()+0.1*H; vx=5*Math.sign(W/2-x)*Math.random(); vy=5*Math.sign(H/2-y)*Math.random(); points++; button.textContent=points+' points'} else if (points==30) {button.textContent='You got 30 points in '+Math.floor((performance.now()-startT)/100)/10+' seconds!'; x=0.425*W; y=0.45*H; vx=0; vy=0; points=31}}; let wrapped=(z,a,b)=>{if (z<a) return b; if (z>b) return a; return z}; let loop=()=>{x=x+vx; y=y+vy; x=wrapped(x,0,0.85*W); y=wrapped(y,0,0.9*H); button.style.top=y+'px'; button.style.left=x+'px'; window.requestAnimationFrame(loop)}; loop()</script><p class="foot">Created by Real_Human_1000</p></body>

Fun fact I think this is the first game I've posted on here that has a mostly green color scheme.