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

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

References

selectedPre-seleziona un elemento di input
<link>Collega il documento corrente con una risorsa esterna
<textarea>Area di testo libero espandibile per form HTML
<tfoot>Definisce il footer o sezione inferiore di una tabella.
placeholderDefinisce un testo segnaposto per un elemento input o textarea
<canvas>Tag per disegnare grafica dinamica su pagine web.

Users

Log in to search for users

Explore

Find inspiration

Tracker dei km fatti

La volpe e la cicogna(2)

Array of Colors

Genera Tavola Pitagorica (PHP)

Il mio primo sito

Lola Harrel Project 2

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!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;
  }
}