Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
css
body { margin:0; padding:0; background:#000; } canvas { display:block; margin:0 auto; background:#f8982b; }
JavaScript
if ( !window.requestAnimationFrame ) { window.requestAnimationFrame = ( function() { return window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element ) { window.setTimeout( callback, 1000 / 60 ); }; } )(); } // stats.js r6 - https://github.com/mrdoob/stats.js var Stats=function(){function s(a,g,d){var f,c,e;for(c=0;c<30;c++)for(f=0;f<73;f++)e=(f+c*74)*4,a[e]=a[e+4],a[e+1]=a[e+5],a[e+2]=a[e+6];for(c=0;c<30;c++)e=(73+c*74)*4,c
FPS';k.appendChild(d);a=document.createElement("canvas");a.width=74;a.height=30;a.style.display="block";a.style.marginLeft="3px";k.appendChild(a); m=a.getContext("2d");m.fillStyle="rgb("+b.fps.bg.r+","+b.fps.bg.g+","+b.fps.bg.b+")";m.fillRect(0,0,a.width,a.height);y=m.getImageData(0,0,a.width,a.height);f=document.createElement("div");f.style.backgroundColor="rgb("+Math.floor(b.ms.bg.r/2)+","+Math.floor(b.ms.bg.g/2)+","+Math.floor(b.ms.bg.b/2)+")";f.style.padding="2px 0px 3px 0px";f.style.display="none";g.appendChild(f);c=document.createElement("div");c.style.fontFamily="Helvetica, Arial, sans-serif";c.style.textAlign="left";c.style.fontSize= "9px";c.style.color="rgb("+b.ms.fg.r+","+b.ms.fg.g+","+b.ms.fg.b+")";c.style.margin="0px 0px 1px 3px";c.innerHTML='
MS
';f.appendChild(c);a=document.createElement("canvas");a.width=74;a.height=30;a.style.display="block";a.style.marginLeft="3px";f.appendChild(a);o=a.getContext("2d");o.fillStyle="rgb("+b.ms.bg.r+","+b.ms.bg.g+","+b.ms.bg.b+")";o.fillRect(0,0,a.width,a.height);B=o.getImageData(0,0,a.width,a.height);try{performance&&performance.memory&&performance.memory.totalJSHeapSize&& (t=3)}catch(G){}h=document.createElement("div");h.style.backgroundColor="rgb("+Math.floor(b.mb.bg.r/2)+","+Math.floor(b.mb.bg.g/2)+","+Math.floor(b.mb.bg.b/2)+")";h.style.padding="2px 0px 3px 0px";h.style.display="none";g.appendChild(h);i=document.createElement("div");i.style.fontFamily="Helvetica, Arial, sans-serif";i.style.textAlign="left";i.style.fontSize="9px";i.style.color="rgb("+b.mb.fg.r+","+b.mb.fg.g+","+b.mb.fg.b+")";i.style.margin="0px 0px 1px 3px";i.innerHTML='
MB
'; h.appendChild(i);a=document.createElement("canvas");a.width=74;a.height=30;a.style.display="block";a.style.marginLeft="3px";h.appendChild(a);q=a.getContext("2d");q.fillStyle="#301010";q.fillRect(0,0,a.width,a.height);E=q.getImageData(0,0,a.width,a.height);return{domElement:g,update:function(){u++;j=(new Date).getTime();n=j-F;z=Math.min(z,n);A=Math.max(A,n);s(B.data,Math.min(30,30-n/200*30),"ms");c.innerHTML='
'+n+" MS
("+z+"-"+A+")";o.putImageData(B,0,0);F=j;if(j> v+1E3){l=Math.round(u*1E3/(j-v));w=Math.min(w,l);x=Math.max(x,l);s(y.data,Math.min(30,30-l/100*30),"fps");d.innerHTML='
'+l+" FPS
("+w+"-"+x+")";m.putImageData(y,0,0);if(t==3)p=performance.memory.usedJSHeapSize*9.54E-7,C=Math.min(C,p),D=Math.max(D,p),s(E.data,Math.min(30,30-p/2),"mb"),i.innerHTML='
'+Math.round(p)+" MB
("+Math.round(C)+"-"+Math.round(D)+")",q.putImageData(E,0,0);v=j;u=0}}}}; //Insane - Tech Demo (function( Insane, $, undefined ) { //Public Vars Insane.WIDTH = 320; Insane.HEIGHT = 480; Insane.scale = 1, Insane.offset = {top: 0, left: 0}, Insane.RATIO = null, Insane.currentWidth = null, Insane.currentHeight = null, Insane.canvas = null, Insane.ctx = null, Insane.ua = null, Insane.android = null, Insane.ios = null, Insane.startTime = Date.now(), Insane.dtime, Insane.stats, //FPS stats Insane.rychlost = 80, Insane.hvezdy = [], Insane.planety = [], Insane.boostery = [], Insane.slowery = [], Insane.player //FPS init function fpsInit() { stCon = document.createElement( 'div' ); document.body.appendChild( stCon ); Insane.stats = new Stats(); Insane.stats.domElement.style.position = 'absolute'; Insane.stats.domElement.style.top = '0px'; stCon.appendChild(Insane.stats.domElement); } //Init funkce Insane.init = function() { Insane.RATIO = Insane.WIDTH / Insane.HEIGHT; Insane.currentWidth = Insane.WIDTH; Insane.currentHeight = Insane.HEIGHT; Insane.canvas = document.getElementsByTagName('canvas')[0]; Insane.canvas.width = Insane.WIDTH; Insane.canvas.height = Insane.HEIGHT; Insane.ctx = Insane.canvas.getContext('2d'); Insane.ua = navigator.userAgent.toLowerCase(); Insane.android = Insane.ua.indexOf('android') > -1 ? true : false; Insane.ios = ( Insane.ua.indexOf('iphone') > -1 || Insane.ua.indexOf('ipad') > -1 ) ? true : false; // Controls window.addEventListener('click', function(e) { e.preventDefault(); //Insane.player1.x = e.clientX - Insane.offset.left / Insane.scale; //console.log(Insane.player1.x); }, false); // listen for touches window.addEventListener('touchstart', function(e) { e.preventDefault(); Insane.player1.x = (event.touches[0].pageX - Insane.offset.left) / Insane.scale; }, false); window.addEventListener('touchmove', function(e) { e.preventDefault(); Insane.player1.x = (event.touches[0].pageX - Insane.offset.left) / Insane.scale; }, false); window.addEventListener('touchend', function(e) { e.preventDefault(); Insane.player1.x = (event.touches[0].pageX - Insane.offset.left) / Insane.scale; }, false); window.addEventListener('keydown', function(e) { if(e.keyCode == "37") { Insane.player1.x -= 1*Insane.rychlost/40; } if(e.keyCode == "39") { Insane.player1.x += 1*Insane.rychlost/40; } }, false); window.addEventListener('mousemove', function(e) { e.preventDefault(); Insane.player1.x = (e.clientX - Insane.offset.left) / Insane.scale; }, false); window.addEventListener('mousedown', function(e) { e.preventDefault(); //Insane.player1.x = e.clientX - Insane.offset.left; }, false); // Insane.resize(); fpsInit(); Insane.player1 = new Insane.Player(); Insane.player1.reset(); Insane.loop(); } //Resize funkce Insane.resize = function() { Insane.currentHeight = window.innerHeight; Insane.currentWidth = Insane.currentHeight * Insane.RATIO; if (Insane.android || Insane.ios) { document.body.style.height = (window.innerHeight + 50) + 'px'; } Insane.canvas.style.width = Insane.currentWidth + 'px'; Insane.canvas.style.height = Insane.currentHeight + 'px'; Insane.scale = Insane.currentWidth / Insane.WIDTH; Insane.offset.top = Insane.canvas.offsetTop; Insane.offset.left = Insane.canvas.offsetLeft; window.setTimeout(function() { window.scrollTo(0,1); }, 1); } //Main Loop Insane.loop = function() { requestAnimationFrame(Insane.loop); Insane.stats.update(); Insane.update(); Insane.render(); } //Update Insane.update = function() { Insane.dtime = Date.now() - Insane.startTime; // Hvezdy random add if(Math.random()<0.3){ Insane.hvezdy.push(new Insane.Hvezda()); } // Hvezdy rychlost + remove for (i = 0; i < Insane.hvezdy.length; i += 1) { //rychlost Insane.hvezdy[i].y += Insane.rychlost/60; //remove if(Insane.hvezdy[i].y > 480) { Insane.hvezdy.splice(i, 1); } } // Planety random add if(Math.random()<0.01){ Insane.planety.push(new Insane.Planeta()); } // Planety rychlost + remove for (i = 0; i < Insane.planety.length; i += 1) { //rychlost Insane.planety[i].y += Insane.rychlost/40; //remove if(Insane.planety[i].y > 530) { Insane.planety.splice(i, 1); } } // Boostery random add if(Math.random()<0.01){ Insane.boostery.push(new Insane.Booster()); } // Boostery rychlost + remove for (i = 0; i < Insane.boostery.length; i += 1) { //rychlost Insane.boostery[i].y += Insane.rychlost/20; //remove if(Insane.boostery[i].y > 530) { Insane.boostery.splice(i, 1); } } // Slowery random add if(Math.random()<0.01){ Insane.slowery.push(new Insane.Slower()); } // Slowery rychlost + remove for (i = 0; i < Insane.slowery.length; i += 1) { //rychlost Insane.slowery[i].y += Insane.rychlost/20; //remove if(Insane.slowery[i].y > 530) { Insane.slowery.splice(i, 1); } } // Player speed Insane.player1.km = Insane.rychlost; // Player position if(Insane.player1.x < 10) { Insane.player1.x = 10; } if(Insane.player1.x > 310) { Insane.player1.x = 310; } // Kolize Boostery for (i = 0; i < Insane.boostery.length; i += 1) { if(Insane.boostery[i].y > 300) { if(Insane.kolizeBoostery(Insane.player1,Insane.boostery[i])) { Insane.rychlost += Insane.boostery[i].km; Insane.boostery.splice(i, 1); } } } // Kolize Slowery for (i = 0; i < Insane.slowery.length; i += 1) { if(Insane.slowery[i].y > 300) { if(Insane.kolizeSlowery(Insane.player1,Insane.slowery[i])) { Insane.rychlost -= Insane.slowery[i].km; Insane.slowery.splice(i, 1); } } } } //Render Insane.render = function() { Insane.Draw.clear(); // Hvezdy render for (i = 0; i < Insane.hvezdy.length; i += 1) { Insane.hvezdy[i].render(); } // Planety render for (i = 0; i < Insane.planety.length; i += 1) { Insane.planety[i].render(); } // Boostery render for (i = 0; i < Insane.boostery.length; i += 1) { Insane.boostery[i].render(); } // Slowery render for (i = 0; i < Insane.slowery.length; i += 1) { Insane.slowery[i].render(); } // Player render Insane.Draw.player(Insane.player1.x,Insane.player1.y,Insane.player1.km); //Insane.Draw.player(Math.sin(Insane.dtime/600)*20+Insane.player1.x,Insane.player1.y,Insane.player1.km); //Insane.Draw.booster(50,50,1); //Insane.Draw.slower(160,160,20); //Insane.Draw.hvezda(200,200,0.6); //Insane.Draw.planeta(300,150,20); } //Draw objects Insane.Draw = { clear: function() { Insane.ctx.clearRect(0, 0, Insane.canvas.width, Insane.canvas.height); }, player: function(x, y, km) { //raketa Insane.ctx.fillStyle = "#000"; Insane.ctx.beginPath(); Insane.ctx.moveTo(x, y-20); Insane.ctx.lineTo(x+14,y+7); Insane.ctx.lineTo(x,y+19); Insane.ctx.lineTo(x-14,y+7); Insane.ctx.closePath(); Insane.ctx.fill(); //kabina Insane.ctx.fillStyle = "#fff"; Insane.ctx.beginPath(); Insane.ctx.moveTo(x, y-15); Insane.ctx.lineTo(x+3,y-10); Insane.ctx.lineTo(x,y-5); Insane.ctx.lineTo(x-3,y-10); Insane.ctx.closePath(); Insane.ctx.fill(); Insane.Draw.motor(x,y,km); Insane.Draw.infoText(x,y,km + " Km/h", 20); }, motor: function(x,y,km) { //levy motor Insane.ctx.fillStyle = "#fff"; Insane.ctx.beginPath(); Insane.ctx.moveTo(x-9, y-15+28); Insane.ctx.lineTo(x+3-7,y-10+28); Insane.ctx.lineTo(x-9,y-5+28+km/20); Insane.ctx.lineTo(x-3-9,y-10+28); Insane.ctx.closePath(); Insane.ctx.fill(); //pravy motor Insane.ctx.fillStyle = "#fff"; Insane.ctx.beginPath(); Insane.ctx.moveTo(x+9, y-15+28); Insane.ctx.lineTo(x+3+9,y-10+28); Insane.ctx.lineTo(x+9,y-5+28+km/20); Insane.ctx.lineTo(x-3+7,y-10+28); Insane.ctx.closePath(); Insane.ctx.fill(); }, booster: function(x,y,km) { //body Insane.ctx.fillStyle = "#000"; Insane.ctx.beginPath(); Insane.ctx.arc(x, y, Math.abs(km-21)+15, 0 , 2 * Math.PI, false); Insane.ctx.closePath(); Insane.ctx.fill(); //eye Insane.ctx.fillStyle = "#fff"; Insane.ctx.beginPath(); Insane.ctx.arc(x, y, 5, 0 , 2 * Math.PI, false); Insane.ctx.closePath(); Insane.ctx.fill(); Insane.Draw.infoText(x,y, "+ " + km + " Km/h", Math.abs(km-21)+15); }, slower: function(x,y,km) { //body Insane.ctx.fillStyle = "#000"; Insane.ctx.beginPath(); Insane.ctx.rect(x-(km*5/2) ,y-(km*5/2) , km*5, km*5); Insane.ctx.closePath(); Insane.ctx.fill(); //eye Insane.ctx.fillStyle = "#fff"; Insane.ctx.beginPath(); Insane.ctx.arc(x, y, 5, 0 , 2 * Math.PI, false); Insane.ctx.closePath(); Insane.ctx.fill(); Insane.Draw.infoText(x,y, "- " + km + " Km/h", km*5); }, hvezda: function(x,y,opacity) { Insane.ctx.fillStyle = 'rgba(255,255,255,'+opacity*1+')'; Insane.ctx.beginPath(); Insane.ctx.arc(x, y, 3, 0, 2 * Math.PI, false); Insane.ctx.closePath(); Insane.ctx.fill(); }, planeta: function(x,y,size) { Insane.ctx.fillStyle = "#df7a1c"; Insane.ctx.beginPath(); Insane.ctx.arc(x,y, size*5, 0, 2 * Math.PI, false); Insane.ctx.closePath(); Insane.ctx.fill(); }, infoText: function(x,y,text,scale) { Insane.ctx.beginPath(); Insane.ctx.moveTo(x+10, y-7); Insane.ctx.lineTo(x+20*scale/20, y-17*scale/20); Insane.ctx.stroke(); Insane.ctx.lineTo((x+20*scale/20)+50, y-17*scale/20); Insane.ctx.stroke(); Insane.ctx.closePath(); Insane.ctx.font = '14px Arial'; Insane.ctx.fillStyle = '#000'; Insane.ctx.textAlign = 'left'; Insane.ctx.fillText(text, x+20*scale/20, y-19*scale/20); } } Insane.Hvezda = function() { this.x = Math.random()*320; this.y = -3; this.opacity = Math.random()*1; this.remove = false; this.render = function() { Insane.Draw.hvezda(this.x,this.y,this.opacity); } }; Insane.Planeta = function() { this.x = Math.random()*320; this.y = -50; this.size = Math.random()*10; this.remove = false; this.render = function() { Insane.Draw.planeta(this.x,this.y,this.size); } }; Insane.Booster = function() { this.x = Math.random()*320; this.y = -50; this.km = Math.ceil(Math.random()*20); this.remove = false; this.render = function() { Insane.Draw.booster(this.x,this.y,this.km); } }; Insane.Slower = function() { this.x = Math.random()*320; this.y = -50; this.km = Math.ceil(Math.random()*20); this.remove = false; this.render = function() { Insane.Draw.slower(this.x,this.y,this.km); } }; Insane.Player = function() { this.x = 0; this.y = 0; this.km = 0; this.reset = function() { this.x = 160; this.y = 430; this.km = 80; } this.render = function() { Insane.Draw.player(this.x,this.y,this.km); } } Insane.kolizeBoostery = function(a, b) { var distance_squared = (((a.x - b.x) * (a.x - b.x)) + ((a.y - b.y) * (a.y - b.y))); //console.log(a.y); //console.log(b.y); distance_squared = Math.sqrt(distance_squared); //console.log("dist: " + distance_squared + " rad: " + (Math.abs(b.km-21)+15)); if (distance_squared < (Math.abs(b.km-21)+15)) { return true; } else { return false; } } Insane.kolizeSlowery = function(a, b) { var distance_squared = (((a.x - b.x) * (a.x - b.x)) + ((a.y - b.y) * (a.y - b.y))); //console.log(a.y); //console.log(b.y); distance_squared = Math.sqrt(distance_squared); //console.log("dist: " + distance_squared + " rad: " + (b.km*5)); if (distance_squared < (b.km*4)) { return true; } else { return false; } } }( window.Insane = window.Insane || {}, jQuery )); window.addEventListener('load', Insane.init, false); window.addEventListener('resize', Insane.resize, false);
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>简单的飞机游戏-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号