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

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

Referenze

forSpecifica a quale id è associato l'elemento in cui è dichiarato.
crossoriginGestisce richieste tra documenti provenienti da origini differenti.
colspanDefinisce il numero di colonne di una cella all'interno di una tabella.
requiredRende obbligatorio un campo di input
<h2>Titolo di intestazione di secondo livello
<title>Definisce il titolo della pagina web.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

form torneo 2 - - lezione 1/12

conta vocali nella stringa

Prova qualsiasi

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.

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

function setup() {
  createCanvas(640, 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;
  }
}