Spaces:
Running
Running
File size: 4,299 Bytes
919d739 31119d6 919d739 31119d6 919d739 31119d6 919d739 31119d6 919d739 31119d6 919d739 31119d6 919d739 31119d6 919d739 31119d6 919d739 31119d6 919d739 31119d6 919d739 31119d6 919d739 31119d6 919d739 31119d6 919d739 31119d6 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 119 120 121 122 123 |
<!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>
<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>
</html> |