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

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

References

placeholderDefinisce un testo segnaposto per un elemento input o textarea
<h5>Titolo di intestazione di quinto livello
<blockquote>Inserisce citazioni in un documento HTML
crossoriginGestisce richieste tra documenti provenienti da origini differenti.
<iframe>Crea un frame all'interno di una pagina HTML.
<option>Serve ad inserire una voce in un menu di selezione.

Users

Log in to search for users

Explore

Find inspiration

pablo_escobar_avanzata.html.

copia dicountdownfineanno

Esercizio gatto

JEANSON ANCHETA

Pagina di esempio

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