alert(`Only for laptops! You can consider it as a toy aeroplane as the speed of the aeroplane is slow (increasing its speed can make your laptop hang) and it cannot achieve much height (at higher altitudes the ground looks a little bit unrealistic). I have used the concept of treadmills (but 3D instead of 1D). (The image of aeroplane is stationary :D) ArrowUp - for increasing height ArrowDown - for decreasing height ArrowLeft - for going left ArrowRight - for going right You can long press one of the above keys if you want the aeroplane to stop when you leave the key. You can tap one of the above keys for the aeroplane to go in the respective direction continuously (and then long press in the same direction to stop it). The code output might become a bit laggy sometimes for some devices Tell me if you want the feature of changing speed as well! Please inform me if you find bugs`); var speed_of_the_aeroplane = 300, land, max = -2400, min = -3000, gap = 12500, n=20, check, t, t1, t2, t3, t4, tnormal, tnormal2, scale=1, diff = 0.15, diff2 = 0.3, up=0,down=0, keyspressed = [], lg, turnspeed=2, rot=1, rotspeed=1, rotnormal=2, rotz=0, rotzspeed=1.2, intervals = ["t", "t1", "t2", "t3", "t4", "tnormal", "tnormal2"]; const pf = (x) => parseFloat(x); window.onload = function() { land = document.getElementById("land"); check = document.getElementById("check"); lg = document.getElementById("land-grid"); gap = lg.offsetWidth; //check.innerHTML = lg.offsetWidth; for (let i = 0; i < n; i++) { if (gap/n*i < lg.offsetHeight) { lg.innerHTML += `

`; } if (gap/n*i < lg.offsetWidth) { lg.innerHTML += `

`; } } t = setInterval(function() { var glh = document.getElementsByClassName("gl-horizontal"); var glv = document.getElementsByClassName("gl-vertical"); let i = 0; // rotz let front = Math.round(Math.cos(rotz*Math.PI/180) * speed_of_the_aeroplane)/10; let side = Math.round(Math.sin(rotz*Math.PI/180) * speed_of_the_aeroplane)/10; if (front === 0) {front = [0.1, -0.1][Math.floor(Math.random()*2)];} if (side === 0) {side = [0.1, -0.1][Math.floor(Math.random()*2)];} //check.innerHTML = Math.round(front) + " || " + Math.round(side); while (glh[i]) { if (front >= 0) { glh[i].style.top = (pf(glh[i].style.top) > lg.offsetHeight ? pf(glh[i].style.top)-lg.offsetHeight+front : pf(glh[i].style.top)+front) + "px"; } else { glh[i].style.top = (pf(glh[i].style.top) < 0 ? lg.offsetHeight-pf(glh[i].style.top)+front : pf(glh[i].style.top)+front) + "px"; } i++; } i=0; while (glv[i]) { if (side >= 0) { glv[i].style.left = (pf(glv[i].style.left) > lg.offsetWidth ? pf(glv[i].style.left)-lg.offsetWidth+side : pf(glv[i].style.left)+side) + "px"; } else { glv[i].style.left = (pf(glv[i].style.left) < 0 ? lg.offsetWidth-pf(glv[i].style.left)+side : pf(glv[i].style.left)+side) + "px"; } i++; } }, 20); }; window.addEventListener("keydown", function(e) { if (keyspressed.includes(e.key) === false) { keyspressed.push(e.key); } let val = parseFloat(land.style.transform.slice(8)); if (keyspressed.includes("ArrowUp")) { if (!t1 && land.offsetTop <= -1800) { setTimeout(function() { let val = parseFloat(land.style.transform.slice(8)); up = val > 75 ? val-75 : 0; down = 0; if (t1) { clearInterval(t1); t1 = false; } if (t2) { clearInterval(t2); t2 = false; } if (tnormal) { clearInterval(tnormal); tnormal = false; } t1 = setInterval(function() { if (land.offsetTop >= max) { ShowWarning("Warning:
Maximum height reached"); } land.style.top = land.offsetTop+(land.offsetTop > max ? 0 : 5) + "px"; if (up < 8) {up+=diff;} land.style.transform = `rotateX(${75+up}deg) rotateY(${rot}deg)`; //check.innerHTML = land.offsetTop; }, 100); }, val < 75 ? Math.abs(val-75)/3*1000 : 0); } } if (keyspressed.includes("ArrowDown")) { if (!t2 && land.offsetTop >= -3000) { setTimeout(function() { let val = parseFloat(land.style.transform.slice(8)); down = val < 75 ? 75-val : 0; up = 0; if (t1) { clearInterval(t1); t1 = false; } if (t2) { clearInterval(t2); t2 = false; } //check.innerHTML = "start"; if (tnormal) { clearInterval(tnormal); tnormal = false; } t2 = setInterval(function() { if (land.offsetTop <= min) { ShowWarning("Warning:
Minimum height reached"); } land.style.top = land.offsetTop-(land.offsetTop < min ? 0 : 5) + "px"; if (down < 8) {down+=diff;} land.style.transform = `rotateX(${75-down}deg) rotateY(${rot}deg)`; //check.innerHTML = land.offsetTop; }, 100); }, val > 75 ? Math.abs(val-75)/3*1000 : 0); } } if (keyspressed.includes("ArrowLeft")) { if (!t3) { setTimeout(function() { if (t3) { clearInterval(t3); t3 = false; } if (t4) { clearInterval(t4); t4 = false; } if (tnormal2) { clearInterval(tnormal2); tnormal2 = false; } t3 = setInterval(function() { if (rot < 20) {rot+=rotspeed;} rotz+=rotzspeed; land.style.transform = `rotateX(${parseFloat(land.style.transform.slice(8))}deg) rotateY(${rot}deg)`; lg.style.transform = `rotateZ(${rotz}deg)`; },100); }, rot < 0 ? Math.abs(rot)*50 : 0); } } if (keyspressed.includes("ArrowRight")) { if (!t4) { setTimeout(function() { if (t3) { clearInterval(t3); t3 = false; } if (t4) { clearInterval(t4); t4 = false; } if (tnormal2) { clearInterval(tnormal2); tnormal2 = false; } t4 = setInterval(function() { if (rot > -20) {rot-=rotspeed;} rotz-=rotzspeed; land.style.transform = `rotateX(${parseFloat(land.style.transform.slice(8))}deg) rotateY(${rot}deg)`; lg.style.transform = `rotateZ(${rotz}deg)`; },100); }, rot > 0 ? Math.abs(rot)*50 : 0); } } }); function TNORMAL() { let val = parseFloat(land.style.transform.slice(8)); //up = val > 75 ? val-75 : 0; //down = val < 75 ? 75-val : 0; if (t1) { clearInterval(t1); t1 = false; } if (t2) { clearInterval(t2); t2 = false; } if (val > 75.15 || val < 74.85) { land.style.transform = `rotateX(${val+diff2*(val<75 ? 1 : -1)}deg) rotateY(${rot}deg)`; //check.innerHTML = land.offsetTop; } else { clearInterval(tnormal); tnormal = false; } } function TNORMAL2() { if (t3) { clearInterval(t3); t3 = false; } if (t4) { clearInterval(t4); t4 = false; } if (rot < -1 || rot > 1) { rot += rotnormal * (rot > 0 ? -1 : 1) } else {rot = 0;} land.style.transform = `rotateX(${parseFloat(land.style.transform.slice(8))}deg) rotateY(${rot}deg)`; lg.style.transform = `rotateZ(${rotz}deg)`; if (rot === 0) { clearInterval(tnormal2); tnormal2=false; } } window.addEventListener("keyup", function(e) { keyspressed.splice(keyspressed.indexOf(e.key), 1); HideWarning(); if (e.key == "ArrowUp") { clearInterval(t1); if (!tnormal) { tnormal = setInterval(TNORMAL, 100); } t1 = false; } else if (e.key == "ArrowDown") { clearInterval(t2); if (!tnormal) { tnormal = setInterval(TNORMAL, 100); } t2 = false; } else if (e.key == "ArrowLeft") { clearInterval(t3); t3 = false; if (!tnormal2) { tnormal2 = setInterval(TNORMAL2, 100); } } else if (e.key == "ArrowRight") { clearInterval(t4); t4 = false; if (!tnormal2) { tnormal2 = setInterval(TNORMAL2, 100); } } }); setInterval(() => { //check.innerHTML = Math.round(up*100)/100 + " " + Math.round(down*100)/100; //check.innerHTML = keyspressed; //check.innerHTML = lg.style.transform; /*check.innerHTML = ""; for (let i of intervals) { if (eval(i)) { check.innerHTML += i+" "; } }*/ },100); function ShowWarning(msg) { var warning = document.getElementById("warning"); warning.style.filter = "opacity(1)"; warning.innerHTML = msg; } function HideWarning() { document.getElementById("warning").style.filter = "opacity(0)"; }

Aeroplane