Spaces:

broadfield-dev
/

3d_snake_test

Running

App Files Files Community

broadfield-dev commited on Feb 18

Commit

31119d6

verified ·

1 Parent(s): 919d739

Update index.html

Browse files

Files changed (1) hide show

index.html +87 -82

index.html CHANGED Viewed

@@ -10,108 +10,113 @@
     </style>
 </head>
 <body>
-    <canvas id="gameCanvas"></canvas>
     <script>
-        // Setup the WebGL context
-        const canvas = document.getElementById('gameCanvas');
-        const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
-        if (!gl) {
-            alert('WebGL not supported in this browser');
-            throw new Error('WebGL not supported');
-        }
-        // Vertex shader
-        const vsSource = `
-            attribute vec4 aVertexPosition;
-            uniform mat4 uModelViewMatrix;
-            uniform mat4 uProjectionMatrix;
-            void main() {
-                gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
             }
-        `;
-        // Fragment shader
-        const fsSource = `
-            void main() {
-                gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // Red color for snake
-            }
-        `;
-        // Compile shader
-        function loadShader(gl, type, source) {
-            const shader = gl.createShader(type);
-            gl.shaderSource(shader, source);
-            gl.compileShader(shader);
-            if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
-                alert('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));
-                gl.deleteShader(shader);
-                return null;
-            }
-            return shader;
-        }
-        // Create shader program
-        const shaderProgram = initShaderProgram(gl, vsSource, fsSource);
-        // Initialize shader program with given vertex and fragment shaders
-        function initShaderProgram(gl, vsSource, fsSource) {
-            const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
-            const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);
-            const shaderProgram = gl.createProgram();
-            gl.attachShader(shaderProgram, vertexShader);
-            gl.attachShader(shaderProgram, fragmentShader);
-            gl.linkProgram(shaderProgram);
-            if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
-                alert('Unable to initialize the shader program: ' + gl.getProgramInfoLog(shaderProgram));
-                return null;
-            }
-            return shaderProgram;
         }
-        // Setup buffers, matrices, etc.
-        let snakeSegments = [];
-        let foodPosition = [0, 0, 0];
-        let angle = 0;
-        function initBuffers() {
-            // Set up initial snake and food
-            // Here we would define positions on a 3D sphere for snake and food
         }
-        function drawScene() {
-            gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
-            // Move the sphere (rotation for interaction)
-            angle += 0.1;
-            const modelViewMatrix = mat4.create();
-            mat4.rotate(modelViewMatrix, modelViewMatrix, angle * Math.PI / 180, [0, 1, 0]);
-            // Draw snake, food, etc. on the sphere
         }
-        // Game logic
         function update() {
-            // Move snake, check for food collision, update food if eaten, etc.
         }
-        // Animation loop
-        function render() {
             update();
-            drawScene();
-            requestAnimationFrame(render);
         }
-        // Start rendering loop
-        render();
-        // Handle user interaction for rotating the sphere
-        document.addEventListener('mousemove', onMouseMove);
-        function onMouseMove(e) {
-            // Implement rotation of the sphere based on mouse movement
         }
     </script>
 </body>

     </style>
 </head>
 <body>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
     <script>
+        let camera, scene, renderer;
+        let snake, food;
+        let angle = 0;
+        function init() {
+            // Camera setup
+            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+            camera.position.z = 5;
+            // Scene setup
+            scene = new THREE.Scene();
+            // Sphere (world)
+            const geometry = new THREE.SphereGeometry(2, 32, 32);
+            const material = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true });
+            scene.add(new THREE.Mesh(geometry, material));
+            // Snake setup
+            snake = [];
+            for (let i = 0; i < 3; i++) {
+                const snakePart = new THREE.Mesh(new THREE.SphereGeometry(0.1), new THREE.MeshBasicMaterial({ color: 0xff0000 }));
+                snakePart.position.set(0, 0, i * 0.2 - 0.4);
+                snake.push(snakePart);
+                scene.add(snakePart);
             }
+            // Food setup
+            food = new THREE.Mesh(new THREE.SphereGeometry(0.1), new THREE.MeshBasicMaterial({ color: 0x0000ff }));
+            setRandomFoodPosition();
+            scene.add(food);
+            // Renderer setup
+            renderer = new THREE.WebGLRenderer();
+            renderer.setSize(window.innerWidth, window.innerHeight);
+            document.body.appendChild(renderer.domElement);
+            // Event listeners for rotation
+            document.addEventListener('mousemove', onMouseMove);
+            document.addEventListener('touchmove', onTouchMove, { passive: false });
         }
+        function setRandomFoodPosition() {
+            const radius = 1.9;
+            const phi = Math.acos(2 * Math.random() - 1);
+            const theta = 2 * Math.PI * Math.random();
+            food.position.x = radius * Math.sin(phi) * Math.cos(theta);
+            food.position.y = radius * Math.sin(phi) * Math.sin(theta);
+            food.position.z = radius * Math.cos(phi);
         }
+        function onMouseMove(e) {
+            angle -= e.movementX * 0.001;
+        }
+        function onTouchMove(e) {
+            e.preventDefault();
+            const touch = e.touches[0];
+            if (touch) {
+                angle -= touch.movementX * 0.001;
+            }
         }
         function update() {
+            // Move snake
+            for (let i = snake.length - 1; i > 0; i--) {
+                snake[i].position.copy(snake[i - 1].position);
+            }
+            // Move head in direction (simple forward movement here)
+            const head = snake[0];
+            const direction = head.position.clone().normalize().multiplyScalar(0.05);
+            head.position.add(direction);
+            // Check for food
+            if (head.position.distanceTo(food.position) < 0.2) {
+                const newPart = new THREE.Mesh(new THREE.SphereGeometry(0.1), new THREE.MeshBasicMaterial({ color: 0xff0000 }));
+                newPart.position.copy(snake[snake.length - 1].position);
+                snake.push(newPart);
+                scene.add(newPart);
+                setRandomFoodPosition();
+            }
+            // Keep snake on sphere surface
+            head.position.normalize().multiplyScalar(1.9);
         }
+        function animate() {
+            requestAnimationFrame(animate);
+            // Rotate the scene for interaction
+            scene.rotation.y = angle;
             update();
+            renderer.render(scene, camera);
         }
+        init();
+        animate();
+        // Resize handling
+        window.addEventListener('resize', onWindowResize, false);
+        function onWindowResize() {
+            camera.aspect = window.innerWidth / window.innerHeight;
+            camera.updateProjectionMatrix();
+            renderer.setSize(window.innerWidth, window.innerHeight);
         }
     </script>
 </body>