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

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

References

nameDetermina il nome degli elementi HTML o fornisce dati su un attributo associato.
sizeDetermina le dimensioni dell'elemento in base al valore contenuto
disabledImpedisce la modifica di un input
langSpecifica la lingua del contenuto di un elemento
<th>Definisce una cella di intestazione di una tabella HTML.
multipart/form-dataCodifica dei caratteri di un form

Users

Log in to search for users

Explore

Find inspiration

Esercizio 2 JS Bootstrap e jQuery

Form per il torneo misto disfo

Heads Or Tails Random Tally

Esame informatica

le miniere di nuxis

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.

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