我的碰撞代码有问题

Question

I am using CodeHs which uses very basic JavaScript. No HTML or Design modes yet and it's only JS Script. My teacher game me this collision code:

function checkCircleCollision (circle1, circle2) {

    var dx = circle1.x - circle2.x;

    var dy = circle1.y - circle2.y;

    var distance = Math.sqrt(dx * dx + dy * dy);



    if (distance < circle1.radius + circle2.radius) {

        return true;

    }

    return false;

}

Example of how to use collision functions:

The above functions will give back a value of either true or false, so you can use them with an If Statement.

Immediately after moving objects, you can check if two objects are touching:

if (checkCollision(player,enemy))

    player.setColor(Color.red);

else

player.setColor(Color.black);.

But when I put it in my program it is saying that x and y that is being used for dx and dy is not defined. Without this, my game can't run. Here is all of my code:

//Variables
var brown = new Color(139 ,69 ,19);
var START_RADIUS = 1;
var DELAY = 100;
var INCREMENT = 1;
var CHANGE_COLORS_AT = 10;
var MAX_RADIUS = 100;
var counter = 0;
var player;
var finishLine;
var RADIUS = 20;
var obstacle;
var obstacle2;
var obstacle3;
var dx = 0;
var dy = 4;
var dx2 = 0;
var dy2 = -4;
var dx3 = 0;
var dy3 = 7;
var x;
var y;

//Start Function
function start(){
    var wannaStart = readLine("Do you wanna start playing Impossible Dodgeball? ")
    if(wannaStart == "Yes" || wannaStart == "yes" || wannaStart == "Absolutely!"){
        startGame();
        println("Get to the finish line without getting hit. Enjoy! ");
    } else {
        println("Enjoy this blank canvas then!");
    }
}

//Starts the game if the user responded to correctly to the if statement above
function startGame(){
//    checkForCollisions();
    
    drawBackground();
    
    player = drawCircle(20, Color.red, 25, getHeight()/2);
    
    keyDownMethod(move);
    
    drawObstacles();
}

//Draws the background
function drawBackground(){
    drawRectangle(getWidth(), 250, 0, 0, Color.blue);
    drawSun();
    drawRectangle(getWidth(), getHeight()/2, 0, 300, brown);
    drawRectangle(getWidth(), 50, 0, 250, Color.green);
    
    finishLine = new Rectangle(10, getHeight());
    finishLine.setPosition(350, 0);
    finishLine.setColor(Color.white);
    add(finishLine);

    drawRectangle(10, getHeight(), 360, 0, Color.black);
    drawRectangle(10, getHeight(), 370, 0, Color.white);
    drawRectangle(10, getHeight(), 380, 0, Color.black);
    drawRectangle(10, getHeight(), 390, 0, Color.white);
}

//Draws the rising sun in the background
function drawSun(){
    circle = new Circle(START_RADIUS);
    circle.setPosition(getWidth()/2, getHeight()/2+10);
    add(circle);
    setTimer(draw, 50);
}

//Draws all the moving obstacles
function drawObstacles(){
    drawObstacle1();
    drawObstacle2();
    drawObstacle3();
}

//I was unable to get the collision code for the player and the obstacles to work :(
/*function checkForCollisions(){
    if(checkCircleCollision(player, obstacle) == true){
        println("You lose");
    }
}

function checkCircleCollision (circle1, circle2) {
    var dx4 = circle1.x - circle2.x;
    var dy4 = circle1.y - circle2.y;
    var distance = Math.sqrt(dx4 * dx4 + dy4 * dy4);
    if (distance < circle1.radius + circle2.radius) {
        return true;
    }
    return false;
}*/

//Draws the first obstacle
function drawObstacle1(){
    obstacle = new Circle(RADIUS);
    obstacle.setPosition(100, 100);
    obstacle.setColor(Randomizer.nextColor());
    add(obstacle);
    
    setTimer(draw2, 20);
}

//Draws the second obstacle
function drawObstacle2(){
    obstacle2 = new Circle(30);
    obstacle2.setPosition(175, 300);
    obstacle2.setColor(Randomizer.nextColor());
    add(obstacle2);
    
    setTimer(draw3, 20);
}

//Draws the third obstacle
function drawObstacle3(){
    obstacle3 = new Circle(10);
    obstacle3.setPosition(240, 50);
    obstacle3.setColor(Randomizer.nextColor());
    add(obstacle3);
    
    setTimer(draw4, 20);
}

//Moves the obstacle
function draw2(){
    checkForWalls();
    obstacle.move(dx, dy);
}

//Same as above but for obstacle 2
function draw3(){
    checkForWalls2();
    obstacle2.move(dx2, dy2);
}

//Same as above but for obstacle 3
function draw4(){
    checkForWalls3();
    obstacle3.move(dx3, dy3);
}

