Question

我目前正在学习如何在汗学院编写javascript代码。我正在处理fish tank project。

代码：

 background(89, 216, 255);

var centerX ;
var centerY ;
var bodyLength = 118;
var bodyHeight = 74;

var drawFish = function(centerX, centerY) {
noStroke();
fill (random(1,255), random(1,255), random(1,255));
// body
ellipse(centerX, centerY, bodyLength, bodyHeight);
// tail
var tailWidth = bodyLength/4;
var tailHeight = bodyHeight/2;
triangle(centerX-bodyLength/2, centerY,
         centerX-bodyLength/2-tailWidth, centerY-tailHeight,
         centerX-bodyLength/2-tailWidth, centerY+tailHeight);
// eye
fill(33, 33, 33);
ellipse(centerX+bodyLength/4, centerY, bodyHeight/5, bodyHeight/5);
};

if(mouseClicked) {
  drawFish(random(1,400), random(1,400)); } else { text ("Left click to add fish!", 100, 100); }

如果我只是通过复制和粘贴多次调用这些函数，但是如果我点击屏幕，我希望它可以正常工作。我也尝试过mousePressed和mouseIsPressed。

Answer 1

您的代码中似乎没有{p> mouseClicked。请使用onClick。例如：

var element = document.getElementById("id");
element.onclick = function() {
       drawFish(random(1,400), random(1,400)); 
}

或者，只需单击文档（或呼叫页面），请使用：

document.onclick = function() {
           drawFish(random(1,400), random(1,400)); 
    }

Answer 2

mouseClicked = function() {
    drawFish(random(1,400), random(1,400));};

如果我使用该代码它似乎工作。有没有人知道如何使用它，但只有当我在某个位置上有mouseX和mouseY时才创建一条新鱼？

Answer 3

经过几次尝试后我就这样做了：

var drawBubble = function () {

    var bubbleX = (mouseX);
    var bubbleY = (mouseY);
    stroke(255, 255, 255);
    noFill();
    ellipse (bubbleX,bubbleY,20,20);
    fill(250, 250, 250);
    ellipse (bubbleX + 5, bubbleY - 2, 5,5);
};

var mouseClicked = function(){
  drawBubble (mouseX,mouseY);
};

Answer 4

在javascript中，通过指定要操作的HTML区域或对象来指定鼠标事件。如果你想在屏幕上画鱼，你可以做

document.getElementById('body').onclick = function() {
    drawFish(...) //with your random place
}

＆＃39;＆＃39;＆＃39;部分可能会根据您希望鼠标点击事件的有效位置而改变。我假设这个项目使用html，所以标签应该可以正常工作。但你也可以做

document.onclick = function() {

}

作为全局事件处理程序

我不确定mouseClicked是什么，但你想让draw方法在鼠标点击时触发。因此，如果您的mouseClicked变量在某些其他方法中动态更改，您也应该发布该代码。

mouseClicked无法使用if语句调用函数

4 个答案: