html躲避游戏代码,HTML5躲避小游戏

body, html{background-color: #222222;}canvas{border: 6px #333333 solid;background-color: #111111;}.ui{font-family: Arial, Helvetica, sans-serif;font-size: 10px;color: #999999;text-align: left;padding: 8px;background-color: rgba(0,0,0,0.5);position: absolute;z-index: 2;}#message{padding: 16px;}#status{width: 884px;height: 15px;padding: 8px;display: none;}#status span{color: #bbbbbb;font-weight: bold;margin-right: 5px;}#title{margin-bottom: 20px;color: #eeeeee;}.ui ul{margin: 10px 0 10px 0;padding: 8px 0 8px 10px;}.ui ul li{list-style: none;}.ui a{outline: none;font-family: Arial, Helvetica, sans-serif;font-size: 38px;text-decoration: none;color: #bbbbbb;padding: 2px;display: block}.ui a: hover{color: #ffffff;background-color: #000000;}

Sinuous - Instructions

• 1. Avoid red dots.
• 2. Touch green dots for invulnerability.
• 3. Use invulnerability to destroy red dots.
• 4. Score extra points by moving around a lot.
• 5. Stay alive.

Start

SinuousWorld=new function(){var D=navigator.userAgent.toLowerCase();var x=(D.indexOf("android")!=-1)||(D.indexOf("iphone")!=-1)||(D.indexOf("ipad")!=-1);var d=x?window.innerWidth:900;var B=x?window.innerHeight:550;var h;var f;var z;var u;var K;var b;var w=[];var y=[];var H=[];var A;var t=(window.innerWidth-d);var r=(window.innerHeight-B);var J=false;var k=false;var C=0;var m=0;var s={x:-1.3,y:1};var E=1;this.init=function(){h=document.getElementById("world");z=document.getElementById("status");u=document.getElementById("message");K=document.getElementById("title");b=document.getElementById("startButton");if(h&&h.getContext){f=h.getContext("2d");var L=function(N,M,O){document.addEventListener(N,M,O)};L("mousemove",c,false);L("mousedown",l,false);L("mouseup",I,false);h.addEventListener("touchstart",i,false);L("touchmove",q,false);L("touchend",v,false);window.addEventListener("resize",a,false);b.addEventListener("click",j,false);A=new Player();a();if(x){h.style.border="none";s.x*=2;s.y*=2;setInterval(G,1000/20)}else{setInterval(G,1000/60)}}};function j(L){if(k==false){k=true;w=[];y=[];C=0;E=1;A.trail=[];A.p.x=t;A.p.y=r;A.boost=0;u.style.display="none";z.style.display="block";m=new Date().getTime()}}function o(){k=false;u.style.display="block";K.innerHTML="Game Over! ("+Math.round(C)+" points)"}function c(L){t=L.clientX-(window.innerWidth-d)*0.5-10;r=L.clientY-(window.innerHeight-B)*0.5-10}function l(L){J=true}function I(L){J=false}function i(L){if(L.touches.length==1){L.preventDefault();t=L.touches[0].pageX-(window.innerWidth-d)*0.5;r=L.touches[0].pageY-(window.innerHeight-B)*0.5;J=true}}function q(L){if(L.touches.length==1){L.preventDefault();t=L.touches[0].pageX-(window.innerWidth-d)*0.5-20;r=L.touches[0].pageY-(window.innerHeight-B)*0.5-20}}function v(L){J=false}function a(){d=x?window.innerWidth:900;B=x?window.innerHeight:550;h.width=d;h.height=B;var M=(window.innerWidth-d)*0.5;var L=(window.innerHeight-B)*0.5;h.style.position="absolute";h.style.left=M+"px";h.style.top=L+"px";if(x){u.style.left="0px";u.style.top="0px";z.style.left="0px";z.style.top="0px"}else{u.style.left=M+6+"px";u.style.top=L+200+"px";z.style.left=M+6+"px";z.style.top=L+6+"px"}}function g(O,M,L){var N=10+(Math.random()*15);while(--N>=0){n=new Particle();n.p.x=O.x+(Math.sin(N)*M);n.p.y=O.y+(Math.cos(N)*M);n.velocity={x:-4+Math.random()*8,y:-4+Math.random()*8};n.alpha=1;H.push(n)}}function G(){f.clearRect(0,0,h.width,h.height);var P={x:s.x*E,y:s.y*E};var O,M,N,L;if(k){E+=0.0008;pp=A.clonePosition();A.p.x+=(t-A.p.x)*0.13;A.p.y+=(r-A.p.y)*0.13;C+=0.4*E;C+=A.distanceTo(pp)*0.1;A.boost=Math.max(A.boost-1,0);if(A.boost>0&&(A.boost>100||A.boost%3!=0)){f.beginPath();f.fillStyle="#167a66";f.strokeStyle="#00ffcc";f.arc(A.p.x,A.p.y,A.s*2,0,Math.PI*2,true);f.fill();f.stroke()}A.trail.push(new Point(A.p.x,A.p.y));f.beginPath();f.strokeStyle="#648d93";f.lineWidth=2;for(O=0,N=A.trail.length;O60){A.trail.shift()}f.beginPath();f.fillStyle="#8ff1ff";f.arc(A.p.x,A.p.y,A.s/2,0,Math.PI*2,true);f.fill()}if(k&&(A.p.x<0||A.p.x>d||A.p.y<0||A.p.y>B)){g(A.p,10);o()}for(O=0;O0&&p.distanceTo(A.p)B){w.splice(O,1);O--}}for(O=0;OB||A.boost!=0){y.splice(O,1);O--}}if(w.length<35*E){w.push(F(new Enemy()))}if(y.length<1&&Math.random()>0.997&&A.boost==0){y.push(F(new Boost()))}for(O=0;O"+Math.round(C)+"";scoreText+=" Time: "+Math.round(((new Date().getTime()-m)/1000)*100)/100+"s";z.innerHTML=scoreText}}function F(L){if(Math.random()>0.5){L.p.x=Math.random()*d;L.p.y=-20}else{L.p.x=d+20;L.p.y=(-B*0.2)+(Math.random()*B*1.2)}return L}};function Point(a,b){this.p={x:a,y:b}}Point.prototype.distanceTo=function(c){var b=c.x-this.p.x;var a=c.y-this.p.y;return Math.sqrt(b*b+a*a)};Point.prototype.clonePosition=function(){return{x:this.p.x,y:this.p.y}};function Player(){this.p={x:0,y:0};this.trail=[];this.s=8;this.boost=0}Player.prototype=new Point();function Enemy(){this.p={x:0,y:0};this.s=6+(Math.random()*4);this.f=1+(Math.random()*0.4)}Enemy.prototype=new Point();function Boost(){this.p={x:0,y:0};this.s=10+(Math.random()*8);this.f=1+(Math.random()*0.4)}Boost.prototype=new Point();function Particle(){this.p={x:0,y:0};this.f=1+(Math.random()*0.4);this.color="#ff0000"}Particle.prototype=new Point();SinuousWorld.init();