//Bounces obstacle 1 off of the walls
function checkForWalls(){
    //bottom wall
    if(obstacle.getY() + obstacle.getRadius() > getHeight()){
        dy = -dy;
    }
    //top wall
    if(obstacle.getY() - obstacle.getRadius() < 0){
        dy = -dy;
    }
}

//Bounces obstacle 2 off of the walls
function checkForWalls2(){
    //bottom wall
    if(obstacle2.getY() + obstacle2.getRadius() > getHeight()){
        dy2 = -dy2;
    }
    //top wall
    if(obstacle2.getY() - obstacle2.getRadius() < 0){
        dy2 = -dy2;
    }
}

//Bounces obstacle 3 off of the walls
function checkForWalls3(){
    //bottom wall
    if(obstacle3.getY() + obstacle3.getRadius() > getHeight()){
        dy3 = -dy3;
    }
    //top wall
    if(obstacle3.getY() - obstacle3.getRadius() < 0){
        dy3 = -dy3;
    }
}

//Provided by CodeHS
function drawRectangle(width, height, x, y, Color){
    var rect = new Rectangle(width, height);
    rect.setPosition(x, y);
    rect.setColor(Color);
    add(rect);
}

//Provided by CodeHS
function drawCircle(radius, Color, x, y){
    var circle = new Circle(radius);
    circle.setColor(Color);
    circle.setPosition(x, y);
    add(circle);
    
    return(circle);
}

//Provided by CodeHs
function draw(){
    START_RADIUS = START_RADIUS + INCREMENT;    
    circle.setRadius(START_RADIUS);
    circle.setColor(Color.yellow);
    counter++;

    if(counter == MAX_RADIUS){
    counter = 0;
    START_RADIUS = 1;
    }
}

//Moves the player and if it hits the finish line, spams the message "You win!"
function move(e){
    if(e.keyCode == Keyboard.LEFT){
        player.move(-5, 0);
        setTimer(printWin, DELAY);
    }
    if(e.keyCode == Keyboard.UP){
        player.move(0, -5);
        setTimer(printWin, DELAY);
    }
    if(e.keyCode == Keyboard.DOWN){
        player.move(0, 5);
        setTimer(printWin, DELAY);
    }
    if(e.keyCode == Keyboard.RIGHT){
        player.move(5, 0);
        setTimer(printWin, DELAY);
    }
}

//Prints the win message once player wins
function printWin(){
    if(player.getX() >= finishLine.getX()) {
        var won = true;
    }
    if(won == true){
        println("You win!");
    }
}

Please remember that it is very basic code (no HTML or design) and I'm new.

Answer 1

The way to get an object position is to use object.getX() and object.getY() . Anyways, I made it spam you lose when you touch a ball with your collision code. Here is the fixed game:

//Variables
var brown = new Color(139 ,69 ,19);
var START_RADIUS = 1;
var DELAY = 100;
var INCREMENT = 1;
var CHANGE_COLORS_AT = 10;
var MAX_RADIUS = 100;
var counter = 0;
var player;
var circle;
var finishLine;
var RADIUS = 20;
var obstacle;
var obstacle2;
var obstacle3;
var dx = 0;
var dy = 4;
var dx2 = 0;
var dy2 = -4;
var dx3 = 0;
var dy3 = 7;
var x;
var y;

//Start Function
function start(){
    var wannaStart = readLine("Do you wanna start playing Impossible Dodgeball? ")
    if(wannaStart == "Yes" || wannaStart == "yes" || wannaStart == "Absolutely!"){
        startGame();
        println("Get to the finish line without getting hit. Enjoy! ");
    } else {
        println("Enjoy this blank canvas then!");
    }
}

//Starts the game if the user responded to correctly to the if statement above
function startGame(){
//    checkForCollisions();
    
    drawBackground();
    
    player = drawCircle(20, Color.red, 25, getHeight()/2);
    
    keyDownMethod(move);
    
    drawObstacles();
}

//Draws the background
function drawBackground(){
    drawRectangle(getWidth(), 250, 0, 0, Color.blue);
    drawSun();
    drawRectangle(getWidth(), getHeight()/2, 0, 300, brown);
    drawRectangle(getWidth(), 50, 0, 250, Color.green);
    
    finishLine = new Rectangle(10, getHeight());
    finishLine.setPosition(350, 0);
    finishLine.setColor(Color.white);
    add(finishLine);

    drawRectangle(10, getHeight(), 360, 0, Color.black);
    drawRectangle(10, getHeight(), 370, 0, Color.white);
    drawRectangle(10, getHeight(), 380, 0, Color.black);
    drawRectangle(10, getHeight(), 390, 0, Color.white);
}

