/* 3D Balloon Archery Game by Joakim Nyland Just having some fun making games while also practising using functions, arrays, timers/counters and camera positioning. I hope you like it! 😄 Uncomment mouse eventlisteners if you use computer. For android users you might have to open it in Chrome browser and enable WebGL for it to work properly. Future plans for this game: - Add "bow animation" when powering up - Improve physics - Add stages/score - Add sound effects - Add balloon-hit animation - Make game time-dependent rather than fps dependent */ window.addEventListener('load', function(){ console.log=function(){}; const SCALE = 27; const PI = Math.PI; var myFireButton = document.getElementById( 'fireButton'); var msgBox= document.getElementById( 'myPower'); var power1 = document.getElementById( 'power1'); var power2 = document.getElementById( 'power2'); var power3 = document.getElementById( 'power3'); var arrow1 = document.getElementById( 'arrow1'); var arrow2 = document.getElementById( 'arrow2'); var arrow3 = document.getElementById( 'arrow3'); var arrow4 = document.getElementById( 'arrow4'); var arrow5 = document.getElementById( 'arrow5'); var arrowArray = [arrow1,arrow2,arrow3,arrow4,arrow5]; var arrowCount = 4; //var niceSong = new Audio("https://dl.dropbox.com/s/47yhesl39v8w3at/niceSong.mp3"); //Camera values const FOV = 45; const ASPECT = window.innerWidth/window.innerHeight; const NEAR = 0.1; const FAR = 2000; var alpha=0; var arrowFired = 0; var arrowWeight = 0.000002; var time = 1; var onClickDate = 0; var currentDate = 0; var poweringTime = 0; var balloonArray = []; var spawnArray = []; var ropeArray = []; var stillMore = 0; var activateAnimation = 0; var fadingTimer = 0; var fadingTimer2 = 0; var vector = new THREE.Vector3(); // ********** 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.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 = 200/SCALE; //Sets the minimum distance one can pan into the scene controls.maxDistance = 200/SCALE; controls.rotateSpeed=0.1; 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, 0, 50); light.castShadow = true; var d = 45; light.shadowCameraLeft = d; light.shadowCameraRight = -d; light.shadowCameraTop = d; light.shadowCameraBottom = -d; scene.add(light); var helper = new THREE.CameraHelper( light.shadow.camera ); //scene.add( helper ); var width = 60; //width of ground var length = 80; //length of ground var geometry = new THREE.PlaneGeometry( width, length); //ThreeJS function to create plane geometry 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: 0x088A08, map:texture, opacity: 1, side: THREE.DoubleSide //Ground visible from both sides }); var ground = new THREE.Mesh( geometry, groundmat ); //Creates a mesh containing the geometry and groundmaterial just defined ground.receiveShadow = true; scene.add( ground ); //Adds ground to scene ground.position.y = -length/2; function spawnObject(mtlFile,objFile){ var myObject = new THREE.Object3D(); var mtlLoader = new THREE.MTLLoader(); //Creates an mtlLoader (to apply texture to 3d objects) mtlLoader.setCrossOrigin(true); mtlLoader.load( mtlFile, function( materials ) //Prepare to set color { materials.preload(); var objLoader = new THREE.OBJLoader(); //Creates an object loader (to load 3d objects) objLoader.setMaterials( materials ); objLoader.load( objFile, function ( object ) { myObject.add( object ); }); }); spawned = 1; return myObject; } myObject = spawnObject('https://dl.dropbox.com/s/vt5n9oggl8l61p7/Bow.mtl?dl=0','https://dl.dropbox.com/s/c4nj5toxvgcjzru/Bow.obj?dl=0'); myObject.rotation.x=PI/2; myObject.rotation.y=PI/2; myObject.position.z = 4; var arrowGeometry = new THREE.BoxGeometry( 0.1,5,0.1); var arrowMaterial = new THREE.MeshLambertMaterial( {color: 0xb35900} ); var myArrow = new THREE.Mesh( arrowGeometry, arrowMaterial ); myArrow.receiveShadow=true; myArrow.castShadow=true; myArrow.rotation.x=PI/2; myArrow.rotation.y=PI/2; myArrow.rotation.z=PI/2; myArrow.position.y=-0.83; myArrow.position.z = 4; var material = new THREE.LineBasicMaterial({ //ThreeJS function for setting line color color: 0xb30000, //Setting line-color to red transparent:true }); var linegeo = new THREE.Geometry(); //Setting the geometry of the lines (X,Y,Z) linegeo.vertices.push( new THREE.Vector3( 0, 0, 0 ), new THREE.Vector3( 0, 30, 0 ), //Lines are drawn between each vertices ); var line = new THREE.Line( linegeo, material ); //Drawing the line and setting the color myArrow.add( line ); //Adding the line to our scene. line.material.opacity=0.4; var group = new THREE.Group(); group.add( myObject ); group.add( myArrow ); //group.add( line ); scene.add( group ); var tipGeometry = new THREE.ConeGeometry( 0.10, 0.30, 32 ); var tipMaterial = new THREE.MeshLambertMaterial( {color: 0xC0C0C0} ); var myTip = new THREE.Mesh( tipGeometry, tipMaterial ); myArrow.add(myTip); myTip.receiveShadow=true; myTip.castShadow=true; myTip.position.y = 2.6; myFireButton.addEventListener("touchstart", powerArrow); //myFireButton.addEventListener("mousedown", powerArrow); function powerArrow(){ //niceSong.play(); //niceSong.volume=0.5; onClickDate = new Date(); activateAnimation = 1; } myFireButton.addEventListener("touchend", fireArrow); //myFireButton.addEventListener("mouseup", fireArrow); function fireArrow(){ currentDate = new Date(); activateAnimation = 0; poweringTime = (currentDate - onClickDate); if (poweringTime>=3000){ poweringTime = 3000; } arrowFired = 1; arrowArray[arrowCount].setAttribute("style", "display : none"); arrowCount = arrowCount - 1; myFireButton.setAttribute("style", "display : none"); onClickDate = new Date(); } function firingArrow(){ if (arrowFired == 1){ currentDate = new Date(); time = (currentDate - onClickDate); myArrow.position.y -= (poweringTime/6000); myArrow.position.z -= 1/2 * 0.0000981 * (time^2) if (myArrow.rotation.x <= PI-0.14){ myArrow.rotation.x += 1/2 * 0.00000981 * (time^2) } if (vector.z <= 0){ arrowFired = 0; power1.style.opacity = 0; power2.style.opacity = 0; power3.style.opacity = 0; myArrow.position.y=-0.83; myArrow.position.z = 4; myArrow.position.x = 0; myArrow.rotation.x=PI/2; myArrow.rotation.y=PI/2; myArrow.rotation.z=PI/2; myArrow.add(line); myFireButton.setAttribute("style", "display : inline"); } } } var balloonWidth = 1; var geometry = new THREE.SphereGeometry( balloonWidth,32,32 ); function spawnBalloon(hexColor,awayDistance,fromGroundDistance,toSideDistance){ var material = new THREE.MeshLambertMaterial({ color:hexColor, side: THREE.DoubleSide, }); var myBalloon = new THREE.Mesh( geometry, material ); myBalloon.receiveShadow=true; myBalloon.castShadow=true; scene.add( myBalloon ); myBalloon.position.y = awayDistance; myBalloon.position.z = fromGroundDistance; myBalloon.position.x = toSideDistance; return myBalloon; } balloonArray.push( spawnBalloon(0x0066cc,-30,3,5) ); // Blue ropeArray.push( createRope(-30,3,5) ); balloonArray.push( spawnBalloon(0xff1a1a,-15,6,-4) ); // Red ropeArray.push( createRope(-15,6,-4) ); balloonArray.push( spawnBalloon(0xffff00,-43,3,0) ); //Yellow ** -43 is max distance with shadow ropeArray.push( createRope(-43,3,0) ); spawnArray[0] = 1; spawnArray[1] = 1; spawnArray[2] = 1; function animatePower(){ if (activateAnimation == 1){ currentDate = new Date(); time = (currentDate - onClickDate)/1000; //if (time>=4){ // fireArrow(); //} power1.style.opacity = (time); if (power1.style.opacity >= 1 && fadingTimer == 0){ fadingTimer = time; } if (power1.style.opacity >= 1){ power2.style.opacity = (time-fadingTimer); } if (power2.style.opacity >= 1 && fadingTimer2 == 0){ fadingTimer2 = time; } if (power2.style.opacity >= 1){ power3.style.opacity = (time-fadingTimer2); } } } function detectCollision(){ for (i = 0; i < balloonArray.length; i++) if ( vector.x <= (balloonArray[i].position.x + balloonWidth) && vector.x >= (balloonArray[i].position.x - balloonWidth) ){ if ( vector.y <= (balloonArray[i].position.y + balloonWidth) && vector.y >= (balloonArray[i].position.y - balloonWidth) ){ if (vector.z <= (balloonArray[i].position.z + balloonWidth) && vector.z >= (balloonArray[i].position.z - balloonWidth) ){ scene.remove(balloonArray[i]); spawnArray[i] = 0; } } } } function spawnNewBalloons(){ for (i = 0; i < balloonArray.length; i++){ if (spawnArray[i] == 1){ stillMore = 1; } } if (stillMore == 0 && arrowFired == 0){ for (i = 0; i < balloonArray.length; i++){ scene.remove(ropeArray[i]); } balloonArray = []; ropeArray = []; balloonArray.push( spawnBalloon(0x0066cc,-35*Math.random()-8,6*Math.random()+1,20*Math.random()-10)); // Blue balloonArray.push( spawnBalloon(0xff1a1a,-35*Math.random()-8,6*Math.random()+1,20*Math.random()-10 )); // Red balloonArray.push( spawnBalloon(0xffff00,-35*Math.random()-8,6*Math.random()+1,20*Math.random()-10)); //Yellow ** -43 is max distance with shadow spawnArray[0] = 1; spawnArray[1] = 1; spawnArray[2] = 1; ropeArray.push( createRope(balloonArray[0].position.y,balloonArray[0].position.z,balloonArray[0].position.x)); ropeArray.push( createRope(balloonArray[1].position.y,balloonArray[1].position.z,balloonArray[1].position.x)); ropeArray.push( createRope(balloonArray[2].position.y,balloonArray[2].position.z,balloonArray[2].position.x)); for (i = 0; i

🏹3D Archery Game🏹