如何使用mousePressedOver在P5电话?

Question

我正在制作一个与P5库虚拟打开时的网站。我得让它和手机兼容。我添加了隐身功能来测试它。我知道如何添加一键触摸但是我如何添加多个触摸因为这需要多个触摸?这是我的代码

var laugh, laughI, sadI, sad, titleI, title, annoyI, annoy, motiI, moti
var stressI, stress, angryI, angry;

function preload(){
laughI  = loadImage("images/laugh.png");
sadI    = loadImage("images/sad.png");
titleI  = loadImage("images/title.png");
annoyI  = loadImage("images/annoy.png");
motiI   = loadImage("images/motivation.png");
stressI = loadImage("images/stress.png");
angryI  = loadImage("images/angry.png");
}
function setup() {
createCanvas(windowWidth, 1800);
title = createSprite(windowWidth/2, 80)
title.addImage(titleI)
title.scale = 0.9;
laugh = createSprite(windowWidth/2, 270);
laugh.addImage(laughI);
laugh.scale = 0.2;
sad = createSprite(windowWidth/2, 550);
sad.addImage(sadI);
sad.scale = 0.2;
annoy = createSprite(windowWidth/2, 830);
annoy.addImage(annoyI);
annoy.scale = 0.2;
moti = createSprite(windowWidth/2, 1110);
moti.addImage(motiI);
moti.scale = 0.2;
stress = createSprite(windowWidth/2, 1390);
stress.addImage(stressI);
stress.scale = 0.2;
angry = createSprite(windowWidth/2, 1670);
angry.addImage(angryI);
angry.scale = 0.2;

}

function draw() {
background(0);
if(mouseIsPressed){ 
laugh.visible = false;
}

drawSprites();

}

Answer 1

在手机上，我相信如果用户点击，您将获得mousePressed()事件，当触摸发生时，mouseIsPressed应该设置为true(至少直到触摸次数减少)。然而，你也可以显式地检查触摸与touches数组。

function setup() {
createCanvas(windowWidth, windowHeight);

// Prevent top level gesture scrolling/zooming
// This if iOS Safari specific
document.addEventListener("gesturestart", function (e) {
e.preventDefault();
return false;
});
}
let pressedAt;
let clickedAt;
function mousePressed(e) {
pressedAt = frameCount;
}
function mouseClicked(e) {
clickedAt = frameCount;
}
function draw() {
background(220);

if (frameCount - clickedAt < 30) {
background("orange");
} else if (frameCount - pressedAt < 30) {
background("blue");
} else {
if (touches.length) {
background("green");
text(`${mouseIsPressed ? 'mouse pressed' : 'mouse not pressed'} (touches: ${touches.length})`, 10, height / 2);
} else if (mouseIsPressed) {
background("red");
}
}

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>

由于代码片段不能在移动设备上工作，您可以在这里运行示例:https://editor.p5js.org/Kumu-Paul/full/LpkV7Gio2