Reputation: 3
I am trying to create a background scenery with objects cloud, mountain, tree, canyon etc. Everything is going well, except when I reached creating the cloud object. I have declared the var cloud
for the cloud object and initialized the values of the coordinates of cloud
in the setup function as cloud = (pos_x: 200, pos_y: 70, diameter: 130);
. However, when I try to create the cloud object with the ellipse shape in the draw()
function as mentioned below, it gives me 2 problems:
cloud.pos_x
when I enter cloud.
in the ellipse();
*sketch.js:23 Uncaught Syntax Error: Unexpected token ':'*
(dot on top of each other), after I run the code.I hope I have given you enough details to understand the issue. Thank you.
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;
}
Upvotes: 0
Views: 392
Reputation: 2886
You have a syntax error which tells you that you used some invalid character. Here it is because you don't create an object with (...)
but with {...}
.
Replacing
cloud = (pos_x: 200, pos_y: 70, diameter: 130);
with
cloud = {pos_x: 200, pos_y: 70, diameter: 130};
Should solve your syntax error.
Your second syntax error comes from line 15:
var cloudPos_x:
It should end with a semicolon ;
not a colon :
.
There are a lot of tools to check your syntax and it is usually a bad idea to code without one. JSHint is one of them but it's not the only option, you should search for one which you can use easily with whatever IDE or text editor you are using to code.
Upvotes: 1