From a003501058a951e512613a4ad640ee42d19a53b2 Mon Sep 17 00:00:00 2001
From: Pedro Santayana <pedrosantayana@gmail.com>
Date: Thu, 2 Oct 2025 19:51:48 -0300
Subject: [PATCH 1/6] wip3

---
 app/games/Game.tsx                |   2 +-
 app/games/flappy-bird-js/Game.tsx | 308 ++++++++++++++++++++++++++++++
 app/routes.ts                     |   5 +-
 app/routes/Home.tsx               |   2 +-
 tsconfig.json                     |   4 +-
 5 files changed, 315 insertions(+), 6 deletions(-)
 create mode 100644 app/games/flappy-bird-js/Game.tsx

diff --git a/app/games/Game.tsx b/app/games/Game.tsx
index 4b5837d..eb5e10c 100644
--- a/app/games/Game.tsx
+++ b/app/games/Game.tsx
@@ -92,7 +92,7 @@ export default function Game() {
             });
 
             // Game Loop
-            app.ticker.add(() => {
+            app.ticker.add((ticker) => {
                 Matter.Engine.update(engine, 1000 / 60);
 
                 // Sync Matter bodies to Pixi graphics
diff --git a/app/games/flappy-bird-js/Game.tsx b/app/games/flappy-bird-js/Game.tsx
new file mode 100644
index 0000000..cb78bdb
--- /dev/null
+++ b/app/games/flappy-bird-js/Game.tsx
@@ -0,0 +1,308 @@
+"use client";
+import {
+  Bodies,
+  Body,
+  Composite,
+  Engine,
+  Events,
+//   IEventCollision,
+//   IEventTimestamped,
+  Render,
+  Runner,
+} from "matter-js";
+
+
+import { useEffect, useRef } from "react";
+import * as PIXI from "pixi.js";
+import Matter from "matter-js";
+
+export default function Game() {
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+interface NetInput {
+  pipeDistance: number;
+  pipeY: number;
+  birdVelocity: number;
+  birdY: number;
+  weights: number[];
+}
+
+interface Individual {
+  body: Body;
+  genes: number[];
+  time: number;
+  isAlive: boolean;
+}
+
+const TRAINNING_TIME = 30 * 1000;
+const POPULATION_SIZE = 1000;
+const SCALE = 1;
+
+const engine = Engine.create();
+const render = Render.create({
+  element: document.body,
+  engine: engine,
+  options: {
+    width: 500,
+    height: 500,
+  },
+});
+
+const playerCategory = 0x0001;
+const obsCategory = 0x0002;
+
+const bot = Bodies.rectangle(50, 50, 50, 400, {
+  inertia: Infinity,
+  friction: 0,
+  collisionFilter: { category: obsCategory },
+  label: "obstacle",
+});
+
+const top = Bodies.rectangle(50, 50, 50, 400, {
+  inertia: Infinity,
+  friction: 0,
+  label: "obstacle",
+  collisionFilter: { category: obsCategory },
+});
+
+engine.gravity.scale = 0;
+
+Composite.add(engine.world, [bot, top]);
+
+Render.run(render);
+
+const runner = Runner.create();
+Runner.run(runner, engine);
+
+reset();
+
+let population: Individual[] = [];  
+
+Array.from({ length: POPULATION_SIZE }).forEach((_) => createIndividual());
+
+let cycles = 1;
+let points = 0;
+let randomHeight = 0;
+
+Events.on(engine, "beforeUpdate", loop);
+Events.on(engine, "collisionStart", collisionHandler);
+
+document.getElementById("timeScale")!.onchange = (event) => {
+  event.preventDefault();
+  const input: HTMLInputElement = document.getElementById("timeScale")! as HTMLInputElement;
+
+  engine.timing.timeScale = 10 *  parseInt(input.value) / 100;
+} 
+
+
+function collisionHandler(event: IEventCollision<Engine>) {
+  event.pairs.forEach((pair) => {
+    const body = pair.bodyB;
+    const individual = population.find(
+      (individual) => individual.body === body
+    );
+    
+    if (individual) removeIndividual(individual);
+  });
+}
+
+function loop(event: IEventTimestamped<Engine>) {
+  population.forEach((individual) => {
+    Body.applyForce(individual.body, individual.body.position, {
+      x: 0,
+      y: individual.body.mass * 0.001 * SCALE,
+    });
+  });
+
+  Body.setVelocity(top, { x: -2 * SCALE, y: 0 });
+  Body.setVelocity(bot, { x: -2 * SCALE, y: 0 });
+
+  //Body.setPosition(top, { ...top.position, y:  })
+
+  if (top.position.x < 50) {
+    reset();
+    
+    document.getElementById("points")!.innerText = (++points).toString();
+  }
+  
+  population.filter(individual => individual.isAlive).forEach(individual => {
+    if (individual.body.position.y > 500 || individual.body.position.y < 0) {
+      removeIndividual(individual)
+    }
+  })
+  
+  population
+    .filter(individual => individual.isAlive)
+    .forEach(individual => individual.time = event.timestamp)
+  
+  population.forEach((individual) => {
+    const shouldJump = individualShouldJump(individual);
+    
+    if (shouldJump) jump(individual.body);
+  });
+  
+  const isAllDead = population.every(individual => !individual.isAlive);
+  
+  if (isAllDead) {
+    //ciclamos
+    console.log("ciclo")
+    points = 0;
+    document.getElementById("points")!.innerText = (points).toString();
+    cycles++;
+    reset();
+
+    // limpar: todo: tem jeito melhor
+    population
+      .filter((individual) => individual.isAlive)
+      .forEach((individual) => removeIndividual(individual));
+    
+    population = getNewPopulation();
+  }
+}
+
+function getRandomInt(min: number, max: number) {
+  min = Math.ceil(min); // Ensure min is an integer
+  max = Math.floor(max); // Ensure max is an integer
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+function getNewPopulation() {
+  const sorted = population.toSorted((a, b) => getFitness(b) - getFitness(a));
+
+  const fittests = Math.floor(POPULATION_SIZE * 0.1);
+
+  const newPopulation = [];
+
+  Array.from({length: fittests}).forEach((_, index) => newPopulation.push(createIndividual(sorted[index].genes)));
+
+  for (let i = 0; i < POPULATION_SIZE - fittests; i++) {
+    const r1 = getRandomInt(0, Math.floor(POPULATION_SIZE * 0.5));
+    const ind1 = sorted[r1];
+
+    const r2 = getRandomInt(0, Math.floor(POPULATION_SIZE * 0.5));
+    const ind2 = sorted[r2];
+
+    //mate
+    const newGenes = mate(ind1, ind2);
+
+    newPopulation.push(createIndividual(newGenes));
+  }
+
+  return newPopulation;
+}
+
+function mate(individual1: Individual, individual2: Individual): number[] {
+  const newGenes = [];
+
+  for (let i = 0; i < 4; i++) {
+    let p = Math.random();
+    if (p < 0.45) newGenes.push(individual1.genes[i]);
+    else if (p < 0.9) newGenes.push(individual2.genes[i]);
+    else newGenes.push(getRandomArbitrary(-1, 1));
+  }
+
+  return newGenes;
+}
+
+function reset() {
+  const rh = getRandomInt(125, 375);
+
+  Body.setPosition(top, { y: rh + 300, x: 525 });
+  Body.setPosition(bot, { y: rh - 300, x: 525 });
+
+  Body.setVelocity(top, { x: 0, y: 0 });
+  Body.setVelocity(bot, { x: 0, y: 0 });
+}
+
+function jump(body: Body) {
+  Body.setVelocity(body, { x: body.velocity.x, y: -4 * SCALE });
+}
+
+function getRandomArbitrary(min: number, max: number) {
+  return Math.random() * (max - min) + min;
+}
+
+function individualShouldJump(individual: Individual) {
+  const pipeDistance = top.position.x;
+  const pipeY = top.position.y + 300;
+  const birdVelocity = individual.body.velocity.y;
+  const birdY = individual.body.position.y;
+
+  if (population.findIndex(indi => indi === individual) === 0) {
+    document.getElementById("pipeDistance")!.innerText = pipeDistance.toString();
+    document.getElementById("pipeY")!.innerText = pipeY.toString();
+    document.getElementById("birdVelocity")!.innerText = birdVelocity.toString();
+    document.getElementById("birdY")!.innerText = birdY.toString();
+    document.getElementById("time")!.innerText = individual.time.toString();
+  }
+
+  const shouldJump = calculateJump({
+    pipeDistance,
+    pipeY,
+    birdVelocity,
+    birdY,
+    weights: individual.genes,
+  });
+
+  return shouldJump;
+}
+
+function calculateJump({
+  pipeDistance,
+  pipeY,
+  birdVelocity,
+  birdY,
+  weights,
+}: NetInput) {
+  const inputs = [pipeDistance, pipeY, birdVelocity, birdY];
+
+  const sum = inputs.reduce(
+    (acc, input, index) => acc + input * weights[index],
+    0
+  );
+
+  return sum >= 0;
+}
+
+function createIndividual(genes1?: number[]): Individual {
+  const body = Bodies.rectangle(50, 50, 50, 50, {
+    inertia: Infinity,
+    collisionFilter: { category: playerCategory, group: -1 },
+    label: "individual",
+  });
+
+  Composite.add(engine.world, [body]);
+
+  const genes = [];
+
+  genes.push(getRandomArbitrary(-1, 1));
+  genes.push(getRandomArbitrary(-1, 1));
+  genes.push(getRandomArbitrary(-1, 1));
+  genes.push(getRandomArbitrary(-1, 1));
+
+  const individual = { body, genes: genes1 || genes, time: 0, isAlive: true };
+
+  population.push(individual);
+
+  return individual;
+}
+
+function getFitness(individual: Individual) {
+  return individual.time - TRAINNING_TIME;
+}
+
+function removeIndividual(individual: Individual) {
+  individual.isAlive = false;
+
+  Composite.remove(engine.world, [individual.body]);
+}
+
+
+        return () => {
+            // app.destroy(true, true);
+        };
+    }, []);
+
+    return <div ref={containerRef} />;
+}
diff --git a/app/routes.ts b/app/routes.ts
index f0bb28f..3b70edf 100644
--- a/app/routes.ts
+++ b/app/routes.ts
@@ -1,3 +1,4 @@
-import { type RouteConfig, index } from "@react-router/dev/routes";
+import { type RouteConfig, index, route } from "@react-router/dev/routes";
+import Game from "./games/Game";
 
-export default [index("routes/Home.tsx")] satisfies RouteConfig;
+export default [index("routes/Home.tsx"), route("/games/flappy", "games/Game.tsx")] satisfies RouteConfig;
diff --git a/app/routes/Home.tsx b/app/routes/Home.tsx
index a5bf995..469d56a 100644
--- a/app/routes/Home.tsx
+++ b/app/routes/Home.tsx
@@ -1,4 +1,4 @@
-    import type { Route } from "./+types/Home";
+import type { Route } from "./+types/Home";
 import Game from "~/games/Game";
 
 export function meta({}: Route.MetaArgs) {
diff --git a/tsconfig.json b/tsconfig.json
index dc391a4..f34b4a0 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -6,9 +6,9 @@
     ".react-router/types/**/*"
   ],
   "compilerOptions": {
-    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "lib": ["DOM", "DOM.Iterable", "ES2023"],
     "types": ["node", "vite/client"],
-    "target": "ES2022",
+    "target": "ES2023",
     "module": "ES2022",
     "moduleResolution": "bundler",
     "jsx": "react-jsx",

From 202db0d76224aa411606641d847d837d84b30689 Mon Sep 17 00:00:00 2001
From: Pedro Santayana <pedrosantayana@gmail.com>
Date: Wed, 8 Oct 2025 17:43:58 -0300
Subject: [PATCH 2/6] wip

---
 app/games/flappy-bird-js/Game.tsx             | 474 +++++++++---------
 .../flappy-bird-js/assets/background-day.png  | Bin 0 -> 7026 bytes
 app/games/flappy-bird-js/assets/base.png      | Bin 0 -> 470 bytes
 .../flappy-bird-js/assets/pipe-green.png      | Bin 0 -> 2527 bytes
 .../assets/yellowbird-downflap.png            | Bin 0 -> 426 bytes
 app/routes.ts                                 |   2 +-
 6 files changed, 247 insertions(+), 229 deletions(-)
 create mode 100644 app/games/flappy-bird-js/assets/background-day.png
 create mode 100644 app/games/flappy-bird-js/assets/base.png
 create mode 100644 app/games/flappy-bird-js/assets/pipe-green.png
 create mode 100644 app/games/flappy-bird-js/assets/yellowbird-downflap.png

diff --git a/app/games/flappy-bird-js/Game.tsx b/app/games/flappy-bird-js/Game.tsx
index cb78bdb..cdbaed2 100644
--- a/app/games/flappy-bird-js/Game.tsx
+++ b/app/games/flappy-bird-js/Game.tsx
@@ -1,308 +1,326 @@
 "use client";
-import {
+import Matter from "matter-js";
+
+const {
   Bodies,
   Body,
   Composite,
   Engine,
   Events,
-//   IEventCollision,
-//   IEventTimestamped,
   Render,
   Runner,
-} from "matter-js";
-
+} = Matter;
 
 import { useEffect, useRef } from "react";
-import * as PIXI from "pixi.js";
-import Matter from "matter-js";
 
 export default function Game() {
-    const containerRef = useRef<HTMLDivElement>(null);
-
-    useEffect(() => {
-interface NetInput {
-  pipeDistance: number;
-  pipeY: number;
-  birdVelocity: number;
-  birdY: number;
-  weights: number[];
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const f = game();
+
+    return () => {
+      f();
+    };
+  }, []);
+
+  return <>
+    <p>pipeDistance: <label id="pipeDistance"></label></p>
+    <p>pipeY: <label id="pipeY"></label></p>
+    <p>birdVelocity: <label id="birdVelocity"></label></p>
+    <p>birdY: <label id="birdY"></label></p>
+    <p>time: <label id="time"></label></p>
+    <p>POINTS: <label id="points"></label></p>
+    <p>timeScale: <input type="range" id="timeScale"></input></p>
+    <div ref={containerRef} />
+  </>;
 }
 
-interface Individual {
-  body: Body;
-  genes: number[];
-  time: number;
-  isAlive: boolean;
-}
 
-const TRAINNING_TIME = 30 * 1000;
-const POPULATION_SIZE = 1000;
-const SCALE = 1;
+function game() {
+  interface NetInput {
+    pipeDistance: number;
+    pipeY: number;
+    birdVelocity: number;
+    birdY: number;
+    weights: number[];
+  }
+
+  interface Individual {
+    body: Matter.Body;
+    genes: number[];
+    time: number;
+    isAlive: boolean;
+  }
 
-const engine = Engine.create();
-const render = Render.create({
-  element: document.body,
-  engine: engine,
-  options: {
-    width: 500,
-    height: 500,
-  },
-});
+  const TRAINNING_TIME = 30 * 1000;
+  const POPULATION_SIZE = 1000;
+  const SCALE = 1;
+
+  const engine = Engine.create();
+  const render = Render.create({
+    element: document.body,
+    engine: engine,
+    options: {
+      width: 500,
+      height: 500,
+    },
+  });
 
-const playerCategory = 0x0001;
-const obsCategory = 0x0002;
+  const playerCategory = 0x0001;
+  const obsCategory = 0x0002;
 
-const bot = Bodies.rectangle(50, 50, 50, 400, {
-  inertia: Infinity,
-  friction: 0,
-  collisionFilter: { category: obsCategory },
-  label: "obstacle",
-});
+  const bot = Bodies.rectangle(50, 50, 50, 400, {
+    inertia: Infinity,
+    friction: 0,
+    collisionFilter: { category: obsCategory },
+    label: "obstacle",
+  });
 
-const top = Bodies.rectangle(50, 50, 50, 400, {
-  inertia: Infinity,
-  friction: 0,
-  label: "obstacle",
-  collisionFilter: { category: obsCategory },
-});
+  const top = Bodies.rectangle(50, 50, 50, 400, {
+    inertia: Infinity,
+    friction: 0,
+    label: "obstacle",
+    collisionFilter: { category: obsCategory },
+  });
 
-engine.gravity.scale = 0;
+  engine.gravity.scale = 0;
 
-Composite.add(engine.world, [bot, top]);
+  Composite.add(engine.world, [bot, top]);
 
-Render.run(render);
+  Render.run(render);
 
-const runner = Runner.create();
-Runner.run(runner, engine);
+  const runner = Runner.create();
+  Runner.run(runner, engine);
 
-reset();
+  reset();
 
-let population: Individual[] = [];  
+  let population: Individual[] = [];
 
-Array.from({ length: POPULATION_SIZE }).forEach((_) => createIndividual());
+  Array.from({ length: POPULATION_SIZE }).forEach((_) => createIndividual());
 
-let cycles = 1;
-let points = 0;
-let randomHeight = 0;
+  let cycles = 1;
+  let points = 0;
+  let randomHeight = 0;
 
-Events.on(engine, "beforeUpdate", loop);
-Events.on(engine, "collisionStart", collisionHandler);
+  Events.on(engine, "beforeUpdate", loop);
+  Events.on(engine, "collisionStart", collisionHandler);
 
-document.getElementById("timeScale")!.onchange = (event) => {
-  event.preventDefault();
-  const input: HTMLInputElement = document.getElementById("timeScale")! as HTMLInputElement;
+  document.getElementById("timeScale")!.onchange = (event) => {
+    event.preventDefault();
+    const input: HTMLInputElement = document.getElementById("timeScale")! as HTMLInputElement;
 
-  engine.timing.timeScale = 10 *  parseInt(input.value) / 100;
-} 
+    engine.timing.timeScale = 10 * parseInt(input.value) / 100;
+  }
 
 
-function collisionHandler(event: IEventCollision<Engine>) {
-  event.pairs.forEach((pair) => {
-    const body = pair.bodyB;
-    const individual = population.find(
-      (individual) => individual.body === body
-    );
-    
-    if (individual) removeIndividual(individual);
-  });
-}
+  function collisionHandler(event: Matter.IEventCollision<Matter.Engine>) {
+    event.pairs.forEach((pair) => {
+      const body = pair.bodyB;
+      const individual = population.find(
+        (individual) => individual.body === body
+      );
 
-function loop(event: IEventTimestamped<Engine>) {
-  population.forEach((individual) => {
-    Body.applyForce(individual.body, individual.body.position, {
-      x: 0,
-      y: individual.body.mass * 0.001 * SCALE,
+      if (individual) removeIndividual(individual);
     });
-  });
+  }
 
-  Body.setVelocity(top, { x: -2 * SCALE, y: 0 });
-  Body.setVelocity(bot, { x: -2 * SCALE, y: 0 });
+  function loop(event: Matter.IEventTimestamped<Matter.Engine>) {
+    population.forEach((individual) => {
+      Body.applyForce(individual.body, individual.body.position, {
+        x: 0,
+        y: individual.body.mass * 0.001 * SCALE,
+      });
+    });
 
-  //Body.setPosition(top, { ...top.position, y:  })
+    Body.setVelocity(top, { x: -2 * SCALE, y: 0 });
+    Body.setVelocity(bot, { x: -2 * SCALE, y: 0 });
 
-  if (top.position.x < 50) {
-    reset();
-    
-    document.getElementById("points")!.innerText = (++points).toString();
-  }
-  
-  population.filter(individual => individual.isAlive).forEach(individual => {
-    if (individual.body.position.y > 500 || individual.body.position.y < 0) {
-      removeIndividual(individual)
+    //Body.setPosition(top, { ...top.position, y:  })
+
+    if (top.position.x < 50) {
+      reset();
+
+      document.getElementById("points")!.innerText = (++points).toString();
     }
-  })
-  
-  population
-    .filter(individual => individual.isAlive)
-    .forEach(individual => individual.time = event.timestamp)
-  
-  population.forEach((individual) => {
-    const shouldJump = individualShouldJump(individual);
-    
-    if (shouldJump) jump(individual.body);
-  });
-  
-  const isAllDead = population.every(individual => !individual.isAlive);
-  
-  if (isAllDead) {
-    //ciclamos
-    console.log("ciclo")
-    points = 0;
-    document.getElementById("points")!.innerText = (points).toString();
-    cycles++;
-    reset();
-
-    // limpar: todo: tem jeito melhor
+
+    population.filter(individual => individual.isAlive).forEach(individual => {
+      if (individual.body.position.y > 500 || individual.body.position.y < 0) {
+        removeIndividual(individual)
+      }
+    })
+
     population
-      .filter((individual) => individual.isAlive)
-      .forEach((individual) => removeIndividual(individual));
-    
-    population = getNewPopulation();
+      .filter(individual => individual.isAlive)
+      .forEach(individual => individual.time = event.timestamp)
+
+    population.forEach((individual) => {
+      const shouldJump = individualShouldJump(individual);
+
+      if (shouldJump) jump(individual.body);
+    });
+
+    const isAllDead = population.every(individual => !individual.isAlive);
+
+    if (isAllDead) {
+      //ciclamos
+      console.log("ciclo")
+      points = 0;
+      document.getElementById("points")!.innerText = (points).toString();
+      cycles++;
+      reset();
+
+      // limpar: todo: tem jeito melhor
+      population
+        .filter((individual) => individual.isAlive)
+        .forEach((individual) => removeIndividual(individual));
+
+      population = getNewPopulation();
+    }
   }
-}
 
-function getRandomInt(min: number, max: number) {
-  min = Math.ceil(min); // Ensure min is an integer
-  max = Math.floor(max); // Ensure max is an integer
-  return Math.floor(Math.random() * (max - min + 1)) + min;
-}
+  function getRandomInt(min: number, max: number) {
+    min = Math.ceil(min); // Ensure min is an integer
+    max = Math.floor(max); // Ensure max is an integer
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+  }
 
-function getNewPopulation() {
-  const sorted = population.toSorted((a, b) => getFitness(b) - getFitness(a));
+  function getNewPopulation() {
+    const sorted = population.toSorted((a, b) => getFitness(b) - getFitness(a));
 
-  const fittests = Math.floor(POPULATION_SIZE * 0.1);
+    const fittests = Math.floor(POPULATION_SIZE * 0.1);
 
-  const newPopulation = [];
+    const newPopulation = [];
 
-  Array.from({length: fittests}).forEach((_, index) => newPopulation.push(createIndividual(sorted[index].genes)));
+    Array.from({ length: fittests }).forEach((_, index) => newPopulation.push(createIndividual(sorted[index].genes)));
 
-  for (let i = 0; i < POPULATION_SIZE - fittests; i++) {
-    const r1 = getRandomInt(0, Math.floor(POPULATION_SIZE * 0.5));
-    const ind1 = sorted[r1];
+    for (let i = 0; i < POPULATION_SIZE - fittests; i++) {
+      const r1 = getRandomInt(0, Math.floor(POPULATION_SIZE * 0.5));
+      const ind1 = sorted[r1];
 
-    const r2 = getRandomInt(0, Math.floor(POPULATION_SIZE * 0.5));
-    const ind2 = sorted[r2];
+      const r2 = getRandomInt(0, Math.floor(POPULATION_SIZE * 0.5));
+      const ind2 = sorted[r2];
 
-    //mate
-    const newGenes = mate(ind1, ind2);
+      //mate
+      const newGenes = mate(ind1, ind2);
 
-    newPopulation.push(createIndividual(newGenes));
+      newPopulation.push(createIndividual(newGenes));
+    }
+
+    return newPopulation;
   }
 
-  return newPopulation;
-}
+  function mate(individual1: Individual, individual2: Individual): number[] {
+    const newGenes = [];
 
-function mate(individual1: Individual, individual2: Individual): number[] {
-  const newGenes = [];
+    for (let i = 0; i < 4; i++) {
+      let p = Math.random();
+      if (p < 0.45) newGenes.push(individual1.genes[i]);
+      else if (p < 0.9) newGenes.push(individual2.genes[i]);
+      else newGenes.push(getRandomArbitrary(-1, 1));
+    }
 
-  for (let i = 0; i < 4; i++) {
-    let p = Math.random();
-    if (p < 0.45) newGenes.push(individual1.genes[i]);
-    else if (p < 0.9) newGenes.push(individual2.genes[i]);
-    else newGenes.push(getRandomArbitrary(-1, 1));
+    return newGenes;
   }
 
-  return newGenes;
-}
+  function reset() {
+    const rh = getRandomInt(125, 375);
 
-function reset() {
-  const rh = getRandomInt(125, 375);
+    Body.setPosition(top, { y: rh + 300, x: 525 });
+    Body.setPosition(bot, { y: rh - 300, x: 525 });
 
-  Body.setPosition(top, { y: rh + 300, x: 525 });
-  Body.setPosition(bot, { y: rh - 300, x: 525 });
+    Body.setVelocity(top, { x: 0, y: 0 });
+    Body.setVelocity(bot, { x: 0, y: 0 });
+  }
 
-  Body.setVelocity(top, { x: 0, y: 0 });
-  Body.setVelocity(bot, { x: 0, y: 0 });
-}
+  function jump(body: Matter.Body) {
+    Body.setVelocity(body, { x: body.velocity.x, y: -4 * SCALE });
+  }
 
-function jump(body: Body) {
-  Body.setVelocity(body, { x: body.velocity.x, y: -4 * SCALE });
-}
+  function getRandomArbitrary(min: number, max: number) {
+    return Math.random() * (max - min) + min;
+  }
 
-function getRandomArbitrary(min: number, max: number) {
-  return Math.random() * (max - min) + min;
-}
+  function individualShouldJump(individual: Individual) {
+    const pipeDistance = top.position.x;
+    const pipeY = top.position.y + 300;
+    const birdVelocity = individual.body.velocity.y;
+    const birdY = individual.body.position.y;
+
+    if (population.findIndex(indi => indi === individual) === 0) {
+      document.getElementById("pipeDistance")!.innerText = pipeDistance.toString();
+      document.getElementById("pipeY")!.innerText = pipeY.toString();
+      document.getElementById("birdVelocity")!.innerText = birdVelocity.toString();
+      document.getElementById("birdY")!.innerText = birdY.toString();
+      document.getElementById("time")!.innerText = individual.time.toString();
+    }
+
+    const shouldJump = calculateJump({
+      pipeDistance,
+      pipeY,
+      birdVelocity,
+      birdY,
+      weights: individual.genes,
+    });
 
-function individualShouldJump(individual: Individual) {
-  const pipeDistance = top.position.x;
-  const pipeY = top.position.y + 300;
-  const birdVelocity = individual.body.velocity.y;
-  const birdY = individual.body.position.y;
-
-  if (population.findIndex(indi => indi === individual) === 0) {
-    document.getElementById("pipeDistance")!.innerText = pipeDistance.toString();
-    document.getElementById("pipeY")!.innerText = pipeY.toString();
-    document.getElementById("birdVelocity")!.innerText = birdVelocity.toString();
-    document.getElementById("birdY")!.innerText = birdY.toString();
-    document.getElementById("time")!.innerText = individual.time.toString();
+    return shouldJump;
   }
 
-  const shouldJump = calculateJump({
+  function calculateJump({
     pipeDistance,
     pipeY,
     birdVelocity,
     birdY,
-    weights: individual.genes,
-  });
+    weights,
+  }: NetInput) {
+    const inputs = [pipeDistance, pipeY, birdVelocity, birdY];
 
-  return shouldJump;
-}
-
-function calculateJump({
-  pipeDistance,
-  pipeY,
-  birdVelocity,
-  birdY,
-  weights,
-}: NetInput) {
-  const inputs = [pipeDistance, pipeY, birdVelocity, birdY];
-
-  const sum = inputs.reduce(
-    (acc, input, index) => acc + input * weights[index],
-    0
-  );
-
-  return sum >= 0;
-}
+    const sum = inputs.reduce(
+      (acc, input, index) => acc + input * weights[index],
+      0
+    );
 
-function createIndividual(genes1?: number[]): Individual {
-  const body = Bodies.rectangle(50, 50, 50, 50, {
-    inertia: Infinity,
-    collisionFilter: { category: playerCategory, group: -1 },
-    label: "individual",
-  });
+    return sum >= 0;
+  }
 
-  Composite.add(engine.world, [body]);
+  function createIndividual(genes1?: number[]): Individual {
+    const body = Bodies.rectangle(50, 50, 50, 50, {
+      inertia: Infinity,
+      collisionFilter: { category: playerCategory, group: -1 },
+      label: "individual",
+    });
 
-  const genes = [];
+    Composite.add(engine.world, [body]);
 
-  genes.push(getRandomArbitrary(-1, 1));
-  genes.push(getRandomArbitrary(-1, 1));
-  genes.push(getRandomArbitrary(-1, 1));
-  genes.push(getRandomArbitrary(-1, 1));
+    const genes = [];
 
-  const individual = { body, genes: genes1 || genes, time: 0, isAlive: true };
+    genes.push(getRandomArbitrary(-1, 1));
+    genes.push(getRandomArbitrary(-1, 1));
+    genes.push(getRandomArbitrary(-1, 1));
+    genes.push(getRandomArbitrary(-1, 1));
 
-  population.push(individual);
+    const individual = { body, genes: genes1 || genes, time: 0, isAlive: true };
 
-  return individual;
-}
+    population.push(individual);
 
-function getFitness(individual: Individual) {
-  return individual.time - TRAINNING_TIME;
-}
-
-function removeIndividual(individual: Individual) {
-  individual.isAlive = false;
+    return individual;
+  }
 
-  Composite.remove(engine.world, [individual.body]);
-}
+  function getFitness(individual: Individual) {
+    return individual.time - TRAINNING_TIME;
+  }
 
+  function removeIndividual(individual: Individual) {
+    individual.isAlive = false;
 
-        return () => {
-            // app.destroy(true, true);
-        };
-    }, []);
+    Composite.remove(engine.world, [individual.body]);
+  }
 
-    return <div ref={containerRef} />;
-}
+  return () => {
+    Engine.clear(engine);
+    Render.stop(render);
+    Runner.stop(runner);
+    render.canvas.remove();
+    render.textures = {};
+  }
+}
\ No newline at end of file
diff --git a/app/games/flappy-bird-js/assets/background-day.png b/app/games/flappy-bird-js/assets/background-day.png
new file mode 100644
index 0000000000000000000000000000000000000000..afcb5ec982a3de74cb9186f6af3ba329d63a22bb
GIT binary patch
literal 7026
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
b$3|uR-wMAWen9IL0NxiM9{6v+|M9;7ImZIa

literal 0
HcmV?d00001

diff --git a/app/games/flappy-bird-js/assets/base.png b/app/games/flappy-bird-js/assets/base.png
new file mode 100644
index 0000000000000000000000000000000000000000..c374f2b34f2d8a75f74641775970314b462cb337
GIT binary patch
literal 470
zcmeAS@N?(olHy`uVBq!ia0y~yU<?4V3s{(e<Stp$3?Rjl?&#~tz_78O`%fY(kgt&J
z5#-CjP^HGe(9pub@Czu^@PdJ%)PRBERRRNp)eHs(@q#(K0&Rd25&=FTt|1ogPyTin
z@7J62EHbn~>G}$vdpD;3|NsAJp`$ub4P%nGy9>KmV#jMBhqJ&VvY3H^?+6GpPSxg<
z1`4v5c>21sKW64(U=n`*OLYfOXql&rV@SoVx91!=nHU*Z1GOU#a)oVZ5`81@cw_el
z_QdChXJ3}N|8|*uxqK%3FN-R<sr5X!KK}Wmn{ndv=j98+rTzX2eJMJ;QoboJ-{PzF
zg@%V$-aEuAzje3|#P-UKP1l%N*Rpd(@r!Jc)5x$5xKOoV!B+>z*Q7`oU(j#<^uFNA
z%(zmZi&aZpBT7;dOH!?pi&B9UgOP!urLKXouAyOwp@o%!k(HsPwt<<Ifx$y9%fl!d
ca`RI%(<*Umm{8tW57fZm>FVdQ&MBb@03g?$h5!Hn

literal 0
HcmV?d00001

diff --git a/app/games/flappy-bird-js/assets/pipe-green.png b/app/games/flappy-bird-js/assets/pipe-green.png
new file mode 100644
index 0000000000000000000000000000000000000000..4664401037bdb50a709674c0a23862fa3aa294a4
GIT binary patch
literal 2527
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
TGQ#h~fdaq+V~wu7<WBhq1;ecG

literal 0
HcmV?d00001

diff --git a/app/games/flappy-bird-js/assets/yellowbird-downflap.png b/app/games/flappy-bird-js/assets/yellowbird-downflap.png
new file mode 100644
index 0000000000000000000000000000000000000000..e9e1c77b9deb38738f6f4d184243143bca2da46b
GIT binary patch
literal 426
zcmeAS@N?(olHy`uVBq!ia0vp^N<b{Z!VDyHJB+M=6id3JuOkD)#(wTUiL5}rLb6AY
zF9SoBDg#49GXulV|3LaB14F3+1H-EX1_rAc3=HD=lj4uM0o6(e_=LCu>0k@DU)Otn
z{rdG|yYcmBXZ~0)JZRAQ|NsAjlBe20X~vQuzhDN3XE)M7oFs2|7ml`jQ>%a+&H|6f
zVg?3oVGw3ym^DWND9B#o>Fdh=n3;!xN%;9M)g3^gEKe855Q)pZ7Xx_@DDbdch_c|`
z+Rz#`qc!rtzdq>=sjVsBUE?z}5|%k^4ByAJ!`ka$T!g!ToEOuzDa{u&IhFo(WoYXz
zDx9oRkXI(;$Etnt%hpG8VzmpM7VpkfwA$Ns>~Px5;^<#p`}Q%EMVg;vcHSliv{kjl
zHKHUXu_V<hxhNG#F&G&bTIw1Y>lzw{7+P2v7+D!wY8#kY85lg&vOJ8UAvZrIGp!Q0
Uh6&}3^*{{_p00i_>zopr0M`A6wg3PC

literal 0
HcmV?d00001

diff --git a/app/routes.ts b/app/routes.ts
index 3b70edf..3e1239b 100644
--- a/app/routes.ts
+++ b/app/routes.ts
@@ -1,4 +1,4 @@
 import { type RouteConfig, index, route } from "@react-router/dev/routes";
 import Game from "./games/Game";
 
-export default [index("routes/Home.tsx"), route("/games/flappy", "games/Game.tsx")] satisfies RouteConfig;
+export default [index("routes/Home.tsx"), route("/games/flappy", "games/flappy-bird-js/Game.tsx")] satisfies RouteConfig;

From d7de99868e3a249f5af03d1e4611ee811aaf355f Mon Sep 17 00:00:00 2001
From: Pedro Santayana <pedrosantayana@gmail.com>
Date: Wed, 8 Oct 2025 18:27:38 -0300
Subject: [PATCH 3/6] wip

---
 app/games/flappy-bird-js/Game.tsx               |  16 ++++++++++------
 .../{yellowbird-downflap.png => bird.png}       | Bin
 app/routes.ts                                   |   1 -
 3 files changed, 10 insertions(+), 7 deletions(-)
 rename app/games/flappy-bird-js/assets/{yellowbird-downflap.png => bird.png} (100%)

diff --git a/app/games/flappy-bird-js/Game.tsx b/app/games/flappy-bird-js/Game.tsx
index cdbaed2..82a60f3 100644
--- a/app/games/flappy-bird-js/Game.tsx
+++ b/app/games/flappy-bird-js/Game.tsx
@@ -17,11 +17,9 @@ export default function Game() {
   const containerRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    const f = game();
+    const end = start();
 
-    return () => {
-      f();
-    };
+    return () => end();
   }, []);
 
   return <>
@@ -36,8 +34,7 @@ export default function Game() {
   </>;
 }
 
-
-function game() {
+function start() {
   interface NetInput {
     pipeDistance: number;
     pipeY: number;
@@ -288,6 +285,13 @@ function game() {
       inertia: Infinity,
       collisionFilter: { category: playerCategory, group: -1 },
       label: "individual",
+      render: {
+        sprite: {
+          texture: './assets/bird.png', // Example image URL
+          xScale: 1,
+          yScale: 1
+        }
+      }
     });
 
     Composite.add(engine.world, [body]);
diff --git a/app/games/flappy-bird-js/assets/yellowbird-downflap.png b/app/games/flappy-bird-js/assets/bird.png
similarity index 100%
rename from app/games/flappy-bird-js/assets/yellowbird-downflap.png
rename to app/games/flappy-bird-js/assets/bird.png
diff --git a/app/routes.ts b/app/routes.ts
index 3e1239b..6571c19 100644
--- a/app/routes.ts
+++ b/app/routes.ts
@@ -1,4 +1,3 @@
 import { type RouteConfig, index, route } from "@react-router/dev/routes";
-import Game from "./games/Game";
 
 export default [index("routes/Home.tsx"), route("/games/flappy", "games/flappy-bird-js/Game.tsx")] satisfies RouteConfig;

From d2e481bba6bc9e44e798cdfa45826789a7dd44aa Mon Sep 17 00:00:00 2001
From: Pedro Santayana <pedro.santayana@levty.com>
Date: Wed, 22 Oct 2025 16:44:17 -0300
Subject: [PATCH 4/6] wip

---
 app/games/flappy-bird-js/Game.tsx | 430 +++++++++++++++++-------------
 1 file changed, 243 insertions(+), 187 deletions(-)

diff --git a/app/games/flappy-bird-js/Game.tsx b/app/games/flappy-bird-js/Game.tsx
index 82a60f3..a07c3a0 100644
--- a/app/games/flappy-bird-js/Game.tsx
+++ b/app/games/flappy-bird-js/Game.tsx
@@ -13,318 +13,374 @@ const {
 
 import { useEffect, useRef } from "react";
 
-export default function Game() {
+export default function Jogo() {
   const containerRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    const end = start();
-
-    return () => end();
-  }, []);
-
-  return <>
-    <p>pipeDistance: <label id="pipeDistance"></label></p>
-    <p>pipeY: <label id="pipeY"></label></p>
-    <p>birdVelocity: <label id="birdVelocity"></label></p>
-    <p>birdY: <label id="birdY"></label></p>
-    <p>time: <label id="time"></label></p>
-    <p>POINTS: <label id="points"></label></p>
-    <p>timeScale: <input type="range" id="timeScale"></input></p>
-    <div ref={containerRef} />
-  </>;
+    const finalizar = iniciar(containerRef!);
+
+    return () => finalizar();
+  }, [containerRef]);
+
+  return (
+    <div className="flex flex-col items-center p-4 space-y-4 bg-gray-100 min-h-screen text-black">
+      <h1 className="text-xxl font-semibold ">Flappy Bird</h1>
+
+      <div ref={containerRef} className="w-full bg-white shadow-md rounded-md flex justify-center items-center" />
+      <div>
+        <p className="text-lg font-semibold">Distância do Cano: <label id="distanciaCano" className="font-normal"></label></p>
+        <p className="text-lg font-semibold">Y do Cano: <label id="canoY" className="font-normal"></label></p>
+        <p className="text-lg font-semibold">Velocidade do Pássaro: <label id="velocidadePassaro" className="font-normal"></label></p>
+        <p className="text-lg font-semibold">Y do Pássaro: <label id="passaroY" className="font-normal"></label></p>
+        <p className="text-lg font-semibold">Tempo: <label id="tempo" className="font-normal"></label></p>
+        <p className="text-lg font-semibold">PONTOS: <label id="pontos" className="font-bold text-green-600"></label></p>
+        <div className="flex items-center space-x-2">
+          <label htmlFor="escalaTempo" className="text-lg font-semibold">Escala de Tempo:</label>
+          <input type="range" id="escalaTempo" className="w-64" />
+        </div>
+      </div>
+      <div ref={containerRef} className="w-full bg-white shadow-md rounded-md flex justify-center items-center" />
+      <div className="text-sm text-gray-700 leading-relaxed">
+        Este código implementa um agente treinado para jogar Flappy Bird utilizando um perceptron de uma camada e um algoritmo genético. O agente é representado por indivíduos em uma população, onde cada indivíduo possui um conjunto de genes que define seu comportamento. A cada ciclo, os indivíduos tomam decisões baseadas em entradas do ambiente e são avaliados com base em seu desempenho.
+
+        <br /><br />
+        <strong>Estrutura do Código:</strong>
+        <br />
+        O código utiliza a biblioteca Matter.js para simular a física do jogo. Por exemplo, os canos e os pássaros são representados como corpos físicos:
+        <textarea readOnly className="w-full bg-gray-200 p-2 rounded-md mt-2">
+          {`const canoInferior = Bodies.rectangle(50, 50, 50, 400, { ... });
+const canoSuperior = Bodies.rectangle(50, 50, 50, 400, { ... });`}
+        </textarea>
+        Esses corpos são adicionados ao mundo da simulação:
+        <textarea readOnly className="w-full bg-gray-200 p-2 rounded-md mt-2">
+          {`Composite.add(motor.world, [canoInferior, canoSuperior]);`}
+        </textarea>
+
+        <br /><br />
+        <strong>Decisão do Agente:</strong>
+        <br />
+        Cada indivíduo decide se deve "pular" com base em um perceptron de uma camada. As entradas para o perceptron incluem a distância do cano, a posição do cano, a velocidade do pássaro e a posição do pássaro:
+        <textarea readOnly className="w-full bg-gray-200 p-2 rounded-md mt-2">
+          {`const entradas = [distanciaCano, canoY, velocidadePassaro, passaroY];
+const soma = entradas.reduce((acc, entrada, index) => acc + entrada * pesos[index], 0);
+return soma >= 0;`}
+        </textarea>
+        Se a soma ponderada das entradas for maior ou igual a zero, o agente decide pular.
+
+        <br /><br />
+        <strong>Algoritmo Genético:</strong>
+        <br />
+        Após cada ciclo, os indivíduos são avaliados com base em seu tempo de sobrevivência:
+        <textarea readOnly className="w-full bg-gray-200 p-2 rounded-md mt-2">
+          {`function obterFitness(individuo) { return individuo.tempo - TEMPO_TREINAMENTO; }`}
+        </textarea>
+        Os indivíduos mais aptos são selecionados para reprodução, e novos indivíduos são criados por cruzamento e mutação:
+        <textarea readOnly className="w-full bg-gray-200 p-2 rounded-md mt-2">
+          {`const novosGenes = cruzar(ind1, ind2);
+novaPopulacao.push(criarIndividuo(novosGenes));`}
+        </textarea>
+
+        <br /><br />
+        <strong>Treinamento e Evolução:</strong>
+        <br />
+        O treinamento ocorre ao longo de múltiplos ciclos. Quando todos os indivíduos morrem, uma nova população é gerada:
+        <textarea readOnly className="w-full bg-gray-200 p-2 rounded-md mt-2">
+          {`if (todosMortos) { populacao = novaPopulacao(); }`}
+        </textarea>
+        Isso permite que o algoritmo genético refine os genes dos indivíduos ao longo do tempo.
+
+        <br /><br />
+        <strong>Interatividade:</strong>
+        <br />
+        O código também permite ajustar a escala de tempo da simulação:
+        <textarea readOnly className="w-full bg-gray-200 p-2 rounded-md mt-2">
+          {`motor.timing.timeScale = 10 * parseInt(entrada.value) / 100;`}
+        </textarea>
+        Além disso, informações como a distância do cano e a posição do pássaro são exibidas na interface para facilitar a análise do comportamento do agente.
+      </div>
+    </div>
+  );
 }
 
-function start() {
-  interface NetInput {
-    pipeDistance: number;
-    pipeY: number;
-    birdVelocity: number;
-    birdY: number;
-    weights: number[];
+
+function iniciar(containerRef: React.RefObject<HTMLDivElement | null>) {
+  interface EntradaRede {
+    distanciaCano: number;
+    canoY: number;
+    velocidadePassaro: number;
+    passaroY: number;
+    pesos: number[];
   }
 
-  interface Individual {
-    body: Matter.Body;
+  interface Individuo {
+    corpo: Matter.Body;
     genes: number[];
-    time: number;
-    isAlive: boolean;
+    tempo: number;
+    estaVivo: boolean;
   }
 
-  const TRAINNING_TIME = 30 * 1000;
-  const POPULATION_SIZE = 1000;
-  const SCALE = 1;
+  const TEMPO_TREINAMENTO = 30 * 1000;
+  const TAMANHO_POPULACAO = 1000;
+  const ESCALA = 1;
 
-  const engine = Engine.create();
-  const render = Render.create({
-    element: document.body,
-    engine: engine,
+  const motor = Engine.create();
+  const renderizador = Render.create({
+    element: containerRef.current!,
+    engine: motor,
     options: {
       width: 500,
       height: 500,
     },
   });
 
-  const playerCategory = 0x0001;
-  const obsCategory = 0x0002;
+  const categoriaJogador = 0x0001;
+  const categoriaObstaculo = 0x0002;
 
-  const bot = Bodies.rectangle(50, 50, 50, 400, {
+  const canoInferior = Bodies.rectangle(50, 50, 50, 400, {
     inertia: Infinity,
     friction: 0,
-    collisionFilter: { category: obsCategory },
-    label: "obstacle",
+    collisionFilter: { category: categoriaObstaculo },
+    label: "obstaculo",
   });
 
-  const top = Bodies.rectangle(50, 50, 50, 400, {
+  const canoSuperior = Bodies.rectangle(50, 50, 50, 400, {
     inertia: Infinity,
     friction: 0,
-    label: "obstacle",
-    collisionFilter: { category: obsCategory },
+    label: "obstaculo",
+    collisionFilter: { category: categoriaObstaculo },
   });
 
-  engine.gravity.scale = 0;
+  motor.gravity.scale = 0;
 
-  Composite.add(engine.world, [bot, top]);
+  Composite.add(motor.world, [canoInferior, canoSuperior]);
 
-  Render.run(render);
+  Render.run(renderizador);
 
-  const runner = Runner.create();
-  Runner.run(runner, engine);
+  const executor = Runner.create();
+  Runner.run(executor, motor);
 
-  reset();
+  reiniciar();
 
-  let population: Individual[] = [];
+  let populacao: Individuo[] = [];
 
-  Array.from({ length: POPULATION_SIZE }).forEach((_) => createIndividual());
+  Array.from({ length: TAMANHO_POPULACAO }).forEach((_) => criarIndividuo());
 
-  let cycles = 1;
-  let points = 0;
-  let randomHeight = 0;
+  let ciclos = 1;
+  let pontos = 0;
 
-  Events.on(engine, "beforeUpdate", loop);
-  Events.on(engine, "collisionStart", collisionHandler);
+  Events.on(motor, "beforeUpdate", loop);
+  Events.on(motor, "collisionStart", tratarColisao);
 
-  document.getElementById("timeScale")!.onchange = (event) => {
-    event.preventDefault();
-    const input: HTMLInputElement = document.getElementById("timeScale")! as HTMLInputElement;
+  document.getElementById("escalaTempo")!.onchange = (evento) => {
+    evento.preventDefault();
+    const entrada: HTMLInputElement = document.getElementById("escalaTempo")! as HTMLInputElement;
 
-    engine.timing.timeScale = 10 * parseInt(input.value) / 100;
+    motor.timing.timeScale = 10 * parseInt(entrada.value) / 100;
   }
 
-
-  function collisionHandler(event: Matter.IEventCollision<Matter.Engine>) {
-    event.pairs.forEach((pair) => {
-      const body = pair.bodyB;
-      const individual = population.find(
-        (individual) => individual.body === body
+  function tratarColisao(evento: Matter.IEventCollision<Matter.Engine>) {
+    evento.pairs.forEach((par) => {
+      const corpo = par.bodyB;
+      const individuo = populacao.find(
+        (individuo) => individuo.corpo === corpo
       );
 
-      if (individual) removeIndividual(individual);
+      if (individuo) removerIndividuo(individuo);
     });
   }
 
-  function loop(event: Matter.IEventTimestamped<Matter.Engine>) {
-    population.forEach((individual) => {
-      Body.applyForce(individual.body, individual.body.position, {
+  function loop(evento: Matter.IEventTimestamped<Matter.Engine>) {
+    populacao.forEach((individuo) => {
+      Body.applyForce(individuo.corpo, individuo.corpo.position, {
         x: 0,
-        y: individual.body.mass * 0.001 * SCALE,
+        y: individuo.corpo.mass * 0.001 * ESCALA,
       });
     });
 
-    Body.setVelocity(top, { x: -2 * SCALE, y: 0 });
-    Body.setVelocity(bot, { x: -2 * SCALE, y: 0 });
-
-    //Body.setPosition(top, { ...top.position, y:  })
+    Body.setVelocity(canoSuperior, { x: -2 * ESCALA, y: 0 });
+    Body.setVelocity(canoInferior, { x: -2 * ESCALA, y: 0 });
 
-    if (top.position.x < 50) {
-      reset();
+    if (canoSuperior.position.x < 50) {
+      reiniciar();
 
-      document.getElementById("points")!.innerText = (++points).toString();
+      document.getElementById("pontos")!.innerText = (++pontos).toString();
     }
 
-    population.filter(individual => individual.isAlive).forEach(individual => {
-      if (individual.body.position.y > 500 || individual.body.position.y < 0) {
-        removeIndividual(individual)
+    populacao.filter(individuo => individuo.estaVivo).forEach(individuo => {
+      if (individuo.corpo.position.y > 500 || individuo.corpo.position.y < 0) {
+        removerIndividuo(individuo)
       }
     })
 
-    population
-      .filter(individual => individual.isAlive)
-      .forEach(individual => individual.time = event.timestamp)
+    populacao
+      .filter(individuo => individuo.estaVivo)
+      .forEach(individuo => individuo.tempo = evento.timestamp)
 
-    population.forEach((individual) => {
-      const shouldJump = individualShouldJump(individual);
+    populacao.forEach((individuo) => {
+      const devePular = individuoDevePular(individuo);
 
-      if (shouldJump) jump(individual.body);
+      if (devePular) pular(individuo.corpo);
     });
 
-    const isAllDead = population.every(individual => !individual.isAlive);
+    const todosMortos = populacao.every(individuo => !individuo.estaVivo);
 
-    if (isAllDead) {
-      //ciclamos
+    if (todosMortos) {
       console.log("ciclo")
-      points = 0;
-      document.getElementById("points")!.innerText = (points).toString();
-      cycles++;
-      reset();
+      pontos = 0;
+      document.getElementById("pontos")!.innerText = (pontos).toString();
+      ciclos++;
+      reiniciar();
 
-      // limpar: todo: tem jeito melhor
-      population
-        .filter((individual) => individual.isAlive)
-        .forEach((individual) => removeIndividual(individual));
+      populacao
+        .filter((individuo) => individuo.estaVivo)
+        .forEach((individuo) => removerIndividuo(individuo));
 
-      population = getNewPopulation();
+      populacao = novaPopulacao();
     }
   }
 
-  function getRandomInt(min: number, max: number) {
-    min = Math.ceil(min); // Ensure min is an integer
-    max = Math.floor(max); // Ensure max is an integer
-    return Math.floor(Math.random() * (max - min + 1)) + min;
-  }
-
-  function getNewPopulation() {
-    const sorted = population.toSorted((a, b) => getFitness(b) - getFitness(a));
+  function novaPopulacao() {
+    const ordenados = populacao.toSorted((a, b) => obterFitness(b) - obterFitness(a));
 
-    const fittests = Math.floor(POPULATION_SIZE * 0.1);
+    const maisAptos = Math.floor(TAMANHO_POPULACAO * 0.1);
 
-    const newPopulation = [];
+    const novaPopulacao = [];
 
-    Array.from({ length: fittests }).forEach((_, index) => newPopulation.push(createIndividual(sorted[index].genes)));
+    Array.from({ length: maisAptos }).forEach((_, index) => novaPopulacao.push(criarIndividuo(ordenados[index].genes)));
 
-    for (let i = 0; i < POPULATION_SIZE - fittests; i++) {
-      const r1 = getRandomInt(0, Math.floor(POPULATION_SIZE * 0.5));
-      const ind1 = sorted[r1];
+    for (let i = 0; i < TAMANHO_POPULACAO - maisAptos; i++) {
+      const r1 = obterAleatorio(0, Math.floor(TAMANHO_POPULACAO * 0.5));
+      const ind1 = ordenados[r1];
 
-      const r2 = getRandomInt(0, Math.floor(POPULATION_SIZE * 0.5));
-      const ind2 = sorted[r2];
+      const r2 = obterAleatorio(0, Math.floor(TAMANHO_POPULACAO * 0.5));
+      const ind2 = ordenados[r2];
 
-      //mate
-      const newGenes = mate(ind1, ind2);
+      const novosGenes = cruzar(ind1, ind2);
 
-      newPopulation.push(createIndividual(newGenes));
+      novaPopulacao.push(criarIndividuo(novosGenes));
     }
 
-    return newPopulation;
+    return novaPopulacao;
   }
 
-  function mate(individual1: Individual, individual2: Individual): number[] {
-    const newGenes = [];
+  function cruzar(individuo1: Individuo, individuo2: Individuo): number[] {
+    const novosGenes = [];
 
     for (let i = 0; i < 4; i++) {
       let p = Math.random();
-      if (p < 0.45) newGenes.push(individual1.genes[i]);
-      else if (p < 0.9) newGenes.push(individual2.genes[i]);
-      else newGenes.push(getRandomArbitrary(-1, 1));
+      if (p < 0.45) novosGenes.push(individuo1.genes[i]);
+      else if (p < 0.9) novosGenes.push(individuo2.genes[i]);
+      else novosGenes.push(obterAleatorio(-1, 1));
     }
 
-    return newGenes;
+    return novosGenes;
   }
 
-  function reset() {
-    const rh = getRandomInt(125, 375);
+  function reiniciar() {
+    const alturaAleatoria = obterAleatorio(125, 375);
 
-    Body.setPosition(top, { y: rh + 300, x: 525 });
-    Body.setPosition(bot, { y: rh - 300, x: 525 });
+    Body.setPosition(canoSuperior, { y: alturaAleatoria + 300, x: 525 });
+    Body.setPosition(canoInferior, { y: alturaAleatoria - 300, x: 525 });
 
-    Body.setVelocity(top, { x: 0, y: 0 });
-    Body.setVelocity(bot, { x: 0, y: 0 });
+    Body.setVelocity(canoSuperior, { x: 0, y: 0 });
+    Body.setVelocity(canoInferior, { x: 0, y: 0 });
   }
 
-  function jump(body: Matter.Body) {
-    Body.setVelocity(body, { x: body.velocity.x, y: -4 * SCALE });
+  function pular(corpo: Matter.Body) {
+    Body.setVelocity(corpo, { x: corpo.velocity.x, y: -4 * ESCALA });
   }
 
-  function getRandomArbitrary(min: number, max: number) {
+  function obterAleatorio(min: number, max: number) {
     return Math.random() * (max - min) + min;
   }
 
-  function individualShouldJump(individual: Individual) {
-    const pipeDistance = top.position.x;
-    const pipeY = top.position.y + 300;
-    const birdVelocity = individual.body.velocity.y;
-    const birdY = individual.body.position.y;
-
-    if (population.findIndex(indi => indi === individual) === 0) {
-      document.getElementById("pipeDistance")!.innerText = pipeDistance.toString();
-      document.getElementById("pipeY")!.innerText = pipeY.toString();
-      document.getElementById("birdVelocity")!.innerText = birdVelocity.toString();
-      document.getElementById("birdY")!.innerText = birdY.toString();
-      document.getElementById("time")!.innerText = individual.time.toString();
+  function individuoDevePular(individuo: Individuo) {
+    const distanciaCano = canoSuperior.position.x;
+    const canoY = canoSuperior.position.y + 300;
+    const velocidadePassaro = individuo.corpo.velocity.y;
+    const passaroY = individuo.corpo.position.y;
+
+    if (populacao.findIndex(indi => indi === individuo) === 0) {
+      document.getElementById("distanciaCano")!.innerText = distanciaCano.toString();
+      document.getElementById("canoY")!.innerText = canoY.toString();
+      document.getElementById("velocidadePassaro")!.innerText = velocidadePassaro.toString();
+      document.getElementById("passaroY")!.innerText = passaroY.toString();
+      document.getElementById("tempo")!.innerText = individuo.tempo.toString();
     }
 
-    const shouldJump = calculateJump({
-      pipeDistance,
-      pipeY,
-      birdVelocity,
-      birdY,
-      weights: individual.genes,
+    const devePular = calcularPulo({
+      distanciaCano,
+      canoY,
+      velocidadePassaro,
+      passaroY,
+      pesos: individuo.genes,
     });
 
-    return shouldJump;
+    return devePular;
   }
 
-  function calculateJump({
-    pipeDistance,
-    pipeY,
-    birdVelocity,
-    birdY,
-    weights,
-  }: NetInput) {
-    const inputs = [pipeDistance, pipeY, birdVelocity, birdY];
-
-    const sum = inputs.reduce(
-      (acc, input, index) => acc + input * weights[index],
+  function calcularPulo({
+    distanciaCano,
+    canoY,
+    velocidadePassaro,
+    passaroY,
+    pesos,
+  }: EntradaRede) {
+    const entradas = [distanciaCano, canoY, velocidadePassaro, passaroY];
+
+    const soma = entradas.reduce(
+      (acc, entrada, index) => acc + entrada * pesos[index],
       0
     );
 
-    return sum >= 0;
+    return soma >= 0;
   }
 
-  function createIndividual(genes1?: number[]): Individual {
-    const body = Bodies.rectangle(50, 50, 50, 50, {
+  function criarIndividuo(genes1?: number[]): Individuo {
+    const corpo = Bodies.rectangle(50, 50, 50, 50, {
       inertia: Infinity,
-      collisionFilter: { category: playerCategory, group: -1 },
-      label: "individual",
+      collisionFilter: { category: categoriaJogador, group: -1 },
+      label: "individuo",
       render: {
         sprite: {
-          texture: './assets/bird.png', // Example image URL
+          texture: './assets/passaro.png',
           xScale: 1,
           yScale: 1
         }
       }
     });
 
-    Composite.add(engine.world, [body]);
+    Composite.add(motor.world, [corpo]);
 
     const genes = [];
 
-    genes.push(getRandomArbitrary(-1, 1));
-    genes.push(getRandomArbitrary(-1, 1));
-    genes.push(getRandomArbitrary(-1, 1));
-    genes.push(getRandomArbitrary(-1, 1));
+    genes.push(obterAleatorio(-1, 1));
+    genes.push(obterAleatorio(-1, 1));
+    genes.push(obterAleatorio(-1, 1));
+    genes.push(obterAleatorio(-1, 1));
 
-    const individual = { body, genes: genes1 || genes, time: 0, isAlive: true };
+    const individuo = { corpo, genes: genes1 || genes, tempo: 0, estaVivo: true };
 
-    population.push(individual);
+    populacao.push(individuo);
 
-    return individual;
+    return individuo;
   }
 
-  function getFitness(individual: Individual) {
-    return individual.time - TRAINNING_TIME;
+  function obterFitness(individuo: Individuo) {
+    return individuo.tempo - TEMPO_TREINAMENTO;
   }
 
-  function removeIndividual(individual: Individual) {
-    individual.isAlive = false;
+  function removerIndividuo(individuo: Individuo) {
+    individuo.estaVivo = false;
 
-    Composite.remove(engine.world, [individual.body]);
+    Composite.remove(motor.world, [individuo.corpo]);
   }
 
   return () => {
-    Engine.clear(engine);
-    Render.stop(render);
-    Runner.stop(runner);
-    render.canvas.remove();
-    render.textures = {};
+    Engine.clear(motor);
+    Render.stop(renderizador);
+    Runner.stop(executor);
+    renderizador.canvas.remove();
+    renderizador.textures = {};
   }
 }
\ No newline at end of file

From 0154e708a881312bff0ec94626924c82fc5076b4 Mon Sep 17 00:00:00 2001
From: Pedro Santayana <pedrosantayana@gmail.com>
Date: Sun, 26 Oct 2025 15:18:50 -0300
Subject: [PATCH 5/6] wip

---
 app/app.css                                   |   1 +
 app/games/flappy-bird-js/Flappy.tsx           |  30 ++
 app/games/flappy-bird-js/Game.tsx             | 386 ----------------
 app/games/flappy-bird-js/Page.tsx             |  31 ++
 .../{pipe-green.png => pipe-green-bottom.png} | Bin
 .../flappy-bird-js/assets/pipe-green-top.png  | Bin 0 -> 4924 bytes
 app/games/flappy-bird-js/content.md           |  80 ++++
 app/games/flappy-bird-js/game.ts              | 422 ++++++++++++++++++
 app/routes.ts                                 |   2 +-
 package-lock.json                             | 162 +++++++
 package.json                                  |   4 +
 11 files changed, 731 insertions(+), 387 deletions(-)
 create mode 100644 app/games/flappy-bird-js/Flappy.tsx
 delete mode 100644 app/games/flappy-bird-js/Game.tsx
 create mode 100644 app/games/flappy-bird-js/Page.tsx
 rename app/games/flappy-bird-js/assets/{pipe-green.png => pipe-green-bottom.png} (100%)
 create mode 100644 app/games/flappy-bird-js/assets/pipe-green-top.png
 create mode 100644 app/games/flappy-bird-js/content.md
 create mode 100644 app/games/flappy-bird-js/game.ts

diff --git a/app/app.css b/app/app.css
index 99345d8..4a0eb03 100644
--- a/app/app.css
+++ b/app/app.css
@@ -1,4 +1,5 @@
 @import "tailwindcss";
+@plugin "@tailwindcss/typography";
 
 @theme {
   --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif,
diff --git a/app/games/flappy-bird-js/Flappy.tsx b/app/games/flappy-bird-js/Flappy.tsx
new file mode 100644
index 0000000..bcca195
--- /dev/null
+++ b/app/games/flappy-bird-js/Flappy.tsx
@@ -0,0 +1,30 @@
+import { useEffect, useRef } from "react";
+import { iniciar } from "./game";
+
+export default function FlappyBird() {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const finalizar = iniciar(containerRef!);
+
+    return () => finalizar();
+  }, [containerRef]);
+
+  return (
+    <div className="flex mb-8 flex-row text-black border rounded border-black p-4 bg-white">
+      <div>
+        <p className="text-lg font-semibold">Distância do Cano: <label id="distanciaCano" className="font-normal"></label></p>
+        <p className="text-lg font-semibold">Y do Cano: <label id="canoY" className="font-normal"></label></p>
+        <p className="text-lg font-semibold">Velocidade do Pássaro: <label id="velocidadePassaro" className="font-normal"></label></p>
+        <p className="text-lg font-semibold">Y do Pássaro: <label id="passaroY" className="font-normal"></label></p>
+        <p className="text-lg font-semibold">Tempo: <label id="tempo" className="font-normal"></label></p>
+        <p className="text-lg font-semibold">Pontos: <label id="pontos" className="font-bold text-green-600"></label></p>
+        <div className="flex items-center space-x-2">
+          <label htmlFor="escalaTempo" className="text-lg font-semibold">Escala de Tempo:</label>
+          <input type="range" id="escalaTempo" className="w-64" />
+        </div>
+      </div>
+      <div ref={containerRef} />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/app/games/flappy-bird-js/Game.tsx b/app/games/flappy-bird-js/Game.tsx
deleted file mode 100644
index a07c3a0..0000000
--- a/app/games/flappy-bird-js/Game.tsx
+++ /dev/null
@@ -1,386 +0,0 @@
-"use client";
-import Matter from "matter-js";
-
-const {
-  Bodies,
-  Body,
-  Composite,
-  Engine,
-  Events,
-  Render,
-  Runner,
-} = Matter;
-
-import { useEffect, useRef } from "react";
-
-export default function Jogo() {
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const finalizar = iniciar(containerRef!);
-
-    return () => finalizar();
-  }, [containerRef]);
-
-  return (
-    <div className="flex flex-col items-center p-4 space-y-4 bg-gray-100 min-h-screen text-black">
-      <h1 className="text-xxl font-semibold ">Flappy Bird</h1>
-
-      <div ref={containerRef} className="w-full bg-white shadow-md rounded-md flex justify-center items-center" />
-      <div>
-        <p className="text-lg font-semibold">Distância do Cano: <label id="distanciaCano" className="font-normal"></label></p>
-        <p className="text-lg font-semibold">Y do Cano: <label id="canoY" className="font-normal"></label></p>
-        <p className="text-lg font-semibold">Velocidade do Pássaro: <label id="velocidadePassaro" className="font-normal"></label></p>
-        <p className="text-lg font-semibold">Y do Pássaro: <label id="passaroY" className="font-normal"></label></p>
-        <p className="text-lg font-semibold">Tempo: <label id="tempo" className="font-normal"></label></p>
-        <p className="text-lg font-semibold">PONTOS: <label id="pontos" className="font-bold text-green-600"></label></p>
-        <div className="flex items-center space-x-2">
-          <label htmlFor="escalaTempo" className="text-lg font-semibold">Escala de Tempo:</label>
-          <input type="range" id="escalaTempo" className="w-64" />
-        </div>
-      </div>
-      <div ref={containerRef} className="w-full bg-white shadow-md rounded-md flex justify-center items-center" />
-      <div className="text-sm text-gray-700 leading-relaxed">
-        Este código implementa um agente treinado para jogar Flappy Bird utilizando um perceptron de uma camada e um algoritmo genético. O agente é representado por indivíduos em uma população, onde cada indivíduo possui um conjunto de genes que define seu comportamento. A cada ciclo, os indivíduos tomam decisões baseadas em entradas do ambiente e são avaliados com base em seu desempenho.
-
-        <br /><br />
-        <strong>Estrutura do Código:</strong>
-        <br />
-        O código utiliza a biblioteca Matter.js para simular a física do jogo. Por exemplo, os canos e os pássaros são representados como corpos físicos:
-        <textarea readOnly className="w-full bg-gray-200 p-2 rounded-md mt-2">
-          {`const canoInferior = Bodies.rectangle(50, 50, 50, 400, { ... });
-const canoSuperior = Bodies.rectangle(50, 50, 50, 400, { ... });`}
-        </textarea>
-        Esses corpos são adicionados ao mundo da simulação:
-        <textarea readOnly className="w-full bg-gray-200 p-2 rounded-md mt-2">
-          {`Composite.add(motor.world, [canoInferior, canoSuperior]);`}
-        </textarea>
-
-        <br /><br />
-        <strong>Decisão do Agente:</strong>
-        <br />
-        Cada indivíduo decide se deve "pular" com base em um perceptron de uma camada. As entradas para o perceptron incluem a distância do cano, a posição do cano, a velocidade do pássaro e a posição do pássaro:
-        <textarea readOnly className="w-full bg-gray-200 p-2 rounded-md mt-2">
-          {`const entradas = [distanciaCano, canoY, velocidadePassaro, passaroY];
-const soma = entradas.reduce((acc, entrada, index) => acc + entrada * pesos[index], 0);
-return soma >= 0;`}
-        </textarea>
-        Se a soma ponderada das entradas for maior ou igual a zero, o agente decide pular.
-
-        <br /><br />
-        <strong>Algoritmo Genético:</strong>
-        <br />
-        Após cada ciclo, os indivíduos são avaliados com base em seu tempo de sobrevivência:
-        <textarea readOnly className="w-full bg-gray-200 p-2 rounded-md mt-2">
-          {`function obterFitness(individuo) { return individuo.tempo - TEMPO_TREINAMENTO; }`}
-        </textarea>
-        Os indivíduos mais aptos são selecionados para reprodução, e novos indivíduos são criados por cruzamento e mutação:
-        <textarea readOnly className="w-full bg-gray-200 p-2 rounded-md mt-2">
-          {`const novosGenes = cruzar(ind1, ind2);
-novaPopulacao.push(criarIndividuo(novosGenes));`}
-        </textarea>
-
-        <br /><br />
-        <strong>Treinamento e Evolução:</strong>
-        <br />
-        O treinamento ocorre ao longo de múltiplos ciclos. Quando todos os indivíduos morrem, uma nova população é gerada:
-        <textarea readOnly className="w-full bg-gray-200 p-2 rounded-md mt-2">
-          {`if (todosMortos) { populacao = novaPopulacao(); }`}
-        </textarea>
-        Isso permite que o algoritmo genético refine os genes dos indivíduos ao longo do tempo.
-
-        <br /><br />
-        <strong>Interatividade:</strong>
-        <br />
-        O código também permite ajustar a escala de tempo da simulação:
-        <textarea readOnly className="w-full bg-gray-200 p-2 rounded-md mt-2">
-          {`motor.timing.timeScale = 10 * parseInt(entrada.value) / 100;`}
-        </textarea>
-        Além disso, informações como a distância do cano e a posição do pássaro são exibidas na interface para facilitar a análise do comportamento do agente.
-      </div>
-    </div>
-  );
-}
-
-
-function iniciar(containerRef: React.RefObject<HTMLDivElement | null>) {
-  interface EntradaRede {
-    distanciaCano: number;
-    canoY: number;
-    velocidadePassaro: number;
-    passaroY: number;
-    pesos: number[];
-  }
-
-  interface Individuo {
-    corpo: Matter.Body;
-    genes: number[];
-    tempo: number;
-    estaVivo: boolean;
-  }
-
-  const TEMPO_TREINAMENTO = 30 * 1000;
-  const TAMANHO_POPULACAO = 1000;
-  const ESCALA = 1;
-
-  const motor = Engine.create();
-  const renderizador = Render.create({
-    element: containerRef.current!,
-    engine: motor,
-    options: {
-      width: 500,
-      height: 500,
-    },
-  });
-
-  const categoriaJogador = 0x0001;
-  const categoriaObstaculo = 0x0002;
-
-  const canoInferior = Bodies.rectangle(50, 50, 50, 400, {
-    inertia: Infinity,
-    friction: 0,
-    collisionFilter: { category: categoriaObstaculo },
-    label: "obstaculo",
-  });
-
-  const canoSuperior = Bodies.rectangle(50, 50, 50, 400, {
-    inertia: Infinity,
-    friction: 0,
-    label: "obstaculo",
-    collisionFilter: { category: categoriaObstaculo },
-  });
-
-  motor.gravity.scale = 0;
-
-  Composite.add(motor.world, [canoInferior, canoSuperior]);
-
-  Render.run(renderizador);
-
-  const executor = Runner.create();
-  Runner.run(executor, motor);
-
-  reiniciar();
-
-  let populacao: Individuo[] = [];
-
-  Array.from({ length: TAMANHO_POPULACAO }).forEach((_) => criarIndividuo());
-
-  let ciclos = 1;
-  let pontos = 0;
-
-  Events.on(motor, "beforeUpdate", loop);
-  Events.on(motor, "collisionStart", tratarColisao);
-
-  document.getElementById("escalaTempo")!.onchange = (evento) => {
-    evento.preventDefault();
-    const entrada: HTMLInputElement = document.getElementById("escalaTempo")! as HTMLInputElement;
-
-    motor.timing.timeScale = 10 * parseInt(entrada.value) / 100;
-  }
-
-  function tratarColisao(evento: Matter.IEventCollision<Matter.Engine>) {
-    evento.pairs.forEach((par) => {
-      const corpo = par.bodyB;
-      const individuo = populacao.find(
-        (individuo) => individuo.corpo === corpo
-      );
-
-      if (individuo) removerIndividuo(individuo);
-    });
-  }
-
-  function loop(evento: Matter.IEventTimestamped<Matter.Engine>) {
-    populacao.forEach((individuo) => {
-      Body.applyForce(individuo.corpo, individuo.corpo.position, {
-        x: 0,
-        y: individuo.corpo.mass * 0.001 * ESCALA,
-      });
-    });
-
-    Body.setVelocity(canoSuperior, { x: -2 * ESCALA, y: 0 });
-    Body.setVelocity(canoInferior, { x: -2 * ESCALA, y: 0 });
-
-    if (canoSuperior.position.x < 50) {
-      reiniciar();
-
-      document.getElementById("pontos")!.innerText = (++pontos).toString();
-    }
-
-    populacao.filter(individuo => individuo.estaVivo).forEach(individuo => {
-      if (individuo.corpo.position.y > 500 || individuo.corpo.position.y < 0) {
-        removerIndividuo(individuo)
-      }
-    })
-
-    populacao
-      .filter(individuo => individuo.estaVivo)
-      .forEach(individuo => individuo.tempo = evento.timestamp)
-
-    populacao.forEach((individuo) => {
-      const devePular = individuoDevePular(individuo);
-
-      if (devePular) pular(individuo.corpo);
-    });
-
-    const todosMortos = populacao.every(individuo => !individuo.estaVivo);
-
-    if (todosMortos) {
-      console.log("ciclo")
-      pontos = 0;
-      document.getElementById("pontos")!.innerText = (pontos).toString();
-      ciclos++;
-      reiniciar();
-
-      populacao
-        .filter((individuo) => individuo.estaVivo)
-        .forEach((individuo) => removerIndividuo(individuo));
-
-      populacao = novaPopulacao();
-    }
-  }
-
-  function novaPopulacao() {
-    const ordenados = populacao.toSorted((a, b) => obterFitness(b) - obterFitness(a));
-
-    const maisAptos = Math.floor(TAMANHO_POPULACAO * 0.1);
-
-    const novaPopulacao = [];
-
-    Array.from({ length: maisAptos }).forEach((_, index) => novaPopulacao.push(criarIndividuo(ordenados[index].genes)));
-
-    for (let i = 0; i < TAMANHO_POPULACAO - maisAptos; i++) {
-      const r1 = obterAleatorio(0, Math.floor(TAMANHO_POPULACAO * 0.5));
-      const ind1 = ordenados[r1];
-
-      const r2 = obterAleatorio(0, Math.floor(TAMANHO_POPULACAO * 0.5));
-      const ind2 = ordenados[r2];
-
-      const novosGenes = cruzar(ind1, ind2);
-
-      novaPopulacao.push(criarIndividuo(novosGenes));
-    }
-
-    return novaPopulacao;
-  }
-
-  function cruzar(individuo1: Individuo, individuo2: Individuo): number[] {
-    const novosGenes = [];
-
-    for (let i = 0; i < 4; i++) {
-      let p = Math.random();
-      if (p < 0.45) novosGenes.push(individuo1.genes[i]);
-      else if (p < 0.9) novosGenes.push(individuo2.genes[i]);
-      else novosGenes.push(obterAleatorio(-1, 1));
-    }
-
-    return novosGenes;
-  }
-
-  function reiniciar() {
-    const alturaAleatoria = obterAleatorio(125, 375);
-
-    Body.setPosition(canoSuperior, { y: alturaAleatoria + 300, x: 525 });
-    Body.setPosition(canoInferior, { y: alturaAleatoria - 300, x: 525 });
-
-    Body.setVelocity(canoSuperior, { x: 0, y: 0 });
-    Body.setVelocity(canoInferior, { x: 0, y: 0 });
-  }
-
-  function pular(corpo: Matter.Body) {
-    Body.setVelocity(corpo, { x: corpo.velocity.x, y: -4 * ESCALA });
-  }
-
-  function obterAleatorio(min: number, max: number) {
-    return Math.random() * (max - min) + min;
-  }
-
-  function individuoDevePular(individuo: Individuo) {
-    const distanciaCano = canoSuperior.position.x;
-    const canoY = canoSuperior.position.y + 300;
-    const velocidadePassaro = individuo.corpo.velocity.y;
-    const passaroY = individuo.corpo.position.y;
-
-    if (populacao.findIndex(indi => indi === individuo) === 0) {
-      document.getElementById("distanciaCano")!.innerText = distanciaCano.toString();
-      document.getElementById("canoY")!.innerText = canoY.toString();
-      document.getElementById("velocidadePassaro")!.innerText = velocidadePassaro.toString();
-      document.getElementById("passaroY")!.innerText = passaroY.toString();
-      document.getElementById("tempo")!.innerText = individuo.tempo.toString();
-    }
-
-    const devePular = calcularPulo({
-      distanciaCano,
-      canoY,
-      velocidadePassaro,
-      passaroY,
-      pesos: individuo.genes,
-    });
-
-    return devePular;
-  }
-
-  function calcularPulo({
-    distanciaCano,
-    canoY,
-    velocidadePassaro,
-    passaroY,
-    pesos,
-  }: EntradaRede) {
-    const entradas = [distanciaCano, canoY, velocidadePassaro, passaroY];
-
-    const soma = entradas.reduce(
-      (acc, entrada, index) => acc + entrada * pesos[index],
-      0
-    );
-
-    return soma >= 0;
-  }
-
-  function criarIndividuo(genes1?: number[]): Individuo {
-    const corpo = Bodies.rectangle(50, 50, 50, 50, {
-      inertia: Infinity,
-      collisionFilter: { category: categoriaJogador, group: -1 },
-      label: "individuo",
-      render: {
-        sprite: {
-          texture: './assets/passaro.png',
-          xScale: 1,
-          yScale: 1
-        }
-      }
-    });
-
-    Composite.add(motor.world, [corpo]);
-
-    const genes = [];
-
-    genes.push(obterAleatorio(-1, 1));
-    genes.push(obterAleatorio(-1, 1));
-    genes.push(obterAleatorio(-1, 1));
-    genes.push(obterAleatorio(-1, 1));
-
-    const individuo = { corpo, genes: genes1 || genes, tempo: 0, estaVivo: true };
-
-    populacao.push(individuo);
-
-    return individuo;
-  }
-
-  function obterFitness(individuo: Individuo) {
-    return individuo.tempo - TEMPO_TREINAMENTO;
-  }
-
-  function removerIndividuo(individuo: Individuo) {
-    individuo.estaVivo = false;
-
-    Composite.remove(motor.world, [individuo.corpo]);
-  }
-
-  return () => {
-    Engine.clear(motor);
-    Render.stop(renderizador);
-    Runner.stop(executor);
-    renderizador.canvas.remove();
-    renderizador.textures = {};
-  }
-}
\ No newline at end of file
diff --git a/app/games/flappy-bird-js/Page.tsx b/app/games/flappy-bird-js/Page.tsx
new file mode 100644
index 0000000..566db02
--- /dev/null
+++ b/app/games/flappy-bird-js/Page.tsx
@@ -0,0 +1,31 @@
+"use client";
+import Markdown from "marked-react";
+import FlappyBird from "./Flappy";
+import Lowlight from "react-lowlight";
+//@ts-ignore
+import javascript from 'highlight.js/lib/languages/javascript';
+import 'highlight.js/styles/default.css'
+import content from "./content.md?raw";
+
+Lowlight.registerLanguage('js', javascript);
+
+const renderer = {
+  code(snippet: string, lang: string) {
+    //@ts-ignore
+    return <Lowlight key={this.elementId} language={lang} value={snippet} markers={[]} />;
+  },
+};
+
+export default function Jogo() {
+  return (
+    <div className="bg-amber-50">
+      <h1 className="mb-4 text-4xl font-extrabold leading-none tracking-tight md:text-5xl lg:text-6xl text-black mx-auto text-center">Flappy Bird</h1>
+      <div className="flex justify-center mb-8">
+        <FlappyBird />
+      </div>
+      <div className="border rounded bg-white text-black mx-auto p-4 shadow prose mb-8">
+        <Markdown value={content} renderer={renderer} gfm />
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/app/games/flappy-bird-js/assets/pipe-green.png b/app/games/flappy-bird-js/assets/pipe-green-bottom.png
similarity index 100%
rename from app/games/flappy-bird-js/assets/pipe-green.png
rename to app/games/flappy-bird-js/assets/pipe-green-bottom.png
diff --git a/app/games/flappy-bird-js/assets/pipe-green-top.png b/app/games/flappy-bird-js/assets/pipe-green-top.png
new file mode 100644
index 0000000000000000000000000000000000000000..02be5c307eb7aa68a3cd89b52157e203885aaa20
GIT binary patch
literal 4924
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

literal 0
HcmV?d00001

diff --git a/app/games/flappy-bird-js/content.md b/app/games/flappy-bird-js/content.md
new file mode 100644
index 0000000..824076e
--- /dev/null
+++ b/app/games/flappy-bird-js/content.md
@@ -0,0 +1,80 @@
+# Visão geral
+
+Esta página descreve um agente treinado para jogar Flappy Bird utilizando um perceptron de uma camada e um algoritmo genético. O agente é representado por indivíduos em uma população; cada indivíduo possui um conjunto de genes que define seu comportamento. A cada ciclo, os indivíduos tomam decisões baseadas em entradas do ambiente e são avaliados com base no tempo de sobrevivência.
+
+## Estrutura do Código
+
+O código utiliza a biblioteca `matter-js` para simular a física do jogo. Por exemplo, os canos e os pássaros são representados como corpos físicos:
+
+```js
+const canoInferior = Bodies.rectangle(50, 50, 50, 400, { /* ... */ });
+const canoSuperior = Bodies.rectangle(50, 50, 50, 400, { /* ... */ });
+```
+
+Esses corpos são adicionados ao mundo da simulação:
+
+```js
+Composite.add(motor.world, [canoInferior, canoSuperior]);
+```
+
+---
+
+## Decisão do Agente
+
+Cada indivíduo decide se deve "pular" com base em um perceptron de uma camada. As entradas para o perceptron incluem a distância do cano, a posição do cano, a velocidade do pássaro e a posição do pássaro.
+
+Exemplo (pseudocódigo):
+
+```js
+const entradas = [distanciaCano, canoY, velocidadePassaro, passaroY];
+const soma = entradas.reduce((acc, entrada, index) => acc + entrada * pesos[index], 0);
+return soma >= 0; // decide pular
+```
+
+Se a soma ponderada das entradas for maior ou igual a zero, o agente decide pular.
+
+---
+
+## Algoritmo Genético
+
+Após cada ciclo, os indivíduos são avaliados com base em seu tempo de sobrevivência:
+
+```js
+function obterFitness(individuo) { return individuo.tempo - TEMPO_TREINAMENTO; }
+```
+
+Os indivíduos mais aptos são selecionados para reprodução, e novos indivíduos são criados por cruzamento e mutação:
+
+```js
+const novosGenes = cruzar(ind1, ind2);
+novaPopulacao.push(criarIndividuo(novosGenes));
+```
+
+---
+
+## Treinamento e Evolução
+
+O treinamento ocorre ao longo de múltiplos ciclos. Quando todos os indivíduos morrem, uma nova população é gerada:
+
+```js
+if (todosMortos) { populacao = novaPopulacao(); }
+```
+
+Isso permite que o algoritmo genético refine os genes dos indivíduos ao longo do tempo.
+
+---
+
+## Interatividade (controle de tempo)
+
+O código permite ajustar a escala de tempo da simulação (input range):
+
+```js
+motor.timing.timeScale = 10 * parseInt(entrada.value) / 100;
+```
+
+---
+
+## Notas
+
+- A versão Markdown serve para documentação/README; para execução interativa utilize `Page.tsx` que importa o componente `Game`.
+- Se você quiser que esta versão `Page.md` seja usada como página no projeto (em vez de `Page.tsx`), é necessário atualizar rotas ou conversão para MDX e configurar o build para processar arquivos Markdown/MDX.
diff --git a/app/games/flappy-bird-js/game.ts b/app/games/flappy-bird-js/game.ts
new file mode 100644
index 0000000..0edb803
--- /dev/null
+++ b/app/games/flappy-bird-js/game.ts
@@ -0,0 +1,422 @@
+import Matter from "matter-js";
+import type { RefObject } from "react";
+
+import birdTexture from "./assets/bird.png"
+import backgroundTexture from "./assets/background-day.png"
+import pipeTextureTop from "./assets/pipe-green-top.png"
+import pipeTextureBottom from "./assets/pipe-green-bottom.png"
+
+const {
+  Bodies,
+  Body,
+  Composite,
+  Engine,
+  Events,
+  Render,
+  Runner,
+} = Matter;
+
+// --- Tipos ---
+interface EntradaRede {
+  distanciaCano: number;
+  canoY: number;
+  velocidadePassaro: number;
+  passaroY: number;
+  pesos: number[];
+}
+
+// Cada gene é um array de 88 bits (4x22 bits)
+interface Individuo {
+  corpo: Matter.Body;
+  genes: boolean[]; // 88 bits
+  tempo: number;
+  estaVivo: boolean;
+}
+
+// --- Helpers para conversão bits <-> número ---
+const GENE_BITS = 22;
+const NUM_GENES = 4;
+const TOTAL_BITS = GENE_BITS * NUM_GENES;
+
+// Converte 22 bits (boolean[]) para número no range [-1, 1]
+function bitsParaNumero(bits: boolean[]): number {
+  if (bits.length !== GENE_BITS) throw new Error("bitsParaNumero: tamanho incorreto");
+  // Interpreta como inteiro não-sinalizado
+  let val = 0;
+  for (let i = 0; i < GENE_BITS; i++) {
+    if (bits[i]) val |= (1 << (GENE_BITS - 1 - i));
+  }
+  // Normaliza para [0, 1]
+  const norm = val / ((1 << GENE_BITS) - 1);
+  // Mapeia para [-1, 1]
+  return norm * 2 - 1;
+}
+
+// Converte número no range [-1, 1] para 22 bits (boolean[])
+function numeroParaBits(num: number): boolean[] {
+  // Garante range
+  const clamped = Math.max(-1, Math.min(1, num));
+  // Normaliza para [0, 1]
+  const norm = (clamped + 1) / 2;
+  // Converte para inteiro
+  const val = Math.round(norm * ((1 << GENE_BITS) - 1));
+  // Para cada bit
+  const bits: boolean[] = [];
+  for (let i = GENE_BITS - 1; i >= 0; i--) {
+    bits.push(Boolean((val >> i) & 1));
+  }
+  return bits;
+}
+
+// --- Constantes de configuração ---
+const TEMPO_TREINAMENTO = 30 * 1000;
+const TAMANHO_POPULACAO = 1000;
+const ESCALA = 1;
+const LARGURA_CANVAS = 500;
+const ALTURA_CANVAS = 320 + 125;
+
+// Dimensões dos sprites/corpos
+const PIPE_WIDTH = 50;
+const PIPE_HEIGHT = 320;
+const BIRD_WIDTH = 52;
+const BIRD_HEIGHT = 24;
+const INTERVALO_CANO = 100;
+
+/**
+ * Classe que encapsula toda a lógica do jogo Flappy Bird.
+ * - Mantém o estado do motor Matter.js
+ * - Cria e gerencia a população de indivíduos (agentes)
+ * - Fornece um método de limpeza (stop) para desacoplar do componente React
+ */
+class FlappyGame {
+  private containerRef: RefObject<HTMLDivElement | null>;
+  private engine: Matter.Engine;
+  private render: Matter.Render;
+  private runner: Matter.Runner;
+  private categoriaJogador = 0x0001;
+  private categoriaObstaculo = 0x0002;
+  private canoSuperior!: Matter.Body;
+  private canoInferior!: Matter.Body;
+  private populacao: Individuo[] = [];
+  private ciclos = 1;
+  private pontos = 0;
+
+  constructor(containerRef: RefObject<HTMLDivElement | null>) {
+    this.containerRef = containerRef;
+
+    if (!containerRef?.current) {
+      throw new Error("containerRef is null. Provide a mounted div reference.");
+    }
+
+    // Cria engine e render
+    this.engine = Engine.create();
+    this.render = Render.create({
+      element: containerRef.current,
+      engine: this.engine,
+      options: {
+        width: LARGURA_CANVAS,
+        height: ALTURA_CANVAS,
+        background: backgroundTexture, // background sprite
+        wireframes: false
+      },
+    });
+
+    this.runner = Runner.create();
+
+    // Inicializa o mundo e os objetos
+    this.initWorld();
+    this.start();
+
+    console.log("FlappyGame: iniciado");
+  }
+
+  // Inicializa canos, gravidade e adiciona ao mundo
+  private initWorld() {
+    // Cano superior (pipe)
+  this.canoSuperior = Bodies.rectangle(50, 50, PIPE_WIDTH, PIPE_HEIGHT, {
+      inertia: Infinity,
+      friction: 0,
+      collisionFilter: { category: this.categoriaObstaculo },
+      label: "obstaculo",
+      render: {
+        sprite: {
+          texture: pipeTextureTop,
+          xScale: 1,
+          yScale: 1,
+        },
+      },
+    });
+
+    // Cano inferior (pipe, invertido)
+  this.canoInferior = Bodies.rectangle(50, 50, PIPE_WIDTH, PIPE_HEIGHT, {
+      inertia: Infinity,
+      friction: 0,
+      label: "obstaculo",
+      collisionFilter: { category: this.categoriaObstaculo },
+      render: {
+        sprite: {
+          texture: pipeTextureBottom,
+          xScale: 1,
+          yScale: 1,
+        },
+      },
+    });
+
+    this.engine.gravity.scale = 0;
+
+    Composite.add(this.engine.world, [this.canoSuperior, this.canoInferior]);
+
+    Render.run(this.render);
+    Runner.run(this.runner, this.engine);
+
+    // cria população inicial
+    for (let i = 0; i < TAMANHO_POPULACAO; i++) {
+      this.criarIndividuo();
+    }
+
+    // Eventos do motor
+    Events.on(this.engine, "beforeUpdate", (evt) => this.loop(evt));
+    Events.on(this.engine, "collisionStart", (evt) => this.tratarColisao(evt));
+
+    // Conecta controle de escala de tempo (se existir no DOM)
+    const escalaEl = document.getElementById("escalaTempo") as HTMLInputElement | null;
+    if (escalaEl) {
+      escalaEl.onchange = (e) => {
+        e.preventDefault();
+        const value = parseInt(escalaEl.value || "0");
+        this.engine.timing.timeScale = 10 * value / 100;
+        console.log("FlappyGame: timeScale alterado ->", this.engine.timing.timeScale);
+      };
+    }
+
+    // posiciona os canos inicialmente
+    this.reiniciarCano();
+  }
+
+  // Inicia o loop (já ligado nos eventos do engine)
+  private start() {
+    console.log("FlappyGame: start runner e render");
+  }
+
+  // Para e limpa o jogo
+  public stop() {
+    console.log("FlappyGame: parando jogo e limpando recursos");
+    Events.off(this.engine, "beforeUpdate");
+    Events.off(this.engine, "collisionStart");
+    Engine.clear(this.engine);
+    Render.stop(this.render);
+    Runner.stop(this.runner);
+    try { this.render.canvas.remove(); } catch { /* canvas pode já ter sido removido */ }
+    // limpa texturas caso existam
+    // @ts-ignore - matter-js internal
+    this.render.textures = {};
+  }
+
+  // --- Loop principal do jogo chamado antes de cada atualização ---
+  private loop(evento: Matter.IEventTimestamped<Matter.Engine>) {
+    // Aplica força gravitacional simples a cada indivíduo
+    this.populacao.forEach((individuo) => {
+      Body.applyForce(individuo.corpo, individuo.corpo.position, {
+        x: 0,
+        y: individuo.corpo.mass * 0.001 * ESCALA,
+      });
+    });
+
+    // Move canos
+    Body.setVelocity(this.canoInferior, { x: -2 * ESCALA, y: 0 });
+    Body.setVelocity(this.canoSuperior, { x: -2 * ESCALA, y: 0 });
+
+    // Quando passar do limite, reposiciona e conta ponto
+    if (this.canoInferior.position.x < PIPE_WIDTH) {
+      this.reiniciarCano();
+      this.pontos++;
+      this.setTextById("pontos", String(this.pontos));
+      console.log("FlappyGame: cano passou -> pontos", this.pontos);
+    }
+
+    // Remove indivíduos fora do Y visível
+    this.populacao.filter(i => i.estaVivo).forEach(i => {
+      if (i.corpo.position.y > ALTURA_CANVAS || i.corpo.position.y < 0) {
+        this.removerIndividuo(i);
+      }
+    });
+
+    // Atualiza tempo de sobrevivência para aptidão
+    this.populacao
+      .filter(i => i.estaVivo)
+      .forEach(i => i.tempo = evento.timestamp);
+
+    // Decisão de pulo para cada indivíduo
+    this.populacao.forEach((individuo) => {
+      const devePular = this.individuoDevePular(individuo);
+      if (devePular) this.pular(individuo.corpo);
+    });
+
+    // Se todos morreram, evolui população
+    const todosMortos = this.populacao.every(i => !i.estaVivo);
+    if (todosMortos) {
+      console.log("FlappyGame: todos mortos - gerando nova população (ciclo)");
+      this.pontos = 0;
+      this.setTextById("pontos", String(this.pontos));
+      this.ciclos++;
+      this.reiniciarCano();
+
+      // Remove qualquer corpo remanescente dos vivos
+      this.populacao.filter(i => i.estaVivo).forEach(i => this.removerIndividuo(i));
+
+      this.populacao = this.novaPopulacao();
+    }
+  }
+
+  // --- Colisão: marca indivíduo como morto ---
+  private tratarColisao(evento: Matter.IEventCollision<Matter.Engine>) {
+    evento.pairs.forEach((par) => {
+      const corpo = par.bodyB;
+      const individuo = this.populacao.find((ind) => ind.corpo === corpo);
+      if (individuo) {
+        console.log("FlappyGame: colisão detectada - removendo individuo");
+        this.removerIndividuo(individuo);
+      }
+    });
+  }
+
+  // --- Geração de nova população por seleção/crossover ---
+  private novaPopulacao(): Individuo[] {
+    const ordenados = this.populacao.toSorted((a, b) => this.obterFitness(b) - this.obterFitness(a));
+    const maisAptos = Math.floor(TAMANHO_POPULACAO * 0.1);
+    const nova: Individuo[] = [];
+
+    // Mantém os melhores (copia os bits)
+    for (let i = 0; i < maisAptos; i++) {
+      nova.push(this.criarIndividuo([...ordenados[i].genes]));
+    }
+
+    // Preenche o resto com cruzamentos
+    for (let i = 0; i < TAMANHO_POPULACAO - maisAptos; i++) {
+      const r1 = Math.floor(this.obterAleatorio(0, Math.floor(TAMANHO_POPULACAO * 0.5)));
+      const r2 = Math.floor(this.obterAleatorio(0, Math.floor(TAMANHO_POPULACAO * 0.5)));
+      const ind1 = ordenados[r1];
+      const ind2 = ordenados[r2];
+      const genes = this.cruzar(ind1, ind2);
+      nova.push(this.criarIndividuo(genes));
+    }
+
+    console.log("FlappyGame: nova população gerada");
+    return nova;
+  }
+
+  private cruzar(ind1: Individuo, ind2: Individuo): boolean[] {
+    const novosGenes: boolean[] = [];
+    for (let i = 0; i < TOTAL_BITS; i++) {
+      const p = Math.random();
+      if (p < 0.45) novosGenes.push(ind1.genes[i]);
+      else if (p < 0.9) novosGenes.push(ind2.genes[i]);
+      else novosGenes.push(Math.random() < 0.5); // mutação aleatória
+    }
+      return novosGenes;
+  }
+
+  // Reposiciona os canos com altura aleatória
+  private reiniciarCano() {
+    const alturaAleatoria = this.obterAleatorio(25 + INTERVALO_CANO/2, ALTURA_CANVAS - (25 + INTERVALO_CANO/2));
+    Body.setPosition(this.canoSuperior, { y: alturaAleatoria - PIPE_HEIGHT/2 - INTERVALO_CANO/2, x: LARGURA_CANVAS + (PIPE_WIDTH/2) });
+    Body.setPosition(this.canoInferior, { y: alturaAleatoria + PIPE_HEIGHT/2 + INTERVALO_CANO/2, x: LARGURA_CANVAS + (PIPE_WIDTH/2) });
+    Body.setVelocity(this.canoSuperior, { x: 0, y: 0 });
+    Body.setVelocity(this.canoInferior, { x: 0, y: 0 });
+    console.log("FlappyGame: canos reiniciados, altura", alturaAleatoria);
+  }
+
+  private pular(corpo: Matter.Body) {
+    Body.setVelocity(corpo, { x: corpo.velocity.x, y: -4 * ESCALA });
+  }
+
+  private obterAleatorio(min: number, max: number) {
+    return Math.random() * (max - min) + min;
+  }
+
+  // Decisão do agente usando um perceptron simples
+  private individuoDevePular(individuo: Individuo) {
+    const distanciaCano = this.canoInferior.position.x;
+    const canoY = this.canoInferior.position.y + 300;
+    const velocidadePassaro = individuo.corpo.velocity.y;
+    const passaroY = individuo.corpo.position.y;
+
+    // escreve dados na UI apenas para o primeiro indivíduo (para inspeção)
+    if (this.populacao.findIndex(indi => indi === individuo) === 0) {
+      this.setTextById("distanciaCano", String(distanciaCano));
+      this.setTextById("canoY", String(canoY));
+      this.setTextById("velocidadePassaro", String(velocidadePassaro));
+      this.setTextById("passaroY", String(passaroY));
+      this.setTextById("tempo", String(individuo.tempo));
+    }
+
+    // Extrai 4 números dos 88 bits
+    const pesos: number[] = [];
+    for (let i = 0; i < NUM_GENES; i++) {
+      const bits = individuo.genes.slice(i * GENE_BITS, (i + 1) * GENE_BITS);
+      pesos.push(bitsParaNumero(bits));
+    }
+    return this.calcularPulo({ distanciaCano, canoY, velocidadePassaro, passaroY, pesos });
+  }
+
+  private calcularPulo({ distanciaCano, canoY, velocidadePassaro, passaroY, pesos }: EntradaRede) {
+    const entradas = [distanciaCano, canoY, velocidadePassaro, passaroY];
+    const soma = entradas.reduce((acc, entrada, index) => acc + entrada * pesos[index], 0);
+    return soma >= 0;
+  }
+
+  private criarIndividuo(genes1?: boolean[]): Individuo {
+    // Usa sprite do pássaro
+  const corpo = Bodies.rectangle(50, 50, BIRD_WIDTH, BIRD_HEIGHT, {
+      inertia: Infinity,
+      collisionFilter: { category: this.categoriaJogador, group: -1 },
+      label: "individuo",
+      render: {
+        sprite: {
+          texture: birdTexture,
+          xScale: 1,
+          yScale: 1,
+        },
+      },
+    });
+
+    Composite.add(this.engine.world, [corpo]);
+
+    let genes: boolean[];
+    if (genes1) {
+      genes = [...genes1];
+    } else {
+      // Gera 88 bits aleatórios
+      genes = Array.from({ length: TOTAL_BITS }, () => Math.random() < 0.5);
+    }
+
+    const individuo: Individuo = { corpo, genes, tempo: 0, estaVivo: true };
+    this.populacao.push(individuo);
+    return individuo;
+  }
+
+  private obterFitness(individuo: Individuo) {
+    return individuo.tempo - TEMPO_TREINAMENTO;
+  }
+
+  private removerIndividuo(individuo: Individuo) {
+    individuo.estaVivo = false;
+    Composite.remove(this.engine.world, [individuo.corpo]);
+  }
+
+  // Helper para atualizar texto em labels se existirem
+  private setTextById(id: string, text: string) {
+    const el = document.getElementById(id);
+    if (el) el.innerText = text;
+  }
+}
+
+/**
+ * Função de conveniência usada pelo componente React: cria FlappyGame e retorna
+ * uma função de limpeza para parar/limpar quando o componente desmonta.
+ */
+export function iniciar(containerRef: RefObject<HTMLDivElement | null>) {
+  const jogo = new FlappyGame(containerRef);
+  return () => jogo.stop();
+}
+
diff --git a/app/routes.ts b/app/routes.ts
index 6571c19..22f8f56 100644
--- a/app/routes.ts
+++ b/app/routes.ts
@@ -1,3 +1,3 @@
 import { type RouteConfig, index, route } from "@react-router/dev/routes";
 
-export default [index("routes/Home.tsx"), route("/games/flappy", "games/flappy-bird-js/Game.tsx")] satisfies RouteConfig;
+export default [index("routes/Home.tsx"), route("/games/flappy-bird-js", "games/flappy-bird-js/Page.tsx")] satisfies RouteConfig;
diff --git a/package-lock.json b/package-lock.json
index 8a78452..27ac022 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,15 +9,19 @@
         "@pixi/react": "^8.0.3",
         "@react-router/node": "^7.7.1",
         "@react-router/serve": "^7.7.1",
+        "highlight.js": "^11.11.1",
         "isbot": "^5.1.27",
+        "marked-react": "^3.0.2",
         "matter-js": "^0.20.0",
         "pixi.js": "^8.12.0",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
+        "react-lowlight": "^3.1.0",
         "react-router": "^7.7.1"
       },
       "devDependencies": {
         "@react-router/dev": "^7.7.1",
+        "@tailwindcss/typography": "^0.5.19",
         "@tailwindcss/vite": "^4.1.4",
         "@types/matter-js": "^0.20.0",
         "@types/node": "^20",
@@ -1801,6 +1805,19 @@
         "node": ">= 10"
       }
     },
+    "node_modules/@tailwindcss/typography": {
+      "version": "0.5.19",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.19.tgz",
+      "integrity": "sha512-w31dd8HOx3k9vPtcQh5QHP9GwKcgbMp87j58qi6xgiBnFFtKEAgCWnDw4qUT8aHwkCp8bKvb/KGKWWHedP0AAg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-selector-parser": "6.0.10"
+      },
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1"
+      }
+    },
     "node_modules/@tailwindcss/vite": {
       "version": "4.1.12",
       "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.1.12.tgz",
@@ -1835,6 +1852,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/hast": {
+      "version": "2.3.10",
+      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-2.3.10.tgz",
+      "integrity": "sha512-McWspRw8xx8J9HurkVBfYj0xKoE25tOFlHGdx4MJ5xORQrMGZNqJhVQWaIbm6Oyla5kYOXtDiopzKRJzEOkwJw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^2"
+      }
+    },
     "node_modules/@types/matter-js": {
       "version": "0.20.0",
       "resolved": "https://registry.npmjs.org/@types/matter-js/-/matter-js-0.20.0.tgz",
@@ -1880,6 +1906,12 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/unist": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz",
+      "integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==",
+      "license": "MIT"
+    },
     "node_modules/@vitejs/plugin-rsc": {
       "version": "0.4.11",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-rsc/-/plugin-rsc-0.4.11.tgz",
@@ -2344,6 +2376,19 @@
         "node": ">= 8"
       }
     },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
@@ -2683,6 +2728,19 @@
       "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
       "license": "MIT"
     },
+    "node_modules/fault": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/fault/-/fault-2.0.1.tgz",
+      "integrity": "sha512-WtySTkS4OKev5JtpHXnib4Gxiurzh5NCGvWrFaZ34m6JehfTUhKZvn9njTfw48t6JumVQOmrKqpmGcdwxnhqBQ==",
+      "license": "MIT",
+      "dependencies": {
+        "format": "^0.2.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/fdir": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
@@ -2751,6 +2809,14 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/format": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/format/-/format-0.2.2.tgz",
+      "integrity": "sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==",
+      "engines": {
+        "node": ">=0.4.x"
+      }
+    },
     "node_modules/forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -2932,6 +2998,15 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/highlight.js": {
+      "version": "11.11.1",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.11.1.tgz",
+      "integrity": "sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/hosted-git-info": {
       "version": "6.1.3",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-6.1.3.tgz",
@@ -3389,6 +3464,30 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/lowlight": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/lowlight/-/lowlight-2.9.0.tgz",
+      "integrity": "sha512-OpcaUTCLmHuVuBcyNckKfH5B0oA4JUavb/M/8n9iAvanJYNQkrVm4pvyX0SUaqkBG4dnWHKt7p50B3ngAG2Rfw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^2.0.0",
+        "fault": "^2.0.0",
+        "highlight.js": "~11.8.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/lowlight/node_modules/highlight.js": {
+      "version": "11.8.0",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.8.0.tgz",
+      "integrity": "sha512-MedQhoqVdr0U6SSnWPzfiadUcDHfN/Wzq25AkXiQv9oiOO/sG0S7XkvpFIqWBl9Yq1UYyYOOVORs5UW2XlPyzg==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/lru-cache": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
@@ -3409,6 +3508,30 @@
         "@jridgewell/sourcemap-codec": "^1.5.5"
       }
     },
+    "node_modules/marked": {
+      "version": "16.4.1",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-16.4.1.tgz",
+      "integrity": "sha512-ntROs7RaN3EvWfy3EZi14H4YxmT6A5YvywfhO+0pm+cH/dnSQRmdAmoFIc3B9aiwTehyk7pESH4ofyBY+V5hZg==",
+      "license": "MIT",
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/marked-react": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/marked-react/-/marked-react-3.0.2.tgz",
+      "integrity": "sha512-uLuH5P5i1H+igH+Y7toWX+sM2UGDdYMIPZ9JtBNajkyFiQBoAMJJY7gBlm3nHXHiPDZHkhZ9p/cb9XO0F1qnCA==",
+      "license": "MIT",
+      "dependencies": {
+        "marked": "^16.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || >=17.0.0"
+      }
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -3888,6 +4011,20 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/postcss-selector-parser": {
+      "version": "6.0.10",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
+      "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/prettier": {
       "version": "3.6.2",
       "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.6.2.tgz",
@@ -4008,6 +4145,24 @@
         "react": "^19.1.1"
       }
     },
+    "node_modules/react-lowlight": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/react-lowlight/-/react-lowlight-3.1.0.tgz",
+      "integrity": "sha512-dUhonEgIqptM58wmdjQIBe4zQMlDEt3e5PYdR8VedZGurrdnqjjDtVDD5uHc1V3FQTTjxo9GMX6kyxEcexg3XQ==",
+      "license": "MIT",
+      "dependencies": {
+        "lowlight": "^2.4.1"
+      },
+      "peerDependencies": {
+        "highlight.js": "^11.0.0",
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "highlight.js": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-reconciler": {
       "version": "0.31.0",
       "resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.31.0.tgz",
@@ -4717,6 +4872,13 @@
         "browserslist": ">= 4.21.0"
       }
     },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/utils-merge": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
diff --git a/package.json b/package.json
index fe9a53f..cbee0d4 100644
--- a/package.json
+++ b/package.json
@@ -12,15 +12,19 @@
     "@pixi/react": "^8.0.3",
     "@react-router/node": "^7.7.1",
     "@react-router/serve": "^7.7.1",
+    "highlight.js": "^11.11.1",
     "isbot": "^5.1.27",
+    "marked-react": "^3.0.2",
     "matter-js": "^0.20.0",
     "pixi.js": "^8.12.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "react-lowlight": "^3.1.0",
     "react-router": "^7.7.1"
   },
   "devDependencies": {
     "@react-router/dev": "^7.7.1",
+    "@tailwindcss/typography": "^0.5.19",
     "@tailwindcss/vite": "^4.1.4",
     "@types/matter-js": "^0.20.0",
     "@types/node": "^20",

From 35ffc71cdf9ccd2fb76bf4976f2ccf35cf2b1845 Mon Sep 17 00:00:00 2001
From: Pedro Santayana <pedrosantayana@gmail.com>
Date: Mon, 27 Oct 2025 19:22:32 -0300
Subject: [PATCH 6/6] fim

---
 app/games/flappy-bird-js/Flappy.tsx           |  30 --
 app/games/flappy-bird-js/Page.tsx             |  31 --
 app/games/flappy-bird-js/assets/blue-bird.png | Bin 0 -> 431 bytes
 app/games/flappy-bird-js/assets/logo.png      | Bin 0 -> 16390 bytes
 .../flappy-bird-js/componentes/Flappy.tsx     |  44 ++
 app/games/flappy-bird-js/componentes/Page.tsx |  37 ++
 app/games/flappy-bird-js/content.md           |  80 ---
 app/games/flappy-bird-js/game.ts              | 422 ---------------
 app/games/flappy-bird-js/logicas/fisica.ts    |  25 +
 app/games/flappy-bird-js/logicas/ia.ts        |  80 +++
 app/games/flappy-bird-js/logicas/jogo.ts      | 509 ++++++++++++++++++
 app/games/flappy-bird-js/readme.md            | 143 +++++
 app/routes.ts                                 |   2 +-
 13 files changed, 839 insertions(+), 564 deletions(-)
 delete mode 100644 app/games/flappy-bird-js/Flappy.tsx
 delete mode 100644 app/games/flappy-bird-js/Page.tsx
 create mode 100644 app/games/flappy-bird-js/assets/blue-bird.png
 create mode 100644 app/games/flappy-bird-js/assets/logo.png
 create mode 100644 app/games/flappy-bird-js/componentes/Flappy.tsx
 create mode 100644 app/games/flappy-bird-js/componentes/Page.tsx
 delete mode 100644 app/games/flappy-bird-js/content.md
 delete mode 100644 app/games/flappy-bird-js/game.ts
 create mode 100644 app/games/flappy-bird-js/logicas/fisica.ts
 create mode 100644 app/games/flappy-bird-js/logicas/ia.ts
 create mode 100644 app/games/flappy-bird-js/logicas/jogo.ts
 create mode 100644 app/games/flappy-bird-js/readme.md

diff --git a/app/games/flappy-bird-js/Flappy.tsx b/app/games/flappy-bird-js/Flappy.tsx
deleted file mode 100644
index bcca195..0000000
--- a/app/games/flappy-bird-js/Flappy.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { useEffect, useRef } from "react";
-import { iniciar } from "./game";
-
-export default function FlappyBird() {
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const finalizar = iniciar(containerRef!);
-
-    return () => finalizar();
-  }, [containerRef]);
-
-  return (
-    <div className="flex mb-8 flex-row text-black border rounded border-black p-4 bg-white">
-      <div>
-        <p className="text-lg font-semibold">Distância do Cano: <label id="distanciaCano" className="font-normal"></label></p>
-        <p className="text-lg font-semibold">Y do Cano: <label id="canoY" className="font-normal"></label></p>
-        <p className="text-lg font-semibold">Velocidade do Pássaro: <label id="velocidadePassaro" className="font-normal"></label></p>
-        <p className="text-lg font-semibold">Y do Pássaro: <label id="passaroY" className="font-normal"></label></p>
-        <p className="text-lg font-semibold">Tempo: <label id="tempo" className="font-normal"></label></p>
-        <p className="text-lg font-semibold">Pontos: <label id="pontos" className="font-bold text-green-600"></label></p>
-        <div className="flex items-center space-x-2">
-          <label htmlFor="escalaTempo" className="text-lg font-semibold">Escala de Tempo:</label>
-          <input type="range" id="escalaTempo" className="w-64" />
-        </div>
-      </div>
-      <div ref={containerRef} />
-    </div>
-  );
-}
\ No newline at end of file
diff --git a/app/games/flappy-bird-js/Page.tsx b/app/games/flappy-bird-js/Page.tsx
deleted file mode 100644
index 566db02..0000000
--- a/app/games/flappy-bird-js/Page.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-"use client";
-import Markdown from "marked-react";
-import FlappyBird from "./Flappy";
-import Lowlight from "react-lowlight";
-//@ts-ignore
-import javascript from 'highlight.js/lib/languages/javascript';
-import 'highlight.js/styles/default.css'
-import content from "./content.md?raw";
-
-Lowlight.registerLanguage('js', javascript);
-
-const renderer = {
-  code(snippet: string, lang: string) {
-    //@ts-ignore
-    return <Lowlight key={this.elementId} language={lang} value={snippet} markers={[]} />;
-  },
-};
-
-export default function Jogo() {
-  return (
-    <div className="bg-amber-50">
-      <h1 className="mb-4 text-4xl font-extrabold leading-none tracking-tight md:text-5xl lg:text-6xl text-black mx-auto text-center">Flappy Bird</h1>
-      <div className="flex justify-center mb-8">
-        <FlappyBird />
-      </div>
-      <div className="border rounded bg-white text-black mx-auto p-4 shadow prose mb-8">
-        <Markdown value={content} renderer={renderer} gfm />
-      </div>
-    </div>
-  );
-}
\ No newline at end of file
diff --git a/app/games/flappy-bird-js/assets/blue-bird.png b/app/games/flappy-bird-js/assets/blue-bird.png
new file mode 100644
index 0000000000000000000000000000000000000000..d82802ab8c75244ddbe55d20995eea4a4eea8d2d
GIT binary patch
literal 431
zcmeAS@N?(olHy`uVBq!ia0vp^N<b{Z!VDyHJB+M=6id3JuOkD)#(wTUiL5}rLb6AY
zF9SoBDg#49GXulV|3LaB14F3+1H-EX1_rAc3=HD=lj4uM0oBR{_=LCu>0k@Dkc<C+
z{rcs7@W=IMXa3x1d6FREu;kMJ|NjjGpBw|KU@Qsp3ubV5b|VeMN%D4g;rw`W=^G%2
zv%n*=n1O*?7=#%aX3dcR3bL1Y`ns||X69jF5`O+mbq7!=$J50zMB;Mq#X#Nz3Op<q
zqAa*04mjzaVG`TW@J4p~!D*tC?uyqgT-Y#^>1f<ft_eX-=WcLkmmhL=JTR+BAdidb
z`+lWcUi}$&R5-ZI#f4TiP0jdqEg=267uUkeSGNevz31{caq*d*x;01l+A+?UZj-+y
zuFD8$uWE^FL`h0wNvc(HQ7VvPFfuT-)HN{HH8cz{w6HQTvNE*PHZZd?FnFkCc^E}Q
cZhlH;S|x4`6UrOwff^V*UHx3vIVCg!0DTXP@&Et;

literal 0
HcmV?d00001

diff --git a/app/games/flappy-bird-js/assets/logo.png b/app/games/flappy-bird-js/assets/logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..e4af2155be04b3001af448869a6bd9137abbcf28
GIT binary patch
literal 16390
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
J!EcBM{|C?TjG+Jk

literal 0
HcmV?d00001

diff --git a/app/games/flappy-bird-js/componentes/Flappy.tsx b/app/games/flappy-bird-js/componentes/Flappy.tsx
new file mode 100644
index 0000000..ac7d688
--- /dev/null
+++ b/app/games/flappy-bird-js/componentes/Flappy.tsx
@@ -0,0 +1,44 @@
+import { useEffect, useRef } from "react";
+import { iniciar } from "../logicas/jogo";
+import type { ControladorFlappy } from "../logicas/jogo";
+
+export default function FlappyBird() {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const controllerRef = useRef<ControladorFlappy | null>(null);
+
+  useEffect(() => {
+    // inicia o jogo quando o componente monta
+    controllerRef.current = iniciar(containerRef!);
+    return () => {
+      try { controllerRef.current && controllerRef.current.stop(); } catch { }
+    };
+  }, []);
+
+  function handleRestart() {
+    // reinicia o jogo: para e cria novamente
+    try { controllerRef.current && controllerRef.current.stop(); } catch { }
+    controllerRef.current = iniciar(containerRef!);
+    // reseta o contador de gerações no novo controlador, se disponível
+    controllerRef.current?.resetGeracao?.();
+  }
+
+  return (
+    <div className="flex mb-8 flex-col md:flex-row text-black border rounded border-black p-4 bg-white">
+      <div ref={containerRef} style={{ minWidth: 300, minHeight: 200 }} />
+      <div className="mt-3 md:mt-0 md:ml-4 flex flex-col grow">
+        <div>
+          <p className="text-md font-semibold">Distância do cano: <label id="distanciaCano" className="font-normal"></label></p>
+          <p className="text-md font-semibold">Altura da passagem: <label id="canoY" className="font-normal"></label></p>
+          <p className="text-md font-semibold">Velocidade vertical do pássaro: <label id="velocidadePassaro" className="font-normal"></label></p>
+          <p className="text-md font-semibold">Altura do pássaro: <label id="passaroY" className="font-normal"></label></p>
+          <p className="text-md font-semibold">Tempo: <label id="tempo" className="font-normal"></label></p>
+          <p className="text-md font-semibold">Geração: <label id="geracao" className="font-normal"></label></p>
+          <p className="text-md font-semibold">Pontos: <label id="pontos" className="font-bold text-green-600"></label></p>
+          <div className="flex flex-row justify-center">
+            <button onClick={handleRestart} className="cursor-pointer px-3 py-1 bg-blue-600 text-white rounded">Reiniciar</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/games/flappy-bird-js/componentes/Page.tsx b/app/games/flappy-bird-js/componentes/Page.tsx
new file mode 100644
index 0000000..168cadf
--- /dev/null
+++ b/app/games/flappy-bird-js/componentes/Page.tsx
@@ -0,0 +1,37 @@
+"use client";
+import Markdown from "marked-react";
+import FlappyBird from "./Flappy";
+import Lowlight from "react-lowlight";
+//@ts-ignore
+import typescript from 'highlight.js/lib/languages/typescript';
+import 'highlight.js/styles/dark.css'
+import content from "../readme.md?raw";
+
+import logo from "../assets/logo.png"
+
+Lowlight.registerLanguage('ts', typescript);
+
+const renderer = {
+  code(snippet: string, lang: string) {
+    //@ts-ignore
+    return <Lowlight key={this.elementId} language={lang} value={snippet} markers={[]} />;
+  },
+};
+
+export default function Jogo() {
+  return (
+    <div className="bg-amber-50 min-h-screen py-8">
+      <div className="flex flex-row justify-center mb-8">
+        <img src={logo} alt="logo" width={300} />
+      </div>
+      <div className="flex justify-center mb-8 px-4">
+        <div className="w-full max-w-4xl">
+          <FlappyBird />
+        </div>
+      </div>
+      <div className="border rounded bg-white text-black mx-auto p-4 shadow prose mb-8 max-w-4xl px-4 prose-pre:bg-white">
+        <Markdown value={content} renderer={renderer} gfm />
+      </div>
+    </div>
+  );
+}
diff --git a/app/games/flappy-bird-js/content.md b/app/games/flappy-bird-js/content.md
deleted file mode 100644
index 824076e..0000000
--- a/app/games/flappy-bird-js/content.md
+++ /dev/null
@@ -1,80 +0,0 @@
-# Visão geral
-
-Esta página descreve um agente treinado para jogar Flappy Bird utilizando um perceptron de uma camada e um algoritmo genético. O agente é representado por indivíduos em uma população; cada indivíduo possui um conjunto de genes que define seu comportamento. A cada ciclo, os indivíduos tomam decisões baseadas em entradas do ambiente e são avaliados com base no tempo de sobrevivência.
-
-## Estrutura do Código
-
-O código utiliza a biblioteca `matter-js` para simular a física do jogo. Por exemplo, os canos e os pássaros são representados como corpos físicos:
-
-```js
-const canoInferior = Bodies.rectangle(50, 50, 50, 400, { /* ... */ });
-const canoSuperior = Bodies.rectangle(50, 50, 50, 400, { /* ... */ });
-```
-
-Esses corpos são adicionados ao mundo da simulação:
-
-```js
-Composite.add(motor.world, [canoInferior, canoSuperior]);
-```
-
----
-
-## Decisão do Agente
-
-Cada indivíduo decide se deve "pular" com base em um perceptron de uma camada. As entradas para o perceptron incluem a distância do cano, a posição do cano, a velocidade do pássaro e a posição do pássaro.
-
-Exemplo (pseudocódigo):
-
-```js
-const entradas = [distanciaCano, canoY, velocidadePassaro, passaroY];
-const soma = entradas.reduce((acc, entrada, index) => acc + entrada * pesos[index], 0);
-return soma >= 0; // decide pular
-```
-
-Se a soma ponderada das entradas for maior ou igual a zero, o agente decide pular.
-
----
-
-## Algoritmo Genético
-
-Após cada ciclo, os indivíduos são avaliados com base em seu tempo de sobrevivência:
-
-```js
-function obterFitness(individuo) { return individuo.tempo - TEMPO_TREINAMENTO; }
-```
-
-Os indivíduos mais aptos são selecionados para reprodução, e novos indivíduos são criados por cruzamento e mutação:
-
-```js
-const novosGenes = cruzar(ind1, ind2);
-novaPopulacao.push(criarIndividuo(novosGenes));
-```
-
----
-
-## Treinamento e Evolução
-
-O treinamento ocorre ao longo de múltiplos ciclos. Quando todos os indivíduos morrem, uma nova população é gerada:
-
-```js
-if (todosMortos) { populacao = novaPopulacao(); }
-```
-
-Isso permite que o algoritmo genético refine os genes dos indivíduos ao longo do tempo.
-
----
-
-## Interatividade (controle de tempo)
-
-O código permite ajustar a escala de tempo da simulação (input range):
-
-```js
-motor.timing.timeScale = 10 * parseInt(entrada.value) / 100;
-```
-
----
-
-## Notas
-
-- A versão Markdown serve para documentação/README; para execução interativa utilize `Page.tsx` que importa o componente `Game`.
-- Se você quiser que esta versão `Page.md` seja usada como página no projeto (em vez de `Page.tsx`), é necessário atualizar rotas ou conversão para MDX e configurar o build para processar arquivos Markdown/MDX.
diff --git a/app/games/flappy-bird-js/game.ts b/app/games/flappy-bird-js/game.ts
deleted file mode 100644
index 0edb803..0000000
--- a/app/games/flappy-bird-js/game.ts
+++ /dev/null
@@ -1,422 +0,0 @@
-import Matter from "matter-js";
-import type { RefObject } from "react";
-
-import birdTexture from "./assets/bird.png"
-import backgroundTexture from "./assets/background-day.png"
-import pipeTextureTop from "./assets/pipe-green-top.png"
-import pipeTextureBottom from "./assets/pipe-green-bottom.png"
-
-const {
-  Bodies,
-  Body,
-  Composite,
-  Engine,
-  Events,
-  Render,
-  Runner,
-} = Matter;
-
-// --- Tipos ---
-interface EntradaRede {
-  distanciaCano: number;
-  canoY: number;
-  velocidadePassaro: number;
-  passaroY: number;
-  pesos: number[];
-}
-
-// Cada gene é um array de 88 bits (4x22 bits)
-interface Individuo {
-  corpo: Matter.Body;
-  genes: boolean[]; // 88 bits
-  tempo: number;
-  estaVivo: boolean;
-}
-
-// --- Helpers para conversão bits <-> número ---
-const GENE_BITS = 22;
-const NUM_GENES = 4;
-const TOTAL_BITS = GENE_BITS * NUM_GENES;
-
-// Converte 22 bits (boolean[]) para número no range [-1, 1]
-function bitsParaNumero(bits: boolean[]): number {
-  if (bits.length !== GENE_BITS) throw new Error("bitsParaNumero: tamanho incorreto");
-  // Interpreta como inteiro não-sinalizado
-  let val = 0;
-  for (let i = 0; i < GENE_BITS; i++) {
-    if (bits[i]) val |= (1 << (GENE_BITS - 1 - i));
-  }
-  // Normaliza para [0, 1]
-  const norm = val / ((1 << GENE_BITS) - 1);
-  // Mapeia para [-1, 1]
-  return norm * 2 - 1;
-}
-
-// Converte número no range [-1, 1] para 22 bits (boolean[])
-function numeroParaBits(num: number): boolean[] {
-  // Garante range
-  const clamped = Math.max(-1, Math.min(1, num));
-  // Normaliza para [0, 1]
-  const norm = (clamped + 1) / 2;
-  // Converte para inteiro
-  const val = Math.round(norm * ((1 << GENE_BITS) - 1));
-  // Para cada bit
-  const bits: boolean[] = [];
-  for (let i = GENE_BITS - 1; i >= 0; i--) {
-    bits.push(Boolean((val >> i) & 1));
-  }
-  return bits;
-}
-
-// --- Constantes de configuração ---
-const TEMPO_TREINAMENTO = 30 * 1000;
-const TAMANHO_POPULACAO = 1000;
-const ESCALA = 1;
-const LARGURA_CANVAS = 500;
-const ALTURA_CANVAS = 320 + 125;
-
-// Dimensões dos sprites/corpos
-const PIPE_WIDTH = 50;
-const PIPE_HEIGHT = 320;
-const BIRD_WIDTH = 52;
-const BIRD_HEIGHT = 24;
-const INTERVALO_CANO = 100;
-
-/**
- * Classe que encapsula toda a lógica do jogo Flappy Bird.
- * - Mantém o estado do motor Matter.js
- * - Cria e gerencia a população de indivíduos (agentes)
- * - Fornece um método de limpeza (stop) para desacoplar do componente React
- */
-class FlappyGame {
-  private containerRef: RefObject<HTMLDivElement | null>;
-  private engine: Matter.Engine;
-  private render: Matter.Render;
-  private runner: Matter.Runner;
-  private categoriaJogador = 0x0001;
-  private categoriaObstaculo = 0x0002;
-  private canoSuperior!: Matter.Body;
-  private canoInferior!: Matter.Body;
-  private populacao: Individuo[] = [];
-  private ciclos = 1;
-  private pontos = 0;
-
-  constructor(containerRef: RefObject<HTMLDivElement | null>) {
-    this.containerRef = containerRef;
-
-    if (!containerRef?.current) {
-      throw new Error("containerRef is null. Provide a mounted div reference.");
-    }
-
-    // Cria engine e render
-    this.engine = Engine.create();
-    this.render = Render.create({
-      element: containerRef.current,
-      engine: this.engine,
-      options: {
-        width: LARGURA_CANVAS,
-        height: ALTURA_CANVAS,
-        background: backgroundTexture, // background sprite
-        wireframes: false
-      },
-    });
-
-    this.runner = Runner.create();
-
-    // Inicializa o mundo e os objetos
-    this.initWorld();
-    this.start();
-
-    console.log("FlappyGame: iniciado");
-  }
-
-  // Inicializa canos, gravidade e adiciona ao mundo
-  private initWorld() {
-    // Cano superior (pipe)
-  this.canoSuperior = Bodies.rectangle(50, 50, PIPE_WIDTH, PIPE_HEIGHT, {
-      inertia: Infinity,
-      friction: 0,
-      collisionFilter: { category: this.categoriaObstaculo },
-      label: "obstaculo",
-      render: {
-        sprite: {
-          texture: pipeTextureTop,
-          xScale: 1,
-          yScale: 1,
-        },
-      },
-    });
-
-    // Cano inferior (pipe, invertido)
-  this.canoInferior = Bodies.rectangle(50, 50, PIPE_WIDTH, PIPE_HEIGHT, {
-      inertia: Infinity,
-      friction: 0,
-      label: "obstaculo",
-      collisionFilter: { category: this.categoriaObstaculo },
-      render: {
-        sprite: {
-          texture: pipeTextureBottom,
-          xScale: 1,
-          yScale: 1,
-        },
-      },
-    });
-
-    this.engine.gravity.scale = 0;
-
-    Composite.add(this.engine.world, [this.canoSuperior, this.canoInferior]);
-
-    Render.run(this.render);
-    Runner.run(this.runner, this.engine);
-
-    // cria população inicial
-    for (let i = 0; i < TAMANHO_POPULACAO; i++) {
-      this.criarIndividuo();
-    }
-
-    // Eventos do motor
-    Events.on(this.engine, "beforeUpdate", (evt) => this.loop(evt));
-    Events.on(this.engine, "collisionStart", (evt) => this.tratarColisao(evt));
-
-    // Conecta controle de escala de tempo (se existir no DOM)
-    const escalaEl = document.getElementById("escalaTempo") as HTMLInputElement | null;
-    if (escalaEl) {
-      escalaEl.onchange = (e) => {
-        e.preventDefault();
-        const value = parseInt(escalaEl.value || "0");
-        this.engine.timing.timeScale = 10 * value / 100;
-        console.log("FlappyGame: timeScale alterado ->", this.engine.timing.timeScale);
-      };
-    }
-
-    // posiciona os canos inicialmente
-    this.reiniciarCano();
-  }
-
-  // Inicia o loop (já ligado nos eventos do engine)
-  private start() {
-    console.log("FlappyGame: start runner e render");
-  }
-
-  // Para e limpa o jogo
-  public stop() {
-    console.log("FlappyGame: parando jogo e limpando recursos");
-    Events.off(this.engine, "beforeUpdate");
-    Events.off(this.engine, "collisionStart");
-    Engine.clear(this.engine);
-    Render.stop(this.render);
-    Runner.stop(this.runner);
-    try { this.render.canvas.remove(); } catch { /* canvas pode já ter sido removido */ }
-    // limpa texturas caso existam
-    // @ts-ignore - matter-js internal
-    this.render.textures = {};
-  }
-
-  // --- Loop principal do jogo chamado antes de cada atualização ---
-  private loop(evento: Matter.IEventTimestamped<Matter.Engine>) {
-    // Aplica força gravitacional simples a cada indivíduo
-    this.populacao.forEach((individuo) => {
-      Body.applyForce(individuo.corpo, individuo.corpo.position, {
-        x: 0,
-        y: individuo.corpo.mass * 0.001 * ESCALA,
-      });
-    });
-
-    // Move canos
-    Body.setVelocity(this.canoInferior, { x: -2 * ESCALA, y: 0 });
-    Body.setVelocity(this.canoSuperior, { x: -2 * ESCALA, y: 0 });
-
-    // Quando passar do limite, reposiciona e conta ponto
-    if (this.canoInferior.position.x < PIPE_WIDTH) {
-      this.reiniciarCano();
-      this.pontos++;
-      this.setTextById("pontos", String(this.pontos));
-      console.log("FlappyGame: cano passou -> pontos", this.pontos);
-    }
-
-    // Remove indivíduos fora do Y visível
-    this.populacao.filter(i => i.estaVivo).forEach(i => {
-      if (i.corpo.position.y > ALTURA_CANVAS || i.corpo.position.y < 0) {
-        this.removerIndividuo(i);
-      }
-    });
-
-    // Atualiza tempo de sobrevivência para aptidão
-    this.populacao
-      .filter(i => i.estaVivo)
-      .forEach(i => i.tempo = evento.timestamp);
-
-    // Decisão de pulo para cada indivíduo
-    this.populacao.forEach((individuo) => {
-      const devePular = this.individuoDevePular(individuo);
-      if (devePular) this.pular(individuo.corpo);
-    });
-
-    // Se todos morreram, evolui população
-    const todosMortos = this.populacao.every(i => !i.estaVivo);
-    if (todosMortos) {
-      console.log("FlappyGame: todos mortos - gerando nova população (ciclo)");
-      this.pontos = 0;
-      this.setTextById("pontos", String(this.pontos));
-      this.ciclos++;
-      this.reiniciarCano();
-
-      // Remove qualquer corpo remanescente dos vivos
-      this.populacao.filter(i => i.estaVivo).forEach(i => this.removerIndividuo(i));
-
-      this.populacao = this.novaPopulacao();
-    }
-  }
-
-  // --- Colisão: marca indivíduo como morto ---
-  private tratarColisao(evento: Matter.IEventCollision<Matter.Engine>) {
-    evento.pairs.forEach((par) => {
-      const corpo = par.bodyB;
-      const individuo = this.populacao.find((ind) => ind.corpo === corpo);
-      if (individuo) {
-        console.log("FlappyGame: colisão detectada - removendo individuo");
-        this.removerIndividuo(individuo);
-      }
-    });
-  }
-
-  // --- Geração de nova população por seleção/crossover ---
-  private novaPopulacao(): Individuo[] {
-    const ordenados = this.populacao.toSorted((a, b) => this.obterFitness(b) - this.obterFitness(a));
-    const maisAptos = Math.floor(TAMANHO_POPULACAO * 0.1);
-    const nova: Individuo[] = [];
-
-    // Mantém os melhores (copia os bits)
-    for (let i = 0; i < maisAptos; i++) {
-      nova.push(this.criarIndividuo([...ordenados[i].genes]));
-    }
-
-    // Preenche o resto com cruzamentos
-    for (let i = 0; i < TAMANHO_POPULACAO - maisAptos; i++) {
-      const r1 = Math.floor(this.obterAleatorio(0, Math.floor(TAMANHO_POPULACAO * 0.5)));
-      const r2 = Math.floor(this.obterAleatorio(0, Math.floor(TAMANHO_POPULACAO * 0.5)));
-      const ind1 = ordenados[r1];
-      const ind2 = ordenados[r2];
-      const genes = this.cruzar(ind1, ind2);
-      nova.push(this.criarIndividuo(genes));
-    }
-
-    console.log("FlappyGame: nova população gerada");
-    return nova;
-  }
-
-  private cruzar(ind1: Individuo, ind2: Individuo): boolean[] {
-    const novosGenes: boolean[] = [];
-    for (let i = 0; i < TOTAL_BITS; i++) {
-      const p = Math.random();
-      if (p < 0.45) novosGenes.push(ind1.genes[i]);
-      else if (p < 0.9) novosGenes.push(ind2.genes[i]);
-      else novosGenes.push(Math.random() < 0.5); // mutação aleatória
-    }
-      return novosGenes;
-  }
-
-  // Reposiciona os canos com altura aleatória
-  private reiniciarCano() {
-    const alturaAleatoria = this.obterAleatorio(25 + INTERVALO_CANO/2, ALTURA_CANVAS - (25 + INTERVALO_CANO/2));
-    Body.setPosition(this.canoSuperior, { y: alturaAleatoria - PIPE_HEIGHT/2 - INTERVALO_CANO/2, x: LARGURA_CANVAS + (PIPE_WIDTH/2) });
-    Body.setPosition(this.canoInferior, { y: alturaAleatoria + PIPE_HEIGHT/2 + INTERVALO_CANO/2, x: LARGURA_CANVAS + (PIPE_WIDTH/2) });
-    Body.setVelocity(this.canoSuperior, { x: 0, y: 0 });
-    Body.setVelocity(this.canoInferior, { x: 0, y: 0 });
-    console.log("FlappyGame: canos reiniciados, altura", alturaAleatoria);
-  }
-
-  private pular(corpo: Matter.Body) {
-    Body.setVelocity(corpo, { x: corpo.velocity.x, y: -4 * ESCALA });
-  }
-
-  private obterAleatorio(min: number, max: number) {
-    return Math.random() * (max - min) + min;
-  }
-
-  // Decisão do agente usando um perceptron simples
-  private individuoDevePular(individuo: Individuo) {
-    const distanciaCano = this.canoInferior.position.x;
-    const canoY = this.canoInferior.position.y + 300;
-    const velocidadePassaro = individuo.corpo.velocity.y;
-    const passaroY = individuo.corpo.position.y;
-
-    // escreve dados na UI apenas para o primeiro indivíduo (para inspeção)
-    if (this.populacao.findIndex(indi => indi === individuo) === 0) {
-      this.setTextById("distanciaCano", String(distanciaCano));
-      this.setTextById("canoY", String(canoY));
-      this.setTextById("velocidadePassaro", String(velocidadePassaro));
-      this.setTextById("passaroY", String(passaroY));
-      this.setTextById("tempo", String(individuo.tempo));
-    }
-
-    // Extrai 4 números dos 88 bits
-    const pesos: number[] = [];
-    for (let i = 0; i < NUM_GENES; i++) {
-      const bits = individuo.genes.slice(i * GENE_BITS, (i + 1) * GENE_BITS);
-      pesos.push(bitsParaNumero(bits));
-    }
-    return this.calcularPulo({ distanciaCano, canoY, velocidadePassaro, passaroY, pesos });
-  }
-
-  private calcularPulo({ distanciaCano, canoY, velocidadePassaro, passaroY, pesos }: EntradaRede) {
-    const entradas = [distanciaCano, canoY, velocidadePassaro, passaroY];
-    const soma = entradas.reduce((acc, entrada, index) => acc + entrada * pesos[index], 0);
-    return soma >= 0;
-  }
-
-  private criarIndividuo(genes1?: boolean[]): Individuo {
-    // Usa sprite do pássaro
-  const corpo = Bodies.rectangle(50, 50, BIRD_WIDTH, BIRD_HEIGHT, {
-      inertia: Infinity,
-      collisionFilter: { category: this.categoriaJogador, group: -1 },
-      label: "individuo",
-      render: {
-        sprite: {
-          texture: birdTexture,
-          xScale: 1,
-          yScale: 1,
-        },
-      },
-    });
-
-    Composite.add(this.engine.world, [corpo]);
-
-    let genes: boolean[];
-    if (genes1) {
-      genes = [...genes1];
-    } else {
-      // Gera 88 bits aleatórios
-      genes = Array.from({ length: TOTAL_BITS }, () => Math.random() < 0.5);
-    }
-
-    const individuo: Individuo = { corpo, genes, tempo: 0, estaVivo: true };
-    this.populacao.push(individuo);
-    return individuo;
-  }
-
-  private obterFitness(individuo: Individuo) {
-    return individuo.tempo - TEMPO_TREINAMENTO;
-  }
-
-  private removerIndividuo(individuo: Individuo) {
-    individuo.estaVivo = false;
-    Composite.remove(this.engine.world, [individuo.corpo]);
-  }
-
-  // Helper para atualizar texto em labels se existirem
-  private setTextById(id: string, text: string) {
-    const el = document.getElementById(id);
-    if (el) el.innerText = text;
-  }
-}
-
-/**
- * Função de conveniência usada pelo componente React: cria FlappyGame e retorna
- * uma função de limpeza para parar/limpar quando o componente desmonta.
- */
-export function iniciar(containerRef: RefObject<HTMLDivElement | null>) {
-  const jogo = new FlappyGame(containerRef);
-  return () => jogo.stop();
-}
-
diff --git a/app/games/flappy-bird-js/logicas/fisica.ts b/app/games/flappy-bird-js/logicas/fisica.ts
new file mode 100644
index 0000000..23590ae
--- /dev/null
+++ b/app/games/flappy-bird-js/logicas/fisica.ts
@@ -0,0 +1,25 @@
+import Matter from "matter-js";
+
+// Módulo de física traduzido: cria engine, render e runner do Matter.js
+// Exporta função que inicia o render/runner e retorna os objetos criados
+
+const { Engine, Render, Runner } = Matter;
+
+export function criarMotorERender(element: HTMLElement | null, largura: number, altura: number) {
+  if (!element) throw new Error("criarMotorERender: element é nulo");
+  const engine = Engine.create();
+  const render = Render.create({
+    element,
+    engine,
+    options: {
+      width: largura,
+      height: altura,
+      wireframes: false,
+    },
+  });
+  const runner = Runner.create();
+  // inicia render e runner
+  Render.run(render);
+  Runner.run(runner, engine);
+  return { engine, render, runner };
+}
diff --git a/app/games/flappy-bird-js/logicas/ia.ts b/app/games/flappy-bird-js/logicas/ia.ts
new file mode 100644
index 0000000..eb99158
--- /dev/null
+++ b/app/games/flappy-bird-js/logicas/ia.ts
@@ -0,0 +1,80 @@
+// Lógica da IA: genes como bits e perceptron
+// Arquivo traduzido para PT-BR com comentários explicativos
+
+export type Genes = boolean[];
+
+export interface EntradaRede {
+  distanciaCano: number;
+  canoY: number;
+  velocidadePassaro: number;
+  passaroY: number;
+  pesos: number[];
+}
+
+export const GENE_BITS = 22;
+export const NUM_GENES = 4;
+export const TOTAL_BITS = GENE_BITS * NUM_GENES;
+
+// Converte 22 bits (boolean[]) para número no intervalo [-1, 1]
+export function bitsParaNumero(bits: boolean[]): number {
+  if (bits.length !== GENE_BITS) throw new Error("bitsParaNumero: tamanho incorreto");
+  let val = 0;
+  for (let i = 0; i < GENE_BITS; i++) {
+    if (bits[i]) val |= (1 << (GENE_BITS - 1 - i));
+  }
+  const norm = val / ((1 << GENE_BITS) - 1);
+  return norm * 2 - 1;
+}
+
+// Converte número no intervalo [-1, 1] para 22 bits (boolean[])
+export function numeroParaBits(num: number): boolean[] {
+  const clamped = Math.max(-1, Math.min(1, num));
+  const norm = (clamped + 1) / 2;
+  const val = Math.round(norm * ((1 << GENE_BITS) - 1));
+  const bits: boolean[] = [];
+  for (let i = GENE_BITS - 1; i >= 0; i--) {
+    bits.push(Boolean((val >> i) & 1));
+  }
+  return bits;
+}
+
+// Gera genes aleatórios (TOTAL_BITS bits)
+export function criarGenesAleatorios(): Genes {
+  return Array.from({ length: TOTAL_BITS }, () => Math.random() < 0.5);
+}
+
+// Cruzamento/mutação bit a bit entre dois genes
+export function cruzarGenes(g1: Genes, g2: Genes): Genes {
+  const out: Genes = [];
+  for (let i = 0; i < TOTAL_BITS; i++) {
+    const p = Math.random();
+    if (p < 0.45) out.push(g1[i]);
+    else if (p < 0.9) out.push(g2[i]);
+    else out.push(Math.random() < 0.5); // mutação
+  }
+  return out;
+}
+
+// Extrai os 4 pesos (números) a partir dos 88 bits
+export function extrairPesos(genes: Genes): number[] {
+  const pesos: number[] = [];
+  for (let i = 0; i < NUM_GENES; i++) {
+    const bits = genes.slice(i * GENE_BITS, (i + 1) * GENE_BITS);
+    pesos.push(bitsParaNumero(bits));
+  }
+  return pesos;
+}
+
+// Calcula a decisão do perceptron a partir das entradas e dos genes
+// Retorna true para pular, false caso contrário
+export function calcularPuloPorGenes(distanciaCano: number, canoY: number, velocidadePassaro: number, passaroY: number, genes: Genes) {
+  const pesos = extrairPesos(genes);
+  const entradas = [distanciaCano, canoY, velocidadePassaro, passaroY];
+  const soma = entradas.reduce((acc, entrada, idx) => acc + entrada * pesos[idx], 0);
+  return soma >= 0;
+}
+
+// Cria uma população de genes (array de Genes)
+export function criarPopulacaoGenes(tamanho: number): Genes[] {
+  return Array.from({ length: tamanho }, () => criarGenesAleatorios());
+}
diff --git a/app/games/flappy-bird-js/logicas/jogo.ts b/app/games/flappy-bird-js/logicas/jogo.ts
new file mode 100644
index 0000000..f439eda
--- /dev/null
+++ b/app/games/flappy-bird-js/logicas/jogo.ts
@@ -0,0 +1,509 @@
+import Matter from "matter-js";
+import type { RefObject } from "react";
+
+import birdTexture from "../assets/bird.png"
+import blueBirdTexture from "../assets/blue-bird.png"
+import backgroundTexture from "../assets/background-day.png"
+import pipeTextureTop from "../assets/pipe-green-top.png"
+import pipeTextureBottom from "../assets/pipe-green-bottom.png"
+import { criarMotorERender } from "./fisica";
+import type { Genes } from "./ia";
+import { cruzarGenes, calcularPuloPorGenes, extrairPesos, TOTAL_BITS } from "./ia";
+
+const {
+  Bodies,
+  Body,
+  Composite,
+  Engine,
+  Events,
+  Render,
+  Runner,
+} = Matter;
+
+// --- Tipos ---
+interface Individuo {
+  corpo: Matter.Body;
+  genes: Genes; // 88 bits
+  tempo: number;
+  estaVivo: boolean;
+}
+
+// --- Constantes de configuração ---
+const TEMPO_TREINAMENTO = 30 * 1000;
+const TAMANHO_POPULACAO = 100;
+const ESCALA = 1;
+const LARGURA_CANVAS = 500;
+const ALTURA_CANVAS = 320 + 125;
+
+// Dimensões dos sprites/corpos
+const PIPE_WIDTH = 50;
+const PIPE_HEIGHT = 320;
+const BIRD_WIDTH = 52;
+const BIRD_HEIGHT = 24;
+const INTERVALO_CANO = 100;
+
+/**
+ * Classe que encapsula toda a lógica do jogo Flappy Bird.
+ * Traduzida para PT-BR com comentários e nomes em português.
+ */
+class JogoFlappy {
+  private containerRef: RefObject<HTMLDivElement | null>;
+  private engine: Matter.Engine;
+  private render: Matter.Render;
+  private runner: Matter.Runner;
+  private categoriaJogador = 0x0001;
+  private categoriaObstaculo = 0x0002;
+  private canoSuperior!: Matter.Body;
+  private canoInferior!: Matter.Body;
+  private canoAlturaCentro: number = 0;
+  private populacao: Individuo[] = [];
+  private ciclos = 0;
+  private pontos = 0;
+  // Indivíduo observado pela UI (mostrado com textura diferente)
+  private observadoIndividuo: Individuo | null = null;
+  // listeners para notificações de pesos do indivíduo observado
+  private observedPesosListeners: Set<(pesos: number[] | null) => void> = new Set();
+  // Timestamp de início da geração (usado para calcular tempo de vida relativo)
+  private geracaoInicioTimestamp = 0;
+
+  constructor(containerRef: RefObject<HTMLDivElement | null>) {
+    this.containerRef = containerRef;
+
+    if (!containerRef?.current) {
+      throw new Error("containerRef é nulo. Forneça uma div montada.");
+    }
+
+    // Cria motor, render e runner via módulo de física (inicia render/runner)
+    const ctx = criarMotorERender(containerRef.current, LARGURA_CANVAS, ALTURA_CANVAS);
+    this.engine = ctx.engine;
+    this.render = ctx.render;
+    this.runner = ctx.runner;
+    // aplica fundo (createEngineAndRender setou wireframes:false mas não background)
+    if (this.render && (this.render.options as any)) (this.render.options as any).background = backgroundTexture;
+
+    // Inicializa o mundo e os objetos
+    this.initWorld();
+    this.start();
+
+    console.log("JogoFlappy: iniciado");
+  }
+
+  // Inicializa canos, gravidade e adiciona ao mundo
+  private initWorld() {
+    // Cano superior (pipe)
+    this.canoSuperior = Bodies.rectangle(50, 50, PIPE_WIDTH, PIPE_HEIGHT, {
+      inertia: Infinity,
+      friction: 0,
+      collisionFilter: { category: this.categoriaObstaculo },
+      label: "obstaculo",
+      render: {
+        sprite: {
+          texture: pipeTextureTop,
+          xScale: 1,
+          yScale: 1,
+        },
+      },
+    });
+
+    // Cano inferior (pipe, invertido)
+    this.canoInferior = Bodies.rectangle(50, 50, PIPE_WIDTH, PIPE_HEIGHT, {
+      inertia: Infinity,
+      friction: 0,
+      label: "obstaculo",
+      collisionFilter: { category: this.categoriaObstaculo },
+      render: {
+        sprite: {
+          texture: pipeTextureBottom,
+          xScale: 1,
+          yScale: 1,
+        },
+      },
+    });
+
+    this.engine.gravity.scale = 0;
+
+    Composite.add(this.engine.world, [this.canoSuperior, this.canoInferior]);
+
+    // cria população inicial
+    for (let i = 0; i < TAMANHO_POPULACAO; i++) {
+      this.criarIndividuo();
+    }
+
+    // seleciona um indivíduo observado para a UI
+    this.selecionarProximoObservado();
+
+    // Eventos do motor
+    Events.on(this.engine, "beforeUpdate", (evt) => this.loop(evt));
+    Events.on(this.engine, "collisionStart", (evt) => this.tratarColisao(evt));
+
+    // Controle de teclado para ajuste de timeScale (não exposto na UI)
+    window.addEventListener("keydown", this.handleTimeScaleKey);
+
+    // posiciona os canos inicialmente
+    this.reiniciarCano();
+
+    // inicializa UI com pontos 0
+    this.setTextById("pontos", "0");
+    // inicializa UI com geração atual
+    this.setTextById("geracao", String(this.ciclos));
+  }
+
+  // Inicia o loop (já ligado nos eventos do engine)
+  private start() {
+    console.log("JogoFlappy: start runner e render");
+  }
+
+  // Para e limpa o jogo
+  public stop() {
+    console.log("JogoFlappy: parando jogo e limpando recursos");
+    Events.off(this.engine, "beforeUpdate");
+    Events.off(this.engine, "collisionStart");
+    window.removeEventListener("keydown", this.handleTimeScaleKey);
+    Engine.clear(this.engine);
+    Render.stop(this.render);
+    Runner.stop(this.runner);
+    try { this.render.canvas.remove(); } catch { /* canvas pode já ter sido removido */ }
+    // limpa texturas caso existam
+    // @ts-ignore - matter-js internal
+    this.render.textures = {};
+  }
+
+  // Key handler para ajuste de timeScale
+  private handleTimeScaleKey = (e: KeyboardEvent) => {
+    if (!e) return;
+    const key = e.key;
+    if (key === "+" || key === "=") {
+      this.adjustTimeScale(0.25);
+    } else if (key === "-") {
+      this.adjustTimeScale(-0.25);
+    } else if (key === "0") {
+      this.setTimeScale(1);
+    }
+  };
+
+  // API programática para set/get/adjust timeScale
+  public setTimeScale(value: number) {
+    const clamped = Number(value) || 1;
+    this.engine.timing.timeScale = clamped;
+    console.log("JogoFlappy: timeScale set ->", this.engine.timing.timeScale);
+  }
+
+  public getTimeScale() {
+    return this.engine.timing.timeScale;
+  }
+
+  // Reseta o contador de gerações para 1 e atualiza a UI
+  public resetGeracao() {
+    this.ciclos = 1;
+    this.setTextById("geracao", String(this.ciclos));
+  }
+
+  public adjustTimeScale(delta: number) {
+    const next = Math.max(0.01, (this.engine.timing.timeScale || 1) + delta);
+    this.setTimeScale(Number(next.toFixed(2)));
+  }
+
+  // --- Loop principal do jogo chamado antes de cada atualização ---
+  private loop(evento: Matter.IEventTimestamped<Matter.Engine>) {
+    // Aplica força gravitacional simples a cada indivíduo
+    this.populacao.forEach((individuo) => {
+      Body.applyForce(individuo.corpo, individuo.corpo.position, {
+        x: 0,
+        y: individuo.corpo.mass * 0.001 * ESCALA,
+      });
+    });
+
+    // Move canos (apenas velocidade X)
+    Body.setVelocity(this.canoInferior, { x: -2 * ESCALA, y: 0 });
+    Body.setVelocity(this.canoSuperior, { x: -2 * ESCALA, y: 0 });
+
+    // Força os canos a manterem sua posição vertical (lock Y) enquanto permitem X
+    try {
+      const targetSuperiorY = this.canoAlturaCentro - PIPE_HEIGHT / 2 - INTERVALO_CANO / 2;
+      const targetInferiorY = this.canoAlturaCentro + PIPE_HEIGHT / 2 + INTERVALO_CANO / 2;
+      Body.setPosition(this.canoSuperior, { x: this.canoSuperior.position.x, y: targetSuperiorY });
+      Body.setPosition(this.canoInferior, { x: this.canoInferior.position.x, y: targetInferiorY });
+      // Garante velocidade Y zero para evitar jitter
+      Body.setVelocity(this.canoSuperior, { x: this.canoSuperior.velocity.x, y: 0 });
+      Body.setVelocity(this.canoInferior, { x: this.canoInferior.velocity.x, y: 0 });
+    } catch { }
+
+    // Quando passar do limite, reposiciona e conta ponto
+    if (this.canoInferior.position.x < PIPE_WIDTH) {
+      this.reiniciarCano();
+      this.pontos++;
+      this.setTextById("pontos", String(this.pontos));
+      console.log("JogoFlappy: cano passou -> pontos", this.pontos);
+    }
+
+    // Remove indivíduos fora do Y visível
+    this.populacao.filter(i => i.estaVivo).forEach(i => {
+      if (i.corpo.position.y > ALTURA_CANVAS || i.corpo.position.y < 0) {
+        this.removerIndividuo(i);
+      }
+    });
+
+    // Inicializa o timestamp de início da geração na primeira atualização
+    if (this.geracaoInicioTimestamp === 0) this.geracaoInicioTimestamp = evento.timestamp;
+
+    // Atualiza tempo de sobrevivência (relativo ao início da geração)
+    this.populacao
+      .filter(i => i.estaVivo)
+      .forEach(i => i.tempo = evento.timestamp - this.geracaoInicioTimestamp);
+
+    // Decisão de pulo para cada indivíduo
+    let observedInputs: number[] | null = null;
+    this.populacao.forEach((individuo) => {
+      // Entradas para o perceptron
+      const distanciaCano = this.canoInferior.position.x;
+      const canoY = this.canoInferior.position.y - (PIPE_HEIGHT / 2 + INTERVALO_CANO / 2);
+      const velocidadePassaro = individuo.corpo.velocity.y;
+      const passaroY = individuo.corpo.position.y;
+      const devePular = calcularPuloPorGenes(distanciaCano, canoY, velocidadePassaro, passaroY, individuo.genes);
+      if (devePular) this.pular(individuo.corpo);
+      // Se é o observado, armazena para UI
+      if (this.observadoIndividuo && individuo === this.observadoIndividuo) {
+        observedInputs = [distanciaCano, canoY, velocidadePassaro, passaroY];
+      }
+    });
+
+    // Atualiza labels da UI para o indivíduo observado a cada tick
+    if (this.observadoIndividuo && observedInputs) {
+      this.setTextById("distanciaCano", this.formatNumber(observedInputs[0]));
+      this.setTextById("canoY", this.formatNumber(observedInputs[1]));
+      this.setTextById("velocidadePassaro", this.formatNumber(observedInputs[2]));
+      this.setTextById("passaroY", this.formatNumber(observedInputs[3]));
+      this.setTextById("tempo", this.formatTime(this.observadoIndividuo.tempo));
+    }
+
+    // Garante que o indivíduo observado esteja sempre desenhado por último (na frente)
+    this.trazerObservadoFrente();
+
+    // Se todos morreram, evolui população
+    const todosMortos = this.populacao.every(i => !i.estaVivo);
+    if (todosMortos) {
+      console.log("JogoFlappy: todos mortos - gerando nova população (ciclo)");
+      this.pontos = 0;
+      this.setTextById("pontos", String(this.pontos));
+      this.setTextById("geracao", String(this.ciclos))
+      this.ciclos++;
+      this.reiniciarCano();
+
+      // Remove qualquer corpo remanescente dos vivos
+      this.populacao.filter(i => i.estaVivo).forEach(i => this.removerIndividuo(i));
+
+      this.populacao = this.novaPopulacao();
+      // seleciona novo observado quando nova população é gerada
+      this.selecionarProximoObservado();
+      // reseta o tempo de vida relativo para a nova geração
+      this.geracaoInicioTimestamp = evento.timestamp;
+    }
+  }
+
+  // --- Colisão: marca indivíduo como morto ---
+  private tratarColisao(evento: Matter.IEventCollision<Matter.Engine>) {
+    evento.pairs.forEach((par) => {
+      const corpo = par.bodyB;
+      const individuo = this.populacao.find((ind) => ind.corpo === corpo);
+      if (individuo) {
+        console.log("JogoFlappy: colisão detectada - removendo individuo");
+        this.removerIndividuo(individuo);
+      }
+    });
+  }
+
+  // --- Geração de nova população por seleção/crossover ---
+  private novaPopulacao(): Individuo[] {
+    const ordenados = this.populacao.toSorted((a, b) => this.obterFitness(b) - this.obterFitness(a));
+    const maisAptos = Math.floor(TAMANHO_POPULACAO * 0.1);
+    const nova: Individuo[] = [];
+
+    // Mantém os melhores (copia os bits)
+    for (let i = 0; i < maisAptos; i++) {
+      nova.push(this.criarIndividuo([...ordenados[i].genes]));
+    }
+
+    // Preenche o resto com cruzamentos
+    for (let i = 0; i < TAMANHO_POPULACAO - maisAptos; i++) {
+      const r1 = Math.floor(this.obterAleatorio(0, Math.floor(TAMANHO_POPULACAO * 0.5)));
+      const r2 = Math.floor(this.obterAleatorio(0, Math.floor(TAMANHO_POPULACAO * 0.5)));
+      const ind1 = ordenados[r1];
+      const ind2 = ordenados[r2];
+      const genes = cruzarGenes(ind1.genes, ind2.genes);
+      nova.push(this.criarIndividuo(genes));
+    }
+
+    console.log("JogoFlappy: nova população gerada");
+    return nova;
+  }
+
+  // Reposiciona os canos com altura aleatória
+  private reiniciarCano() {
+    const alturaAleatoria = this.obterAleatorio(25 + INTERVALO_CANO / 2, ALTURA_CANVAS - (25 + INTERVALO_CANO / 2));
+    this.canoAlturaCentro = alturaAleatoria;
+    Body.setPosition(this.canoSuperior, { y: alturaAleatoria - PIPE_HEIGHT / 2 - INTERVALO_CANO / 2, x: LARGURA_CANVAS + (PIPE_WIDTH / 2) });
+    Body.setPosition(this.canoInferior, { y: alturaAleatoria + PIPE_HEIGHT / 2 + INTERVALO_CANO / 2, x: LARGURA_CANVAS + (PIPE_WIDTH / 2) });
+    Body.setVelocity(this.canoSuperior, { x: 0, y: 0 });
+    Body.setVelocity(this.canoInferior, { x: 0, y: 0 });
+    console.log("JogoFlappy: canos reiniciados, altura", alturaAleatoria);
+  }
+
+  private pular(corpo: Matter.Body) {
+    Body.setVelocity(corpo, { x: corpo.velocity.x, y: -4 * ESCALA });
+  }
+
+  private obterAleatorio(min: number, max: number) {
+    return Math.random() * (max - min) + min;
+  }
+
+  private criarIndividuo(genes1?: boolean[]): Individuo {
+    // Usa sprite do pássaro
+    const corpo = Bodies.rectangle(50, 50, BIRD_WIDTH, BIRD_HEIGHT, {
+      inertia: Infinity,
+      collisionFilter: { category: this.categoriaJogador, group: -1 },
+      label: "individuo",
+      render: {
+        sprite: {
+          texture: birdTexture,
+          xScale: 1,
+          yScale: 1,
+        },
+      },
+    });
+
+    Composite.add(this.engine.world, [corpo]);
+
+    let genes: boolean[];
+    if (genes1) {
+      genes = [...genes1];
+    } else {
+      // Gera 88 bits aleatórios
+      genes = Array.from({ length: TOTAL_BITS }, () => Math.random() < 0.5);
+    }
+
+    const individuo: Individuo = { corpo, genes, tempo: 0, estaVivo: true };
+    this.populacao.push(individuo);
+    return individuo;
+  }
+
+  private obterFitness(individuo: Individuo) {
+    return individuo.tempo - TEMPO_TREINAMENTO;
+  }
+
+  private removerIndividuo(individuo: Individuo) {
+    individuo.estaVivo = false;
+    Composite.remove(this.engine.world, [individuo.corpo]);
+    // Se o indivíduo removido era o observado, seleciona outro vivo
+    if (this.observadoIndividuo === individuo) {
+      console.log("JogoFlappy: indivíduo observado morreu, selecionando próximo");
+      this.selecionarProximoObservado();
+    }
+  }
+
+  // Seleciona um indivíduo vivo para ser observado pela UI.
+  // Atualiza a textura do antigo observado (volta à textura normal) e
+  // aplica a textura `blueBirdTexture` ao novo observado.
+  private selecionarProximoObservado() {
+    // limpa textura do observado anterior, se existir
+    if (this.observadoIndividuo) {
+      try {
+        (this.observadoIndividuo.corpo.render as any).sprite.texture = birdTexture;
+      } catch { /* ignore */ }
+    }
+
+    const proximo = this.populacao.find(i => i.estaVivo) || null;
+    this.observadoIndividuo = proximo;
+    if (this.observadoIndividuo) {
+      try {
+        (this.observadoIndividuo.corpo.render as any).sprite.texture = blueBirdTexture;
+      } catch { /* ignore */ }
+      console.log("JogoFlappy: agora observando indivíduo", this.populacao.indexOf(this.observadoIndividuo));
+    } else {
+      console.log("JogoFlappy: nenhum indivíduo vivo para observar");
+    }
+    // notifica listeners sobre os pesos atuais do observado
+    this.notifyObservedPesos();
+  }
+
+  // Notifica todos os listeners registrados com os pesos atuais (ou null)
+  private notifyObservedPesos() {
+    const pesos = this.getObservedPesos();
+    this.observedPesosListeners.forEach(cb => {
+      try { cb(pesos); } catch { /* ignore listener errors */ }
+    });
+  }
+
+  // Permite que UI se inscreva para receber atualizações de pesos do observado
+  public addObservedPesosListener(cb: (pesos: number[] | null) => void) {
+    this.observedPesosListeners.add(cb);
+    // envia o estado inicial imediatamente
+    try { cb(this.getObservedPesos()); } catch { }
+    return () => { this.observedPesosListeners.delete(cb); };
+  }
+
+  // Remove e readiciona o corpo do observado para que ele seja desenhado por último
+  // (desenhado acima dos demais) no canvas do Matter.Render.
+  private trazerObservadoFrente() {
+    if (!this.observadoIndividuo) return;
+    if (!this.observadoIndividuo.estaVivo) return;
+    try {
+      const world: any = this.engine.world;
+      const bodies: Matter.Body[] = world.bodies as Matter.Body[] || [];
+      if (bodies.length === 0) return;
+      const ultimo = bodies[bodies.length - 1];
+      if (ultimo === this.observadoIndividuo.corpo) return; // já está na frente
+      // remover e readicionar move o corpo para o final do array de bodies
+      Composite.remove(this.engine.world, this.observadoIndividuo.corpo);
+      Composite.add(this.engine.world, this.observadoIndividuo.corpo);
+    } catch (err) {
+      console.log("JogoFlappy: erro ao trazer observado para frente", err);
+    }
+  }
+
+  // Retorna os pesos (4 numbers) do indivíduo observado, ou null se não houver
+  public getObservedPesos(): number[] | null {
+    if (!this.observadoIndividuo) return null;
+    try {
+      return extrairPesos(this.observadoIndividuo.genes);
+    } catch {
+      return null;
+    }
+  }
+
+  // Helper para atualizar texto em labels se existirem
+  private setTextById(id: string, text: string) {
+    const el = document.getElementById(id);
+    if (el) el.innerText = text;
+  }
+
+  // Formata número com 2 casas decimais
+  private formatNumber(n: number) {
+    if (!isFinite(n)) return "0.00";
+    return Number(n).toFixed(2);
+  }
+
+  // Formata tempo em milissegundos para mm:ss
+  private formatTime(ms: number) {
+    const totalSeconds = Math.max(0, Math.floor(ms / 1000));
+    const minutes = Math.floor(totalSeconds / 60);
+    const seconds = totalSeconds % 60;
+    const mm = String(minutes).padStart(2, "0");
+    const ss = String(seconds).padStart(2, "0");
+    return `${mm}:${ss}`;
+  }
+}
+
+/**
+ * Função de conveniência usada pelo componente React: cria JogoFlappy e retorna
+ * uma função de limpeza para parar/limpar quando o componente desmonta.
+ */
+export function iniciar(containerRef: RefObject<HTMLDivElement | null>) {
+  const jogo = new JogoFlappy(containerRef);
+  return {
+    stop: () => jogo.stop(),
+    resetGeracao: () => jogo.resetGeracao(),
+  };
+}
+
+// exporta tipo do controlador para consumidores
+export type ControladorFlappy = ReturnType<typeof iniciar>;
diff --git a/app/games/flappy-bird-js/readme.md b/app/games/flappy-bird-js/readme.md
new file mode 100644
index 0000000..5be698f
--- /dev/null
+++ b/app/games/flappy-bird-js/readme.md
@@ -0,0 +1,143 @@
+# Flappy Bird — algoritmo genético + perceptron
+
+Este documento descreve, de forma didática, a parte central do agente que joga Flappy Bird neste repositório: o perceptron de uma camada (que decide quando pular) e o algoritmo genético (que evolui os pesos representados por genes). A implementação está em TypeScript e usa Matter.js para a física.
+
+Repositório: [includeDaniel/PlayAI](https://github.com/includedaniel/PlayAI)
+
+Arquivos principais (caminhos no repositório):
+
+- [Lógica do perceptron / genes](https://github.com/includedaniel/PlayAI/tree/main/app/games/flappy-bird-js/logics/ia.ts)
+- [Lógica do jogo (orquestração, população)](https://github.com/includedaniel/PlayAI/tree/main/app/games/flappy-bird-js/logics/jogo.ts)
+- [Física (Matter.js helper)](https://github.com/includedaniel/PlayAI/tree/main/app/games/flappy-bird-js/logics/fisica.ts)
+- [Componente React que monta o canvas e labels](https://github.com/includedaniel/PlayAI/tree/main/app/games/flappy-bird-js/components/Flappy.tsx)
+- [Página que integra o jogo](https://github.com/includedaniel/PlayAI/tree/main/app/games/flappy-bird-js/components/Page.tsx)
+
+---
+
+## Resumo abstrato do fluxo
+
+1. O mundo é simulado pelo Matter.js (canos e pássaros são corpos físicos).
+2. Cada agente (indivíduo) possui um vetor de genes (bits). Esses bits são convertidos em 4 pesos numéricos.
+3. Em cada tick, para cada indivíduo, o perceptron calcula a soma ponderada das entradas ambientais e decide se o pássaro deve pular.
+4. Indivíduos ganham tempo de sobrevivência enquanto vivem; quando todos morrem, o algoritmo genético cria a próxima geração por seleção e cruzamento.
+
+---
+
+## Detalhes: representação de genes e pesos
+
+Cada indivíduo tem um vetor de bits chamado `Genes` (no código `Genes = boolean[]`).
+
+- São 4 grupos de 22 bits cada (total = 88 bits). Cada grupo representa um peso do perceptron.
+- A conversão bits → número é feita por uma função que interpreta os 22 bits como um inteiro não assinado, normaliza para [0,1] e mapeia para [-1,1].
+
+Trecho (implementação principal, veja o arquivo [logicas/ia.ts](https://github.com/includedaniel/PlayAI/tree/main/app/games/flappy-bird-js/logicas/ia.ts)):
+
+```ts
+// converte 22 bits para número no intervalo [-1, 1]
+function bitsParaNumero(bits: boolean[]): number {
+	// (implementação: soma de bit shifts, normalização e map para [-1,1])
+}
+
+// extrai os 4 pesos a partir dos 88 bits
+function extrairPesos(genes: boolean[]): number[] {
+	const pesos = [];
+	for (let i = 0; i < 4; i++) {
+		const slice = genes.slice(i * 22, (i + 1) * 22);
+		pesos.push(bitsParaNumero(slice));
+	}
+	return pesos;
+}
+```
+
+Observação: usar bits permite representar com granularidade controle direto da codificação genética e realizar cruzamentos bit-a-bit facilmente.
+
+---
+
+## Perceptron (decisão de pulo)
+
+O perceptron é uma única camada linear sem função de ativação complexa — a saída é apenas a soma ponderada das entradas comparada a zero.
+
+Entradas usadas no perceptron (ordem usada no código):
+
+1. Distância horizontal até o cano (x)
+2. Y da abertura entre os canos (y)
+3. Velocidade vertical do pássaro (vy)
+4. Y do pássaro (y)
+
+Decisão (pseudocódigo):
+
+```ts
+const pesos = extrairPesos(genes); // [w0, w1, w2, w3]
+const entradas = [distancia, canoY, velocidade, passaroY];
+const soma = entradas.reduce((acc, v, i) => acc + v * pesos[i], 0);
+const devePular = soma >= 0; // true => aplica impulso de pulo
+```
+
+Veja a função real: [logicas/ia.ts](https://github.com/includedaniel/PlayAI/tree/main/app/games/flappy-bird-js/logicas/ia.ts)
+
+Dica prática: a normalização das entradas (escala e offset) afeta muito o comportamento do perceptron — verifique como as entradas são calculadas em [logicas/jogo.ts](https://github.com/includedaniel/PlayAI/tree/main/app/games/flappy-bird-js/logicas/jogo.ts) para entender a escala usada no experimento.
+
+---
+
+## Algoritmo Genético (fluxo e implementação)
+
+Visão geral do ciclo de vida genético:
+
+1. Inicializa uma população de N indivíduos com genes aleatórios (`criarGenesAleatorios`).
+2. Executa a simulação por um tempo (indivíduos acumulam `tempo` de sobrevivência).
+3. Quando todos morrem (ou chega o fim do ciclo), calcula-se fitness (aqui usado o tempo de sobrevivência como critério).
+4. Gera nova população mantendo os mais aptos (elitismo) e preenchendo o restante com filhos gerados por cruzamento bit-a-bit.
+
+Pontos-chave do código:
+
+- Função que cria população aleatória: `criarGenesAleatorios()` — gera 88 bits aleatórios.
+- Cruzamento: `cruzarGenes(g1, g2)` — para cada bit há probabilidade de herdar de pai A, pai B ou sofrer mutação.
+- Seleção: os indivíduos são ordenados por fitness; os top K são mantidos (elitismo) e os demais são gerados por cruzamento entre os melhores.
+
+Trecho ilustrativo de cruzamento (pseudocódigo):
+
+```ts
+function cruzarGenes(g1: Genes, g2: Genes): Genes {
+	const filho = [];
+	for (let i = 0; i < 88; i++) {
+		const p = Math.random();
+		if (p < 0.45) filho.push(g1[i]);
+		else if (p < 0.9) filho.push(g2[i]);
+		else filho.push(Math.random() < 0.5); // mutação
+	}
+	return filho;
+}
+```
+
+Implementação completa e parâmetros: [logicas/ia.ts](https://github.com/includedaniel/PlayAI/tree/main/app/games/flappy-bird-js/logicas/ia.ts)
+
+Como a aptidão é medida (fitness):
+
+```ts
+function obterFitness(individuo) {
+	// Exemplo do projeto — usa tempo de sobrevivência
+	return individuo.tempo - TEMPO_TREINAMENTO;
+}
+```
+
+O `TEMPO_TREINAMENTO` aparece no código de orquestração (`jogo.ts`) e é usado para calibrar a função de fitness.
+
+---
+
+## Dicas para experimentação e tuning
+
+- Tamanho da população (`TAMANHO_POPULACAO`): maior população explora mais, mas custa performance.
+- Taxa de mutação: aumente se a população estagnar, diminua se houver muita aleatoriedade.
+- Normalização das entradas: centralizar e normalizar entradas (por exemplo, dividir distância por largura do canvas) melhora estabilidade do perceptron.
+- Elitismo: manter uma pequena porcentagem dos melhores preserva soluções já boas.
+
+Parâmetros estão em: [logicas/jogo.ts](https://github.com/includedaniel/PlayAI/tree/main/app/games/flappy-bird-js/logicas/jogo.ts)
+
+---
+
+## Onde olhar no código (rápido mapa)
+
+- [logicas/ia.ts](https://github.com/includedaniel/PlayAI/tree/main/app/games/flappy-bird-js/logicas/ia.ts) — conversão bits↔número, criar genes, cruzamento, extrair pesos e decisão do perceptron.
+- [logicas/jogo.ts](https://github.com/includedaniel/PlayAI/tree/main/app/games/flappy-bird-js/logicas/jogo.ts) — mecânica do jogo (criação de corpos, loop, reinício de canos, população, seleção, fitness).
+- [logicas/fisica.ts](https://github.com/includedaniel/PlayAI/tree/main/app/games/flappy-bird-js/logicas/fisica.ts) — helper que inicializa Matter.js (engine, render, runner).
+- [componentes/Flappy.tsx](https://github.com/includedaniel/PlayAI/tree/main/app/games/flappy-bird-js/components/Flappy.tsx) e [componentes/Page.tsx](https://github.com/includedaniel/PlayAI/tree/main/app/games/flappy-bird-js/components/Page.tsx) — integração React/DOM, labels e botão de reiniciar.
diff --git a/app/routes.ts b/app/routes.ts
index 22f8f56..fae066e 100644
--- a/app/routes.ts
+++ b/app/routes.ts
@@ -1,3 +1,3 @@
 import { type RouteConfig, index, route } from "@react-router/dev/routes";
 
-export default [index("routes/Home.tsx"), route("/games/flappy-bird-js", "games/flappy-bird-js/Page.tsx")] satisfies RouteConfig;
+export default [index("routes/Home.tsx"), route("/games/flappy-bird-js", "games/flappy-bird-js/componentes/Page.tsx")] satisfies RouteConfig;