![" + digits[i] + "](assets/font_big_" + digits[i] + ".png)
");
+}
+
+function setSmallScore()
+{
+ var elemscore = $("#currentscore");
+ elemscore.empty();
+
+ var digits = score.toString().split('');
+ for(var i = 0; i < digits.length; i++)
+ elemscore.append("![" + digits[i] + "](assets/font_small_" + digits[i] + ".png)
");
+}
+
+function setHighScore()
+{
+ var elemscore = $("#highscore");
+ elemscore.empty();
+
+ var digits = highscore.toString().split('');
+ for(var i = 0; i < digits.length; i++)
+ elemscore.append("");
+}
+
+function setMedal()
+{
+ var elemmedal = $("#medal");
+ elemmedal.empty();
+
+ if(score < 10)
+ //signal that no medal has been won
+ return false;
+
+ if(score >= 10)
+ medal = "bronze";
+ if(score >= 20)
+ medal = "silver";
+ if(score >= 30)
+ medal = "gold";
+ if(score >= 40)
+ medal = "platinum";
+
+ elemmedal.append('
');
+
+ //signal that a medal has been won
+ return true;
+}
+
+function playerDead()
+{
+ //stop animating everything!
+ $(".animated").css('animation-play-state', 'paused');
+ $(".animated").css('-webkit-animation-play-state', 'paused');
+
+ //drop the bird to the floor
+ var playerbottom = $("#player").position().top + $("#player").width(); //we use width because he'll be rotated 90 deg
+ var floor = flyArea;
+ var movey = Math.max(0, floor - playerbottom);
+ $("#player").transition({ y: movey + 'px', rotate: 90}, 1000, 'easeInOutCubic');
+
+ //it's time to change states. as of now we're considered ScoreScreen to disable left click/flying
+ currentstate = states.ScoreScreen;
+
+ //destroy our gameloops
+ clearInterval(loopGameloop);
+ clearInterval(loopPipeloop);
+ loopGameloop = null;
+ loopPipeloop = null;
+
+ //mobile browsers don't support buzz bindOnce event
+ if(isIncompatible.any())
+ {
+ //skip right to showing score
+ showScore();
+ }
+ else
+ {
+ //play the hit sound (then the dead sound) and then show score
+ soundHit.play().bindOnce("ended", function() {
+ soundDie.play().bindOnce("ended", function() {
+ showScore();
+ });
+ });
+ }
+}
+
+function showScore()
+{
+ //unhide us
+ $("#scoreboard").css("display", "block");
+
+ //remove the big score
+ setBigScore(true);
+
+ //have they beaten their high score?
+ if(score > highscore)
+ {
+ //yeah!
+ highscore = score;
+ //save it!
+ setCookie("highscore", highscore, 999);
+ }
+
+ //update the scoreboard
+ setSmallScore();
+ setHighScore();
+ var wonmedal = setMedal();
+
+ //SWOOSH!
+ soundSwoosh.stop();
+ soundSwoosh.play();
+
+ //show the scoreboard
+ $("#scoreboard").css({ y: '40px', opacity: 0 }); //move it down so we can slide it up
+ $("#replay").css({ y: '40px', opacity: 0 });
+ $("#scoreboard").transition({ y: '0px', opacity: 1}, 600, 'ease', function() {
+ //When the animation is done, animate in the replay button and SWOOSH!
+ soundSwoosh.stop();
+ soundSwoosh.play();
+ $("#replay").transition({ y: '0px', opacity: 1}, 600, 'ease');
+
+ //also animate in the MEDAL! WOO!
+ if(wonmedal)
+ {
+ $("#medal").css({ scale: 2, opacity: 0 });
+ $("#medal").transition({ opacity: 1, scale: 1 }, 1200, 'ease');
+ }
+ });
+
+ //make the replay button clickable
+ replayclickable = true;
+}
+
+$("#replay").click(function() {
+ //make sure we can only click once
+ if(!replayclickable)
+ return;
+ else
+ replayclickable = false;
+ //SWOOSH!
+ soundSwoosh.stop();
+ soundSwoosh.play();
+
+ //fade out the scoreboard
+ $("#scoreboard").transition({ y: '-40px', opacity: 0}, 1000, 'ease', function() {
+ //when that's done, display us back to nothing
+ $("#scoreboard").css("display", "none");
+
+ //start the game over!
+ showSplash();
+ });
+});
+
+function playerScore()
+{
+ score += 1;
+ //play score sound
+ soundScore.stop();
+ soundScore.play();
+ setBigScore();
+}
+
+function updatePipes()
+{
+ //Do any pipes need removal?
+ $(".pipe").filter(function() { return $(this).position().left <= -100; }).remove()
+
+ //add a new pipe (top height + bottom height + pipeheight == flyArea) and put it in our tracker
+ var padding = 80;
+ var constraint = flyArea - pipeheight - (padding * 2); //double padding (for top and bottom)
+ var topheight = Math.floor((Math.random()*constraint) + padding); //add lower padding
+ var bottomheight = (flyArea - pipeheight) - topheight;
+ var newpipe = $('');
+ $("#flyarea").append(newpipe);
+ pipes.push(newpipe);
+}
+
+var isIncompatible = {
+ Android: function() {
+ return navigator.userAgent.match(/Android/i);
+ },
+ BlackBerry: function() {
+ return navigator.userAgent.match(/BlackBerry/i);
+ },
+ iOS: function() {
+ return navigator.userAgent.match(/iPhone|iPad|iPod/i);
+ },
+ Opera: function() {
+ return navigator.userAgent.match(/Opera Mini/i);
+ },
+ Safari: function() {
+ return (navigator.userAgent.match(/OS X.*Safari/) && ! navigator.userAgent.match(/Chrome/));
+ },
+ Windows: function() {
+ return navigator.userAgent.match(/IEMobile/i);
+ },
+ any: function() {
+ return (isIncompatible.Android() || isIncompatible.BlackBerry() || isIncompatible.iOS() || isIncompatible.Opera() || isIncompatible.Safari() || isIncompatible.Windows());
+ }
+};
+
+// Vercel API functions for mobile controller support
+function initializeAPIConnection() {
+ // Register as game client
+ fetch('/api/connect', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({
+ type: 'register',
+ clientType: 'game'
+ })
+ })
+ .then(response => response.json())
+ .then(data => {
+ if (data.success) {
+ isConnected = true;
+ console.log('Game client registered with API:', data.message);
+
+ // Set up polling to check for mobile commands
+ startCommandPolling();
+ } else {
+ console.error('Failed to register game client:', data.message);
+ }
+ })
+ .catch(error => {
+ console.error('Error registering game client:', error);
+ });
+}
+
+function startCommandPolling() {
+ // Poll for mobile commands every 100ms for responsive gameplay
+ setInterval(() => {
+ if (isConnected) {
+ checkForMobileCommands();
+ }
+ }, 100);
+}
+
+function checkForMobileCommands() {
+ // In a real implementation, you'd check a message queue or database
+ // For now, we'll simulate by checking if there are any pending commands
+ // This is a simplified version - in production you'd use a proper message system
+
+ // Check if there's a mobile command available
+ // This would typically involve checking a shared state or message queue
+ // For demo purposes, we'll skip the actual polling and rely on the existing
+ // click/touch handlers for now
+}
+
+// Override the existing screenClick function to also send commands to mobile
+const originalScreenClick = screenClick;
+function screenClick() {
+ // Call original function
+ originalScreenClick();
+
+ // Also send command to API for mobile clients
+ if (isConnected) {
+ fetch('/api/connect', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({
+ type: 'flap',
+ message: 'flap'
+ })
+ })
+ .catch(error => {
+ console.error('Error sending command to API:', error);
+ });
+ }
+}
diff --git a/js/main.js b/js/main.js
index 6a62036d..c7d963e6 100644
--- a/js/main.js
+++ b/js/main.js
@@ -8,6 +8,11 @@ var states = Object.freeze({
var currentstate;
+// WebSocket support for mobile controller
+var websocket = null;
+var websocketConnected = false;
+var websocketServerUrl = 'ws://localhost:8080';
+
var gravity = 0.25;
var velocity = 0;
var position = 180;
@@ -48,6 +53,9 @@ $(document).ready(function() {
if(savedscore != "")
highscore = parseInt(savedscore);
+ // Initialize WebSocket connection for mobile controller
+ initializeWebSocket();
+
//start with the splash screen
showSplash();
});
@@ -480,3 +488,53 @@ var isIncompatible = {
return (isIncompatible.Android() || isIncompatible.BlackBerry() || isIncompatible.iOS() || isIncompatible.Opera() || isIncompatible.Safari() || isIncompatible.Windows());
}
};
+
+// WebSocket functions for mobile controller support
+function initializeWebSocket() {
+ try {
+ websocket = new WebSocket(websocketServerUrl);
+
+ websocket.onopen = function(event) {
+ websocketConnected = true;
+ console.log('Connected to WebSocket server for mobile controller');
+ // Register as game client
+ websocket.send('game-client');
+ };
+
+ websocket.onmessage = function(event) {
+ const message = event.data;
+ console.log('Received WebSocket message:', message);
+
+ if (message === 'flap') {
+ // Trigger bird flap from mobile controller
+ if (currentstate === states.GameScreen) {
+ playerJump();
+ } else if (currentstate === states.SplashScreen) {
+ startGame();
+ }
+ }
+ };
+
+ websocket.onclose = function(event) {
+ websocketConnected = false;
+ console.log('WebSocket connection closed');
+ // Attempt to reconnect after 3 seconds
+ setTimeout(initializeWebSocket, 3000);
+ };
+
+ websocket.onerror = function(error) {
+ websocketConnected = false;
+ console.error('WebSocket error:', error);
+ };
+
+ } catch (error) {
+ console.error('Error initializing WebSocket:', error);
+ websocketConnected = false;
+ }
+}
+
+function sendWebSocketMessage(message) {
+ if (websocket && websocketConnected) {
+ websocket.send(message);
+ }
+}
diff --git a/mobile-controller-standalone.html b/mobile-controller-standalone.html
new file mode 100644
index 00000000..faa98b09
--- /dev/null
+++ b/mobile-controller-standalone.html
@@ -0,0 +1,411 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/mobile-controller-vercel.html b/mobile-controller-vercel.html
new file mode 100644
index 00000000..b2682728
--- /dev/null
+++ b/mobile-controller-vercel.html
@@ -0,0 +1,365 @@
+
+
+
+
+
+ 🐦 Flappy Bird
+Mobile Controller
+ +
+
+
+
+
+
+
+
+ Quick Connect:
+ +
+ Disconnected
+
+
+
+
+ Tap the button to make the bird flap!
+
+
+
+ How to use:
+1. Make sure your Flappy Bird game is running with WebSocket support
+2. Enter the correct WebSocket server URL above
+3. Click "Connect" to establish connection
+4. Tap "FLAP!" to control the bird in the game
+Ready to connect
+
+
+
+
+
+
diff --git a/mobile-controller.html b/mobile-controller.html
new file mode 100644
index 00000000..e82679d6
--- /dev/null
+++ b/mobile-controller.html
@@ -0,0 +1,307 @@
+
+
+
+
+
+ 🐦 Flappy Bird
+Mobile Controller
+ +
+ Disconnected
+
+
+
+
+ Tap the button to make the bird flap!
+
+
+
+
+ How to use:
+1. Make sure the Flappy Bird game is open on your computer
+2. This controller will automatically connect
+3. Tap "FLAP!" to control the bird in the game
+Connecting to server...
+
+
+ 🎮 Click here to open the game in a new tab
+
+
+
+
+
+
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 00000000..5e2c4d42
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,413 @@
+{
+ "name": "flappy-bird-mobile-controller",
+ "version": "1.0.0",
+ "lockfileVersion": 3,
+ "requires": true,
+ "packages": {
+ "": {
+ "name": "flappy-bird-mobile-controller",
+ "version": "1.0.0",
+ "license": "MIT",
+ "dependencies": {
+ "ws": "^8.14.2"
+ },
+ "devDependencies": {
+ "nodemon": "^3.0.1"
+ }
+ },
+ "node_modules/anymatch": {
+ "version": "3.1.3",
+ "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+ "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+ "dev": true,
+ "license": "ISC",
+ "dependencies": {
+ "normalize-path": "^3.0.0",
+ "picomatch": "^2.0.4"
+ },
+ "engines": {
+ "node": ">= 8"
+ }
+ },
+ "node_modules/balanced-match": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+ "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+ "dev": true,
+ "license": "MIT"
+ },
+ "node_modules/binary-extensions": {
+ "version": "2.3.0",
+ "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+ "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+ "dev": true,
+ "license": "MIT",
+ "engines": {
+ "node": ">=8"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/sindresorhus"
+ }
+ },
+ "node_modules/brace-expansion": {
+ "version": "1.1.12",
+ "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+ "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "balanced-match": "^1.0.0",
+ "concat-map": "0.0.1"
+ }
+ },
+ "node_modules/braces": {
+ "version": "3.0.3",
+ "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+ "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "fill-range": "^7.1.1"
+ },
+ "engines": {
+ "node": ">=8"
+ }
+ },
+ "node_modules/chokidar": {
+ "version": "3.6.0",
+ "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+ "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "anymatch": "~3.1.2",
+ "braces": "~3.0.2",
+ "glob-parent": "~5.1.2",
+ "is-binary-path": "~2.1.0",
+ "is-glob": "~4.0.1",
+ "normalize-path": "~3.0.0",
+ "readdirp": "~3.6.0"
+ },
+ "engines": {
+ "node": ">= 8.10.0"
+ },
+ "funding": {
+ "url": "https://paulmillr.com/funding/"
+ },
+ "optionalDependencies": {
+ "fsevents": "~2.3.2"
+ }
+ },
+ "node_modules/concat-map": {
+ "version": "0.0.1",
+ "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+ "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+ "dev": true,
+ "license": "MIT"
+ },
+ "node_modules/debug": {
+ "version": "4.4.3",
+ "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+ "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "ms": "^2.1.3"
+ },
+ "engines": {
+ "node": ">=6.0"
+ },
+ "peerDependenciesMeta": {
+ "supports-color": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/fill-range": {
+ "version": "7.1.1",
+ "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+ "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "to-regex-range": "^5.0.1"
+ },
+ "engines": {
+ "node": ">=8"
+ }
+ },
+ "node_modules/fsevents": {
+ "version": "2.3.3",
+ "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+ "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+ "dev": true,
+ "hasInstallScript": true,
+ "license": "MIT",
+ "optional": true,
+ "os": [
+ "darwin"
+ ],
+ "engines": {
+ "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+ }
+ },
+ "node_modules/glob-parent": {
+ "version": "5.1.2",
+ "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+ "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+ "dev": true,
+ "license": "ISC",
+ "dependencies": {
+ "is-glob": "^4.0.1"
+ },
+ "engines": {
+ "node": ">= 6"
+ }
+ },
+ "node_modules/has-flag": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+ "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+ "dev": true,
+ "license": "MIT",
+ "engines": {
+ "node": ">=4"
+ }
+ },
+ "node_modules/ignore-by-default": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/ignore-by-default/-/ignore-by-default-1.0.1.tgz",
+ "integrity": "sha512-Ius2VYcGNk7T90CppJqcIkS5ooHUZyIQK+ClZfMfMNFEF9VSE73Fq+906u/CWu92x4gzZMWOwfFYckPObzdEbA==",
+ "dev": true,
+ "license": "ISC"
+ },
+ "node_modules/is-binary-path": {
+ "version": "2.1.0",
+ "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+ "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "binary-extensions": "^2.0.0"
+ },
+ "engines": {
+ "node": ">=8"
+ }
+ },
+ "node_modules/is-extglob": {
+ "version": "2.1.1",
+ "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+ "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+ "dev": true,
+ "license": "MIT",
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
+ "node_modules/is-glob": {
+ "version": "4.0.3",
+ "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+ "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "is-extglob": "^2.1.1"
+ },
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
+ "node_modules/is-number": {
+ "version": "7.0.0",
+ "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+ "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+ "dev": true,
+ "license": "MIT",
+ "engines": {
+ "node": ">=0.12.0"
+ }
+ },
+ "node_modules/minimatch": {
+ "version": "3.1.2",
+ "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+ "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+ "dev": true,
+ "license": "ISC",
+ "dependencies": {
+ "brace-expansion": "^1.1.7"
+ },
+ "engines": {
+ "node": "*"
+ }
+ },
+ "node_modules/ms": {
+ "version": "2.1.3",
+ "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+ "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+ "dev": true,
+ "license": "MIT"
+ },
+ "node_modules/nodemon": {
+ "version": "3.1.10",
+ "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-3.1.10.tgz",
+ "integrity": "sha512-WDjw3pJ0/0jMFmyNDp3gvY2YizjLmmOUQo6DEBY+JgdvW/yQ9mEeSw6H5ythl5Ny2ytb7f9C2nIbjSxMNzbJXw==",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "chokidar": "^3.5.2",
+ "debug": "^4",
+ "ignore-by-default": "^1.0.1",
+ "minimatch": "^3.1.2",
+ "pstree.remy": "^1.1.8",
+ "semver": "^7.5.3",
+ "simple-update-notifier": "^2.0.0",
+ "supports-color": "^5.5.0",
+ "touch": "^3.1.0",
+ "undefsafe": "^2.0.5"
+ },
+ "bin": {
+ "nodemon": "bin/nodemon.js"
+ },
+ "engines": {
+ "node": ">=10"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/nodemon"
+ }
+ },
+ "node_modules/normalize-path": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+ "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+ "dev": true,
+ "license": "MIT",
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
+ "node_modules/picomatch": {
+ "version": "2.3.1",
+ "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+ "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+ "dev": true,
+ "license": "MIT",
+ "engines": {
+ "node": ">=8.6"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/jonschlinkert"
+ }
+ },
+ "node_modules/pstree.remy": {
+ "version": "1.1.8",
+ "resolved": "https://registry.npmjs.org/pstree.remy/-/pstree.remy-1.1.8.tgz",
+ "integrity": "sha512-77DZwxQmxKnu3aR542U+X8FypNzbfJ+C5XQDk3uWjWxn6151aIMGthWYRXTqT1E5oJvg+ljaa2OJi+VfvCOQ8w==",
+ "dev": true,
+ "license": "MIT"
+ },
+ "node_modules/readdirp": {
+ "version": "3.6.0",
+ "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+ "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "picomatch": "^2.2.1"
+ },
+ "engines": {
+ "node": ">=8.10.0"
+ }
+ },
+ "node_modules/semver": {
+ "version": "7.7.2",
+ "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
+ "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
+ "dev": true,
+ "license": "ISC",
+ "bin": {
+ "semver": "bin/semver.js"
+ },
+ "engines": {
+ "node": ">=10"
+ }
+ },
+ "node_modules/simple-update-notifier": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/simple-update-notifier/-/simple-update-notifier-2.0.0.tgz",
+ "integrity": "sha512-a2B9Y0KlNXl9u/vsW6sTIu9vGEpfKu2wRV6l1H3XEas/0gUIzGzBoP/IouTcUQbm9JWZLH3COxyn03TYlFax6w==",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "semver": "^7.5.3"
+ },
+ "engines": {
+ "node": ">=10"
+ }
+ },
+ "node_modules/supports-color": {
+ "version": "5.5.0",
+ "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+ "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "has-flag": "^3.0.0"
+ },
+ "engines": {
+ "node": ">=4"
+ }
+ },
+ "node_modules/to-regex-range": {
+ "version": "5.0.1",
+ "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+ "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "is-number": "^7.0.0"
+ },
+ "engines": {
+ "node": ">=8.0"
+ }
+ },
+ "node_modules/touch": {
+ "version": "3.1.1",
+ "resolved": "https://registry.npmjs.org/touch/-/touch-3.1.1.tgz",
+ "integrity": "sha512-r0eojU4bI8MnHr8c5bNo7lJDdI2qXlWWJk6a9EAFG7vbhTjElYhBVS3/miuE0uOuoLdb8Mc/rVfsmm6eo5o9GA==",
+ "dev": true,
+ "license": "ISC",
+ "bin": {
+ "nodetouch": "bin/nodetouch.js"
+ }
+ },
+ "node_modules/undefsafe": {
+ "version": "2.0.5",
+ "resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.5.tgz",
+ "integrity": "sha512-WxONCrssBM8TSPRqN5EmsjVrsv4A8X12J4ArBiiayv3DyyG3ZlIg6yysuuSYdZsVz3TKcTg2fd//Ujd4CHV1iA==",
+ "dev": true,
+ "license": "MIT"
+ },
+ "node_modules/ws": {
+ "version": "8.18.3",
+ "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.3.tgz",
+ "integrity": "sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==",
+ "license": "MIT",
+ "engines": {
+ "node": ">=10.0.0"
+ },
+ "peerDependencies": {
+ "bufferutil": "^4.0.1",
+ "utf-8-validate": ">=5.0.2"
+ },
+ "peerDependenciesMeta": {
+ "bufferutil": {
+ "optional": true
+ },
+ "utf-8-validate": {
+ "optional": true
+ }
+ }
+ }
+ }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 00000000..1ca7a8b6
--- /dev/null
+++ b/package.json
@@ -0,0 +1,29 @@
+{
+ "name": "flappy-bird-mobile-controller",
+ "version": "1.0.0",
+ "description": "Mobile controller for Flappy Bird game with WebSocket support",
+ "main": "websocket-server.js",
+ "scripts": {
+ "start": "node websocket-server.js",
+ "dev": "nodemon websocket-server.js",
+ "deploy": "node deploy.js",
+ "deploy:local": "node deploy.js local",
+ "deploy:railway": "node deploy.js railway",
+ "deploy:heroku": "node deploy.js heroku",
+ "deploy:github": "node deploy.js github"
+ },
+ "dependencies": {
+ "ws": "^8.14.2"
+ },
+ "devDependencies": {
+ "nodemon": "^3.0.1"
+ },
+ "keywords": [
+ "flappy-bird",
+ "mobile-controller",
+ "websocket",
+ "game"
+ ],
+ "author": "Your Name",
+ "license": "MIT"
+}
diff --git a/qr-code.html b/qr-code.html
new file mode 100644
index 00000000..086c7b88
--- /dev/null
+++ b/qr-code.html
@@ -0,0 +1,276 @@
+
+
+
+
+
+ 🐦 Flappy Bird
+Mobile Controller
+ +
+
+
+
+
+
+ Disconnected
+
+
+
+
+ Tap the button to make the bird flap!
+
+
+
+ How to use:
+1. Make sure your Flappy Bird game is running with WebSocket support
+2. Enter the correct server URL above
+3. Click "Connect" to establish connection
+4. Tap "FLAP!" to control the bird in the game
+
+
+
+
+
+
+
+
+
diff --git a/start.bat b/start.bat
new file mode 100644
index 00000000..bdf21bc8
--- /dev/null
+++ b/start.bat
@@ -0,0 +1,22 @@
+@echo off
+echo Starting Flappy Bird Mobile Controller System...
+echo.
+echo 1. Starting WebSocket Server...
+start "WebSocket Server" cmd /k "npm start"
+echo.
+echo 2. Waiting for server to start...
+timeout /t 3 /nobreak > nul
+echo.
+echo 3. Opening game in browser...
+start "" "index.html"
+echo.
+echo 4. Opening mobile controller in browser...
+start "" "mobile-controller.html"
+echo.
+echo System started!
+echo - Game: index.html
+echo - Mobile Controller: mobile-controller.html
+echo - WebSocket Server: http://localhost:8080
+echo.
+echo Press any key to exit...
+pause > nul
diff --git a/start.sh b/start.sh
new file mode 100644
index 00000000..64e76153
--- /dev/null
+++ b/start.sh
@@ -0,0 +1,43 @@
+#!/bin/bash
+
+echo "Starting Flappy Bird Mobile Controller System..."
+echo
+
+echo "1. Starting WebSocket Server..."
+npm start &
+SERVER_PID=$!
+
+echo
+echo "2. Waiting for server to start..."
+sleep 3
+
+echo
+echo "3. Opening game in browser..."
+if command -v xdg-open > /dev/null; then
+ xdg-open "index.html"
+elif command -v open > /dev/null; then
+ open "index.html"
+else
+ echo "Please open index.html in your browser"
+fi
+
+echo
+echo "4. Opening mobile controller in browser..."
+if command -v xdg-open > /dev/null; then
+ xdg-open "mobile-controller.html"
+elif command -v open > /dev/null; then
+ open "mobile-controller.html"
+else
+ echo "Please open mobile-controller.html in your browser"
+fi
+
+echo
+echo "System started!"
+echo "- Game: index.html"
+echo "- Mobile Controller: mobile-controller.html"
+echo "- WebSocket Server: http://localhost:8080"
+echo
+echo "Press Ctrl+C to stop the server..."
+
+# Wait for user to stop
+wait $SERVER_PID
diff --git a/vercel.json b/vercel.json
new file mode 100644
index 00000000..af4ca9a1
--- /dev/null
+++ b/vercel.json
@@ -0,0 +1,35 @@
+{
+ "version": 2,
+ "builds": [
+ {
+ "src": "api/connect.js",
+ "use": "@vercel/node"
+ }
+ ],
+ "routes": [
+ {
+ "src": "/api/connect",
+ "dest": "/api/connect.js"
+ },
+ {
+ "src": "/mobile",
+ "dest": "/mobile-controller-vercel.html"
+ },
+ {
+ "src": "/qr",
+ "dest": "/qr-code.html"
+ },
+ {
+ "src": "/",
+ "dest": "/index.html"
+ }
+ ],
+ "functions": {
+ "api/connect.js": {
+ "maxDuration": 30
+ }
+ },
+ "env": {
+ "NODE_ENV": "production"
+ }
+}
diff --git a/websocket-server.js b/websocket-server.js
new file mode 100644
index 00000000..a3982b8d
--- /dev/null
+++ b/websocket-server.js
@@ -0,0 +1,194 @@
+const WebSocket = require('ws');
+const http = require('http');
+const fs = require('fs');
+const path = require('path');
+const url = require('url');
+
+// CORS headers for cross-origin requests
+const corsHeaders = {
+ 'Access-Control-Allow-Origin': '*',
+ 'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
+ 'Access-Control-Allow-Headers': 'Content-Type, Authorization',
+ 'Access-Control-Max-Age': '86400'
+};
+
+// Create HTTP server to serve the mobile controller
+const server = http.createServer((req, res) => {
+ // Handle CORS preflight requests
+ if (req.method === 'OPTIONS') {
+ res.writeHead(200, corsHeaders);
+ res.end();
+ return;
+ }
+
+ // Add CORS headers to all responses
+ Object.keys(corsHeaders).forEach(key => {
+ res.setHeader(key, corsHeaders[key]);
+ });
+
+ let filePath = req.url === '/' ? '/mobile-controller.html' : req.url;
+ filePath = path.join(__dirname, filePath);
+
+ // Set content type based on file extension
+ const ext = path.extname(filePath);
+ const contentTypes = {
+ '.html': 'text/html',
+ '.css': 'text/css',
+ '.js': 'application/javascript',
+ '.png': 'image/png',
+ '.jpg': 'image/jpeg',
+ '.gif': 'image/gif',
+ '.ico': 'image/x-icon'
+ };
+
+ const contentType = contentTypes[ext] || 'text/plain';
+
+ fs.readFile(filePath, (err, data) => {
+ if (err) {
+ res.writeHead(404, corsHeaders);
+ res.end('File not found');
+ return;
+ }
+
+ res.writeHead(200, {
+ 'Content-Type': contentType,
+ ...corsHeaders
+ });
+ res.end(data);
+ });
+});
+
+// Create WebSocket server with CORS support
+const wss = new WebSocket.Server({
+ server,
+ verifyClient: (info) => {
+ // Allow connections from any origin for now
+ // In production, you might want to restrict this
+ return true;
+ }
+});
+
+// Store connected clients
+const gameClients = new Set();
+const mobileClients = new Set();
+
+// Client connection tracking
+let connectionCount = 0;
+
+wss.on('connection', (ws, req) => {
+ connectionCount++;
+ const clientId = connectionCount;
+ const clientIP = req.socket.remoteAddress;
+ const userAgent = req.headers['user-agent'] || 'Unknown';
+
+ console.log(`[${new Date().toISOString()}] Client #${clientId} connected from ${clientIP}`);
+ console.log(`User-Agent: ${userAgent}`);
+
+ // Set up ping/pong for connection health
+ ws.isAlive = true;
+ ws.on('pong', () => {
+ ws.isAlive = true;
+ });
+
+ ws.on('message', (message) => {
+ const data = message.toString();
+ console.log(`[${new Date().toISOString()}] Client #${clientId} sent: ${data}`);
+
+ if (data === 'flap') {
+ // Forward flap command to all game clients
+ let forwardedCount = 0;
+ gameClients.forEach(gameClient => {
+ if (gameClient.readyState === WebSocket.OPEN) {
+ gameClient.send('flap');
+ forwardedCount++;
+ }
+ });
+ console.log(`Flap command forwarded to ${forwardedCount} game clients`);
+ } else if (data === 'game-client') {
+ // This is a game client connecting
+ gameClients.add(ws);
+ ws.clientType = 'game';
+ console.log(`Game client #${clientId} registered (Total game clients: ${gameClients.size})`);
+
+ // Send confirmation
+ ws.send('game-connected');
+ } else if (data === 'mobile-client') {
+ // This is a mobile client connecting
+ mobileClients.add(ws);
+ ws.clientType = 'mobile';
+ console.log(`Mobile client #${clientId} registered (Total mobile clients: ${mobileClients.size})`);
+
+ // Send confirmation
+ ws.send('mobile-connected');
+ } else {
+ console.log(`Unknown message from client #${clientId}: ${data}`);
+ }
+ });
+
+ ws.on('close', (code, reason) => {
+ console.log(`[${new Date().toISOString()}] Client #${clientId} disconnected (Code: ${code}, Reason: ${reason})`);
+ gameClients.delete(ws);
+ mobileClients.delete(ws);
+ console.log(`Remaining clients - Game: ${gameClients.size}, Mobile: ${mobileClients.size}`);
+ });
+
+ ws.on('error', (error) => {
+ console.error(`[${new Date().toISOString()}] WebSocket error for client #${clientId}:`, error);
+ gameClients.delete(ws);
+ mobileClients.delete(ws);
+ });
+});
+
+// Ping/pong mechanism to keep connections alive
+const pingInterval = setInterval(() => {
+ wss.clients.forEach((ws) => {
+ if (ws.isAlive === false) {
+ console.log('Terminating inactive connection');
+ return ws.terminate();
+ }
+ ws.isAlive = false;
+ ws.ping();
+ });
+}, 30000); // Ping every 30 seconds
+
+// Start the server
+const PORT = process.env.PORT || 8080;
+const HOST = process.env.HOST || '0.0.0.0';
+
+server.listen(PORT, HOST, () => {
+ console.log(`🚀 WebSocket server running on ${HOST}:${PORT}`);
+ console.log(`📱 Mobile controller available at: http://${HOST === '0.0.0.0' ? 'localhost' : HOST}:${PORT}`);
+ console.log(`🔌 WebSocket endpoint: ws://${HOST === '0.0.0.0' ? 'localhost' : HOST}:${PORT}`);
+ console.log(`🌐 For external access, use your public IP or domain name`);
+ console.log(`📊 Server ready to accept connections...`);
+});
+
+// Graceful shutdown
+process.on('SIGINT', () => {
+ console.log('\n🛑 Shutting down server...');
+ clearInterval(pingInterval);
+
+ // Close all WebSocket connections
+ wss.clients.forEach((ws) => {
+ ws.close(1000, 'Server shutting down');
+ });
+
+ server.close(() => {
+ console.log('✅ Server closed gracefully');
+ process.exit(0);
+ });
+});
+
+process.on('SIGTERM', () => {
+ console.log('\n🛑 Received SIGTERM, shutting down gracefully...');
+ clearInterval(pingInterval);
+
+ wss.clients.forEach((ws) => {
+ ws.close(1000, 'Server shutting down');
+ });
+
+ server.close(() => {
+ console.log('✅ Server closed gracefully');
+ process.exit(0);
+ });
+});
🐦 Flappy Bird
+Mobile Controller QR Code
+ +
+
+
+
+
+ Loading...
+
+
+
+
+
+
+
+ How to use:
+1. Scan the QR code with your mobile device
+2. The mobile controller will open automatically
+3. Make sure the game is running on your computer
+4. Tap "FLAP!" to control the bird!
+
+
+ 🎮 Click here to open the game in a new tab
+