zeroed-some/sprong / f5f8b03

Browse files

init sprong static

Authored by espadonne
SHA
f5f8b038df8c005e0654ca7ec3e37d17f25b6655
Tree
f976190

3 changed files

StatusFile+-
A Matter.js 104 0
A index.html 32 0
A sprong.css 66 0
Matter.jsadded
@@ -0,0 +1,104 @@
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
+}
index.htmladded
@@ -0,0 +1,32 @@
1
+<!DOCTYPE html>
2
+<html lang="en">
3
+<head>
4
+    <meta charset="UTF-8">
5
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+    <title>Sprong :: Pong with Physics</title>
7
+    <link rel="stylesheet" href="sprong.css">
8
+</head>
9
+<body>
10
+    <h1>SPRONG</h1>
11
+    <div class="score left" id="leftScore">0</div>
12
+    <div class="score right" id="rightScore">0</div>
13
+
14
+    <div id="gameCanvas"></div>
15
+
16
+    <div class="info">
17
+        <div>Physics-based Pong with Spring Paddles</div>
18
+        <div class="controls">
19
+            Player 1: W/S keys | Player 2: ↑/↓ arrows<br>
20
+        </div>
21
+    </div>
22
+
23
+    <!-- Load p5.js from CDN -->
24
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.min.js"></script>
25
+
26
+    <!-- Load Matter.js from CDN -->
27
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.19.0/matter.min.js"></script>
28
+
29
+    <!-- Our game logic -->
30
+    <script src="sprong.js"></script>
31
+</body>
32
+</html>
sprong.cssadded
@@ -0,0 +1,66 @@
1
+body {
2
+    margin: 0;
3
+    padding: 20px;
4
+    background: #1a1a1a;
5
+    color: white;
6
+    font-family: 'Courier New', monospace;
7
+    display: flex;
8
+    flex-direction: column;
9
+    align-items: center;
10
+}
11
+
12
+h1 {
13
+    margin: 0 0 20px 0;
14
+    font-size: 2.5em;
15
+    color: #00ff88;
16
+    text-shadow: 0 0 10px #00ff88;
17
+    letter-spacing: 0.1em;
18
+}
19
+
20
+#gameCanvas {
21
+    border: 2px solid #00ff88;
22
+    box-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
23
+    background: #0a0a0a;
24
+}
25
+
26
+.info {
27
+    margin-top: 20px;
28
+    text-align: center;
29
+    opacity: 0.7;
30
+    max-width: 600px;
31
+}
32
+
33
+.controls {
34
+    margin-top: 10px;
35
+    font-size: 0.9em;
36
+    line-height: 1.4;
37
+}
38
+
39
+.score {
40
+    position: absolute;
41
+    top: 80px;
42
+    font-size: 3em;
43
+    color: #00ff88;
44
+    text-shadow: 0 0 15px #00ff88;
45
+    opacity: 0.8;
46
+}
47
+
48
+.score.left {
49
+    left: 200px;
50
+}
51
+
52
+.score.right {
53
+    right: 200px;
54
+}
55
+
56
+.debug-info {
57
+    position: absolute;
58
+    top: 10px;
59
+    left: 10px;
60
+    font-size: 0.8em;
61
+    opacity: 0.6;
62
+    background: rgba(0, 0, 0, 0.5);
63
+    padding: 10px;
64
+    border-radius: 5px;
65
+    border: 1px solid rgba(0, 255, 136, 0.3);
66
+}