Initial commit

README.md

@@ -1,2 +1,38 @@
 # XO-Game-Three.js
-X and O game implemented in java script using three.js
+
+## 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!
+
+## Features
+- X and O game implemented in JavaScript.
+- Built using Three.js for a 3D experience.
+- Incorporates physics for realistic interactions.
+- Includes background music for added enjoyment.
+
+## How to Play
+1. Open the game in your web browser.
+2. Click on a square to place your X or O.
+3. Try to get three of your symbols in a row, either horizontally, vertically, or diagonally, before your opponent does.
+4. Enjoy the immersive 3D experience and lively background music as you play!
+
+## Technologies Used
+- JavaScript
+- Three.js
+- HTML/CSS
+- Web Audio API (for music)
+
+## Installation
+To run the game locally:
+1. Clone this repository to your local machine.
+2. Open the `index.html` file in your web browser.
+3. Start playing and have fun!
+
+## Credits
+This project was created by [Your Name] as a fun way to explore game development with Three.js.
+
+Special thanks to:
+- The creators of Three.js for providing an amazing library for 3D graphics in the browser.
+- [Name of music artist] for the awesome background music used in the game.
+
+## License
+This project is licensed under the [MIT License](LICENSE).

Regular.json

@@ -0,0 +1,136 @@
+[{
+  "version": "1.0",
+  "image": {
+    "name": "/home/videosdownloader/public_html/image/public/uploadt/PressStart2P-Regular.ttf",
+    "baseName": "PressStart2P-Regular.ttf",
+    "format": "TTF",
+    "formatDescription": "TTF",
+    "class": "DirectClass",
+    "geometry": {
+      "width": 800,
+      "height": 480,
+      "x": 0,
+      "y": 0
+    },
+    "units": "Undefined",
+    "type": "GrayscaleAlpha",
+    "baseType": "Undefined",
+    "endianness": "Undefined",
+    "colorspace": "sRGB",
+    "depth": 16,
+    "baseDepth": 16,
+    "channelDepth": {
+      "alpha": 1,
+      "red": 16,
+      "green": 16,
+      "blue": 1
+    },
+    "pixels": 1536000,
+    "imageStatistics": {
+      "Overall": {
+        "min": 0,
+        "max": 65535,
+        "mean": 56575.9,
+        "median": 65535,
+        "standardDeviation": 18611.1,
+        "kurtosis": 2.53508,
+        "skewness": -2.11278,
+        "entropy": 0.121392
+      }
+    },
+    "channelStatistics": {
+      "alpha": {
+        "min": 65535,
+        "max": 65535,
+        "mean": 65535,
+        "median": 65535,
+        "standardDeviation": 0,
+        "kurtosis": 1.6384e+52,
+        "skewness": 9.375e+35,
+        "entropy": 0
+      },
+      "red": {
+        "min": 0,
+        "max": 65535,
+        "mean": 53589.6,
+        "median": 65535,
+        "standardDeviation": 24814.8,
+        "kurtosis": 0.762098,
+        "skewness": -1.64391,
+        "entropy": 0.161856
+      },
+      "green": {
+        "min": 0,
+        "max": 65535,
+        "mean": 53589.6,
+        "median": 65535,
+        "standardDeviation": 24814.8,
+        "kurtosis": 0.762098,
+        "skewness": -1.64391,
+        "entropy": 0.161856
+      },
+      "blue": {
+        "min": 0,
+        "max": 65535,
+        "mean": 53589.6,
+        "median": 65535,
+        "standardDeviation": 24814.8,
+        "kurtosis": 0.762098,
+        "skewness": -1.64391,
+        "entropy": 0.161856
+      }
+    },
+    "renderingIntent": "Perceptual",
+    "gamma": 0.454545,
+    "chromaticity": {
+      "redPrimary": {
+        "x": 0.64,
+        "y": 0.33
+      },
+      "greenPrimary": {
+        "x": 0.3,
+        "y": 0.6
+      },
+      "bluePrimary": {
+        "x": 0.15,
+        "y": 0.06
+      },
+      "whitePrimary": {
+        "x": 0.3127,
+        "y": 0.329
+      }
+    },
+    "matteColor": "#BDBDBD",
+    "backgroundColor": "#FFFFFF",
+    "borderColor": "#DFDFDF",
+    "transparentColor": "#00000000",
+    "interlace": "None",
+    "intensity": "Undefined",
+    "compose": "Over",
+    "pageGeometry": {
+      "width": 800,
+      "height": 480,
+      "x": 0,
+      "y": 0
+    },
+    "dispose": "Undefined",
+    "iterations": 0,
+    "compression": "Undefined",
+    "orientation": "Undefined",
+    "properties": {
+      "date:create": "2023-12-27T23:19:31+00:00",
+      "date:modify": "2023-12-27T23:19:31+00:00",
+      "signature": "19e30915bca39a199bfbcff3d13a217da331345064522dfa213a6fddac4b025c"
+    },
+    "artifacts": {
+      "mvg:vector-graphics": "push graphic-context\n viewbox 0 0 800 480\n font-size 18\n text 10,20 'abcdefghijklmnopqrstuvwxyz\nABCDEFGHIJKLMNOPQRSTUVWXYZ\n0123456789.:,;(*!?}^)#${%^&-+@\n'\n font-size 18\n text 10,144 '12'\n font-size 12\n text 50,144 'That which does not destroy me, only makes me stronger.'\n font-size 18\n text 10,174 '18'\n font-size 18\n text 50,174 'That which does not destroy me, only makes me stronger.'\n font-size 18\n text 10,210 '24'\n font-size 24\n text 50,210 'That which does not destroy me, only makes me stronger.'\n font-size 18\n text 10,258 '36'\n font-size 36\n text 50,258 'That which does not destroy me, only makes me stronger.'\n font-size 18\n text 10,318 '48'\n font-size 48\n text 50,318 'That which does not destroy me, only makes me stronger.'\n font-size 18\n text 10,390 '60'\n font-size 60\n text 50,390 'That which does not destroy me, only makes me stronger.'\n font-size 18\n text 10,474 '72'\n font-size 72\n text 50,474 'That which does not destroy me, only makes me stronger.'\npop graphic-context"
+    },
+    "tainted": false,
+    "filesize": "116008B",
+    "numberPixels": "384000",
+    "pixelsPerSecond": "2.28673MB",
+    "userTime": "0.180u",
+    "elapsedTime": "0:01.167",
+    "version": "ImageMagick 7.0.10-58 Q16 x86_64 2021-01-14 https://imagemagick.org"
+  }
+}]

