Spaces:
Running
Running
File size: 4,199 Bytes
c29f49d 09c7acd facffbf 8ed626a facffbf 8ed626a 09c7acd facffbf 09c7acd facffbf 8437049 facffbf 8ed626a 8437049 8ed626a 8437049 8ed626a 8437049 8ed626a 8437049 8ed626a 8437049 facffbf 8ed626a facffbf 8437049 facffbf 8ed626a facffbf 09c7acd facffbf |
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 |
<!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>
|