done

README.md

@@ -1,5 +1,14 @@
 # XO-Game-Three.js
 
+
+![Settings Screenshot](pics/settings.PNG)
+![Screenshot 1](pics/Screenshot%202024-04-08%20205604.jpg)
+![Screenshot 2](pics/Screenshot%202024-04-08%20205547.jpg)
+![Screenshot 3](pics/Screenshot%202024-04-08%20205410.jpg)
+![Capture](pics/Capture.PNG)
+![Image 1](pics/3.PNG)
+![Image 2](pics/2.PNG)
+
 ## Introduction
 Do you remember playing tic-tac-toe (X and O) when you were bored growing up? Well, imagine taking that classic game to a whole new level of fun with Three.js! This project implements the X and O game in JavaScript using Three.js, adding a 3D experience, physics, and even some music. Get ready to enjoy a modern twist on a timeless game!
 

game.js

@@ -1,7 +0,0 @@
-//to do 
-//to make physical linking points
-//if all linking points are same text 'x' or 'o';
-//turn the sqares black and do some animation with the text?
-//for each there is one points.lol
-//for now thats it but for the final game i want to make even a computer.**)
-

grids.js

@@ -1,22 +1,27 @@
 let selectedColorPalette;
 let color;
+const colorMap = {
+    "Celestial Crimson": [0x811453, 0xbcd4e6, 0xfff5ee, 0x333333],
+    "Starlight Silver": [0x414e6d, 0x788995, 0xf5f5f5, 0x2c3e50],
+    "Galactic Teal": [0x034752, 0x3a5f6e, 0xe0f2f1, 0x1abc9c],
+    "Nebula Purple": [0x490092, 0x835a9b, 0xe6e6fa, 0x8e44ad],
+    "Cosmic Blue": [0x00171f, 0x16343a, 0xc6e2ff, 0x3498db],
+    "original": [0x800000, 0xd3d3d3, 0xfff5ee, 0x333333]
+};
+
 
