refactoring

package.json

@@ -36,4 +36,4 @@
     "three": "^0.163.0",
     "three-orbit-controls": "^82.1.0"
   }
-}
+}

src/BuildingBlocks/GolfHole_DetectionPoint.mjs

@@ -0,0 +1,24 @@
+import * as THREE from "three";
+import * as CANNON from "cannon-es";
+import { engine } from "../engine.mjs";
+
+class GolfHole_Detection{
+    constructor_detectionPoint(x,y,z, radiusTop, RadiusBottom ,Height) {
+        var geometry = new THREE.CylinderGeometry(radiusTop, RadiusBottom ,Height);
+        var material = new THREE.MeshBasicMaterial({ color: 0xff0000, transparent: true, opacity: 1 });
+        var ellipse = new THREE.Mesh(geometry, material);
+        ellipse.position.set(x,y,z);
+        engine.scene.add(ellipse);
+
+        const groundMaterialPhysics2 = new CANNON.Material(); 
+        groundMaterialPhysics2.restitution = 1; 
+        var cylinderShape = new CANNON.Cylinder(radiusTop, RadiusBottom, Height, 32); 
+        var cylinderBody = new CANNON.Body({ mass: 0, material: groundMaterialPhysics2 });
+        cylinderBody.addShape(cylinderShape);
+        cylinderBody.position.set(x, y, z);
+        console.log(cylinderBody.position, ellipse.position);
+        cylinderBody.type = CANNON.Body.STATIC;
+        engine.cannonjs_world.addBody(cylinderBody);
+        }
+}
+export { GolfHole_Detection };

src/firingTheBall.mjs

@@ -3,6 +3,9 @@ import { playRandomSoundEffect, playMusic } from "./Sounds.mjs";
 import { ballBody } from "./ball.mjs";
 import { menuConfig } from "./menu.mjs";
 
