极端新手需要关于 mousePressed() 事件的帮助

编程问答 2022-05-26

问题描述

我对 P5.js/processing 非常陌生（为艺术家进行编程）。我正在尝试制作一个粗糙的游戏，其中一个图像（Jar Jar）在屏幕上弹跳，另一个图像（光剑）随鼠标移动，当鼠标附加图像越过弹跳图像时，光剑将被镜像并激活声音。如果这一切都有意义...

到目前为止，我有弹跳图像部分，但我无法使 mousepressed() 函数工作。就像我提到的，当按下鼠标时，我需要“lightsaber.png”来翻转。另外，当鼠标被按下并直接在 JarJar 图像上时，我将如何添加分数计数和声音事件？

谢谢！ 到目前为止，这是我的代码：

let jarJar;
let jarJarX=5;
let jarJarY=5;
let xspeed;
let yspeed;
let lightSaber;
function preload() {
  jarJar = loadImage('jarjar.png');
  lightSaber= loadImage ('lightSaber.png');
 
}
function setup() {
  createCanvas(700,700);
  xspeed=random (15,22);
  yspeed=random (15,22);
}

function draw() {
  background(0);
   image (lightSaber,mouseX,mouseY,100,100);
   image(jarJar,jarJarX,jarJarY,140,200);
 jarJarX= jarJarX+xspeed;
  if (jarJarX<=-300|| jarJarX>=width+200){
    xspeed=xspeed*-1;
  }
 jarJarY= jarJarY+yspeed;
  if (jarJarY<-200|| jarJarY>=height+200 ){
    yspeed=yspeed*-1;
  }
  //picture mirrors when mouse pressed
  if mouseClicked(){
    scale(-1,1);
    image(lightSaber);
  }

  
  //score counter coordinate with lightsaber hitting image 
  // 
}

解决方法

让我知道我不精通javaScript。这就是说，你的问题很简单，所以无论如何我都可以提供帮助。

一些框架将有简单的方法来镜像图像。处理喜欢用负数进行缩放。我重新编码了你的一些东西以适应我的变化。主要变化如下：

  1. 我添加了一种绘制光剑的方法，以便我们可以为它“设置动画”（阅读：当用户点击时将其翻转几帧）。

  2. 我添加了一个“score”全局变量来跟踪分数，以及一种让用户使用 text 方法查看分数的方法。

  3. 我添加了一个叫做“intersect”的方法，它的编码不是很好，因为这是我在学生时代做过的事情（请不要伤害我，它工作得很好，所以我仍然使用它时不时）。有关简单碰撞如何工作的更多详细信息，请花点时间阅读我前段时间写的this answer，也有漂亮的图片！

  4. 我添加了一个 mouseClicked 方法。此方法的作用类似于 event，这意味着它将由特定调用（在这种情况下单击鼠标左键）触发。此方法包含用于检查作为图像的方块之间是否发生碰撞的代码。如果有重叠，分数会增加，jarjar 会朝另一个方向跑（这部分是一个奖励，证明这是您可以在碰撞方面发挥创意的地方）。

我对代码进行了注释，以便您可以更轻松地了解我正在做的事情：

let jarJar;
let jarJarX=5;
let jarJarY=5;
let xspeed;
let yspeed;
let lightSaber;
let flipLength;
let score = 0;

function preload() {
  jarJar = loadImage('jarjar.png');
  lightSaber= loadImage ('lightSaber.png');
}

function setup() {
  createCanvas(700,700);
  runJarJarRun();
}

function draw() {
  background(0);
  drawLightSaber(); // this way I can deal with the lightsaber's appearance in a dedicated method
  image(jarJar,jarJarX,jarJarY,140,200);
  jarJarX= jarJarX+xspeed;
  if (jarJarX<=-300|| jarJarX>=width+200) {
    xspeed=xspeed*-1;
  }
  jarJarY= jarJarY+yspeed;
  if (jarJarY<-200|| jarJarY>=height+200 ) {
    yspeed=yspeed*-1;
  }

  //score counter coordinate with lightsaber hitting image
  textSize(30);
  fill(200,200,0);
  text('Score: ' + score,10,40);
}

function drawLightSaber() {
  if (flipLength) { // if the number is > 0 this will be true
    flipLength--; // measure how ling the saber is flipped in frames @ ~60 frames per second

    push(); // isolating the translate ans scale manpulations to avoid ruining the rest of the sketch
    translate(mouseX + 100,0); // makes the coordinates so once flipped the lightsaber will still appear at the same location
    scale(-1.0,1.0);    // flip x-axis backwards
    image (lightSaber,mouseY,100,100);
    pop(); // ends the sequence started with 'push();'
  } else {
    image (lightSaber,mouseX,100);
  }
}

function runJarJarRun() {
  xspeed=random (5,10);
  yspeed=random (5,10);
}

function mouseClicked() { // this method will trigger once when the left mouse button is clicked
  flipLength = 10;
  if (intersect(jarJarX,100)) {
    score++;
    runJarJarRun(); // as a bonus,jarjar will run in another direction on hit
    // you could totally put some more special effects,like a flash,a sound,some 'mesa ouchie bad!' text,whatever speaks to you
  }
}

function intersect(x1,y1,w1,h1,x2,y2,w2,h2) {
  let checkX = false;
  let checkY = false;

  if ( (x1<x2 && (x1+w1)>x2) || (x1<(x2+w2) && (x1+w1)>x2+w2) || (x1>x2 && (x1+w1)<(x2+w2)) ) {
    checkX = true;
  }
  if ( (y1<y2 && (y1+h1)>y2) || (y1<(y2+h2) && (y1+h1)>y2+h2) || (y1>y2 && (y1+h1)<(y2+h2)) ) {
    checkY = true;
  }

  return (checkX && checkY);
}

如果您有什么不明白的地方，请在评论中告诉我，我很乐意详细说明。祝你好运，玩得开心！

,

嗨，欢迎堆栈溢出。在此处提交（或您寻求代码帮助的任何论坛）提交时要记住的一件事是发布 minimal reproducible example. 您将更有可能获得有用的回复。

您还需要将您的问题分开，因为每个问题都有多个步骤。

您的第一个问题是关于如何在您按下鼠标时让您的草图显示某些内容。你的语法在那里不太正确。下面是一个关于如何检查鼠标是否被按住的最小示例。

function setup() {
  createCanvas(400,400);
}

function draw() {
  background(220);

  if (mouseIsPressed == true) {
    ellipse(100,100);
  }
}

只是一个简短的说明，我试图使它尽可能“新手友好”。 == true 是可选的，通常不包括在内。