我正在尝试创造演奏手鼓的体验。这个想法是,用户拿起鼓槌,将其悬停在鼓上方,如果用户再次单击,鼓就会播放音频。这可能吗?我找到了很多关于形状的资源,特别是椭圆,但没有很多关于图像的信息。
var drum, mallet;
var x, y, w, h; // Location and size
let dragging = false;
let rollover = false;
let img;
let vel;
let pos;
function preload(){
strike = loadSound('HandDrum.mp3');
drum = loadImage('handdrum2.png');
mallet = loadImage('drumMallet.png');
}
function setup() {
createCanvas(750, 500);
//Dimensions for Moving Stuff
x = 400;
y = 100;
w = 300;
h = 300;
}
function draw() {
background(220);
tint(219,69,69,250);
image(drum,125,95,400,400);
tint(82,217,198);
//image(mallet,350,100,width/2,height/2);
if (mouseX > x && mouseX < x + w && mouseY > y && mouseY < y + 2) {
rollover = true;
} else {
rollover = false;
}
// Adjust location if being dragged
if (dragging) {
x = mouseX + offsetX;
y = mouseY + offsetY;
}
image(mallet, x, y, w, h);
}
function mousePressed() {
if (mouseX > x && mouseX < x + w && mouseY > y && mouseY < y + h) {
dragging = true;
offsetX = x - mouseX;
offsetY = y - mouseY;
}
}
function mouseReleased() {
//Quit dragging
dragging = false;
}
我想通了,所以我发布了我的代码,以防其他人想要解决类似的问题。如果其他人有更有效的方法来解决这个问题,请随时发表评论/分享建议。
let drumSound;
let drumImg;
let volSlider;
let drumCircle;
let malletImg;
let drumMallet;
let offsetX, offsetY;
let dragging = false;
function preload() {
drumSound = loadSound('HandDrum.mp3');
malletImg = loadImage('drumMallet.png');
drumImg = loadImage('handdrum2.png');
}
function setup() {
createCanvas(700, 500);
drumSound.playMode('restart');
volSlider = createSlider(0, 1, 0.5, 0.01);
volSlider.position(130, 40);
drumCircle = new Drumcircle(width/2 - 150, height/2 - 150, 300, 300);
drumMallet = new DrumMallet(width / 2 +80, height / 2 - 220, 300, 300);
}
function mousePressed() {
drumCircle.clicked(mouseX, mouseY);
if (mouseX > drumMallet.x && mouseX < drumMallet.x + drumMallet.sizeX &&
mouseY > drumMallet.y && mouseY < drumMallet.y + drumMallet.sizeY) {
dragging = true;
offsetX = mouseX - drumMallet.x;
offsetY = mouseY - drumMallet.y;
}
}
function mouseReleased() {
dragging = false;
}
class Drumcircle {
constructor(x, y, sizeX, sizeY) {
this.name = 'DrumCircle';
this.drumImg = drumImg;
this.x = x;
this.y = y;
this.sizeX = sizeX;
this.sizeY = sizeY;
}
display() {
image(this.drumImg, this.x, this.y, this.sizeX, this.sizeY);
}
clicked(x, y) {
let radialDistance = dist(x, y, width/2, height/2);
if (radialDistance < 140 &&mouseX > drumMallet.x && mouseX < drumMallet.x + drumMallet.sizeX &&
mouseY > drumMallet.y && mouseY < drumMallet.y + drumMallet.sizeY) {
drumSound.play();
print('play drum');
} else {
print('silence');
}
}
}
class DrumMallet {
constructor(x, y, sizeX, sizeY) {
this.x = x;
this.y = y;
this.sizeX = sizeX;
this.sizeY = sizeY;
}
display() {
image(malletImg, this.x, this.y, this.sizeX, this.sizeY);
}
}
function draw() {
background(0, 24, 25);
drumSound.setVolume(volSlider.value());
let volText = 'Volume';
textSize(12);
fill(255);
stroke(0);
strokeWeight(2);
text(volText, 85, 45, 70, 80);
if (dragging) {
drumMallet.x = mouseX - offsetX;
drumMallet.y = mouseY - offsetY;
}
drumCircle.display();
drumMallet.display();
}