Spaces:
Running
Running
File size: 4,183 Bytes
f648111 |
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 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3D Card Game with Physics</title>
<style>
body { margin: 0; }
canvas { display: block; }
</style>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cannon.js/0.6.2/cannon.min.js"></script>
</head>
<body>
<canvas id="gameCanvas"></canvas>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 30, 100);
var renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('gameCanvas') });
renderer.setSize(window.innerWidth, window.innerHeight);
// Physics world setup
var world = new CANNON.World();
world.gravity.set(0, -9.82, 0); // Apply gravity in the negative y direction
// Lighting
var ambientLight = new THREE.AmbientLight(0x404040); // Soft white light
scene.add(ambientLight);
var directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
directionalLight.position.set(0, 1, 1);
scene.add(directionalLight);
// Table surface with physics
var tableGeometry = new THREE.BoxGeometry(100, 1, 100);
var tableMaterial = new THREE.MeshLambertMaterial({ color: 0x8B4513 }); // Brown color for the table
var table = new THREE.Mesh(tableGeometry, tableMaterial);
table.position.set(0, -0.5, 0); // Adjust position to align with the physics body
scene.add(table);
// Create physics body for the table
var tableShape = new CANNON.Box(new CANNON.Vec3(50, 0.5, 50)); // Half extents match the Three.js geometry
var tableBody = new CANNON.Body({
mass: 0, // Mass of 0 makes the body static
position: new CANNON.Vec3(0, -0.5, 0), // Match the position of the Three.js mesh
shape: tableShape
});
world.addBody(tableBody);
// Card geometry and material
var cardGeometry = new THREE.BoxGeometry(5, 0.1, 7); // Generic card size
var cards = [];
var cardBodies = []; // For physics bodies
// Generate colors for cards
var colors = [];
for (let i = 0; i < 52; i++) {
colors.push(Math.random() * 0xffffff); // Generate random color
}
// Shuffle colors
function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]]; // Swap
}
}
shuffleArray(colors); // Shuffle the colors array to simulate shuffling cards
// Card creation with physics and color based on shuffle
function addCard(x, y, z, colorIndex) {
var cardMaterial = new THREE.MeshLambertMaterial({ color: colors[colorIndex] });
var card = new THREE.Mesh(cardGeometry, cardMaterial);
card.position.set(x, y, z);
scene.add(card);
cards.push(card);
// Physics for card
var cardShape = new CANNON.Box(new CANNON.Vec3(2.5, 0.05, 3.5));
var cardBody = new CANNON.Body({ mass: 0.1 });
cardBody.addShape(cardShape);
cardBody.position.set(x, y, z);
world.addBody(cardBody);
cardBodies.push(cardBody);
}
// Create a stack of cards
for (let i = 0; i < 52; i++) {
addCard(0, i * 0.2 + 1, 0, i); // Position cards in a stack
}
function animate() {
requestAnimationFrame(animate);
// Update physics world
world.step(1 / 60);
// Sync Three.js objects with physics objects
for (let i = 0; i < cardBodies.length; i++) {
cards[i].position.copy(cardBodies[i].position);
cards[i].quaternion.copy(cardBodies[i].quaternion);
}
renderer.render(scene, camera);
}
animate();
</script>
</body>
</html>
|