Physics Tetris

GAME OVER

const { Engine, Render, World, Bodies, Body, Composite, Events } = Matter; // Game setup const canvas = document.getElementById('game'); const ctx = canvas.getContext('2d'); const gameOverElement = document.getElementById('gameOver'); const width = 300; const height = 600; canvas.width = width; canvas.height = height; // Physics engine const engine = Engine.create(); const world = engine.world; engine.gravity.y = 0.5; // Adjust gravity strength // Game boundaries const wallThickness = 20; const floor = Bodies.rectangle(width / 2, height + wallThickness / 2, width, wallThickness, { isStatic: true }); const leftWall = Bodies.rectangle(-wallThickness / 2, height / 2, wallThickness, height, { isStatic: true }); const rightWall = Bodies.rectangle(width + wallThickness / 2, height / 2, wallThickness, height, { isStatic: true }); World.add(world, [floor, leftWall, rightWall]); // Tetris pieces const pieceTypes = { I: [{ x: 0, y: 0 }, { x: 30, y: 0 }, { x: 60, y: 0 }, { x: 90, y: 0 }], J: [{ x: 0, y: 0 }, { x: 0, y: 30 }, { x: 30, y: 30 }, { x: 60, y: 30 }], L: [{ x: 60, y: 0 }, { x: 0, y: 30 }, { x: 30, y: 30 }, { x: 60, y: 30 }], O: [{ x: 0, y: 0 }, { x: 30, y: 0 }, { x: 0, y: 30 }, { x: 30, y: 30 }], S: [{ x: 30, y: 0 }, { x: 60, y: 0 }, { x: 0, y: 30 }, { x: 30, y: 30 }], T: [{ x: 30, y: 0 }, { x: 0, y: 30 }, { x: 30, y: 30 }, { x: 60, y: 30 }], Z: [{ x: 0, y: 0 }, { x: 30, y: 0 }, { x: 30, y: 30 }, { x: 60, y: 30 }] }; let currentPiece = null; let blocks = []; let gameRunning = true; function createPiece(type) { const piece = pieceTypes[type]; const bodies = piece.map(block => { return Bodies.rectangle( width / 2 + block.x, 50 + block.y, 30, 30, { friction: 0.1, restitution: 0.3 } ); }); const constraints = []; for (let i = 1; i < bodies.length; i++) { constraints.push( Matter.Constraint.create({ bodyA: bodies[0], bodyB: bodies[i], stiffness: 1, render: { visible: false } }) ); } World.add(world, bodies); World.add(world, constraints); currentPiece = { bodies, constraints, type }; return currentPiece; } function getRandomPiece() { const types = Object.keys(pieceTypes); return types[Math.floor(Math.random() * types.length)]; } function checkGameOver() { for (const body of currentPiece.bodies) { if (body.position.y < 50) { gameRunning = false; gameOverElement.style.display = 'block'; return true; } } return false; } function movePiece(direction) { if (!currentPiece || !gameRunning) return; const dx = direction === 'left' ? -15 : direction === 'right' ? 15 : 0; const dy = 0; for (const body of currentPiece.bodies) { Body.translate(body, { x: dx, y: dy }); } } function rotatePiece() { if (!currentPiece || !gameRunning) return; const center = currentPiece.bodies[0].position; const angle = Math.PI / 2; // 90 degrees for (let i = 1; i < currentPiece.bodies.length; i++) { const body = currentPiece.bodies[i]; const x = body.position.x - center.x; const y = body.position.y - center.y; const newX = x * Math.cos(angle) - y * Math.sin(angle); const newY = x * Math.sin(angle) + y * Math.cos(angle); Body.setPosition(body, { x: center.x + newX, y: center.y + newY }); } } function spawnNewPiece() { if (!gameRunning) return; if (currentPiece) { blocks.push(...currentPiece.bodies); World.remove(world, currentPiece.constraints); } currentPiece = createPiece(getRandomPiece()); if (checkGameOver()) { return; } } // Event listeners Events.on(engine, 'collisionStart', event => { const pairs = event.pairs; for (const pair of pairs) { if (currentPiece && currentPiece.bodies.includes(pair.bodyA) && blocks.includes(pair.bodyB) || currentPiece && currentPiece.bodies.includes(pair.bodyB) && blocks.includes(pair.bodyA)) { spawnNewPiece(); break; } } }); document.getElementById('left').addEventListener('click', () => movePiece('left')); document.getElementById('right').addEventListener('click', () => movePiece('right')); document.getElementById('rotate').addEventListener('click', rotatePiece); // Game loop function render() { ctx.clearRect(0, 0, width, height); // Render all bodies for (const body of Composite.allBodies(world)) { ctx.beginPath(); ctx.fillStyle = '#3498db'; if (currentPiece && currentPiece.bodies.includes(body)) { ctx.fillStyle = '#e74c3c'; } for (const vertex of body.vertices) { ctx.lineTo(vertex.x, vertex.y); } ctx.closePath(); ctx.fill(); ctx.strokeStyle = '#2980b9'; ctx.stroke(); } requestAnimationFrame(render); } // Start the game createPiece(getRandomPiece()); Engine.run(engine); render();