Forum:

Other Languages

Asteroid Game

Ranch Hand

Posts: 53

posted 1 year ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hello,
I hope everyone is doing well.

I am making a game called asteriodGameClone in JavaScript using the P5.js library.
I have 11 steps to get my game running correctly, as expected.
I have successfully completed 3 of my steps.

I need help with the fourth step, which is mentioned below.

Step 4: In sketch.js, complete the inside () function that takes the location of two circles and their diameters and returns true if they overlap, and false otherwise. You could check it works by creating a dummy circle around the mouse and checking if inside () returns true.

The problem with my code is it only returns false when the circles do not overlap, but when the circle overlaps, nothing is returned to my console.

My code and the image of my console are below.

Thank you

image-(9).png

J.McDaniels

Piet Souris

Bartender

Posts: 5567

213

posted 1 year ago

Number of slices to send:

Optional 'thank-you' note:

Send

hi James,

are the arguments when you invoke 'isInside' in line with the parameterlist of the isInside-method?

And a P5vector has a 'dist' method, see the API.

There are three kinds of actuaries: those who can count, and those who can't.

Piet Souris

Bartender

Posts: 5567

213

posted 1 year ago

Number of slices to send:

Optional 'thank-you' note:

Send

Sorry. I got confused. dummySize is a vector, and the radius in the isInside function is dummySize.x, so that should be correct.

What are the values of eartloc and eartsize.x? And do you draw anything in your draw function, to also visually inspect the outcome in your log?

There are three kinds of actuaries: those who can count, and those who can't.

Piet Souris

Bartender

Posts: 5567

213

posted 1 year ago

1
Number of slices to send:

Optional 'thank-you' note:

Send

Well,

had a final look at your post, and I do not know why the console only prints when there is no overlap. Maybe there is a mismatch between the distance and what you draw? I cannot check that, so I made a simple version myself. I use NetBeans as IDE: The problem I encountered was that I thought that the circle-command took a radius as third parameter, but it turned out that it was the diameter, and so I got errors too. Here goes:

index.html:

newjavascript.js

Asteroid.js

There are three kinds of actuaries: those who can count, and those who can't.

James McDaniels

Ranch Hand

Posts: 53

posted 1 year ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hello,

Sorry, let me post all my code.
Check my code below.

Asteriods Games Clone

Thank you

J.McDaniels

James McDaniels

Ranch Hand

Posts: 53

posted 1 year ago

Number of slices to send:

Optional 'thank-you' note:

Send

Step 4: In sketch.js, complete the inside () function that takes the location of two circles and their diameters and returns true if they overlap, and false otherwise. You could check it works by creating a dummy circle around the mouse and checking if inside () returns true.

Working on this step above.
JavaScript(P5.js library)

J.McDaniels

Piet Souris

Bartender

Posts: 5567

213

posted 1 year ago

Number of slices to send:

Optional 'thank-you' note:

Send

James McDaniels wrote:Hello,

Sorry, let me post all my code.
Check my code below.

Asteriods Games Clone

Thank you

You're welcome!

Just looking at your code at CodePen, logged in via my Google-account. Is there a way to run the code from there, or must I copy it to my IDE?

There are three kinds of actuaries: those who can count, and those who can't.

James McDaniels

Ranch Hand

Posts: 53

posted 1 year ago

Number of slices to send:

Optional 'thank-you' note:

Send

I can't get it to run in CodePen for some reason.
So it's better to copy all the code into your IDE.

J.McDaniels

Piet Souris

Bartender

Posts: 5567

213

posted 1 year ago

1
Number of slices to send:

Optional 'thank-you' note:

Send

hi James,

took a little effort, but I got your game up and running. And the good news is: there is nothing wrong with your isInside-function! While running your code, I noticed what I noticed myself last night: if you have the console on, and you see only a part of the output (at least on my limited-size monitor) then something strange happens to the coordinate system, such that you never get an overlap. As said, I got a similar result last night, and therefore, look at the code that I gave, I put a "div id='overlaps'" in the body, and I wrote the result of isInside to that div. Then you do not need the console.

And when you run the code without the console, you see that it works as it should!

To recap:

in the <body> I have

and in the file javascript.js,

and in the initieer-function

in the draw() function at the end:

Now, if I am right, the checkCollisions must do two things:

1) check whether the spaceship collides with an asteroid
2) check whether a bullet collides with an asteroid (and perhaps the spaceship itself?)

To make all that a little more readable, I would suggest to have also an Asteroid class and a Bullet-class, to ease the AsteroidSystem and the BulletSystem.

Let us know how you fare, And the look of the game is very nice indeed!

There are three kinds of actuaries: those who can count, and those who can't.

James McDaniels

Ranch Hand

Posts: 53

posted 1 year ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hi Piet,

Step 4: In sketch.js complete the isInside() function that takes the location of two circles and their diameters and returns true if they overlap, false otherwise. You could check it works, by creating a dummy circle around the mouse and checking if isInside() returns true.

I need Step 4 to work in the sketch, js file only.
The three primary functions the code should be in are function setup(), function draw(), & function isInside(locA, sizeA, locB, sizeB) .

//sketch.js file code is below
var spaceship;
var asteroids;
var atmosphereLoc;
var atmosphereSize;
var earthLoc;
var earthSize;
var starLocs = [];
var dummySize;
var mouseVector;