//Draws the rising sun in the background
function drawSun(){
    circle = new Circle(START_RADIUS);
    circle.setPosition(getWidth()/2, getHeight()/2+10);
    add(circle);
    setTimer(draw, 50);
}

//Draws all the moving obstacles
function drawObstacles(){
    drawObstacle1();
    drawObstacle2();
    drawObstacle3();
}

//I was unable to get the collision code for the player and the obstacles to work :(

//I fixed it :)
//the fixed code is on line 231
function checkCircleCollision (circle1, circle2) {
    var dx4 = circle1.getX() - circle2.getX();
    var dy4 = circle1.getY() - circle2.getY();
    var distance = Math.sqrt(dx4 * dx4 + dy4 * dy4);
    if (distance < circle1.radius + circle2.radius) {
        return true;
    }
    return false;
}

//Draws the first obstacle
function drawObstacle1(){
    obstacle = new Circle(RADIUS);
    obstacle.setPosition(100, 100);
    obstacle.setColor(Randomizer.nextColor());
    add(obstacle);
    
    setTimer(draw2, 20);
}

//Draws the second obstacle
function drawObstacle2(){
    obstacle2 = new Circle(30);
    obstacle2.setPosition(175, 300);
    obstacle2.setColor(Randomizer.nextColor());
    add(obstacle2);
    
    setTimer(draw3, 20);
}

//Draws the third obstacle
function drawObstacle3(){
    obstacle3 = new Circle(10);
    obstacle3.setPosition(240, 50);
    obstacle3.setColor(Randomizer.nextColor());
    add(obstacle3);
    
    setTimer(draw4, 20);
}

//Moves the obstacle
function draw2(){
    checkForWalls();
    obstacle.move(dx, dy);
}

//Same as above but for obstacle 2
function draw3(){
    checkForWalls2();
    obstacle2.move(dx2, dy2);
}

//Same as above but for obstacle 3
function draw4(){
    checkForWalls3();
    obstacle3.move(dx3, dy3);
}

//Bounces obstacle 1 off of the walls
function checkForWalls(){
    //bottom wall
    if(obstacle.getY() + obstacle.getRadius() > getHeight()){
        dy = -dy;
    }
    //top wall
    if(obstacle.getY() - obstacle.getRadius() < 0){
        dy = -dy;
    }
}

//Bounces obstacle 2 off of the walls
function checkForWalls2(){
    //bottom wall
    if(obstacle2.getY() + obstacle2.getRadius() > getHeight()){
        dy2 = -dy2;
    }
    //top wall
    if(obstacle2.getY() - obstacle2.getRadius() < 0){
        dy2 = -dy2;
    }
}

//Bounces obstacle 3 off of the walls
function checkForWalls3(){
    //bottom wall
    if(obstacle3.getY() + obstacle3.getRadius() > getHeight()){
        dy3 = -dy3;
    }
    //top wall
    if(obstacle3.getY() - obstacle3.getRadius() < 0){
        dy3 = -dy3;
    }
}

//Provided by CodeHS
function drawRectangle(width, height, x, y, Color){
    var rect = new Rectangle(width, height);
    rect.setPosition(x, y);
    rect.setColor(Color);
    add(rect);
}

//Provided by CodeHS
function drawCircle(radius, Color, x, y){
    var circle = new Circle(radius);
    circle.setColor(Color);
    circle.setPosition(x, y);
    add(circle);
    
    return(circle);
}

//Provided by CodeHs
function draw(){
    START_RADIUS = START_RADIUS + INCREMENT;    
    circle.setRadius(START_RADIUS);
    circle.setColor(Color.yellow);
    counter++;

    if(counter == MAX_RADIUS){
    counter = 0;
    START_RADIUS = 1;
    }
}

//Moves the player and if it hits the finish line, spams the message "You win!"
function move(e){
    if(e.keyCode == Keyboard.LEFT){
        player.move(-5, 0);
        setTimer(printWin, DELAY);
    }
    if(e.keyCode == Keyboard.UP){
        player.move(0, -5);
        setTimer(printWin, DELAY);
    }
    if(e.keyCode == Keyboard.DOWN){
        player.move(0, 5);
        setTimer(printWin, DELAY);
    }
    if(e.keyCode == Keyboard.RIGHT){
        player.move(5, 0);
        setTimer(printWin, DELAY);
    }
    
    //lose code implements your collision code to detect if player is touching ball
    if(checkCircleCollision(player, obstacle) == true || checkCircleCollision(player, obstacle2) == true || checkCircleCollision(player, obstacle3) == true){
    setTimer(Fail, DELAY);    
    }
}

//Prints the win message once player wins
function printWin(){
    if(player.getX() >= finishLine.getX()) {
        var won = true;
    }
    if(won == true){
        println("You win!");
    }
}

function Fail(){
    println("You lost!!!");
}