-function hexToRgb(hex) {
+
+
+ function hexToRgb(hex) {
     return {
         r: ((hex >> 16) & 255) / 255,
         g: ((hex >> 8) & 255) / 255,
         b: (hex & 255) / 255
     };
 }
 
-const colorMap = {
-    "Celestial Crimson": [0x811453, 0xbcd4e6, 0xfff5ee, 0x333333],
-    "Starlight Silver": [0x414e6d, 0x788995, 0xf5f5f5, 0x2c3e50],
-    "Galactic Teal": [0x034752, 0x3a5f6e, 0xe0f2f1, 0x1abc9c],
-    "Nebula Purple": [0x490092, 0x835a9b, 0xe6e6fa, 0x8e44ad],
-    "Cosmic Blue": [0x00171f, 0x16343a, 0xc6e2ff, 0x3498db],
-    "original": [0xB22222, 0xd3d3d3, 0xfff5ee, 0x333333]
-};
+
+
 
 function setColorFromPalette() {
     const selectedPalette = document.getElementById('colorSelect');
@@ -74,16 +79,6 @@ function loadThemeSelection() {
 
 
 
-
-
-
-
-
-
-
-
-
-
 let lineMaterial = new THREE.LineBasicMaterial({
     linewidth: 30,
 });

htmlcube.js

@@ -2,7 +2,7 @@ const scene = new THREE.Scene();
 const width = window.innerWidth;
 const height = window.innerHeight;
 const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
-camera.position.z = -6;
+camera.position.z = 6;
 
 
 const renderer = new THREE.WebGLRenderer();
@@ -55,8 +55,6 @@ window.addEventListener('resize', function () {
 function animate() {
     requestAnimationFrame(animate);
     renderer.render(scene, camera);
-    xno();
-    updateFragments()
 }
 
 animate();

settings.js

@@ -1,16 +1,21 @@
-let isSettingsOpen = false;
 const settingsButton = document.getElementById("settingsButton");
 const modal = document.getElementById("settingsModal");
 const closeButton = document.querySelector(".close");
+const volumeInput = document.getElementById("volume");
+let isSettingsOpen = false;
+
+
 
 settingsButton.addEventListener("click", toggleSettings);
 closeButton.addEventListener("click", closeSettings);
 document.addEventListener("keydown", handleKeyPress);
+volumeInput.addEventListener("input", updateVolume);
 
 function toggleSettings() {
     isSettingsOpen = !isSettingsOpen;
     if (isSettingsOpen) {
         openSettings();
+        stopgame();
     } else {
         closeSettings();
         applySettings();
@@ -19,11 +24,16 @@ function toggleSettings() {
 
 function openSettings() {
     modal.style.display = "block";
+    const overlay = document.getElementById("overlay");
+    overlay.style.display = "block";
+    stopgame();
 }
 
 function closeSettings() {
     isSettingsOpen = false;
     modal.style.display = "none";
+    const overlay = document.getElementById("overlay");
+    overlay.style.display = "none";
 }
 
 function handleKeyPress(event) {
@@ -32,3 +42,7 @@ function handleKeyPress(event) {
         applySettings();
     }
 }
+
+function updateVolume() {
+    const volume = volumeInput.value / 100;
+    sound.setVolume(volume);}

sqaureobject.js

@@ -1,16 +1,27 @@
+ const colorMap = {
+    "Celestial Crimson": [0x811453, 0xbcd4e6, 0xfff5ee, 0x333333],
+    "Starlight Silver": [0x414e6d, 0x788995, 0xf5f5f5, 0x2c3e50],
+    "Galactic Teal": [0x034752, 0x3a5f6e, 0xe0f2f1, 0x1abc9c],
+    "Nebula Purple": [0x490092, 0x835a9b, 0xe6e6fa, 0x8e44ad],
+    "Cosmic Blue": [0x00171f, 0x16343a, 0xc6e2ff, 0x3498db],
+    "original": [0x800000, 0xd3d3d3, 0xfff5ee, 0x333333]
+};
+
+
+  function hexToRgb(hex) {
+    return {
+        r: ((hex >> 16) & 255) / 255,
+        g: ((hex >> 8) & 255) / 255,
+        b: (hex & 255) / 255
+    };
+}
+
 let selectedColorPalette;
 let color; 
 let squares = [];
 
 let squareMaterial = new THREE.MeshBasicMaterial({ side: THREE.DoubleSide });
 
-function hexToRgb(hex) {
-    return {
-        r: ((hex >> 16) & 255) / 255, 
-        g: ((hex >> 8) & 255) / 255, 
-        b: (hex & 255) / 255         
-    };
-}
 
 function saveThemeSelection(theme) {
     localStorage.setItem('selectedTheme', theme);
@@ -20,14 +31,7 @@ function loadThemeSelection() {
     return localStorage.getItem('selectedTheme');
 }
 
-const colorMap = {
-    "Celestial Crimson": [0x811453, 0xbcd4e6, 0xfff5ee, 0x333333],
-    "Starlight Silver": [0x414e6d, 0x788995, 0xf5f5f5, 0x2c3e50],
-    "Galactic Teal": [0x034752, 0x3a5f6e, 0xe0f2f1, 0x1abc9c],
-    "Nebula Purple": [0x490092, 0x835a9b, 0xe6e6fa, 0x8e44ad],
-    "Cosmic Blue": [0x00171f, 0x16343a, 0xc6e2ff, 0x3498db],
-    "original": [0xB22222, 0xd3d3d3, 0xfff5ee, 0x333333]
-};
+
 
 function setColorFromPalette() {
     const selectedPalette = document.getElementById('colorSelect');
@@ -132,11 +136,11 @@ function create_squares() {
         new THREE.Vector3(0.76, -1.16, 0.76)      // square54
     ];
 
-    const squarenumb = squarePositions.length; // Get the total number of squares
+    const squarenumb = squarePositions.length; 
     for (let i = 1; i <= squarenumb; i++) {
         const square = new THREE.Mesh(squareGeometry, squareMaterial); 
-        square.position.copy(squarePositions[i - 1]); // Set the position of the square
-        square.name = "square" + i; // Assign a name to the square
+        square.position.copy(squarePositions[i - 1]); 
+        square.name = "square" + i;
         scene.add(square); 
         squares.push(square);
     }