awacke1/HTML5-ThreeJS
1
1<!DOCTYPE html>2<html>3<head>4 <meta charset="UTF-8">5 <title>3D Card Game with Physics</title>6 <style>7 body { margin: 0; }8 canvas { display: block; }9 </style>10 <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>11 <script src="https://cdnjs.cloudflare.com/ajax/libs/cannon.js/0.6.2/cannon.min.js"></script>12</head>13<body>14 <canvas id="gameCanvas"></canvas>15 16 <script>17 var scene = new THREE.Scene();18 var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);19 camera.position.set(0, 30, 100);20 var renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('gameCanvas') });21 renderer.setSize(window.innerWidth, window.innerHeight);22 // Physics world setup23 var world = new CANNON.World();24 world.gravity.set(0, -9.82, 0); // Apply gravity in the negative y direction25 // Lighting26 var ambientLight = new THREE.AmbientLight(0x404040); // Soft white light27 scene.add(ambientLight);28 var directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);29 directionalLight.position.set(0, 1, 1);30 scene.add(directionalLight);31 // Table surface with physics32 var tableGeometry = new THREE.BoxGeometry(100, 1, 100);33 var tableMaterial = new THREE.MeshLambertMaterial({ color: 0x8B4513 }); // Brown color for the table34 var table = new THREE.Mesh(tableGeometry, tableMaterial);35 table.position.set(0, -0.5, 0); // Adjust position to align with the physics body36 scene.add(table);37 // Create physics body for the table38 var tableShape = new CANNON.Box(new CANNON.Vec3(50, 0.5, 50)); // Half extents match the Three.js geometry39 var tableBody = new CANNON.Body({40 mass: 0, // Mass of 0 makes the body static41 position: new CANNON.Vec3(0, -0.5, 0), // Match the position of the Three.js mesh42 shape: tableShape43 });44 world.addBody(tableBody);45 // Card geometry and material46 var cardGeometry = new THREE.BoxGeometry(5, 0.1, 7); // Generic card size47 var cards = [];48 var cardBodies = []; // For physics bodies49 // Generate colors for cards50 var colors = [];51 for (let i = 0; i < 52; i++) {52 colors.push(Math.random() * 0xffffff); // Generate random color53 }54 // Shuffle colors55 function shuffleArray(array) {56 for (let i = array.length - 1; i > 0; i--) {57 const j = Math.floor(Math.random() * (i + 1));58 [array[i], array[j]] = [array[j], array[i]]; // Swap59 }60 }61 shuffleArray(colors); // Shuffle the colors array to simulate shuffling cards62 // Card creation with physics and color based on shuffle63 function addCard(x, y, z, colorIndex) {64 var cardMaterial = new THREE.MeshLambertMaterial({ color: colors[colorIndex] });65 var card = new THREE.Mesh(cardGeometry, cardMaterial);66 card.position.set(x, y, z);67 scene.add(card);68 cards.push(card);69 // Physics for card70 var cardShape = new CANNON.Box(new CANNON.Vec3(2.5, 0.05, 3.5));71 var cardBody = new CANNON.Body({ mass: 0.1 });72 cardBody.addShape(cardShape);73 cardBody.position.set(x, y, z);74 world.addBody(cardBody);75 cardBodies.push(cardBody);76 }77 // Create a stack of cards78 for (let i = 0; i < 52; i++) {79 addCard(0, i * 0.2 + 1, 0, i); // Position cards in a stack80 }81 function animate() {82 requestAnimationFrame(animate);83 // Update physics world84 world.step(1 / 60);85 // Sync Three.js objects with physics objects86 for (let i = 0; i < cardBodies.length; i++) {87 cards[i].position.copy(cardBodies[i].position);88 cards[i].quaternion.copy(cardBodies[i].quaternion);89 }90 renderer.render(scene, camera);91 }92 animate();93 </script>94</body>95</html>96