Game Over
diff --git a/public/style.css b/public/style.css
index 94ac290..2239986 100644
--- a/public/style.css
+++ b/public/style.css
@@ -3,21 +3,41 @@ body {
background: #1E1E1E;
overflow: hidden;
font-family: sans-serif;
+
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ height: 100vh;
}
+/* Center container */
+#game-container {
+ position: relative;
+ width: 90vw; /* responsive width */
+ max-width: 800px; /* match canvas width */
+ aspect-ratio: 2 / 1; /* 800x400 */
+}
+
+/* Canvas scales inside container */
canvas {
+ width: 100%;
+ height: 100%;
display: block;
background: linear-gradient(#222, #111);
}
+/* Score inside container */
#score {
position: absolute;
- top: 20px;
- left: 20px;
+ top: 10px;
+ left: 15px;
color: white;
- font-size: 30px;
+ font-size: 24px;
+ z-index: 2;
}
+/* Game over UI also inside container */
#game-over {
position: absolute;
top: 40%;
@@ -25,6 +45,7 @@ canvas {
text-align: center;
color: white;
font-size: 40px;
+ z-index: 2;
}
#game-over.hidden {
diff --git a/server.js b/server.js
index c2b6ebb..73cf41b 100644
--- a/server.js
+++ b/server.js
@@ -16,8 +16,31 @@ const server = app.listen(port, () => {
const wss = new WebSocket.Server({ server });
wss.on("connection", ws => {
console.log("Client connected");
+
+ ws.on("message", msg => {
+ try {
+ const data = JSON.parse(msg);
+
+ if (data.type === "score") {
+ console.log("Score update:", data.score);
+
+ // send to Arduino
+ sendToArduino(`S${data.score}`);
+ }
+
+ if (data.type === "death") {
+ console.log("Death update:", data.deaths);
+
+ // send to Arduino
+ sendToArduino(`D${data.deaths}`);
+ }
+ } catch (e) {
+ console.error("Invalid message", e);
+ }
+ });
});
+
// ---- SerialPort Setup (adjust COM port!) ----
const arduinoPort = new SerialPort({
path: "/dev/pts/3", // or "/dev/ttyACM0"
@@ -40,3 +63,15 @@ parser.on("data", line => {
}
});
+
+
+
+// --- Utility Functions ---
+function sendToArduino(message) {
+ if (arduinoPort.isOpen) {
+ arduinoPort.write(message + "\n", err => {
+ if (err) return console.error("Serial write error:", err);
+ });
+ }
+}
+
--
GitLab
From dc18df4146eb6dc58363f695739a607c14c469d9 Mon Sep 17 00:00:00 2001
From: Massiles Ghernaout <749-gm213204@users.noreply.www-apps.univ-lehavre.fr>
Date: Thu, 20 Nov 2025 16:36:25 +0100
Subject: [PATCH 3/6] added readme that explains the overall idea of the
project so far
---
readme.md | 215 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 215 insertions(+)
create mode 100644 readme.md
diff --git a/readme.md b/readme.md
new file mode 100644
index 0000000..a32eab0
--- /dev/null
+++ b/readme.md
@@ -0,0 +1,215 @@
+# ๐ **Arduino Jump Dash โ Full Project README**
+
+## ๐ฎ Overview
+
+This project connects a **browser-based Geometry Dashโstyle game** with an **Arduino board**.
+The player controls the jumping character using:
+
+* A **physical button** connected to the Arduino
+* Or the **space bar** on the keyboard
+* (Optional) Touch input on mobile
+
+The Arduino communicates with a **Node.js backend**, which relays player actions to the **browser game** using WebSockets. The game sends back **score** and **death statistics**, which the backend forwards to the Arduino. The Arduino displays these values on a **7-segment display**.
+
+The whole system is fully bidirectional:
+
+```
+Arduino (Button) โ Node Backend โ Game Browser (Jump Input)
+Game Browser (Score/Deaths) โ Node Backend โ Arduino (Seven Segment Display)
+```
+
+---
+
+# ๐งฑ **Project Architecture**
+
+```
+โโโโโโโโโโโโโโโโโโโโโโโโ WebSocket โโโโโโโโโโโโโโโโโโโโโโโโโโ
+โ Browser Game (JS) โ <--------------> โ Node.js Backend โ
+โ - Canvas runner โ โ - Express static serverโ
+โ - Jump logic โ โ - WebSocket server โ
+โ - Obstacle system โ โ - SerialPort interface โ
+โโโโโโโโโโโโโโโโโโโโโโโโ โโโโโโโโโโโโโฌโโโโโโโโโโโโโ
+ โ Serial USB
+ โผ
+ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+ โ Arduino โ
+ โ - Button input โ
+ โ - Seven segment display output โ
+ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+```
+
+---
+
+# ๐ ๏ธ **Technologies Used**
+
+### **Frontend**
+
+* HTML5 Canvas
+* CSS responsive layout (mobile-friendly)
+* Vanilla JavaScript game engine
+* WebSocket client
+* Keyboard & touch controls
+
+### **Backend**
+
+* Node.js + Express
+* WebSocket (ws)
+* SerialPort (for Arduino communication)
+
+### **Hardware**
+
+* Arduino
+* Push button (for jump input)
+* Seven-segment display (via SevSeg library)
+
+---
+
+# ๐ **Setup Instructions**
+
+## 1๏ธโฃ Install Dependencies
+
+### **Node backend**
+
+```bash
+npm install express ws serialport
+```
+
+### **Arduino**
+
+Install the **SevSeg** library:
+
+**Arduino IDE โ Sketch โ Include Library โ Manage Libraries โ Search โSevSegโ**
+
+---
+
+# ๐ **Project Structure**
+
+```
+/project
+โ
+โโโ public/
+โ โโโ index.html
+โ โโโ style.css
+โ โโโ game.js
+โ
+โโโ server.js # Node.js backend
+โโโ arduino.js (optional - for simulation)
+โโโ README.md
+```
+
+---
+
+# ๐ฅ๏ธ **Frontend Game Features**
+
+* Geometry Dashโstyle gameplay
+* Ground + obstacles moving rightโleft
+* Player jumps with:
+ * Arduino button (via WebSocket)
+ * Spacebar on keyboard
+ * Touch on mobile
+* Scoring system:
+ * +1 for every obstacle cleared
+* Death detection and game over UI
+* Restart button
+* Fully responsive + centered canvas
+
+---
+
+# ๐ **WebSocket Protocol**
+
+### **Browser โ Backend (Game Events)**
+
+#### Score update:
+
+```json
+{
+ "type": "score",
+ "score": 12
+}
+```
+
+#### Death event:
+
+```json
+{
+ "type": "death",
+ "deaths": 3
+}
+```
+
+### **Backend โ Browser (Jump Input)**
+
+Sent when Arduino button is pressed:
+
+```json
+{
+ "action": "jump"
+}
+```
+
+---
+
+# ๐ **Backend Responsibilities**
+
+* Serve the frontend game files
+* Maintain WebSocket connections
+* Receive serial events from Arduino (`"JUMP"`)
+* Forward `"jump"` action to browser clients
+* Receive score/death stats from browser
+* Format and send them to Arduino via serial:
+
+ * `S
` for score
+ * `D` for deaths
+
+Example:
+
+```
+S15\n โ show score 15 on seven segment
+D3\n โ show deaths 3 on seven segment
+```
+
+---
+
+# ๐ง **Arduino Responsibilities**
+
+* Detect button press โ send `"JUMP\n"` via Serial
+* Receive messages from backend:
+
+ * `S##` โ update score display
+ * `D##` โ update death count
+* Use SevSeg to draw numbers on seven-segment display
+
+Pseudo-protocol:
+
+```
+PC to Arduino:
+ S42 โ set score to 42
+ D7 โ set death count to 7
+
+Arduino to PC:
+ JUMP โ player pressed the button
+```
+
+---
+
+# ๐งช **Testing Without Arduino (Virtual Serial Ports)**
+
+You can create paired virtual serial ports (e.g., using `socat` on Linux/macOS or com0com on Windows).
+
+Then run the simulator:
+
+```bash
+node arduino.js
+```
+
+Press Enter to simulate a button press โ game character jumps.
+
+---
+
+# ๐ฑ **Responsive UI Features**
+
+* Canvas centered via flexbox
+* Scales with `aspect-ratio`
+* Score & Game Over UI positioned relative to game container
+* Mobile-friendly touch support
+
--
GitLab
From 3432db18a9dcd322d71c8b0bf46eb8f47a79177c Mon Sep 17 00:00:00 2001
From: Massiles Ghernaout <749-gm213204@users.noreply.www-apps.univ-lehavre.fr>
Date: Thu, 20 Nov 2025 16:36:59 +0100
Subject: [PATCH 4/6] removed arduino cpp program, this will be done by my
teamate.
---
arduino.ino | 74 -----------------------------------------------------
1 file changed, 74 deletions(-)
delete mode 100644 arduino.ino
diff --git a/arduino.ino b/arduino.ino
deleted file mode 100644
index 7fa5e19..0000000
--- a/arduino.ino
+++ /dev/null
@@ -1,74 +0,0 @@
-#include
-
-SevSeg sevseg;
-
-String incoming = "";
-int score = 0;
-int deaths = 0;
-
-void setup() {
- Serial.begin(9600);
-
- // Configure your seven-seg display here
- byte numDigits = 4;
- byte digitPins[] = {2, 3, 4, 5};
- byte segmentPins[] = {6, 7, 8, 9, 10, 11, 12, 13};
- bool resistorsOnSegments = true;
- sevseg.begin(COMMON_CATHODE, numDigits, digitPins, segmentPins, resistorsOnSegments);
- sevseg.setBrightness(90);
-}
-
-void loop() {
- // Read incoming serial
- while (Serial.available()) {
- char c = Serial.read();
- if (c == '\n') {
- processMessage(incoming);
- incoming = "";
- } else {
- incoming += c;
- }
- }
-
- // Refresh display
- sevseg.refreshDisplay();
-}
-
-void processMessage(String msg) {
- if (msg.startsWith("S")) {
- score = msg.substring(1).toInt();
- sevseg.setNumber(score);
- }
-
- if (msg.startsWith("D")) {
- deaths = msg.substring(1).toInt();
- sevseg.setNumber(deaths); // or alternate between score/death
- }
-}
-
-
-
-
-/*
-const int buttonPin = 2;
-
-int lastState = HIGH;
-
-void setup() {
- pinMode(buttonPin, INPUT_PULLUP);
- Serial.begin(9600);
-}
-
-void loop() {
- int state = digitalRead(buttonPin);
-
- // Detect button press (falling edge)
- if (state == LOW && lastState == HIGH) {
- Serial.println("JUMP");
- }
-
- lastState = state;
- delay(10);
-}
-
-*/
--
GitLab
From 1a7fe51eccbd6c64bb5382daab5125ea55eca0b8 Mon Sep 17 00:00:00 2001
From: Massiles Ghernaout <749-gm213204@users.noreply.www-apps.univ-lehavre.fr>
Date: Thu, 20 Nov 2025 16:39:47 +0100
Subject: [PATCH 5/6] added a licence.txt
---
licence.txt | 21 +++++++++++++++++++++
1 file changed, 21 insertions(+)
create mode 100644 licence.txt
diff --git a/licence.txt b/licence.txt
new file mode 100644
index 0000000..86f4796
--- /dev/null
+++ b/licence.txt
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Massiles & Amine
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
--
GitLab
From ea97fb7cdce698d535e266d40069ce1355cdb707 Mon Sep 17 00:00:00 2001
From: Massiles Ghernaout <749-gm213204@users.noreply.www-apps.univ-lehavre.fr>
Date: Thu, 20 Nov 2025 17:12:19 +0100
Subject: [PATCH 6/6] refactor of our code architecture + added an express
server instance for real time game stats view
---
arduino.js | 20 ----------
{public => game/public}/game.js | 38 +++++++++---------
{public => game/public}/index.html | 0
{public => game/public}/style.css | 0
server.js => game/server.js | 5 +--
simulator/index.html | 31 +++++++++++++++
simulator/simulate-arduino.js | 63 ++++++++++++++++++++++++++++++
7 files changed, 113 insertions(+), 44 deletions(-)
delete mode 100644 arduino.js
rename {public => game/public}/game.js (86%)
rename {public => game/public}/index.html (100%)
rename {public => game/public}/style.css (100%)
rename server.js => game/server.js (97%)
create mode 100644 simulator/index.html
create mode 100644 simulator/simulate-arduino.js
diff --git a/arduino.js b/arduino.js
deleted file mode 100644
index fdc45a5..0000000
--- a/arduino.js
+++ /dev/null
@@ -1,20 +0,0 @@
-const { SerialPort } = require("serialport");
-
-const PORT = "/dev/pts/2";
-const BAUD = 9600;
-
-const port = new SerialPort({
- path: PORT,
- baudRate: BAUD
-});
-
-port.on("open", () => {
- console.log(`Arduino Simulator running on ${PORT}`);
- console.log("Sending JUMP every 2 secondsโฆ");
-});
-
-setInterval(() => {
- port.write("JUMP\n");
- console.log("Sent: JUMP");
-}, 2000);
-
diff --git a/public/game.js b/game/public/game.js
similarity index 86%
rename from public/game.js
rename to game/public/game.js
index 449c635..16463ea 100644
--- a/public/game.js
+++ b/game/public/game.js
@@ -66,7 +66,7 @@ function spawnObstacle() {
y: canvas.height - groundHeight - height,
width: 30,
height: height,
- counted: false
+ counted: false
});
}
@@ -92,17 +92,17 @@ function update() {
obstacles.forEach(o => {
o.x -= gameSpeed;
- // If the obstacle passed the player and was not counted yet:
- if (!o.counted && o.x + o.width < player.x) {
- o.counted = true;
- score += 1;
-
- // Send updated score to backend
- sendToServer({
- type: "score",
- score: Math.floor(score)
- });
- }
+ // If the obstacle passed the player and was not counted yet:
+ if (!o.counted && o.x + o.width < player.x) {
+ o.counted = true;
+ score += 1;
+
+ // Send updated score to backend
+ sendToServer({
+ type: "score",
+ score: Math.floor(score)
+ });
+ }
});
// Remove off-screen obstacles
@@ -118,21 +118,19 @@ function update() {
) {
// GAME OVER
alive = false;
- deathCount++;
+ deathCount++;
gameOverUI.classList.remove("hidden");
- // Send death count to backend
- sendToServer({
- type: "death",
- deaths: deathCount
- });
+ // Send death count to backend
+ sendToServer({
+ type: "death",
+ deaths: deathCount
+ });
}
}
- // Score increases with time
- score += 0.02;
scoreDisplay.innerText = Math.floor(score);
draw();
diff --git a/public/index.html b/game/public/index.html
similarity index 100%
rename from public/index.html
rename to game/public/index.html
diff --git a/public/style.css b/game/public/style.css
similarity index 100%
rename from public/style.css
rename to game/public/style.css
diff --git a/server.js b/game/server.js
similarity index 97%
rename from server.js
rename to game/server.js
index 73cf41b..5bd4f2e 100644
--- a/server.js
+++ b/game/server.js
@@ -41,7 +41,7 @@ wss.on("connection", ws => {
});
-// ---- SerialPort Setup (adjust COM port!) ----
+// ---- SerialPort Setup ----
const arduinoPort = new SerialPort({
path: "/dev/pts/3", // or "/dev/ttyACM0"
baudRate: 9600,
@@ -63,9 +63,6 @@ parser.on("data", line => {
}
});
-
-
-
// --- Utility Functions ---
function sendToArduino(message) {
if (arduinoPort.isOpen) {
diff --git a/simulator/index.html b/simulator/index.html
new file mode 100644
index 0000000..662e373
--- /dev/null
+++ b/simulator/index.html
@@ -0,0 +1,31 @@
+
+
+
+ Arduino Serial Monitor
+
+
+
+ Arduino Serial Data
+ Score: 0
+ Deaths: 0
+
+
+
+
diff --git a/simulator/simulate-arduino.js b/simulator/simulate-arduino.js
new file mode 100644
index 0000000..71fa95e
--- /dev/null
+++ b/simulator/simulate-arduino.js
@@ -0,0 +1,63 @@
+const { SerialPort, ReadlineParser } = require("serialport");
+const express = require("express");
+const http = require("http");
+const WebSocket = require("ws");
+
+const PORT_NAME = "/dev/pts/2";
+const BAUD = 9600;
+
+// --- Serial port setup ---
+const port = new SerialPort({
+ path: PORT_NAME,
+ baudRate: BAUD,
+});
+
+const parser = port.pipe(new ReadlineParser({ delimiter: "\n" }));
+
+port.on("open", () => {
+ console.log(`Arduino Simulator running on ${PORT_NAME}`);
+ console.log("Sending JUMP every 2 secondsโฆ");
+});
+
+// Send "JUMP" every 2 seconds
+// setInterval(() => {
+// port.write("JUMP\n");
+// console.log("Sent: JUMP");
+// }, 2000);
+
+// --- Express server setup ---
+const app = express();
+const server = http.createServer(app);
+
+// Serve HTML page
+app.get("/", (req, res) => {
+ res.sendFile(__dirname + "/index.html");
+});
+
+// --- WebSocket server ---
+const wss = new WebSocket.Server({ server });
+
+wss.on("connection", (ws) => {
+ console.log("New WebSocket client connected");
+});
+
+// Broadcast function
+function broadcast(data) {
+ wss.clients.forEach((client) => {
+ if (client.readyState === WebSocket.OPEN) {
+ client.send(data);
+ }
+ });
+}
+
+// Listen to serial data and broadcast
+parser.on("data", (line) => {
+ console.log("Received from serial:", line);
+ broadcast(line.trim());
+});
+
+// Start HTTP server
+const HTTP_PORT = 8000;
+server.listen(HTTP_PORT, () => {
+ console.log(`Server running at http://localhost:${HTTP_PORT}`);
+});
--
GitLab