Spaces:
Running
Running
File size: 3,898 Bytes
919d739 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 |
<!DOCTYPE html>
<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> |