在 p5js 草图中创建对象时出现语法错误

Question

我正在尝试使用对象云、山、树、峡谷等创建背景风景。一切进展顺利，除了创建云对象时。我已经为云对象声明了var cloud，并将设置函数中cloud的坐标值初始化为cloud = (pos_x: 200, pos_y: 70, diameter: 130);。但是，当我尝试在下面提到的draw() 函数中创建具有椭圆形状的云对象时，它给了我两个问题：

1. 当我在ellipse(); 中输入cloud. 时，我没有得到自动填充cloud.pos_x
2. 错误*sketch.js:23 Uncaught Syntax Error: Unexpected token ':'*（点在彼此之上），在我运行代码之后。

我希望我已经为您提供了足够的细节来理解这个问题。谢谢。

var floorPos_y;

var gameChar_x;
var gameChar_y;

var treePos_x;
var treePos_y;

var canyon;
var collectable;

var mountain;

var cloud; 
var cloudPos_x: 
var cloudPos_y; 
var cloudDiameter; 



function setup()
{
    createCanvas(1024, 576);
    floorPos_y = 432; //NB. we are now using a variable for the floor position

    //NB. We are now using the built in variables height and width
    gameChar_x = width/2;
    gameChar_y = floorPos_y;

    treePos_x = width/2;
    treePos_y = height/2;
    
    cloud = (pos_x: 200, pos_y: 70, diameter: 130); 
}

function draw()
{
    background(100, 155, 255); //fill the sky blue

    noStroke();
    fill(34, 139, 34);
    rect(0, floorPos_y, height, width - floorPos_y); //draw some green ground
    triangle(height + 200, floorPos_y - 20, height + 50, floorPos_y - 20, height + 50, floorPos_y); 
    quad(height, floorPos_y + 20, height, floorPos_y - 20, height + 50, floorPos_y - 20, height + 50, floorPos_y); 
    rect(0, floorPos_y - 20, height, 20);
    quad(width - 200, floorPos_y - 20, width, floorPos_y - 20, width, floorPos_y, width - 100, floorPos_y); 
    
    
    //draw tree
    fill(139, 69, 19); 
    rect(treePos_x, treePos_y, 30, 150); 
    fill(34, 139, 34);
    ellipse(treePos_x + 15, treePos_y - 50, 150, 200); 
    ellipse(treePos_x + 15, treePos_y - 150, 120, 200); 
    
    //Canyon
    fill(244, 164, 96); 
    quad(height, floorPos_y + 20, height + 50, floorPos_y, height + 50, height - 50, height, height); 
    quad(width, floorPos_y, width - 100, floorPos_y, width - 100, height - 50, width, height); 
    quad(width - 100, floorPos_y, width - 200, floorPos_y - 20, width - 200,  floorPos_y + 20, width - 100, height - 50); 
    quad(height + 50, floorPos_y, height + 200, floorPos_y - 20, height + 200, floorPos_y + 30, height + 50, height - 50); 
    quad(width - 200, floorPos_y - 20, height + 200, floorPos_y - 10, height + 200, floorPos_y + 10, width - 200,  floorPos_y + 20); 
    fill(0, 255, 255); 
    triangle(height + 200, floorPos_y + 10, width - 200,  floorPos_y + 20, height + 200, floorPos_y + 30); 
    quad(height, height, height + 50, height - 50, width - 100, height - 50, width, height); 
    quad(height + 50, height - 50, height + 200, floorPos_y + 30, width - 200,  floorPos_y + 20, width - 100, height - 50); 
    
    //Mountain
    fill(244, 164, 96);
    triangle(0, height - 500, 100, floorPos_y - 20, 0, floorPos_y - 20); 
    quad(20, height - 400, 60, height - 450, 170, floorPos_y - 20, 100, floorPos_y - 20); 
    quad(50, height - 300, 120, height - 360, 220, floorPos_y - 20, 150, floorPos_y - 20); 
    quad(100, height - 250, 190, height - 300, 320, floorPos_y - 20, 200, floorPos_y - 20);
    fill(105, 105, 105); 
    triangle(0, height - 100, 400, floorPos_y - 20, 0, height); 
    
    //cloud
    fill(255, 255, 255); 
    ellipse(cloud.
    
    
    //collectable
    strokeWeight(3); 
    stroke(240, 248, 255); 
    fill(220, 20, 60); 
    quad(height - 200, height - 50, height - 170, height - 100, height - 80, height - 100, height - 70, height - 50); 
    noFill();
    strokeWeight(3); 
    stroke(255, 69, 0); 
    //curve(height - 200, height - 70, height - 200, height - 120, height - 180, height - 120, height - 180, height - 70); 
    curve(height - 200, height - 70, height - 200, height - 70, height - 200, height - 120, height - 180, height - 120);
    curve(height - 200, height - 70, height - 200, height - 120, height - 180, height - 120, height - 180, height - 70); 
    curve(height - 200, height - 120, height - 180, height - 120, height - 180, height - 70, height - 180, height - 70); 
    fill(255, 255, 0); 
    quad(height - 210, height - 40, height - 220, height - 70, height - 160, height - 70, height - 170, height - 40); 
    
    
    // draw the game character
    noStroke(); 
    fill(220, 220, 220); 
    ellipse(gameChar_x, gameChar_y - 65, 25, 25); 
    fill(0, 0, 0); 
    rect(gameChar_x - 15, gameChar_y - 55, 30, 50); 
    stroke(0, 0, 0); 
    strokeWeight(03); 
    point(gameChar_x, gameChar_y - 65); 
    strokeWeight(01); 
    stroke(255); 
    rect(gameChar_x - 20, gameChar_y - 55, 05, 25);   
    rect(gameChar_x + 15, gameChar_y - 55, 05, 25);
    noStroke(); 
    fill(255, 255, 255); 
    triangle(gameChar_x - 05, gameChar_y - 53, gameChar_x, gameChar_y - 50, gameChar_x - 05, gameChar_y - 47); 
    triangle(gameChar_x + 05, gameChar_y - 53, gameChar_x, gameChar_y - 50, gameChar_x + 05, gameChar_y - 47); 
    fill(119, 136, 153); 
    rect(gameChar_x - 12, gameChar_y - 10, 10, 15); 
    rect(gameChar_x + 02, gameChar_y - 10, 10, 15); 


}

function mousePressed()
{
    gameChar_x = mouseX;
    gameChar_y = mouseY; 
    

}

Answer 1

您有一个语法错误，告诉您使用了一些无效字符。这是因为您没有使用(...) 创建对象，而是使用{...}。

更换

cloud = (pos_x: 200, pos_y: 70, diameter: 130); 

与

cloud = {pos_x: 200, pos_y: 70, diameter: 130}; 

应该可以解决你的语法错误。

您的第二个语法错误来自第 15 行：

var cloudPos_x:

它应该以分号;而不是冒号:结尾。

有很多工具可以检查你的语法，如果没有工具就编写代码通常是个坏主意。 JSHint 是其中之一，但它不是唯一的选择，您应该搜索一个可以轻松使用任何 IDE 或文本编辑器进行编码的选项。