/* Please support me for more tutorials! https://www.sololearn.com/post/97685/?ref=app */ window.addEventListener('load', function(){ /*Endless runner game exposed by Joakim Nyland I got some questions how endless runner games are made. Here is one smart way to do it. The camera is zoomed out to reveal how endless runner games can be made. Hit box on pipes are removed. I hope this explains it! 😄 Link to finished game: https://code.sololearn.com/WkIPQwthB6K9/?ref=app */ alert("I got some questions how endless runner games are made. Here is one smart way to do it.\n\nThe Camera is zoomed out to reveal how endless runner games can be made. Fog and hit boxes on pipes are removed. I hope this explains it!") // ********** Setting parameters ********** console.log=function(){}; const SCALE = 1; const PI = Math.PI; var audioPlayed = 0; var posNeg=0; var loopVar=0; var accVariable = 0; var timerVar = 0; var nowVar = 0; var flightTime=0; var storedZ = 0; var jumpVariable = 1; const maxHeight = 45; var hitVar = 0; var birdSpeed = (2/10)*58; var startVar = 0; var onMenu=1; var pointVar = 0; var transp1=0; var transp2=0; // Audio var audioVar=0; var bestScore = 0; var flapCount = 0; var scoreId = document.getElementById( 'myScoreId'); var gameOverMenu = document.getElementById( 'gameOver'); var myPlayerScore = document.getElementById( 'playerScore2'); var myBestScore = document.getElementById( 'bestScore2'); var myPlayButton = document.getElementById( 'playButton'); var playedSmack=0; var metalSmack = 0; var startUp = [document.getElementById("gameOverText"),document.getElementById("playerScoreText"),document.getElementById("bestScoreText")]; startUp[0].innerHTML= "FLAPTAP"; startUp[0].style.color = "yellow"; startUp[1].style.display = "none"; startUp[2].style.bottom = "60%"; myBestScore.style.bottom="40%"; myPlayerScore.style.display = "none"; // Saving user progress: var ua = navigator.userAgent.toLowerCase(); var isAndroid = ua.indexOf("android") > -1; if(isAndroid==0) { // Saving user progress: //localStorage.clear(); bestScore = parseInt(localStorage.getItem("bestScoreFlap")); if (isNaN(bestScore) == true){ bestScore = 0; } else{ myBestScore.innerHTML=bestScore; } } //Camera values const FOV = 45; const ASPECT = window.innerWidth/window.innerHeight; const NEAR = 0.1; const FAR = 2000; var cloudGeometry = new THREE.DodecahedronGeometry(6,1) var cloudMaterial = new THREE.MeshLambertMaterial( { color:0x00ff00, transparent:true, opacity:1 } ); // ********** Creating the scene: ********** var renderer = new THREE.WebGLRenderer({ antialias: true }); //Creates a WebGL renderer using threejs library renderer.setPixelRatio( window.devicePixelRatio ); //Prevents blurry output renderer.setSize( window.innerWidth,window.innerHeight ); //Sets renderer size to the size of the window renderer.setClearColor(0xA9F5F2, 1); //Makes the background color of the scene blue renderer.shadowMapEnabled = true; renderer.shadowMapSoft = true; document.body.appendChild( renderer.domElement ); //Attaches renderer to DOM (initializes renderer) var scene = new THREE.Scene(); //Creates an empty scene where we are going to add our objects var camera = new THREE.PerspectiveCamera( FOV,ASPECT,NEAR,FAR ); //Creates a camera camera.position.set( 30/SCALE , -2000/SCALE, 40/SCALE ); //Positions the camera camera.up.set( 0,0,1); //Sets the camera the correct direction camera.rotation.x=-PI/2; scene.add( camera ); //Adds the camera to the scene var controls = new THREE.OrbitControls( camera, renderer.domElement ); //OrbitControls allows camera to be controlled and orbit around a target controls.minDistance = 800/SCALE; //Sets the minimum distance one can pan into the scene controls.enabled=false; // ********** Adding light and Shadow********** var ambientLight = new THREE.AmbientLight(0xffffff, 0.4); scene.add(ambientLight); //Adding ambient light var light = new THREE.DirectionalLight( 0xffffff, 1.1 ); light.position.set(0, -5, 20); light.castShadow = true; var d = 50; light.shadowCameraLeft = -d; light.shadowCameraRight = d; light.shadowCameraTop = d; light.shadowCameraBottom = -d; scene.add(light); //Fog var fogColor = new THREE.Color(0xA9F5F2); scene.background = fogColor; //scene.fog = new THREE.Fog(fogColor, 50, 85); //controls window.addEventListener("touchstart", function(e){ if (startVar != 2 && onMenu==0){ startVar = 1; storedZ = bird.position.z; jumpVariable=0; timerVar = new Date().getTime(); hitVar=1; //Activates bird-ground hitbox flapp(); //flap sound if (bird.rotation.z<=PI/4) { bird.rotation.z+=0.4; } } }); window.addEventListener("touchend", function(e){ e.preventDefault(); }); // ********** Loading the bird ********** var bird = new THREE.Object3D(); //Creates a new threejs 3D-object variable named bird var mtlLoader = new THREE.MTLLoader(); //Creates an mtlLoader (to apply texture to 3d objects) mtlLoader.load( 'https://dl.dropbox.com/s/fgerosah15v3zey/bird.mtl', function( materials ) //Prepare to set color { var objLoader = new THREE.OBJLoader(); //Creates an object loader (to load 3d objects) objLoader.setMaterials( materials ); //Sets color to the bird objLoader.load( 'https://dl.dropbox.com/s/3fc8x4znz7ejs4n/bird.obj', function ( object ) //Loads bird { object.traverse( function ( child ) { if ( child instanceof THREE.Mesh ) { child.castShadow = true; //Enables shadow } }); bird.add( object ); //Adds the object with material to the bird variable }); }); scene.add( bird ); //Adds bird to the scene //Some positioning and scaling bird.position.z= 0.6; //Positions bird onto ground bird.position.x=0; bird.position.y=-71/10; bird.rotation.x=PI/2; bird.rotation.y=PI/2; bird.scale.x = 0.3; bird.scale.y = 0.3; bird.scale.z = 0.3; //******** Functions to make stuff happen ******** //Bird motion function jump() { nowVar = new Date().getTime(); flightTime = (nowVar - timerVar); if (jumpVariable==0) { bird.position.z+=0.1*58*delta; if (bird.rotation.z<=PI/4) { bird.rotation.z+=0.1*58*delta; } } if( (bird.position.z-storedZ)>=1 ) { accVariable = bird.position.z; bird.rotation.z-=0.03*58*delta; jumpVariable=1; } if (flightTime>=350) { jumpVariable=2; } }; function descend() { if (jumpVariable==2 && bird.position.z>0.3) { if( (accVariable-bird.position.z)<=0.5 ) { bird.position.z-=0.05*58*delta; if (bird.rotation.z>=-PI/2.2) { bird.rotation.z-=0.02*58*delta; } } else if( (accVariable-bird.position.z)>0.5 ) { bird.position.z-=0.15*58*delta; if (bird.rotation.z>=-PI/2.2) { bird.rotation.z-=0.1*58*delta; } } } }; //Cylinders var cylinderMaterial1 = new THREE.MeshLambertMaterial({ color : 0x00b300, side: THREE.DoubleSide, transparent:true, opacity:1 }); var cylinderMaterial2 = new THREE.MeshLambertMaterial({ color : 0x00b300, side: THREE.DoubleSide, transparent:true, opacity:1 }); function cylinderSpawn(pipeMat,yPos) { height = Math.floor(Math.random() * 8) + 2; var geometry = new THREE.CylinderGeometry( 1, 1, height+4, 32,5,true ); var cyl1 = new THREE.Mesh( geometry, pipeMat ); scene.add( cyl1 ); cyl1.rotation.x=PI/2; cyl1.position.z=(-2+(height/2)); cyl1.position.y=yPos; var geometry = new THREE.CylinderGeometry( 1, 1, maxHeight, 32,5,true ); var cyl2 = new THREE.Mesh( geometry, pipeMat ); scene.add( cyl2 ); cyl2.rotation.x=PI/2; cyl2.position.z=(height+(maxHeight/2)+2.5); cyl2.position.y=yPos; cyl1.castShadow=true; cyl2.castShadow=true; // y,x,z spawnCloud(30,-14,10,cyl1); spawnCloud(20,-35,13,cyl1); spawnCloud(10,-14,12,cyl1); spawnCloud(0,-35,14,cyl1); spawnCloud(-10,-14,10,cyl1); spawnCloud(-20,-35,12,cyl1); spawnCloud(30,16.5,12,cyl1); spawnCloud(0,16.5,12,cyl1); return [cyl1,cyl2, height]; }; function spawnCloud(zValue,xValue,yValue,cylinderNum){ var cloud = new THREE.Mesh( cloudGeometry, cloudMaterial ); cloud.receiveShadow=true; cloud.position.z=zValue; cloud.position.x=xValue; cloud.position.y=yValue; cylinderNum.add(cloud); var treeGeometry = new THREE.CylinderGeometry( 1.5, 1.5, 45,32); var treeMaterial = new THREE.MeshBasicMaterial( {color:0x4d2600} ); var tree= new THREE.Mesh( treeGeometry, treeMaterial ); tree.receiveShadow=true; cloud.castShadow=true; cloud.add(tree); tree.position.y=-45/2; } var pipes1 = cylinderSpawn(cylinderMaterial1,80); var pipes2 = cylinderSpawn(cylinderMaterial2,80+55); var cylinder1 = pipes1[0]; var cylinder2 = pipes1[1]; var heightCylinder1 = pipes1[2]; var cylinder3 = pipes2[0]; var cylinder4 = pipes2[1]; var heightCylinder2 = pipes2[2]; function cylinderRemove(cyl1,cyl2) { if( cyl1.position.y<=-30 ) { swap(cyl1,cyl2); pointVar=0; //Set this to 0 so passing through pipe registers point } }; function cylinderTranslate(cyl1,cyl2) { cyl1.position.y-=birdSpeed*delta; cyl2.position.y-=birdSpeed*delta; }; function cylinderCollision(cyl1,cyl2,height) { if ( cyl1.position.y<=-70/10 && cyl1.position.y>=-79/10) { if ((bird.position.z-0.2)<=height) { //die(true); } else if( (bird.position.z+0.2)>=(cyl2.position.z-(maxHeight/2))) { //die(true); } } }; function birdCollision() { if (hitVar==1 && bird.position.z <= 0.305) { die(false); soundHit.play(); } }; function die(cylinderCrash) { if (cylinderCrash) { startVar = 2; } else{ playedSmack=0; metalSmack=0; startVar=0; //Pause game onMenu=1; gameOverMenu.style.display="inline"; myPlayerScore.innerHTML=loopVar; scoreId.style.fontSize="15px"; //reset bird.position.z=0.6; //Reset bird hitVar=0; //Deactivate ground hitbox bird.rotation.x=PI/2; if (loopVar > bestScore){ bestScore = loopVar; myBestScore.innerHTML=bestScore; localStorage.setItem("bestScoreFlap",bestScore); } loopVar=0; //reset score pointVar = 0; //Set this to 0 so passing through pipe registers point } }; function score(cyl1){ scoreId.innerHTML = loopVar; if( (cyl1.position.y<=bird.position.y-1) && cyl1.position.y>(bird.position.y-1.8) && pointVar==0 ) { loopVar+=1; //Player score pointVar = 1; //Gives +1 point, then this if-function becomes false if (cyl1 == cylinder1){ transp1=1; //transparency } else{ transp2=1; //transparency } soundScore.play(); } //Change bird speed if score is high if (loopVar<10) { birdSpeed=(2/10)*58; } else if (loopVar<20) { birdSpeed = (0.25)*58; } else { birdSpeed = (0.3)*58; } }; function loadAudio() { //Threejs Audio var listener = new THREE.AudioListener(); camera.add( listener ); window.flySound = new THREE.Audio( listener ); var audioLoader = new THREE.AudioLoader(); audioLoader.load( 'https://dl.dropbox.com/s/w25uvq7a7wo1uyi/sfx_wing.mp3', function( buffer ) { flySound.setBuffer( buffer ); flySound.setLoop( false ); flySound.setVolume( 1 ); //flySound.play(); }); window.flySound2 = new THREE.Audio( listener ); audioLoader.load( 'https://dl.dropbox.com/s/w25uvq7a7wo1uyi/sfx_wing.mp3', function( buffer ) { flySound2.setBuffer( buffer ); flySound2.setLoop( false ); flySound2.setVolume( 1 ); //flySound2.play(); }); window.flySound3 = new THREE.Audio( listener ); audioLoader.load( 'https://dl.dropbox.com/s/w25uvq7a7wo1uyi/sfx_wing.mp3', function( buffer ) { flySound3.setBuffer( buffer ); flySound3.setLoop( false ); flySound3.setVolume( 1 ); //flySound3.play(); }); window.soundHit = new THREE.Audio( listener ); audioLoader.load( 'https://dl.dropbox.com/s/a15jq547hnt10e4/sfx_hit.mp3', function( buffer ) { soundHit.setBuffer( buffer ); soundHit.setLoop( false ); soundHit.setVolume( 1 ); //soundHit.play(); }); window.metalSound = new THREE.Audio( listener ); audioLoader.load( 'https://dl.dropbox.com/s/8hi8u4jxxeol0an/metal.mp3?dl=0', function( buffer ) { metalSound.setBuffer( buffer ); metalSound.setLoop( false ); metalSound.setVolume( 1 ); //metalSound.play(); }); window.soundScore = new THREE.Audio( listener ); audioLoader.load( 'https://dl.dropbox.com/s/yuhbesjvnuwxevl/sfx_point.mp3', function( buffer ) { soundScore.setBuffer( buffer ); soundScore.setLoop( false ); soundScore.setVolume( 1 ); //soundScore.play(); }); audioVar=1; }; //Ground var texture; texture = new THREE.TextureLoader().load( "https://dl.dropbox.com/s/f8exr3zow9nqsol/grass.jpg?dl=0" ); var groundmat = new THREE.MeshLambertMaterial({ //Sets color and material attributes for plane color: 0xcc6600, map:texture, side: THREE.DoubleSide //Ground visible from both sides }); var geometry = new THREE.SphereGeometry(3000,100,100); var ballGround = new THREE.Mesh( geometry, groundmat ); scene.add( ballGround ); ballGround.receiveShadow=true; ballGround.position.z=-2999.6; //******* POV ****** var povZvar=2; function enablePOV() { camera.position.set( 15*2, -25*2.5, 50 ); //Positions the camera if (povZvarbird.position.z+0.15){ povZvar-=0.1*58*delta; } camera.lookAt(bird.position.x,bird.position.y+10,3); }; function swap(cyl1,cyl2) { if (cyl1 == cylinder1) { heightCylinder1 = Math.floor(Math.random() * 8) + 2; var height=heightCylinder1; } else{ heightCylinder2 = Math.floor(Math.random() * 8) + 2; var height=heightCylinder2; } var geometry = new THREE.CylinderGeometry( 1, 1, height+4, 32,5,true ); cyl1.geometry.dispose(); cyl1.geometry = geometry.clone(); cyl1.position.z=(-2+(height/2)); cyl1.position.y=80; cyl2.position.z=(height+(maxHeight/2)+2.5); cyl2.position.y=80; cyl1.material.opacity=1; cyl2.material.opacity=1; } function pipeOpacity(transp,cyl1,cyl2) { if (transp==1 && cyl1.position.y<=bird.position.y) { if (cyl1.material.opacity>0.4) { cyl1.material.opacity-=0.025; cyl2.material.opacity-=0.025; } } } function cylCrash() { bird.rotation.x+=0.2*58*delta; if (metalSmack==0){ metalSound.play(); metalSmack=1; } if (bird.position.z<=0.6 && playedSmack==0){ soundHit.play(); playedSmack=1; } if (bird.position.z>=0.6){ bird.position.z-=0.2*58*delta; } else if (cylinder1.position.y>13 && cylinder3.position.y>cylinder1.position.y){ die(false); } else if(cylinder3.position.y>13 && cylinder1.position.y>cylinder3.position.y){ die(false); } cylinder1.position.y+=0.3*58*delta; cylinder2.position.y+=0.3*58*delta; cylinder3.position.y+=0.3*58*delta; cylinder4.position.y+=0.3*58*delta; cylinder1.material.opacity = 1; cylinder2.material.opacity = 1; cylinder3.material.opacity = 1; cylinder4.material.opacity = 1; transp1 = 0; transp2 = 0; } myPlayButton.addEventListener("touchend",function(){ if (audioVar == 0){ loadAudio(); startUp[0].innerHTML= "GAME OVER"; startUp[0].style.color = "red"; startUp[1].style.display = "inline"; startUp[2].style.bottom = "45%"; myBestScore.style.bottom="25%"; myPlayerScore.style.display = "inline"; } gameOverMenu.style.display="none"; onMenu=0; }) function flapp(){ if (flapCount == 0){ flySound.play(); } else if (flapCount == 1){ flySound2.play(); } else if (flapCount == 2){ flySound3.play(); } flapCount+=1; if (flapCount==3){ flapCount=0; } } var clock = new THREE.Clock(); var delta=0; clock.start(); //makes rendering timedependent //********** Render function ********** var render = function () { //Make movement time-dependent and not fps-dependent delta = clock.getDelta(); if (onMenu==1){ scoreId.style.display="none"; } else{ scoreId.style.display="inline"; } if(startVar==0){ scoreId.innerHTML="JUMP TO START"; scoreId.style.fontSize="15px"; } else if (startVar==1) //If game started, do all the functions inside { scoreId.style.fontSize="25px"; //Bird fly function jump(); //Gravity function descend(); //Ground movement ballGround.rotation.x+=0.00009; //Change "old" pipe back with new height cylinderRemove(cylinder1,cylinder2); cylinderRemove(cylinder3,cylinder4); //Makes pipes translate towards bird cylinderTranslate(cylinder1,cylinder2); cylinderTranslate(cylinder3,cylinder4); //Obstacle collision cylinderCollision(cylinder1,cylinder2,heightCylinder1 ); cylinderCollision(cylinder3,cylinder4,heightCylinder2 ); birdCollision(); //Registers score score(cylinder1); score(cylinder3); //opacity pipeOpacity(transp1,cylinder1,cylinder2); pipeOpacity(transp2,cylinder3,cylinder4); } else if(startVar == 2) { cylCrash(); } //camera position enablePOV(); requestAnimationFrame(render); //render function is called every frame! renderer.render(scene, camera); //We need this in the loop to perform the rendering }; render(); }); //Made by Joakim Nyland

HOW TO: Endless Runner Game 👣