Estoy tratando de hacer un proyecto de desarrollo de juegos con p5.js. Es realmente simple. Esencialmente, necesito poder subirme a un objeto en un mapa y presionar la barra espaciadora. Cuando presiono la barra espaciadora, básicamente estoy inmóvil. Sin embargo, debería tomarme una cierta cantidad de segundos recuperar el objeto. Ahora, me pregunto cuál es la mejor manera de hacer esto sin cambiar la funcionalidad. Entonces, si estoy encima del objeto, presiono la barra espaciadora. Debo asegurarme de que la tecla permanezca presionada durante aproximadamente 5 segundos. Lo que significaría que tengo que iniciar el temporizador en alguna parte, pero todavía no estoy seguro de cómo abordar esto. Los ejemplos que usan la función KeyPressed(), KeyIsDown(), KeyReleased() serían útiles. Gracias
Editar: Actualmente, he estado pensando en usar un contador (no es tan efectivo pero es lo que es), pero luego estoy pensando en tener un temporizador global.
Código de ejemplo:
`
function setup() { createCanvas(400, 400); } function draw() { background(220); let PickUpRate = 0 push() let x = 100 let y = 100 let size = 64 fill(100,63) //base rect(x-size/2, y-size/2-20,size,10); //health fill(0,220,0) rect(x-size/2, y-size/2-20,size*abs(PickUpRate)/100,10); pop() } function keyPressed(event){ console.log(event.timeStamp) } function keyReleased(event){ console.log(event.timeStamp) }`
Esto es con lo que tengo que trabajar hasta ahora, pero también tengo que incrementar mi barra de alguna manera usando la marca de tiempo. ¿Cómo debe hacerse esto?
Puede usar marcas de tiempo y/o tiempo de aplicación para evaluar si se ha realizado cierto progreso.
Creé un pequeño fragmento para demostrar la idea de cómo hacerlo. Puede que esta no sea la mejor solución, pero debería darte una pista en la dirección correcta.
En KeyPressed -> Obtener tiempo.
Mientras KeyIsDown -> Verifique si el tiempo que se mantiene presionado el botón es igual a timeToPickUp, si no, calcule el progreso como porcentaje y actualice la barra de progreso.
Tan pronto como el valor alcance/exceda 100, realice la acción y deje de dibujar la barra de progreso.
Nunca antes trabajé con p5js, por lo tanto, el código ciertamente no está "listo para la producción", pero se entiende la idea.
let timeToPickUp = 5000; //ms of time to pick up let startOfPickUp = 0; // var to save timeStamp to let progress = 0; // var to save progress value function setup() { createCanvas(400, 400); } function draw() { background(220); let PickUpRate = 0 push() let x = 100 let y = 100 let size = 64 fill(100,63) //base rect(x-size/2, y-size/2-20,size,10); //health fill(0,220,0) rect(x-size/2, y-size/2-20,size*abs(PickUpRate)/100,10); pop() if(keyIsDown(32)) { // Check if spacebar is pressed if(startOfPickUp > 0 && progress < 100) { // Don't draw if invalid progress = (millis() - startOfPickUp) / timeToPickUp * 100; //get progress //draw progress fill(255,0,0) rect(10, 350, progress, 25) if(progress >= 100) { console.log('do whatever is supposed to happen automatically'); } } } } function keyPressed(event){ startOfPickUp = millis() // get start } function keyReleased(event){ startOfPickUp = 0; // remove values when released progress = 0; } <script src="https://cdn.jsdelivr.net/npm/p5@1.4.0/lib/p5.js"></script>Aquí hay una implementación rápida de prueba de concepto usando setTimeout:
// class to encapsulate the progress tracking and meter updating class Progress { constructor(elem, duration = 2000, updateInterval = 50) { // the meter DOM element this.elem = elem; // the currently active timeout id this.timeoutId = null; // when progress tracking started this.startTime = null; // how long it takes to complete this.duration = duration; // how frequently to update the meter this.updateInterval = updateInterval; } start() { if (this.startTime) { // already running return; } // track when it started this.startTime = Date.now(); // start updating this.timeoutId = setTimeout(() => this.update(), this.updateInterval); } stop() { // cancel the timeout if it exists clearTimeout(this.timeoutId); // reset the meter css this.elem.style.setProperty('--complete', '0%'); this.elem.classList.remove('complete'); // clear our internal variables this.timeoutId = null; this.startTime = null; } update() { // compute the percentage complete based on start time and current time, and cap it at 100% const percentComplete = Math.min((Date.now() - this.startTime ?? Date.now()) / this.duration, 1) * 100; // set the css property used to do the fill this.elem.style.setProperty('--complete', `${percentComplete}%`); if (percentComplete >= 100) { // if we're at 100%, add the 'complete' class to the meter this.elem.classList.add('complete'); } else { // otherwise set up the next update this.timeoutId = setTimeout(() => this.update(), this.updateInterval); } } } // create an instance of Progress for our meter element const progress = new Progress(document.getElementById('meter')); // start on keydown document.body.addEventListener('keydown', () => { progress.start(); }) // stop on keyup document.body.addEventListener('keyup', () => { progress.stop(); }) #meter { height: 20px; max-width: 200px; margin: 2rem auto; /* use a custom property 'complete' to fill the appropriate amount of the bar */ background: linear-gradient(90deg, var(--fillColor, limegreen) var(--complete, 0%), #eee var(--complete, 0%) 100%); } /* class and animation for flashing the box shadow upon completion */ .complete { animation: .1s ready infinite alternate; } @keyframes ready { from { box-shadow: 0 0 2px 4px red; } to { box-shadow: 0 0 0 0px red; } } <div id="meter"></div>