xtonousou.github.io/404.html at master · xtonousou/xtonousou.github.io · GitHub

1
<head> <style type="text/css"> *{border: 0; box-sizing: border-box; margin: 0; padding: 0;}:root{font-size: calc(16px + (20 - 16)*(100vw - 320px)/(1024 - 320));}body{background: #f1f1f1; color: #242424; font: 1em "Hind", Arial, sans-serif; line-height: 1.5;}a{color: #2762f3; text-decoration: none;}a:hover{text-decoration: underline;}a:active{color: #0c48db;}a:visited{color: #5785f6;}h1{font: 2em "Ubuntu", Arial, sans-serif; line-height: 1.5; margin-bottom: .75em;}p, ul{margin-bottom: 1.5em;}ul{margin-left: 1.5em;}main, canvas{display: block;}canvas{display: block; margin: 0 auto 1.5em auto; width: 100%; height: auto; -webkit-tap-highlight-color: transparent;}.wrap{margin: auto; padding: 1.5em; max-width: 37.5em;}@media (prefers-color-scheme: dark){body{background: #242424; color: #f1f1f1;}a{color: #5785f6;}a:active{color: #2762f3;}a:visited{color: #87a9f9;}}</style> <script>window.addEventListener("DOMContentLoaded",game); function game(){var canvas=document.querySelector("canvas"), c=canvas.getContext("2d"), W=canvas.width, H=canvas.height, S=2, assets=[ "/img/nowhere.png", "/img/tumbleweed.png"], sprites=[], score=0, world={friction: 0.1, gravity: 0.1}, tumbleweed={inPlay: false, x: -160, y: 200, r: 32, rotation: 0, xVel: 10, yVel: 0, mass: 2.5, restitution: 0.3}, loadSprite=url=>{return new Promise((resolve,reject)=>{let sprite=new Image(); sprite.src=url; sprite.onload=()=>{resolve(sprite);}; sprite.onerror=()=>{reject(url);};});}, spritePromises=assets.map(loadSprite), applyForce=e=>{let ex=e.clientX - canvas.offsetLeft, ey=e.clientY - (canvas.offsetTop - window.pageYOffset); ex=ex / canvas.offsetWidth * W; ey=ey / canvas.offsetHeight * H; let insideX=Math.abs(ex - tumbleweed.x) <=tumbleweed.r, insideY=Math.abs(ey - tumbleweed.y) <=tumbleweed.r; if (insideX && insideY){let xForce=tumbleweed.x - ex, yForce=tumbleweed.y - ey, xAccel=xForce / tumbleweed.mass, yAccel=yForce / tumbleweed.mass; tumbleweed.xVel +=xAccel; tumbleweed.yVel +=yAccel; ++score; if (!tumbleweed.inPlay) tumbleweed.inPlay=true;}}, update=()=>{c.clearRect(0,0,W,H); c.drawImage(sprites[0],0,0,W,H); tumbleweed.x +=tumbleweed.xVel; if (tumbleweed.xVel > 0){tumbleweed.xVel -=world.friction; if (tumbleweed.xVel < 0) tumbleweed.xVel=0;}else if (tumbleweed.xVel < 0){tumbleweed.xVel +=world.friction; if (tumbleweed.xVel > 0) tumbleweed.xVel=0;}let hitLeftBound=tumbleweed.x <=tumbleweed.r && tumbleweed.inPlay, hitRightBound=tumbleweed.x >=W - tumbleweed.r; if (hitLeftBound) tumbleweed.x=tumbleweed.r; else if (hitRightBound) tumbleweed.x=W - tumbleweed.r; if (hitLeftBound || hitRightBound) tumbleweed.xVel *=-tumbleweed.restitution; tumbleweed.y +=tumbleweed.yVel; tumbleweed.yVel +=world.gravity; let hitTopBound=tumbleweed.y <=tumbleweed.r, hitBottomBound=tumbleweed.y >=H - tumbleweed.r; if (hitTopBound){tumbleweed.y=tumbleweed.r;}else if (hitBottomBound){tumbleweed.y=H - tumbleweed.r; score=0;}if (hitTopBound || hitBottomBound) tumbleweed.yVel *=-tumbleweed.restitution; tumbleweed.rotation +=tumbleweed.xVel; if (tumbleweed.rotation >=360) tumbleweed.rotation -=360; else if (tumbleweed.rotation < 0) tumbleweed.rotation +=360; c.save(); c.translate(tumbleweed.x,tumbleweed.y); c.rotate(tumbleweed.rotation * Math.PI/180); c.drawImage( sprites[1], -tumbleweed.r, -tumbleweed.r, tumbleweed.r * 2, tumbleweed.r * 2 ); c.translate(-tumbleweed.x,-tumbleweed.y); c.restore(); if (score > 0){c.fillStyle="#7f7f7f"; c.font="48px Hind, sans-serif"; c.textAlign="center"; c.fillText(score,W/2,48);}}, render=()=>{update(); requestAnimationFrame(render);}; canvas.width=W * S; canvas.height=H * S; c.scale(S,S); Promise.all(spritePromises).then(loaded=>{for (let sprite of loaded) sprites.push(sprite); render(); canvas.addEventListener("click",applyForce);}).catch(urls=>{console.log(urls+" couldn’t be loaded");});}</script></head><main> <div class="wrap"> <h1>Uh-Oh! Not Found</h1> <canvas width="560" height="312"></canvas> <p>You’re in the middle of nowhere. The page you requested either was moved or doesn’t exist.</p></div></main>