game.js

@@ -0,0 +1,7 @@
+//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,63 +1,68 @@
 const lineMaterial = new THREE.LineBasicMaterial({
-    color: '#00008B',
+    color: '',
     linewidth: 10,
 });
 
-
-const sideLineGeometries = [
-
-    new THREE.BufferGeometry().setFromPoints([
+const lineGeometry1 =new THREE.BufferGeometry().setFromPoints([
         new THREE.Vector3(1.15, 0.38, -1.15),
         new THREE.Vector3(-1.15, 0.38, -1.15)
-    ]),
-
+    ])
+    const line1 = new THREE.Line(lineGeometry1, lineMaterial);
+   scene.add(line1);//1st side (1,0)and horizndal line1(1,1).
 
-    new THREE.BufferGeometry().setFromPoints([
+    const lineGeometry2 =new THREE.BufferGeometry().setFromPoints([
         new THREE.Vector3(1.15, 0.38, 1.15),
         new THREE.Vector3(-1.15, 0.38, 1.15)
-    ]),
+    ])
+    const line2 = new THREE.Line(lineGeometry2, lineMaterial);
+scene.add(line2);//(1,)
 
 
-    new THREE.BufferGeometry().setFromPoints([
+    const lineGeometry3 =new THREE.BufferGeometry().setFromPoints([
         new THREE.Vector3(1.15, 0.38, 1.15),
         new THREE.Vector3(1.15, 0.38, -1.15)
-    ]),
-
+    ])
+    const line3 = new THREE.Line(lineGeometry3, lineMaterial);
+    scene.add(line3);
 
-    new THREE.BufferGeometry().setFromPoints([
+    const lineGeometry4 =new THREE.BufferGeometry().setFromPoints([
         new THREE.Vector3(-1.15, 0.38, 1.15),
         new THREE.Vector3(-1.15, 0.38, -1.15)
-    ]),
-
+    ])
+    const line4 = new THREE.Line(lineGeometry4, lineMaterial);
+    scene.add(line4);
 
-    new THREE.BufferGeometry().setFromPoints([
+    const lineGeometry5 =new THREE.BufferGeometry().setFromPoints([
         new THREE.Vector3(1.15, -0.38, 1.15),
         new THREE.Vector3(-1.15, -0.38, 1.15)
-    ]),
+    ])
+
+    const line5 = new THREE.Line(lineGeometry5, lineMaterial);
+scene.add(line5);
 
 
-    new THREE.BufferGeometry().setFromPoints([
+    const lineGeometry6 =new THREE.BufferGeometry().setFromPoints([
         new THREE.Vector3(1.15, -0.38, -1.15),
         new THREE.Vector3(1.15, -0.38, 1.15)
-    ]),
+    ])
+    const line6 = new THREE.Line(lineGeometry6, lineMaterial);
+scene.add(line6);
 
     // Line 7
-    new THREE.BufferGeometry().setFromPoints([
+    const lineGeometry7 =new THREE.BufferGeometry().setFromPoints([
         new THREE.Vector3(1.15, -0.38, -1.15),
         new THREE.Vector3(-1.15, -0.38, -1.15)
-    ]),
+    ])
+    const line7 = new THREE.Line(lineGeometry7, lineMaterial);
+scene.add(line7);
 
     // Line 8
-    new THREE.BufferGeometry().setFromPoints([
+    const lineGeometry8 =new THREE.BufferGeometry().setFromPoints([
         new THREE.Vector3(-1.15, -0.38, 1.15),
         new THREE.Vector3(-1.15, -0.38, -1.15)
     ])
-];
-
-sideLineGeometries.forEach((geometry) => {
-    const sideLine = new THREE.Line(geometry, lineMaterial);
-    scene.add(sideLine);
-});
+    const line8 = new THREE.Line(lineGeometry8, lineMaterial);
+    scene.add(line8);
 
 
 const lineGeometry9 = new THREE.BufferGeometry().setFromPoints([
@@ -184,7 +189,107 @@ const lineGeometry24 = new THREE.BufferGeometry().setFromPoints([
     new THREE.Vector3(-0.36, 1.15, -1.15)
 ]);
 const line24 = new THREE.Line(lineGeometry24, lineMaterial);
-scene.add(line24);
+cube.add(line24);
+
+
+
+
+
+
+// ... (Your existing code)
+
+// Add lines to the top corners
+const lineGeometry25 = new THREE.BufferGeometry().setFromPoints([
+    new THREE.Vector3(1.15, 1.15,1.15),
+    new THREE.Vector3(1.15, 1.15,-1.15)
+]);
+const line25 = new THREE.Line(lineGeometry25, lineMaterial);
+scene.add(line25);
+
+const lineGeometry26 = new THREE.BufferGeometry().setFromPoints([
+    new THREE.Vector3(-1.15, 1.15,1.15),
+    new THREE.Vector3(-1.15, 1.15, -1.15)
+]);
+const line26 = new THREE.Line(lineGeometry26, lineMaterial);
+scene.add(line26);
+
+// Add lines to the bottom corners
+const lineGeometry27 = new THREE.BufferGeometry().setFromPoints([
+    new THREE.Vector3(1.15, -1.15, 1.15),
+    new THREE.Vector3(1.15, -1.15, -1.15)
+]);
+const line27 = new THREE.Line(lineGeometry27, lineMaterial);
+scene.add(line27);
+
+const lineGeometry28 = new THREE.BufferGeometry().setFromPoints([
+    new THREE.Vector3(-1.15, -1.15, 1.15),
+    new THREE.Vector3(-1.15, -1.15, -1.15)
+]);
+const line28 = new THREE.Line(lineGeometry28, lineMaterial);
+scene.add(line28);
+
+// ... (The rest of your code)
+// ... (Your existing code)
+
+// Add lines to the sides
+const lineGeometry29 = new THREE.BufferGeometry().setFromPoints([
+    new THREE.Vector3(1.15, 1.15, -1.15),
+    new THREE.Vector3(1.15, -1.15, -1.15)
+]);
+const line29 = new THREE.Line(lineGeometry29, lineMaterial);
+scene.add(line29);
+
+const lineGeometry30 = new THREE.BufferGeometry().setFromPoints([
+    new THREE.Vector3(-1.15, 1.15, -1.15),
+    new THREE.Vector3(-1.15, -1.15, -1.15)
+]);
+const line30 = new THREE.Line(lineGeometry30, lineMaterial);
+scene.add(line30);
+
+const lineGeometry31 = new THREE.BufferGeometry().setFromPoints([
+    new THREE.Vector3(1.15, 1.15, 1.15),
+    new THREE.Vector3(1.15, -1.15, 1.15)
+]);
+const line31 = new THREE.Line(lineGeometry31, lineMaterial);
+scene.add(line31);
 
+const lineGeometry32 = new THREE.BufferGeometry().setFromPoints([
+    new THREE.Vector3(-1.15, 1.15, 1.15),
+    new THREE.Vector3(-1.15, -1.15, 1.15)
+]);
+const line32 = new THREE.Line(lineGeometry32, lineMaterial);
+scene.add(line32);
+
+// ... (The rest of your code)
+const lineGeometry33 = new THREE.BufferGeometry().setFromPoints([
+    new THREE.Vector3(-1.15, 1.15, 1.15),
+    new THREE.Vector3(1.15, 1.15, 1.15)
+]);
+const line33= new THREE.Line(lineGeometry33, lineMaterial);
+scene.add(line33);
+
+
+const lineGeometry34 = new THREE.BufferGeometry().setFromPoints([
+    new THREE.Vector3(1.15, 1.15, -1.15),
+    new THREE.Vector3(-1.15, 1.15, -1.15)
+]);
+const line34= new THREE.Line(lineGeometry34, lineMaterial);
+scene.add(line34);
 
 
+
+const lineGeometry35 = new THREE.BufferGeometry().setFromPoints([
+    new THREE.Vector3(-1.15, -1.15, 1.15),
+    new THREE.Vector3(1.15, -1.15, 1.15)
+]);
+const line35= new THREE.Line(lineGeometry35, lineMaterial);
+scene.add(line35);
+
+
+
+const lineGeometry36 = new THREE.BufferGeometry().setFromPoints([
+    new THREE.Vector3(1.15, -1.15, -1.15),
+    new THREE.Vector3(-1.15, -1.15, -1.15)
+]);
+const line36= new THREE.Line(lineGeometry36, lineMaterial);
+scene.add(line36);