From f30c76d9cb05398002bc47fbdb167319b5442a47 Mon Sep 17 00:00:00 2001 From: michael-marynowicz Date: Thu, 17 Mar 2022 19:39:46 +0100 Subject: [PATCH] creation d'obstacles --- .vscode/settings.json | 3 + index.html | 2 +- js/main.js | 222 ++++++++++++++++++++++++------------------ 3 files changed, 130 insertions(+), 97 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/index.html b/index.html index 71bd469..ab0b3c7 100644 --- a/index.html +++ b/index.html @@ -1,7 +1,7 @@ - tp1 BabylonJS + Catch And Become Unique diff --git a/js/main.js b/js/main.js index b5466b9..40a554e 100644 --- a/js/main.js +++ b/js/main.js @@ -1,10 +1,12 @@ -let canvas; //http://127.0.0.1:5501/index.html +let canvas; let engine; let scene; let boule; let ground; +let ground2; +let followCamera; let nbrJeton=20; -// vars for handling inputs +let rotationOffset=180; let inputStates = {}; window.onload = startGame; @@ -13,70 +15,68 @@ function startGame() { canvas = document.querySelector("#myCanvas"); engine = new BABYLON.Engine(canvas, true); scene = createScene(); - //let bullet = createBullet(scene); - - // modify some default settings (i.e pointer events to prevent cursor to go - // out of the game window) + scene.jetons=[]; modifySettings(); - generateJetons(scene); - engine.runRenderLoop(() => { - let deltaTime = engine.getDeltaTime(); // remind you something ? - boule.move(); - collision(); - scene.render(); + //generation des obstacles + createPipe(50,0); + tremplin(-150,200) + stepByStep(5,100); + + createBoundingBox(boule); + generateJetons(); + collision(); + engine.runRenderLoop(() => { + + //followCamera.rotationOffset+=0.5; + if(nbrJeton>19){ + boule.move(); + scene.render(); + } + else{ + //boule.moveWithCollisions(new BABYLON.Vector3(0, 1*boule.speed, 0)); + boule.move(); + scene.render(); + } }); } function createScene() { let scene = new BABYLON.Scene(engine); - ground = createGround(scene); - let freeCamera = createFreeCamera(scene); - - boule = createBoule(scene); - - - // second parameter is the target to follow - let followCamera = createFollowCamera(scene, boule); + ground = createGround(0); + ground2 = createGround(200); + let freeCamera = createFreeCamera(); + boule = createBoule(); + followCamera = createFollowCamera( boule); scene.activeCamera = followCamera; - - createLights(scene); - + createLights(); return scene; } -function createGround(scene) { +function createGround(y) { const groundOptions = { width:2000, height:2000, subdivisions:20, minHeight:0, maxHeight:100, onReady: onGroundCreated}; - //scene is optional and defaults to the current scene const ground = BABYLON.MeshBuilder.CreateGroundFromHeightMap("gdhm", 'images/hmap1.png', groundOptions, scene); - function onGroundCreated() { const groundMaterial = new BABYLON.StandardMaterial("groundMaterial", scene); - groundMaterial.diffuseTexture = new BABYLON.Texture("images/grass.jpg"); + groundMaterial.diffuseTexture = new BABYLON.Texture("images/grass.png"); ground.material = groundMaterial; - // to be taken into account by collision detection + ground.position.y=y; ground.checkCollisions = true; - //groundMaterial.wireframe=true; } return ground; } -function createLights(scene) { - // i.e sun light with all light rays parallels, the vector is the direction. +function createLights() { let light0 = new BABYLON.DirectionalLight("dir0", new BABYLON.Vector3(-1, -1, 0), scene); } -function createFreeCamera(scene) { +function createFreeCamera() { let camera = new BABYLON.FreeCamera("freeCamera", new BABYLON.Vector3(0, 50, 0), scene); camera.attachControl(canvas); - // prevent camera to cross ground camera.checkCollisions = true; - // avoid flying with the camera camera.applyGravity = true; - // Add extra keys for camera movements - // Need the ascii code of the extra key(s). We use a string method here to get the ascii code camera.keysUp.push('z'.charCodeAt(0)); camera.keysDown.push('s'.charCodeAt(0)); camera.keysLeft.push('q'.charCodeAt(0)); @@ -89,69 +89,52 @@ function createFreeCamera(scene) { return camera; } -function createFollowCamera(scene, target) { +function createFollowCamera(target) { let camera = new BABYLON.FollowCamera("bouleFollowCamera", target.position, scene, target); camera.radius = 50; // how far from the object to follow camera.heightOffset = 14; // how high above the object to place the camera - camera.rotationOffset = 180; // the viewing angle + camera.rotationOffset = rotationOffset; // the viewing angle camera.cameraAcceleration = .1; // how fast to move camera.maxCameraSpeed = 5; // speed limit return camera; } let zMovement = 5; -function createBoule(scene) { +function createBoule() { boule = new BABYLON.MeshBuilder.CreateSphere("heroboule", {diameter : 7}, scene); let bouleMaterial = new BABYLON.StandardMaterial("bouleMaterial", scene); bouleMaterial.diffuseColor = new BABYLON.Color3.White; bouleMaterial.emissiveColor = new BABYLON.Color3.Black; boule.material = bouleMaterial; - - // By default the box/boule is in 0, 0, 0, let's change that... boule.position.y = 3.5; boule.speed = 1; boule.frontVector = new BABYLON.Vector3(0, 0, 1); - boule.move = () => { - //boule.position.z += -1; // speed should be in unit/s, and depends on - // deltaTime ! - - // if we want to move while taking into account collision detections - // collision uses by default "ellipsoids" + boule.move = () => { //TODO bien detecter les colisions car la ce n'est pas assez precis let yMovement = 0; - + if (boule.position.y > 2) { zMovement = 0; yMovement = -2; - } - //boule.moveWithCollisions(new BABYLON.Vector3(0, yMovement, zMovement)); - - + } if(inputStates.up) { - //boule.moveWithCollisions(new BABYLON.Vector3(0, 0, 1*boule.speed)); boule.moveWithCollisions(boule.frontVector.multiplyByFloats(boule.speed, boule.speed, boule.speed)); - } + } if(inputStates.down) { - //boule.moveWithCollisions(new BABYLON.Vector3(0, 0, -1*boule.speed)); boule.moveWithCollisions(boule.frontVector.multiplyByFloats(-boule.speed, -boule.speed, -boule.speed)); - - } + } if(inputStates.left) { - //boule.moveWithCollisions(new BABYLON.Vector3(-1*boule.speed, 0, 0)); boule.rotation.y -= 0.02; boule.frontVector = new BABYLON.Vector3(Math.sin(boule.rotation.y), 0, Math.cos(boule.rotation.y)); - } + } if(inputStates.right) { - //boule.moveWithCollisions(new BABYLON.Vector3(1*boule.speed, 0, 0)); boule.rotation.y += 0.02; boule.frontVector = new BABYLON.Vector3(Math.sin(boule.rotation.y), 0, Math.cos(boule.rotation.y)); } if(inputStates.space){ - } - - } + } return boule; } @@ -160,17 +143,12 @@ window.addEventListener("resize", () => { }); function modifySettings() { - // as soon as we click on the game window, the mouse pointer is "locked" - // you will have to press ESC to unlock it - - // key listeners for the boule inputStates.left = false; inputStates.right = false; inputStates.up = false; inputStates.down = false; inputStates.space = false; - - //add the listener to the main, window object, and update the states + window.addEventListener('keydown', (event) => { if ((event.key === "ArrowLeft") || (event.key === "q")|| (event.key === "Q")) { inputStates.left = true; @@ -185,7 +163,6 @@ function modifySettings() { } }, false); - //if the key will be released, change the states object window.addEventListener('keyup', (event) => { if ((event.key === "ArrowLeft") || (event.key === "q")|| (event.key === "Q")) { inputStates.left = false; @@ -197,64 +174,117 @@ function modifySettings() { inputStates.down = false; } else if (event.key === " ") { inputStates.space = false; - } - + } + }, false); } -function createJeton(i,scene){ - let xrand = Math.floor(Math.random()*500 - 250); - let zrand = Math.floor(Math.random()*500 - 250); +function createJeton(i,x,y,z){ // cree un jeton aux coordonnées (x,y,z) let jeton = new BABYLON.MeshBuilder.CreateSphere("jeton_"+i, {diameter : 2}, scene); let jetonMaterial = new BABYLON.StandardMaterial("jetonMaterial", scene); - jeton.position.y = 1; - jeton.position.x = xrand; - jeton.position.z = zrand; + jeton.position.y = y; + jeton.position.x = x; + jeton.position.z = z; jetonMaterial.emissiveColor = new BABYLON.Color3.Blue; jeton.material = jetonMaterial; - jeton.checkCollisions=false; - + jeton.checkCollisions=true; createBoundingBox(jeton); - createBoundingBox(boule); return jeton; } -function createBoundingBox(elt){ +function createBoundingBox(elt){ // fonction pour generer les bounding box let eltMin = elt.getBoundingInfo().boundingBox.minimum; let eltMax = elt.getBoundingInfo().boundingBox.maximum; - let bouleMin = ground.getBoundingInfo().boundingBox.minimum; - let bouleMax = ground.getBoundingInfo().boundingBox.maximum; + let groundMin = ground.getBoundingInfo().boundingBox.minimum; + let groundMax = ground.getBoundingInfo().boundingBox.maximum; - let newMin = BABYLON.Vector3.Minimize(eltMin, bouleMin); - let newMax = BABYLON.Vector3.Maximize(eltMax, bouleMax); + let newMin = BABYLON.Vector3.Minimize(eltMin, groundMin); + let newMax = BABYLON.Vector3.Maximize(eltMax, groundMax); elt.setBoundingInfo(new BABYLON.BoundingInfo(newMin, newMax)); elt.showBoundingBox = false; } -function generateJetons(scene){ - scene.jeton = [] +function generateJetons(){ for (let i = 0; i < nbrJeton; i++) { - scene.jeton[i] = createJeton(i,scene); + let xrand = Math.floor(Math.random()*500 - 250); + let zrand = Math.floor(Math.random()*500 - 250); + console.log(i) + scene.jetons[i] = createJeton(i,xrand,1,zrand); } } -function collision(){ +function collision(){// detecte quand la boule rentre en colision avec un jeton boule.actionManager = new BABYLON.ActionManager(scene); - // register an action for when the cannonball intesects a dude, so we need to iterate on each dude - scene.jeton.forEach(jeton => { + scene.jetons.forEach(jeton => { boule.actionManager.registerAction(new BABYLON.ExecuteCodeAction( {trigger : BABYLON.ActionManager.OnIntersectionEnterTrigger, - parameter : jeton}, // dude is the mesh, Dude is the instance if Dude class that has a bbox as a property named bounder. - // see Dude class, line 16 ! dudeMesh.Dude = this; + parameter : jeton}, () => { - //console.log("HIT !") jeton.dispose(); - //cannonball.dispose(); // don't work properly why ? Need for a closure ? + nbrJeton-=1; } )); }); } +//############ Creation des obstacles ################### +function stepByStep(x,z){ + createStep(20,20,0,x+10,5,z); + createStep(10,10,1,x+33,10,z); + createStep(5,5,2,x+48,15,z); + createStep(10,10,3,x+63,10,z); + createStep(20,20,4,x+83,5,z); + scene.jetons[nbrJeton]=createJeton(nbrJeton,x+48,20,z); + nbrJeton-=1; + +} + +function createStep(w,s,id,x,y,z){ + let step = new BABYLON.MeshBuilder.CreateBox("step_"+id,{size:s,width : w,height:2},scene); + step.material = new BABYLON.StandardMaterial("stepMaterial", scene); + step.checkCollisions = true; + step.position.x=x; + step.position.y=y; + step.position.z = z; + createBoundingBox(step); + +} + +function createPipe(x,z){ + const pipe = BABYLON.MeshBuilder.CreateCylinder("cylinder", {height:40, size:50,diameterTop:1,diameterBottom:60}); + pipe.position.x=x; + pipe.position.z=z; + pipe.position.y=1; + pipe.checkCollisions = true; + createBoundingBox(pipe); + scene.jetons[nbrJeton]=createJeton(nbrJeton,x,24,z); + nbrJeton-=1; +} + +function tremplin(x,z){ + const curve = BABYLON.MeshBuilder.CreateSphere("sphere", {arc: 0.25,diameter:60, sideOrientation: 2}); + curve.position.x=x; + curve.position.z=z; + curve.position.y=27; + createBoundingBox(curve); + curve.checkCollisions=true; + + const torus = BABYLON.MeshBuilder.CreateTorus("torus", {thickness: 0.85, diameter: 10}); + torus.position.z=z+85; + torus.position.x=x-20; + torus.position.y = 36; + torus.rotation = new BABYLON.Vector3(0, 0, 3.1); + createBoundingBox(torus); + torus.checkCollisions=true; + + scene.jetons[nbrJeton]=createJeton(nbrJeton,torus.position.x,torus.position.y,torus.position.z=z+25); + nbrJeton-=1; + +} + + + +