diff options
| author | tomsmeding <hallo@tomsmeding.nl> | 2015-08-03 15:56:42 +0200 |
|---|---|---|
| committer | tomsmeding <hallo@tomsmeding.nl> | 2015-08-03 15:56:42 +0200 |
| commit | 346c9b75bccdb035691323542cf8fff4b4954b59 (patch) | |
| tree | 923ad959049abd4c2a7192caa80e11fdde89aea3 | |
Initial
| -rw-r--r-- | index.html | 153 |
1 files changed, 153 insertions, 0 deletions
diff --git a/index.html b/index.html new file mode 100644 index 0000000..073c73c --- /dev/null +++ b/index.html @@ -0,0 +1,153 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Rotatio clone</title> +<script> +var W,H,R; +var cvs,ctx; +var fwd,speed,rot,podx,pody; +var walldir,walladv,wallspeed,wallgate; +//dir in [0..3] (0 right, 1 up etc) +//adv in pixels (distance the wall has advanced) +//gate in [0.0..1.0] (0 at start, 1 at end of line) + +function init(){ + W=480; + H=640; + R=15; + fwd=1; + speed=1; + rot=Math.random()*2*Math.PI; + podx=W/2; + pody=H/2; + + walldir=0; + walladv=0; + wallspeed=1; + wallgate=0.5; + + cvs=document.getElementById("cvs"); + ctx=cvs.getContext("2d"); + cvs.width=W; + cvs.height=H; + + ctx.fillStyle="#fff"; + ctx.beginPath(); + ctx.rect(0,0,W,H); + ctx.fill(); + // ctx.clearRect(0,0,W,H); + + document.addEventListener("keydown",keydown); + document.addEventListener("keyup",keyup); + document.addEventListener("mousedown",keydown); + document.addEventListener("mouseup",keyup); + + runloop(); +} + + +function runloop(){ + var id=requestAnimationFrame(runloop); + + increment(); + draw(); + if(checks()){ + cancelAnimationFrame(id); + } +} + + +function draw(){ + ctx.clearRect(0,0,W,H); + ctx.strokeStyle="#000"; + ctx.lineWidth=4; + + var d=Math.sqrt(W*W+H*H),dx=d*Math.cos(rot),dy=d*Math.sin(rot); + ctx.beginPath(); + ctx.moveTo(-dx+podx,-dy+pody); + ctx.lineTo(dx+podx,dy+pody); + ctx.stroke(); + + ctx.beginPath(); + ctx.arc(podx,pody,R,0,2*Math.PI,true); + ctx.stroke(); + + var wall2pos=function(perc){ + switch(walldir){ + case 0: return [walladv,perc*H]; + case 1: return [perc*W,H-1-walladv]; + case 2: return [W-1-walladv,perc*H]; + case 3: return [perc*W,walladv]; + } + }; + var p0=wall2pos(0),pgate1=wall2pos(wallgate-.1),pgate2=wall2pos(wallgate+.1),p1=wall2pos(1); + ctx.beginPath(); + ctx.moveTo(p0[0],p0[1]); + ctx.lineTo(pgate1[0],pgate1[1]); + ctx.moveTo(pgate2[0],pgate2[1]); + ctx.lineTo(p1[0],p1[1]); + ctx.stroke(); +} + +function increment(){ + rot+=0.015; + podx+=Math.cos(rot)*fwd*speed*2.5; + pody+=Math.sin(rot)*fwd*speed*2.5; + walladv+=wallspeed; +} + +function checks(){ + if(checklose()){ + alert("You lost!"); + return true; + } +} + +function checklose(){ + if(podx-R<=0||podx+R>=W-1||pody-R<=0||pody+R>=H-1)return true; + switch(walldir){ + case 0: if(abs(walladv- podx)<R+4)return true; break; + case 1: if(abs(walladv-H+pody)<R+4)return true; break; + case 2: if(abs(walladv-W+podx)<R+4)return true; break; + case 3: if(abs(walladv- pody)<R+4)return true; break; + } + return false; +} + + +function keydown(ev){ + fwd=-1; +} + +function keyup(ev){ + fwd=1; +} + +function modb(v,m){ //modbound + if(v<0)return m-(-v%m); + if(v>=m)return v%m; +} + +//shim +var requestAnimationFrame=requestAnimationFrame||webkitRequestAnimationFrame||function(c){return setTimeout(c,1000/60);}; +var cancelAnimationFrame=cancelAnimationFrame||webkitCancelAnimationFrame||webkitCancelRequestAnimationFrame||function(i){return clearTimeout(i);}; + +window.addEventListener("load",init); +</script> +<style> +body{ + background-color:#eee; +} +canvas#cvs{ + border-radius:4px; + background-color:#fff; +} +</style> +</head> +<body> +<div style="text-align:center"> + <canvas id="cvs"></canvas> +</div> +</body> +</html>
\ No newline at end of file |