Insane - Tech Demo

Developer
Allan
Size
6,045 Kb
Views
12,144
  1. Insane - Tech Demo Previews
  2. Insane - Tech Demo HTML Codes
  3. Insane - Tech Demo CSS Codes
  4. Insane - Tech Demo JS Codes

How do I make an insane - tech demo?

Demo of my upcomming HTML5 game. Circles - speed up. Rectangles - speed down.Forked from Momcilo Jasikovac's Pen Insane - Tech Demo.. What is a insane - tech demo? How do you make a insane - tech demo? This script and codes were developed by Allan on 12 October 2022, Wednesday.

Insane - Tech Demo Previews
IQ Test

Insane - Tech Demo - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Insane - Tech Demo</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!DOCTYPE HTML>
<html lang="en">
<head>	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, user-scalable=0" />	<meta name="apple-mobile-web-app-capable" content="yes" />	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
</head>
<body>	<canvas>	</canvas>
</body>
</html> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Insane - Tech Demo - Script Codes CSS Codes

body { margin: 0; padding: 0; background: #000;}	canvas { display: block; margin: 0 auto; background: #2B3856; }

Insane - Tech Demo - Script Codes JS Codes

/** * Provides requestAnimationFrame in a cross browser way. * https://www.facebook.com/basicode */
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<g?(a[e]=b[d].bg.r,a[e+1]=b[d].bg.g,a[e+2]=b[d].bg.b):(a[e]=b[d].fg.r,a[e+1]=b[d].fg.g,a[e+2]=b[d].fg.b)}var r=0,t=2,g,u=0,j=(new Date).getTime(),F=j,v=j,l=0,w=1E3,x=0,k,d,a,m,y,n=0,z=1E3,A=0,f,c,o,B,p=0,C=1E3,D=0,h,i,q,E,b={fps:{bg:{r:16,g:16,b:48},fg:{r:0,g:255,b:255}},ms:{bg:{r:16,g:48,b:16},fg:{r:0,g:255,b:0}},mb:{bg:{r:48,g:16,
b:26},fg:{r:255,g:0,b:128}}};g=document.createElement("div");g.style.cursor="pointer";g.style.width="80px";g.style.opacity="0.9";g.style.zIndex="10001";g.addEventListener("click",function(){r++;r==t&&(r=0);k.style.display="none";f.style.display="none";h.style.display="none";switch(r){case 0:k.style.display="block";break;case 1:f.style.display="block";break;case 2:h.style.display="block"}},!1);k=document.createElement("div");k.style.backgroundColor="rgb("+Math.floor(b.fps.bg.r/2)+","+Math.floor(b.fps.bg.g/
2)+","+Math.floor(b.fps.bg.b/2)+")";k.style.padding="2px 0px 3px 0px";g.appendChild(k);d=document.createElement("div");d.style.fontFamily="Helvetica, Arial, sans-serif";d.style.textAlign="left";d.style.fontSize="9px";d.style.color="rgb("+b.fps.fg.r+","+b.fps.fg.g+","+b.fps.fg.b+")";d.style.margin="0px 0px 1px 3px";d.innerHTML='<span style="font-weight:bold">FPS</span>';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='<span style="font-weight:bold">MS</span>';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='<span style="font-weight:bold">MB</span>';
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='<span style="font-weight:bold">'+n+" MS</span> ("+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='<span style="font-weight:bold">'+l+" FPS</span> ("+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='<span style="font-weight:bold">'+Math.round(p)+" MB</span> ("+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 = 350; 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 = "#98AFC7"; 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 = "#2B3856";	Insane.ctx.beginPath();	Insane.ctx.moveTo(x, y-12);	Insane.ctx.lineTo(x+5,y-3);	Insane.ctx.lineTo(x,y-5);	Insane.ctx.lineTo(x-5,y-3);	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 = "#F88017";	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 = "#F88017";	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 = "#413839";	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 = "#357EC7";	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 = "#357EC7";	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 = "#5D6A88";	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 = '#FFA500'; 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);
Insane - Tech Demo - Script Codes
Insane - Tech Demo - Script Codes
Home Page Home
Developer Allan
Username Araujoo
Uploaded October 12, 2022
Rating 3
Size 6,045 Kb
Views 12,144
Do you need developer help for Insane - Tech Demo?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Allan (Araujoo) Script Codes
Name
A Pen by Allan
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!