Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>3D Sphere Snake Game</title> | |
| <style> | |
| body { margin: 0; overflow: hidden; } | |
| canvas { display: block; } | |
| </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> | |
| </html> |