+let lastShotTime = 0;
+const cooldownTime = 10 * 500; // 10 seconds in milliseconds
+
 let firingTheBall = {
   power: 1,
   direction: 0,
@@ -56,26 +59,36 @@ function initShootingUI() {
 
 
 function shoot() {
+  const currentTime = Date.now();
+
+  // Check if enough time has passed since the last shot
+  if (currentTime - lastShotTime < cooldownTime) {0
+    console.log("Cooldown period active. Ostavat ti owe", (currentTime - lastShotTime)/1000, "sekundi do 5" );
+    return;
+  }
+
+  // Reset last shot time to current time
+  lastShotTime = currentTime;
+
   firingTheBall.isBallShot = true;
-  if(menuConfig.sfxEnabled){ //there is no pause menu so this should work for now
-    playRandomSoundEffect();
+  if (menuConfig.sfxEnabled) { 
+    playRandomSoundEffect(); 
   }
   firingTheBall.shotFromWhere.x = ballBody.position.x;
   firingTheBall.shotFromWhere.y = ballBody.position.y;
   firingTheBall.shotFromWhere.z = ballBody.position.z;
 
-  // Is STATIC
   if (ballBody.type == CANNON.Body.STATIC) {
     ballBody.type = CANNON.Body.DYNAMIC;
   }
 
-  let calPower = firingTheBall.power*10;
+  let calPower = firingTheBall.power;
   let calDirection = firingTheBall.direction;
 
-  // let impulse = new CANNON.Vec3(velocityX, velocityY, velocityZ);
   let impulse = new CANNON.Vec3(Math.cos(calDirection) * calPower, 0, Math.sin(calDirection) * calPower);
   let relativePoint = new CANNON.Vec3();
   ballBody.applyImpulse(impulse, relativePoint);
 }
 
+
 export { firingTheBall };

src/game.mjs

@@ -1,27 +1,28 @@
 import { engine } from "./engine.mjs";
 import * as THREE from "three";
 import * as CANNON from "cannon-es";
-import OrbitControls_ from 'three-orbit-controls';
+import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+import { areColliding, randomInteger, drawLine, drawImage, isFunction, createButton } from './utils.mjs';
+import { firingTheBall } from "./firingTheBall.mjs";
+import { Menu, initMenu, menuConfig } from "./menu.mjs";
+import { initSoundEvents, playRandomSoundEffectFall } from "./Sounds.mjs";
+    // Visuals for the game
 import { Ramp } from "./BuildingBlocks/Ramp.mjs";
 import { BuildingBlock } from "./BuildingBlocks/BuildingBlock.mjs";
 import { MovingPlatform } from "./BuildingBlocks/MovingPlatform.mjs";
 import { Cylinder } from "./BuildingBlocks/Cylinder.mjs";
 import { GolfHole } from "./BuildingBlocks/GolfHole.mjs";
-//Visuals for the game
+import { GolfHole_Detection } from "./BuildingBlocks/GolfHole_DetectionPoint.mjs";
 import { Skybox, skybox_texture } from "./asset_loading/assets_3d.mjs";
-import { firingTheBall } from "./firingTheBall.mjs";
-import { initSoundEvents,playRandomSoundEffectFall } from "./Sounds.mjs"
-import { createBall, ballMesh, ballBody,deleteBall } from "./ball.mjs";
+import { createBall, ballMesh, ballBody, deleteBall} from "./ball.mjs";
 import { createNewEmitter, updateEmitters } from "./BuildingBlocks/Particle.mjs";
-import { Menu, initMenu, menuConfig } from "./menu.mjs";
-import { areColliding } from "./utils.mjs";
-// import { createHillsBufferGeometry } from "./Terrain/Hills.mjs";
-import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
-import { forEach } from "lodash";
-import {flag} from "./BuildingBlock_no_collision/flag.mjs"
-import { addTreesToGround, createHillsBufferGeometry } from "./Terrain/Hills.mjs";
+import { addTreesToGround, createHillsBufferGeometry } from './Terrain/Hills.mjs';
 import { Ice } from "./BuildingBlocks/Iceblock.mjs";
+import {flag} from "./BuildingBlock_no_collision/flag.mjs"
+
 const orbitControls = true;
+let controls = null;
+
 
 function createGround() {
     // Create ground plane
@@ -40,12 +41,15 @@ function createGround() {
 }
 
 function initCamera() {
+    createButton("Play",275,175,250,100,"red",50,"white");
+
     // Init camera
     engine.camera.position.set(0, 20, 80);
     engine.camera.lookAt(0, 10, 0);
 
-    //change far frustum plane to account for skybox
+    // Change far frustum plane to account for skybox
     engine.camera.far = 10000;
+    engine.camera.updateProjectionMatrix();
 }
 
 function initLights() {
@@ -96,30 +100,39 @@ function initBallDirectionArrows() {
     }
 }
 let time = 0, obx = 0, oby = 0, obz = 0;
-let controls = null;
 function initGame() {
-    //initSoundEvents();
+    // initSoundEvents();
     if (menuConfig.showMenu) {
         initMenu(initLevel);
     } else {
         menuConfig.gameStarted = true;
         initSoundEvents();
         initLevel();
-        firingTheBall.initUI();
+
     }
+
     // Create ball and attach to window
     createBall(5, 30, 0);
 
     let groundMesh = createHillsBufferGeometry(10, 10, 100, 5, 20);
     // Init slider and buttons for firing the ball
     addTreesToGround(groundMesh, 100);
+
+    // Setup camera position
+    initCamera();
+
     // Init orbit controls
     if (orbitControls) {
         controls = new OrbitControls(engine.camera, engine.canvas2d);
         controls.target = ballMesh.position;
-        controls.minDistance= 9;
-        controls.maxDistance = 30;
-        controls.distance = 3;
+        controls.maxDistance = 150
+        controls.enableDamping = true
+        controls.dampingFactor = .1
+        if (menuConfig.gameStarted == false) {
+            controls.autoRotate = true
+            controls.autoRotateSpeed = 0.5
+
+        }
     }
 
     // Setup camera position
@@ -181,18 +194,22 @@ function initGame() {
 
 
 function make_the_ball_static_when_is_not_moving() {
-    if (time % 10 == 0) {
-        if (ballBody.velocity.length() < 0.5) {
-            //raycast to know if the ball is on the ground and should actually stop
-            let ray = new CANNON.Ray(new CANNON.Vec3(ballBody.position.x,ballBody.position.y-1.1,ballBody.position.z), new CANNON.Vec3(ballBody.position.x,ballBody.position.y-1.2,ballBody.position.z));
-            if(ray.intersectWorld(engine.cannonjs_world,{})){
-                ballBody.type = CANNON.Body.STATIC;
-                firingTheBall.isBallShot = false;
-            }
+    const velocityThreshold = 0;
+    const timeInterval = 10;
+
+    if (time % timeInterval === 0 && ballBody.velocity.length() < velocityThreshold) {
+        const groundRay = new CANNON.Ray(
+            new CANNON.Vec3(ballBody.position.x, ballBody.position.y - 1.1, ballBody.position.z),
+            new CANNON.Vec3(ballBody.position.x, ballBody.position.y - 1.2, ballBody.position.z)
+        );
+
+        const intersect = groundRay.intersectWorld(engine.cannonjs_world, {});
+
+        if (intersect) {
+            ballBody.type = CANNON.Body.STATIC;
+            firingTheBall.isBallShot = false;
         }
-        obx = Math.abs(ballMesh.position.x);
-        oby = Math.abs(ballMesh.position.y);
-        obz = Math.abs(ballMesh.position.z);
+
     }
 }
 

src/menu.mjs

@@ -64,6 +64,7 @@ class Menu {
         if(menuConfig.musicEnabled){ //there is no pause menu so this should work for now
             playMusic();
             firingTheBall.initUI();
+
         }
     }
     toggleMusic(){

src/resetButton.mjs

@@ -0,0 +1,32 @@
+import { engine } from "./engine.mjs";
+import { createButton, areColliding } from "./utils.mjs";
+import { ballBody } from "./ball.mjs";
+import { firingTheBall } from "./firingTheBall.mjs";
+import { menuConfig } from "./menu.mjs";
+
+function resetBallPosition() {
+    ballBody.position.set(11, 30, 0);
+    ballBody.velocity.set(0, 0, 0);
+    ballBody.angularVelocity.set(0, 0, 0);
+    ballBody.type = CANNON.Body.STATIC;
+    firingTheBall.isBallShot = false;
+}
+
+function createResetButton() {
+    engine.draw2d = () => {
+        engine.context2d.clearRect(0, 0, engine.canvas2d.width, engine.canvas2d.height);
+        if (menuConfig.gameStarted) {
+            createButton("Reset", 50, 50, 100, 50, "blue", 20, "white");
+        }
+    };
+
+    engine.onmouseup = (e) => {
+        let mouseX = e.clientX;
+        let mouseY = e.clientY;
+        if (menuConfig.gameStarted && areColliding(mouseX, mouseY, 1, 1, 50, 50, 100, 50)) {
+            resetBallPosition();
+        }
+    };
+}
+
+export { createResetButton };

src/utils.mjs

@@ -29,15 +29,35 @@ function drawImage(myImageObject, x, y, xs, ys) {
 function isFunction(f) {
     return typeof (f) == "function";
 }
+function drawText(text, x, y, fontsize = 16, textCol = "black", font = "Arial") {
+    const ctx = engine.context2d;
+    ctx.fillStyle = textCol;
+    ctx.font = `${fontsize}px ${font}`;
+    ctx.textAlign = "left";
+    ctx.textBaseline = "top";
+    ctx.fillText(text, x, y);
+}
 
-function createButton(text,x,y,w,h,buttonCol,fontsize,textCol, font = "Arial"){
-    //Create background
-    engine.context2d.fillStyle = buttonCol;
-    engine.context2d.fillRect(x,y,w,h);
-    //Create text
-    engine.context2d.fillStyle = textCol;
-    engine.context2d.font = fontsize + "px " + font;
-    //i do not know why this works, it but it just does
-    engine.context2d.fillText(text,x + w/2 - (text.length*fontsize)/4, y + h/2 + fontsize/3); 
+function createButton(text, x, y, w, h, buttonCol, fontsize, textCol, borderRadius = 10, font = "Arial") {
+    const ctx = engine.context2d;
+    ctx.fillStyle = buttonCol;
+    ctx.beginPath();
+    ctx.moveTo(x + borderRadius, y);
+    ctx.lineTo(x + w - borderRadius, y);
+    ctx.quadraticCurveTo(x + w, y, x + w, y + borderRadius);
+    ctx.lineTo(x + w, y + h - borderRadius);
+    ctx.quadraticCurveTo(x + w, y + h, x + w - borderRadius, y + h);
+    ctx.lineTo(x + borderRadius, y + h);
+    ctx.quadraticCurveTo(x, y + h, x, y + h - borderRadius);
+    ctx.lineTo(x, y + borderRadius);
+    ctx.quadraticCurveTo(x, y, x + borderRadius, y);
+    ctx.closePath();
+    ctx.fill();
+
+    ctx.fillStyle = textCol;
+    ctx.font = `${fontsize}px ${font}`;
+    ctx.textAlign = "center";
+    ctx.textBaseline = "middle";
+    ctx.fillText(text, x + w / 2, y + h / 2);
 }
-export {areColliding, randomInteger, drawLine, drawImage, isFunction, createButton};
+export { areColliding, randomInteger, drawLine, drawImage, isFunction, createButton, drawText };