| 1 | // Matter.js module aliases |
| 2 | const Engine = Matter.Engine; |
| 3 | const World = Matter.World; |
| 4 | const Bodies = Matter.Bodies; |
| 5 | const Body = Matter.Body; |
| 6 | const Render = Matter.Render; |
| 7 | const Constraint = Matter.Constraint; |
| 8 | |
| 9 | // Game variables |
| 10 | let engine; |
| 11 | let world; |
| 12 | let testBox; |
| 13 | |
| 14 | // Canvas settings |
| 15 | const CANVAS_WIDTH = 800; |
| 16 | const CANVAS_HEIGHT = 400; |
| 17 | |
| 18 | function setup() { |
| 19 | // Create p5.js canvas |
| 20 | let canvas = createCanvas(CANVAS_WIDTH, CANVAS_HEIGHT); |
| 21 | canvas.parent('gameCanvas'); |
| 22 | |
| 23 | // Initialize Matter.js physics engine |
| 24 | engine = Engine.create(); |
| 25 | world = engine.world; |
| 26 | |
| 27 | // Disable gravity for classic Pong feel |
| 28 | engine.world.gravity.y = 0; |
| 29 | engine.world.gravity.x = 0; |
| 30 | |
| 31 | // Create a test rectangle to confirm everything is working |
| 32 | testBox = Bodies.rectangle(width/2, height/2, 60, 60); |
| 33 | |
| 34 | // Add the test box to the world |
| 35 | World.add(world, testBox); |
| 36 | } |
| 37 | |
| 38 | function draw() { |
| 39 | // Update physics |
| 40 | Engine.update(engine); |
| 41 | |
| 42 | // Clear canvas with dark background |
| 43 | background(26, 26, 26); |
| 44 | |
| 45 | // Draw test box |
| 46 | push(); |
| 47 | fill(0, 255, 136); // Bright green |
| 48 | stroke(0, 255, 136); |
| 49 | strokeWeight(2); |
| 50 | |
| 51 | // Get the test box position and angle from Matter.js |
| 52 | let pos = testBox.position; |
| 53 | let angle = testBox.angle; |
| 54 | |
| 55 | // Draw the box at its physics position |
| 56 | translate(pos.x, pos.y); |
| 57 | rotate(angle); |
| 58 | rectMode(CENTER); |
| 59 | rect(0, 0, 60, 60); |
| 60 | pop(); |
| 61 | |
| 62 | // Draw some helpful debug info |
| 63 | fill(255); |
| 64 | textAlign(LEFT); |
| 65 | text(`FPS: ${Math.round(frameRate())}`, 10, 20); |
| 66 | text(`Physics Bodies: ${world.bodies.length}`, 10, 40); |
| 67 | text(`Test Box Position: (${Math.round(pos.x)}, ${Math.round(pos.y)})`, 10, 60); |
| 68 | } |
| 69 | |
| 70 | // Add some interactivity - click to move the test box |
| 71 | function mousePressed() { |
| 72 | if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) { |
| 73 | // Set the test box position to mouse position |
| 74 | Body.setPosition(testBox, { x: mouseX, y: mouseY }); |
| 75 | |
| 76 | // Add a little spin for fun |
| 77 | Body.setAngularVelocity(testBox, random(-0.1, 0.1)); |
| 78 | |
| 79 | console.log(`🎯 Test box moved to (${mouseX}, ${mouseY})`); |
| 80 | } |
| 81 | } |
| 82 | |
| 83 | // Keyboard interaction for testing |
| 84 | function keyPressed() { |
| 85 | if (key === ' ') { |
| 86 | // Spacebar: reset test box to center |
| 87 | Body.setPosition(testBox, { x: width/2, y: height/2 }); |
| 88 | Body.setAngle(testBox, 0); |
| 89 | Body.setVelocity(testBox, { x: 0, y: 0 }); |
| 90 | Body.setAngularVelocity(testBox, 0); |
| 91 | console.log("🔄 Test box reset to center"); |
| 92 | } |
| 93 | |
| 94 | if (key === 'g' || key === 'G') { |
| 95 | // Toggle gravity for fun |
| 96 | if (engine.world.gravity.y === 0) { |
| 97 | engine.world.gravity.y = 0.8; |
| 98 | console.log("🌍 Gravity enabled"); |
| 99 | } else { |
| 100 | engine.world.gravity.y = 0; |
| 101 | console.log("🚀 Gravity disabled"); |
| 102 | } |
| 103 | } |
| 104 | } |