使用 p5.js 和 JavaScript 測量按鍵被按下的時間

Question

我正在嘗試用 p5.js 做一些游戲開發項目。 它真的很簡單。 從本質上講，我需要能夠在地圖上的對象之上，然后按空格鍵。 當我按下空格鍵時，我基本上是不動的。 但是，我需要花費一定的時間來檢索對象。 現在，我想知道在不改變功能的情況下最好的方法是什么。 所以，如果我在對象的頂部，我按空格鍵我的意思是確保鍵保持按下大約 5 秒鍾。 這意味着我必須在某處啟動計時器，但我仍然不確定如何處理。 使用 KeyPressed()、KeyIsDown()、KeyReleased() 函數的示例會有所幫助。 謝謝

編輯：所以目前，我一直在考慮使用計數器（根本沒有那么有效，但它就是這樣），但后來我在考慮而不是考慮擁有一個全局計時器。

示例代碼：

`

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

`

https://editor.p5js.org/

到目前為止，這是我必須使用的，但我還必須使用時間戳以某種方式增加我的欄？ 這應該怎么做？

Answer 1

您可以使用時間戳和/或應用程序時間來評估是否取得了一定的進展。

我創建了一個小片段來演示如何做到這一點的想法。 這可能不是最好的解決方案，但它應該給你一個正確方向的提示。

在 KeyPressed -> 獲取時間。

而 KeyIsDown -> 檢查按住 Button 的時間是否等於 timeToPickUp，如果不是，則以百分比計算進度並更新進度條。

一旦該值達到/超過 100，執行操作並停止繪制進度條。

我以前從未使用過 p5js，因此代碼肯定不是“生產就緒”，但您明白了。

 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>

Answer 2

這是使用 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>