Platformer Game

Menu principale che mostra il titolo Code Warrior con il pulsante Avvia gioco

Gioco platform avviato con il personaggio del giocatore sulle piattaforme

Personaggio del giocatore vicino a un checkpoint intermedio giallo

Schermata di vittoria che mostra un messaggio di congratulazioni per aver raggiunto il checkpoint finale

Il Progetto

Platformer game sviluppato con programmazione orientata agli oggetti intermedia in JavaScript. Un'applicazione che dimostra animazioni fluide, physics engine, collision detection e gestione avanzata dello stato per creare un gioco platform completo.

Codice Sorgente

index.html
styles.css
script.js

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Learn Intermediate OOP by Building a Platformer Game</title>
  </head>
  <body>
    <div class="start-screen">
      <h1 class="main-title">freeCodeCamp Code Warrior</h1>
      <p class="instructions">
        Help the main player navigate to the yellow checkpoints.
      </p>
      <p class="instructions">
        Use the keyboard arrows to move the player around.
      </p>
      <p class="instructions">You can also use the spacebar to jump.</p>
      <div class="btn-container">
        <button class="btn" id="start-btn">Start Game</button>
      </div>
    </div>
    <div class="checkpoint-screen">
      <h2>Congrats!</h2>
      <p>You reached the last checkpoint.</p>
    </div>
    <canvas id="canvas"></canvas>
    <script src="./script.js"></script>
  </body>
</html>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --main-bg-color: #0a0a23;
  --section-bg-color: #ffffff;
  --golden-yellow: #feac32;
}

body {
  background-color: var(--main-bg-color);
}

.start-screen {
  background-color: var(--section-bg-color);
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  border-radius: 30px;
  padding: 20px;
  padding-bottom: 5px;
}

.main-title {
  text-align: center;
}

.instructions {
  text-align: center;
  font-size: 1.2rem;
  margin: 15px;
  line-height: 2rem;
}

