noc-fisicas-reroll-parcial1 by @nMigno - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

Referenze

sizeDetermina le dimensioni dell'elemento in base al valore contenuto
_blankApre i collegamenti ipertestuali in una nuova scheda del browser
classDefinisce una o più classi per elemento
<video>Integra e controlla video in una pagina HTML
Inserisce un commento nel codice
<strong>Definisce una parte del testo importante con formattazione in grassetto.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Esercizi 05/03/2024 es2

Bootstrap List Grid

Esercitazione n 1

Ragdoll Archers

Lezione 3/11 pt.2

GEMELLAGGIO IN DEUTSCHLAND

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!DOCTYPE html>
<html lang="en">

<head>
  <script src="https://cdn.jsdelivr.net/npm/p5@2.0.5/lib/p5.js"></script>

  <link rel="stylesheet" type="text/css" href="style.css">
  <meta charset="utf-8">

</head>

<body>
  <main>
  </main>

</body>

</html>

html,
body {
  margin: 0;
  padding: 0;
}

canvas {
  display: block;
}

// Simulación de un coche en MRUV:
// ○ Dibuja un coche en el lienzo y simula su movimiento en MRUV.
// ○ Permite al usuario controlar la aceleración del coche con las teclas de flecha (acelerar y frenar desacelerando).
// ○ Mostrar la velocidad del coche, la distancia recorrida y la aceleración en texto en la pantalla.

let car;
let myInput;
// Metros por segundo. Resistencia contra aceleración.
const RESISTANCE = 9.8;
let VEC_DIRECTIONS;

function setup() {
  createCanvas(1080, 480);

  car = new Car();
  myInput = new Input();
  VEC_DIRECTIONS = {
    [LEFT_ARROW]: createVector(-1, 0),
    [RIGHT_ARROW]: createVector(1, 0),
    [UP_ARROW]: createVector(0, -1),
    [DOWN_ARROW]: createVector(0, 1),
  };
}

function keyPressed() {
  switch (key) {
    case 'f':
      if (document.fullscreenElement) {
        document.exitFullscreen();
      } else {
        document.getElementById('defaultCanvas0').requestFullscreen();
      }
      break;
    case 'a':
      car.up();
      break;
    case 'd':
      car.down();
      break;
  }
}

function windowResized() {
  if (document.fullscreenElement) {
    resizeCanvas(windowWidth, windowHeight);
  } else {
    resizeCanvas(640, 480);
  }
}

function draw() {
  myInput.check();
  car.move();

  background(220);
  car.draw();
  Debugger.draw();
  car.clean();
}

class Input {
  constructor() {
    this.map = {
      [LEFT_ARROW]: false,
      [UP_ARROW]: false,
      [DOWN_ARROW]: false,
      [RIGHT_ARROW]: false,
    }
  }

  check() {
    this.map[LEFT_ARROW] = keyIsDown(LEFT_ARROW);
    this.map[UP_ARROW] = keyIsDown(UP_ARROW);
    this.map[DOWN_ARROW] = keyIsDown(DOWN_ARROW);
    this.map[RIGHT_ARROW] = keyIsDown(RIGHT_ARROW);
  }
}

class Debugger {
  static draw() {
    const autoDebug = car.debug();
    textSize(18);
    textAlign(LEFT, TOP);

    text(autoDebug.position, 10, 10);
    text(autoDebug.direction, 10, 30);
    text(autoDebug.velocity, 10, 50);
    text("Usá las flechas de dirección para mover el auto.", 10, 70);
    text("Apretá [A] para acelerar y [D] para desacelerar.", 10, 90);
    textAlign(RIGHT, TOP);
    text("Apretá [F] para pantalla completa.", width - 10, 10);
    noStroke();
  }
}

class Car {
  constructor(x = 0, y = 0) {
    this.vector = createVector(x, y);
    // Metros por segundo
    this.MAX_VELOCITY = 30;
    this.BASE_VELOCITY = 3;
    this.velocity = 0;
    this.appliedVelocity = createVector(0, 0);
    this.appliedDirections = [];
    this.size = 50;
  }
  debug() {
    return {
      position: `Car position: [${this.vector.x.toFixed(2)
        }, ${this.vector.y.toFixed(2)
        }]`,
      direction: `Car direction: [${this.appliedVelocity.x.toFixed(2)
        }, ${this.appliedVelocity.y.toFixed(2)
        }]`,
      velocity: `Car velocity: ${this.velocity}`,
    };
  }
  up() {
    if (this.velocity < this.MAX_VELOCITY) {
      this.velocity += this.BASE_VELOCITY;
    }
  }
  down() {
    if (this.velocity > 0) {
      this.velocity -= this.BASE_VELOCITY;
    }
  }
  move() {
    if (!this.velocity) {
      return;
    }
    for (const action of Object.keys(VEC_DIRECTIONS)) {
      const pressed = myInput.map[action];

      if (pressed) {
        // 1. Guardo en qué direcciones voy a tratar de ir
        this.appliedDirections.push(VEC_DIRECTIONS[action]);
      }
    }
    // Si no se aplicaron fuerzas, no hacer nada
    // TODO: hacer que las direcciones sean fijas.
    if (!this.appliedDirections.length) {
      return;
    }
    // Por cada dirección aplicada, sumo su dirección al vector
    // de velocidad. AKA: reduzco las direcciones en un único vector.
    for (const vector of this.appliedDirections) {
      VectorOps.add(this.appliedVelocity, vector);
    }
    // Normalizo el vector para que los movimiento diagonales no sean
    // más veloces.
    VectorOps.normalize(this.appliedVelocity, this.velocity);
    // Aplico la velocidad al vector de movimiento.
    VectorOps.add(this.vector, this.appliedVelocity);

    // Reubicación
    if (this.vector.x < -this.size) {
      this.vector.x = width;
    }
    if (this.vector.y < -this.size) {
      this.vector.y = height;
    }
    if (this.vector.x > width + this.size) {
      this.vector.x = -this.size;
    }
    if (this.vector.y > height + this.size) {
      this.vector.y = -this.size;
    }
  }
  clean() {
    this.appliedDirections = [];
    this.appliedVelocity = createVector(0, 0);
  }
  draw() {
    rect(this.vector.x, this.vector.y, this.size);
  }
}

// Muta siempre el vector de la izquierda, pero lo retorna
// para facilitar su manipulación.
class VectorOps {
  static add(vec1, vec2) {
    vec1.x += vec2.x;
    vec1.y += vec2.y;

    return vec1;
  }
  static mult(vec, escalar) {
    vec.x *= escalar;
    vec.y *= escalar;

    return vec;
  }
  static div(vec, escalar) {
    vec.x /= escalar;
    vec.y /= escalar;

    return vec;
  }
  static normalize(vec, base) {
    const magnitud = sqrt(vec.x ** 2 + vec.y ** 2);

    this.div(vec, magnitud);

    return base ? this.mult(vec, base) : vec;
  }
}