//////////////////////////////////////////////////
function setup() {
  createCanvas(1200,800);
  spaceship = new Spaceship();
  asteroids = new AsteroidSystem();

//location and size of earth and its atmosphere
  atmosphereLoc = new createVector(width/2, height*2.9);
  atmosphereSize = new createVector(width*3, width*3);
  earthLoc = new createVector(width/2, height*3.1);
  earthSize = new createVector(width*3, width*3);

dummySize = createVector(50, 50); // Size of the dummy circle
  mouseVector = createVector(); // Initialize mouseVector 
}

//////////////////////////////////////////////////
function draw() {
  background(0);
  sky();

spaceship.run();
  asteroids.run();

drawEarth();
  // Update mouseVector with current mouse position
  mouseVector.set(mouseX, mouseY);

// Check if circles overlap and print message
  var overlap = isInside(mouseVector, dummySize, earthLoc, earthSize);

if (overlap) {
    console.log('True');
  } else {
    console.log('False');
  }

checkCollisions(spaceship, asteroids); // function that checks collision between various elements
}

//////////////////////////////////////////////////
//draws earth and atmosphere
function drawEarth(){
  noStroke();
  //draw atmosphere
  fill(0,0,255, 50);
  ellipse(atmosphereLoc.x, atmosphereLoc.y, atmosphereSize.x,  atmosphereSize.y);
  //draw earth
  fill(100,255);
  ellipse(earthLoc.x, earthLoc.y, earthSize.x, earthSize.y);
}

//helper function checking if there's collision between object A and object B
function isInside(locA, sizeA, locB, sizeB)  {
var distBetweenCenters = dist(locA.x, locA.y, locB.x, locB.y);
  var radiusA = sizeA / 2;
  var radiusB = sizeB / 2;
  var radiiSum = radiusA + radiusB;
  var overlap = distBetweenCenters <= radiiSum;
  return overlap;
}

//////////////////////////////////////////////////
function keyPressed(){
  if (keyIsPressed && keyCode === 32){ // if spacebar is pressed, fire!
    spaceship.fire();
  }
}

//////////////////////////////////////////////////
// function that ends the game by stopping the loops and displaying "Game Over"
function gameOver(){
  fill(255);
  textSize(80);
  textAlign(CENTER);
  text("GAME OVER", width/2, height/2)
  noLoop();
}

//////////////////////////////////////////////////
// function that creates a star lit sky
function sky()
{
  push();
  while (starLocs.length<300){
    starLocs.push(new createVector(random(width), random(height)));
  }
  fill(255);
  for (var i=0; i<starLocs.length; i++){
    rect(starLocs[i].x, starLocs[i].y,2,2);
  }

if (random(1)<0.3) starLocs.splice(int(random(starLocs.length)),1);
  pop();
}

J.McDaniels

Piet Souris

Bartender

Posts: 5567

213

posted 1 year ago

Number of slices to send:

Optional 'thank-you' note:

Send

hi James,

there is this slight problem that I work in an IDE that I also use for java (NetBeans). I do not work with the p5-editor, so usually I set up my webpage in my index.html.

As I said, I do not trust the console for this matter, so I have a div on the webpage that I use to display the overlap.

You can do that from the p5-editor (sketch.js) as well. For instance, this would be my sketch

var spaceship;
var asteroids;
var atmosphereLoc;
var atmosphereSize;
var earthLoc;
var earthSize;
var starLocs = [];
var dummySize;
var mouseVector;
let mouseDiameter;

var overlapsDiv;
var canvas;

function setup() {
    overlapsDiv = createDiv();
    overlapsDiv.position(1300, 100); 
    overlapsDiv.style('margin', '20px');
    overlapsDiv.style('border', '2px solid black');
    canvas = createCanvas(1200, 800);
    canvas.position(0, 40);
    spaceship = new Spaceship();
    asteroids = new AsteroidSystem();
    
    //location and size of earth and its atmosphere
    atmosphereLoc = new createVector(width / 2, height * 2.9);
    atmosphereSize = new createVector(width * 3, width * 3);
    earthLoc = new createVector(width / 2, height * 3.1);
    earthSize = new createVector(width * 3, width * 3);

dummySize = createVector(50, 50); // Size of the dummy circle
    mouseVector = createVector(); // Initialize mouseVector
    mouseDiameter = createVector(20, 20);   // could be just an int, though
}

//////////////////////////////////////////////////
function draw() {
    background(0);
    sky();

spaceship.run();
    asteroids.run();

drawEarth();
    // Update mouseVector with current mouse position
    mouseVector.set(mouseX, mouseY);
    
    // draw the mouse
    circle(mouseVector.x, mouseVector.y, mouseDiameter.x);

//Check if circles overlap and print message
    var overlap = isInside(mouseVector, mouseDiameter, earthLoc, earthSize);

if (overlap) {
        overlapsDiv.html('overlaps!!!!!!!');
//    console.log("True");
    } else {
        overlapsDiv.html('No overlap');
//    console.log("False");
    }

//    checkCollisions(spaceship, asteroids); // function that checks collision between various elements
}

You see the overlap-div right of the canvas, nearly at the top, you can see that the isInside works.

There are three kinds of actuaries: those who can count, and those who can't.

It's just like a fortune cookie, but instead of a cookie, it's pie. And we'll call it ... tiny ad:

Gift giving made easy with the permaculture playing cards

https://coderanch.com/t/777758/Gift-giving-easy-permaculture-playing