.btn {
  cursor: pointer;
  width: 100px;
  margin: 10px;
  color: #0a0a23;
  font-size: 18px;
  background-color: var(--golden-yellow);
  background-image: linear-gradient(#fecc4c, #ffac33);
  border-color: var(--golden-yellow);
  border-width: 3px;
}

.btn:hover {
  background-image: linear-gradient(#ffcc4c, #f89808);
}

.btn-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.checkpoint-screen {
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  text-align: center;
  background-color: var(--section-bg-color);
  border-radius: 20px;
  padding: 10px;
  display: none;
}

#canvas {
  display: none;
}

@media (min-width: 768px) {
  .start-screen {
    width: 60%;
    max-width: 700px;
  }

  .checkpoint-screen {
    max-width: 300px;
  }
}

const startBtn = document.getElementById("start-btn");
const canvas = document.getElementById("canvas");
const startScreen = document.querySelector(".start-screen");
const checkpointScreen = document.querySelector(".checkpoint-screen");
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
const ctx = canvas.getContext("2d");
canvas.width = innerWidth;
canvas.height = innerHeight;
const gravity = 0.5;
let isCheckpointCollisionDetectionActive = true;

const proportionalSize = (size) => {
  return innerHeight < 500 ? Math.ceil((size / 500) * innerHeight) : size;
}

class Player {
  constructor() {
    this.position = {
      x: proportionalSize(10),
      y: proportionalSize(400),
    };
    this.velocity = {
      x: 0,
      y: 0,
    };
    this.width = proportionalSize(40);
    this.height = proportionalSize(40);
  }
  draw() {
    ctx.fillStyle = "#99c9ff";
    ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
  }
  
  update() {
    this.draw();
    this.position.x += this.velocity.x;
    this.position.y += this.velocity.y;

    if (this.position.y + this.height + this.velocity.y <= canvas.height) {
      if (this.position.y < 0) {
        this.position.y = 0;
        this.velocity.y = gravity;
      }
      this.velocity.y += gravity;
    } else {
      this.velocity.y = 0;
    }

    if (this.position.x < this.width) {
      this.position.x = this.width;
    }

    if (this.position.x >= canvas.width - this.width * 2) {
      this.position.x = canvas.width - this.width * 2;
    }
  }
}

class Platform {
  constructor(x, y) {
    this.position = {
      x,
      y,
    };
    this.width = 200;
    this.height = proportionalSize(40);
  }
  draw() {
    ctx.fillStyle = "#acd157";
    ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
  }
}

class CheckPoint {
  constructor(x, y, z) {
    this.position = {
      x,
      y,
    };
    this.width = proportionalSize(40);
    this.height = proportionalSize(70);
    this.claimed = false;
  };

  draw() {
    ctx.fillStyle = "#f1be32";
    ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
  }
  claim() {
    this.width = 0;
    this.height = 0;
    this.position.y = Infinity;
    this.claimed = true;
  }
};

const player = new Player();

const platformPositions = [
  { x: 500, y: proportionalSize(450) },
  { x: 700, y: proportionalSize(400) },
  { x: 850, y: proportionalSize(350) },
  { x: 900, y: proportionalSize(350) },
  { x: 1050, y: proportionalSize(150) },
  { x: 2500, y: proportionalSize(450) },
  { x: 2900, y: proportionalSize(400) },
  { x: 3150, y: proportionalSize(350) },
  { x: 3900, y: proportionalSize(450) },
  { x: 4200, y: proportionalSize(400) },
  { x: 4400, y: proportionalSize(200) },
  { x: 4700, y: proportionalSize(150) },
];

const platforms = platformPositions.map(
  (platform) => new Platform(platform.x, platform.y)
);

const checkpointPositions = [
  { x: 1170, y: proportionalSize(80), z: 1 },
  { x: 2900, y: proportionalSize(330), z: 2 },
  { x: 4800, y: proportionalSize(80), z: 3 },
];

const checkpoints = checkpointPositions.map(
  (checkpoint) => new CheckPoint(checkpoint.x, checkpoint.y, checkpoint.z)
);

const animate = () => {
  requestAnimationFrame(animate);
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  platforms.forEach((platform) => {
    platform.draw();
  });

  checkpoints.forEach(checkpoint => {
    checkpoint.draw();
  });

  player.update();

  if (keys.rightKey.pressed && player.position.x < proportionalSize(400)) {
    player.velocity.x = 5;
  } else if (keys.leftKey.pressed && player.position.x > proportionalSize(100)) {
    player.velocity.x = -5;
  } else {
    player.velocity.x = 0;

    if (keys.rightKey.pressed && isCheckpointCollisionDetectionActive) {
      platforms.forEach((platform) => {
        platform.position.x -= 5;
      });

      checkpoints.forEach((checkpoint) => {
        checkpoint.position.x -= 5;
      });
    
    } else if (keys.leftKey.pressed && isCheckpointCollisionDetectionActive) {
      platforms.forEach((platform) => {
        platform.position.x += 5;
      });

      checkpoints.forEach((checkpoint) => {
        checkpoint.position.x += 5;
      });
    }
  }

  platforms.forEach((platform) => {
    const collisionDetectionRules = [
      player.position.y + player.height <= platform.position.y,
      player.position.y + player.height + player.velocity.y >= platform.position.y,
      player.position.x >= platform.position.x - player.width / 2,
      player.position.x <=
        platform.position.x + platform.width - player.width / 3,
    ];

    if (collisionDetectionRules.every((rule) => rule)) {
      player.velocity.y = 0;
      return;
    }

    const platformDetectionRules = [
      player.position.x >= platform.position.x - player.width / 2,
      player.position.x <=
        platform.position.x + platform.width - player.width / 3,
      player.position.y + player.height >= platform.position.y,
      player.position.y <= platform.position.y + platform.height,
    ];

    if (platformDetectionRules.every(rule => rule)) {
      player.position.y = platform.position.y + player.height;
      player.velocity.y = gravity;
    };
  });

  checkpoints.forEach((checkpoint, index, checkpoints) => {
    const checkpointDetectionRules = [
      player.position.x >= checkpoint.position.x,
      player.position.y >= checkpoint.position.y,
      player.position.y + player.height <=
        checkpoint.position.y + checkpoint.height,
      isCheckpointCollisionDetectionActive,
      player.position.x - player.width <=
        checkpoint.position.x - checkpoint.width + player.width * 0.9,
      index === 0 || checkpoints[index - 1].claimed === true,
    ];

    if (checkpointDetectionRules.every((rule) => rule)) {
      checkpoint.claim();


      if (index === checkpoints.length - 1) {
        isCheckpointCollisionDetectionActive = false;
        showCheckpointScreen("You reached the final checkpoint!");
        movePlayer("ArrowRight", 0, false);
      } else if (player.position.x >= checkpoint.position.x && player.position.x <= checkpoint.position.x + 40) {
        showCheckpointScreen("You reached a checkpoint!");
      }


    };
  });
}


const keys = {
  rightKey: {
    pressed: false
  },
  leftKey: {
    pressed: false
  }
};

const movePlayer = (key, xVelocity, isPressed) => {
  if (!isCheckpointCollisionDetectionActive) {
    player.velocity.x = 0;
    player.velocity.y = 0;
    return;
  }

  switch (key) {
    case "ArrowLeft":
      keys.leftKey.pressed = isPressed;
      if (xVelocity === 0) {
        player.velocity.x = xVelocity;
      }
      player.velocity.x -= xVelocity;
      break;
    case "ArrowUp":
    case " ":
    case "Spacebar":
      player.velocity.y -= 8;
      break;
    case "ArrowRight":
      keys.rightKey.pressed = isPressed;
      if (xVelocity === 0) {
        player.velocity.x = xVelocity;
      }
      player.velocity.x += xVelocity;
  }
}

const startGame = () => {
  canvas.style.display = "block";
  startScreen.style.display = "none";
  animate();
}

const showCheckpointScreen = (msg) => {
  checkpointScreen.style.display = "block";
  checkpointMessage.textContent = msg;
  if (isCheckpointCollisionDetectionActive) {
    setTimeout(() => (checkpointScreen.style.display = "none"), 2000);
  }
};

startBtn.addEventListener("click", startGame);

window.addEventListener("keydown", ({ key }) => {
  movePlayer(key, 8, true);
});

window.addEventListener("keyup", ({ key }) => {
  movePlayer(key, 0, false);
});

Le Tre Rivelazioni

Sono 3 i concetti che mi hanno colpito di questo progetto: API, requestAnimationFrame e Infinity.

API: Sulle Spalle di Giganti

Trovo incredibile come un semplice richiamo ad una API dia a noi utilizzatori finali la sensazione di facilità del comando, ma dietro le quinte ci sono svariate linee di codice che la compongono.
Riconosco ora il grande lavoro dei backend: che siano gli ingegneri software dei vari browser, che siano i developer che contribuiscono con l'opensource. Riconosco di stare letteralmente sulle spalle di giganti.
Ogni volta che scrivo requestAnimationFrame() o canvas.getContext('2d'), sto usando il risultato di anni di ottimizzazioni, discussioni tecniche e iterazioni.

requestAnimationFrame: Efficienza Intelligente

Prendiamo ad esempio l'API requestAnimationFrame(). Grazie a questa semplice chiamata, il browser conosce esattamente quando sta per ridisegnare lo schermo (refresh cycle).
Passa dai 60 agli 0 fps in base a se c'è attività o meno, con conseguente risparmio di energia e memoria allocata. Quando il pulsante tab non è attivo, il browser semplicemente smette di chiamare la funzione. Zero cicli sprecati.
È intelligente perché invece di un loop infinito che gira sempre (anche quando non serve), il browser sincronizza il codice con il suo ciclo di rendering nativo.

Infinity: Il Pattern "Disattiva, Non Distruggere"

I checkpoint in questo gioco sono settati su Infinity quando vengono ottenuti. Ma perché non distruggere l'oggetto? Perché non eliminarlo del tutto dall'array?

Con claim() abbiamo 4 livelli di difesa:

claim() {
  this.width = 0;           // 1. Geometria impossibile
  this.height = 0;          // 2. Zero dimensioni
  this.position.y = Infinity; // 3. Fuori dal mondo
  this.claimed = true;      // 4. Già usato
}

Emerge chiaramente che non c'è alcuna intenzione di eliminarli dall'array. Mi sono chiesto il perché: eliminandoli si libererebbe anche memoria preziosa, ho pensato. Ebbene, è vero ma il prezzo da pagare sarebbe molto alto.

Ogni livello protegge da un diverso tipo di accesso. Infatti impostare width e height a zero protegge con la matematica: quando il codice esegue la collision detection, calcola se due rettangoli si sovrappongono, ma con dimensioni nulle la sovrapposizione diventa impossibile. Anche se il codice viene eseguito, i calcoli geometrici falliscono automaticamente.

Impostare position.y a Infinity protegge con lo spazio. Qualsiasi posizione del player (100, 500, persino 9999) sarà sempre minore di Infinity. Il checkpoint è letteralmente caduto fuori dal mondo del gioco, e qualsiasi confronto di posizione verticale fallisce.

Il claimed = true protegge con la logica ed è il controllo più efficiente. È una guard clause, ovvero un controllo che esce subito dalla funzione, che dice al codice "questo checkpoint è già stato usato, non perdere tempo a controllare collisioni". Previene calcoli inutili permettendo un'uscita rapida dal controllo. In poche parole se per un bug futuro uno dei controlli fallisce, gli altri ti salvano.

La memoria risparmiata non vale i problemi creati:

Eliminare con checkpoints.splice(index, 1) creerebbe più problemi di quanti ne risolva. A 60fps, gli indici dell'array cambiano mentre stai iterando, causando possibili bug visivi. Ogni eliminazione inoltre richiede riallocazione di memoria e attiva il garbage collector (il sistema che pulisce automaticamente la memoria), senza contare che modificare l'array mentre altri lo leggono causa race condition (situazioni dove più parti del codice accedono alla stessa risorsa contemporaneamente creando bug imprevedibili).
Con claim() non c'è allocazione, nessuna garbage collection, zero pause. Risulta pertanto decisamente migliore "spegnere/riaccendere" oggetti esistenti.

Cosa Ho Imparato

OOP Intermedia:

Inheritance: Estensione di classi base per creare varianti di oggetti
Composition: Combinazione di oggetti più semplici per creare comportamenti complessi
Encapsulation: Nascondere dettagli implementativi dietro interfacce pulite
Object Pooling: Riutilizzo di oggetti invece di crearli/distruggerli continuamente

Game Development Patterns:

Game Loop: Ciclo principale update → render sincronizzato con requestAnimationFrame()
Delta Time: Gestione frame-rate indipendente per movimento fluido
State Management: Gestione stati del gioco (menu, playing, paused, game over)
Collision Detection: AABB (Axis-Aligned Bounding Box) per rilevare collisioni

Canvas API:

getContext('2d') per ottenere il contesto di disegno
clearRect() per pulire il canvas ad ogni frame
fillRect() e strokeRect() per disegnare forme
drawImage() per sprite e texture

Physics Simulation:

Gravità come accelerazione costante verso il basso
Velocità e accelerazione come vettori 2D
Friction per rallentamento naturale
Jump mechanics con impulso verticale

Performance Optimization:

requestAnimationFrame() per sincronizzazione con refresh rate
Riduzione chiamate al DOM
Spatial partitioning per collision detection efficiente
Flag booleani per early exit (guard clauses)

Event Handling:

keydown e keyup per input tastiera
Gestione input multipli simultanei (salto + movimento)
Prevenzione comportamenti di default del browser

Defensive Programming:

Ridondanza intenzionale per robustezza
Guard clauses per prevenire calcoli inutili
Boundary checking per evitare out-of-bounds
Fallback values per situazioni edge case

Pronto ad iniziare il prossimo progetto!

Prossimo progetto: Ripassare il Pensiero Algoritmico costruendo un Dice Game

Il Progetto​

Codice Sorgente​

Le Tre Rivelazioni​

Cosa Ho Imparato​

Il Progetto

Codice Sorgente

Le Tre Rivelazioni

Cosa Ho Imparato