index.min.js

/***************************************

COPYRIGHT!!! https://github.com/Antosser

***************************************/

var canvas=document.getElementById("canvas"),ctx=canvas.getContext("2d"),h=window.innerHeight,h2=window.innerHeight/2,w=window.innerWidth,w2=window.innerWidth/2,keysPressed=new Set,size=Math.min(w,h),size2=Math.min(w,h)/2;canvas.height=size,canvas.width=size;var logKey=e=>{keysPressed.add(e.code)},logKey2=e=>{keysPressed.delete(e.code)};document.addEventListener("keydown",logKey),document.addEventListener("keyup",logKey2);var player={pos:{x:0,y:0,z:-5},ang:{x:0,y:0,z:0},fov:100},line=(e,a,n,t)=>{ctx.beginPath(),ctx.moveTo(e,a),ctx.lineTo(n,t),ctx.stroke()},circle=(e,a,n,t,d)=>{ctx.beginPath(),ctx.arc(e,a,n,t,3.1415*d),ctx.stroke()},getPoint2d=(e,a,n)=>(e-=player.pos.x,a-=player.pos.y,n-=player.pos.z,[e,n]=[e*Math.cos(3.1415*player.ang.x/180)-n*Math.sin(3.1415*player.ang.x/180),e*Math.sin(3.1415*player.ang.x/180)+n*Math.cos(3.1415*player.ang.x/180)],[n,a]=[n*Math.cos(3.1415*-player.ang.y/180)-a*Math.sin(3.1415*-player.ang.y/180),n*Math.sin(3.1415*-player.ang.y/180)+a*Math.cos(3.1415*-player.ang.y/180)],[e,a]=[e*Math.cos(3.1415*-player.ang.z/180)-a*Math.sin(3.1415*-player.ang.z/180),e*Math.sin(3.1415*-player.ang.z/180)+a*Math.cos(3.1415*-player.ang.z/180)],cx=180*Math.atan2(e,Math.sqrt(a*a+n*n))/3.1415/player.fov,cy=180*Math.atan2(a,Math.sqrt(e*e+n*n))/3.1415/player.fov,cx*=h,cy*=h,[cx+size2,-(cy+size2-size/2)+size/2]),drawPoint3d=(e,a,n)=>{[cx,cy]=getPoint2d(e,a,n),s=50/Math.sqrt((e-player.pos.x)**2+(a-player.pos.y)**2+(n-player.pos.z)**2),ctx.fillRect(cx-s/2,cy-s/2,s,s)},drawLine3d=(e,a,n,t,d,i)=>{[cx1,cy1]=getPoint2d(e,a,n),[cx2,cy2]=getPoint2d(t,d,i),line(cx1,cy1,cx2,cy2)},drawCube=(e,a,n,t,d,i,r,s)=>{r&&(drawPoint3d(e,a,i),drawPoint3d(e,a,n),drawPoint3d(e,d,i),drawPoint3d(e,d,n),drawPoint3d(t,a,i),drawPoint3d(t,a,n),drawPoint3d(t,d,i),drawPoint3d(t,d,n)),s&&(drawLine3d(e,a,n,t,a,n),drawLine3d(e,a,n,e,d,n),drawLine3d(e,a,n,e,a,i),drawLine3d(t,a,i,e,a,i),drawLine3d(t,a,i,t,d,i),drawLine3d(t,a,i,t,a,n),drawLine3d(e,a,i,e,d,i),drawLine3d(t,a,n,t,d,n),drawLine3d(e,d,n,e,d,i),drawLine3d(e,d,n,t,d,n),drawLine3d(t,d,i,e,d,i),drawLine3d(t,d,i,t,d,n))};var fps = 30;

var fps = 60;

cube = 0;
cube_vel = 0;
cube2 = 3;
cube2_vel = 0;
cube3 = 6;
cube3_vel = 0;

index = 0;

var loop = () => {
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	drawCube(-1, cube, -1, 1, cube+2, 1, false, true);
	drawCube(-1, cube2, -1, 1, cube2+2, 1, false, true);
	drawCube(-1, cube3, -1, 1, cube3+2, 1, false, true);
	drawCube(-2, -4, -2, 2, -4.5, 2, false, true);

	cube_vel -= .002;
	cube += cube_vel;
	cube2_vel -= .002;
	cube2 += cube2_vel;
	cube3_vel -= .002;
	cube3 += cube3_vel;

	if (cube < -4) {
		cube_vel *= -1;
		cube = -4 + (cube + 4) * (-1);
	}
	if (cube2 < cube + 2) {
		[cube_vel, cube2_vel] = [cube2_vel, cube_vel];
		[cube, cube2] = [cube2 - 2 + (cube - (cube2 - 2)) * (-1), cube + 2 + (cube2 - (cube + 2)) * (-1)];
	}
	if (cube3 < cube2 + 2) {
		[cube2_vel, cube3_vel] = [cube3_vel, cube2_vel];
		[cube2, cube3] = [cube3 - 2 + (cube2 - (cube3 - 2)) * (-1), cube2 + 2 + (cube3 - (cube2 + 2)) * (-1)];
	}

	player.pos.x = Math.cos(index)*8;
	player.pos.z = Math.sin(index)*8;
	player.ang.x = -index / (2 * Math.PI) * 360 - 90;
	index += .005;
	//console.log("Total velocity: " + (Math.abs(cube_vel) + Math.abs(cube2_vel) + Math.abs(cube3_vel)));
}

console.log(setInterval(loop, 1000 / fps));