Assignment due soon i need help pls

[codinghelppls12009]

I have an assignment due and I need help within the next 5 hours. I am desperate pls help me. I will fail,.

I feel like it all SHOULD work but it doesn’t. Please help me.

What I need help with:
my bee picture deletes itself???
flowers won’t fall???
text is not in right place???
when flower is collided with player/bee, error involving ‘width’ not being found or something comes up. ???

I have spent many many hours trying to figure it out. It won’t work and now I’m in a stage of extreme stress
If you help me I’ll love you forever <3

// Set up Arrays for images and image positions + imageDY velocity
let images = new Array(30);
let imageX = new Array(30);
let imageY = new Array(30);
let imageDY = new Array(30);

// Time counter
let counter = 0;
// Set up starting amounts
let honey = 100;
let carry = 0;
let pollen = 0;

// Position of bee player
let x = 0;
let y = 0;

// Bee width and height
let w1 = 120;
let h1 = 120;

// Image widths and heights
let w2 = 100;
let h2 = 100;

// Hive coordinates
let x1 = 1420;
let y1 = 870;
// Pot coordinates
let x2 = 310;
let y2 = 970;

// Width and Height of canvas
let width = 1920;
let height = 1200;

// Starting score
var score = 0;
//var ctx = myGameArea.context;
//let myGameArea = (1920, 1200);

// All variables
var distance;
var hill;
var cloud1;
var cloud2;
var blue;
var purple;
var tree;
var bear;
var pot;
var hive;
var bee;
var bee2;
var ms0;
var ms1;
var ms2;
var ms3;

// Preload all images (using variable names)
function preload() {
    hill = loadImage("../images/hill.jpg");
    cloud1 = loadImage("../images/cloud.jpg");
    cloud2 = loadImage("../images/cloud2.jpg");
    blue = loadImage("../images/flowerblue.jpg");
    purple = loadImage("../images/flowerpurple.jpg");
    //background flowers = arrays
    images[0] = loadImage("../images/flowerred.jpg");
    images[1] = loadImage("../images/flowerorange.jpg");
    images[2] = loadImage("../images/floweryellow.jpg");
    images[3] = loadImage("../images/flowerorange.jpg");
    images[4] = loadImage("../images/floweryellow.jpg");
    images[5] = loadImage("../images/flowerred.jpg");
    images[6] = loadImage("../images/floweryellow.jpg");
    images[7] = loadImage("../images/flowerorange.jpg");
    images[8] = loadImage("../images/floweryellow.jpg");
    images[9] = loadImage("../images/flowerred.jpg");
    images[10] = loadImage("../images/flowerred.jpg");
    images[11] = loadImage("../images/flowerorange.jpg");
    images[12] = loadImage("../images/floweryellow.jpg");
    images[13] = loadImage("../images/flowerorange.jpg");
    images[14] = loadImage("../images/floweryellow.jpg");
    images[15] = loadImage("../images/flowerred.jpg");
    images[16] = loadImage("../images/floweryellow.jpg");
    images[17] = loadImage("../images/flowerorange.jpg");
    images[18] = loadImage("../images/floweryellow.jpg");
    images[19] = loadImage("../images/flowerred.jpg");
    images[20] = loadImage("../images/floweryellow.jpg");
    images[21] = loadImage("../images/flowerorange.jpg");
    images[22] = loadImage("../images/floweryellow.jpg");
    images[23] = loadImage("../images/flowerred.jpg");
    images[24] = loadImage("../images/flowerred.jpg");
    images[25] = loadImage("../images/flowerorange.jpg");
    images[26] = loadImage("../images/floweryellow.jpg");
    images[27] = loadImage("../images/flowerorange.jpg");
    images[28] = loadImage("../images/floweryellow.jpg");
    images[29] = loadImage("../images/flowerred.jpg");
    tree = loadImage("../images/tree.jpg");
    bear = loadImage("../images/bear.jpg");
    pot = loadImage("../images/jarempty.jpg.png");
    hive = loadImage("../images/beehive.jpg");
    bee = loadImage("../images/bee.jpg"); // right bee
    bee2 = loadImage("../images/bee2.jpg.png"); // left bee
    ms0 = loadImage("../images/measuring0.jpg");
    ms1 = loadImage("../images/measuring1.jpg");
    ms2 = loadImage("../images/measuring2.jpg");
    ms3 = loadImage("../images/measuring3.jpg");
}

/* img(id="bee" src="../images/bee.jpg" style="width:120px");
img(id="bee2" src="../images/bee2.jpg.png" style="width:120px"); */

function setup() {
    // Canvas size
    createCanvas(1920, 1200);
    
    // Falling flowers random starting positions between pot and tree
    for (let i = 0; i < imageX.length; i++) {
        imageX[i] = random(440, 1310);
        imageY[i] = random(-1300, -100);
        imageDY[i] = random(3, 5);
    }
}

function draw() {
    // Light blue background
    background("#44b1f4");
    
    //drawScore();
    
    // Start time count / framecount
    counter++;
    // Start score (+1 each second)
    //score++;
    
    // All still initial images
    image(hill, 0, 0, 1920, 1200);
    image(cloud1, 300, 50, 1000, 200);
    image(cloud2, 750, 130, 530, 170);
    image(cloud2, 100, 170, 700, 300);
    image(blue, 200, 700, 20, 20);
    image(blue, 410, 800, 24, 24);
    image(blue, 500, 680, 18, 18);
    image(blue, 600, 645, 12, 12);
    image(blue, 705, 785, 22, 22);
    image(blue, 850, 665, 15, 15);
    image(blue, 1000, 900, 28, 28);
    image(blue, 1002, 750, 21, 21);
    image(blue, 1100, 800, 25, 25);
    image(blue, 1200, 720, 17, 17);
    image(blue, 1300, 800, 18, 18);
    image(blue, 1350, 810, 19, 19);
    image(purple, 280, 735, 15, 15);
    image(purple, 400, 800, 12, 12);
    image(purple, 500, 650, 10, 10);
    image(purple, 525, 700, 13, 13);
    image(purple, 600, 900, 16, 16);
    image(purple, 700, 650, 8, 8);
    image(purple, 715, 655, 9, 9);
    image(purple, 800, 812, 12, 12);
    image(purple, 900, 700, 10, 10);
    image(purple, 905, 680, 8, 8);
    image(purple, 1112, 840, 13, 13);
    image(purple, 1300, 700, 8, 8);
    image(purple, 1350, 714, 9, 9);
    image(purple, 1410, 910, 12, 12);
    image(tree, 1310, 200, 600, 1000);
    image(bear, 13, 602, 300, 475);    
    image(pot, x2, y2, 130, 150);    
    image(hive, x1, y1, 100, 100);
    image(ms0, 1525, 830, 70, 170);
    
    // Three shapes for background effect
    fill(color="#f47742");
    ellipse(1710, 467, 20, 23);
    fill(color="#f47742");
    ellipse(1670, 567, 20, 23);
    fill(color="#f47742");
    ellipse(1800, 700, 20, 23);
    fill(color="#3d97ce");
    rect(440, 0, 870, 5);
    fill(color="#050590");
    line(440, 6, 1310, 6);
    
    text(honey, 360, 1035, 15, 15);
    //document.getElementById('bee').src='../images/bee.jpg' = img();
    if (bee != undefined) {
        image(bee, x, y, w1, h1);
    }
    if (bee2 != undefined) {
        image(bee2, x, y, w1, h1);
    }
    // Arrow keys + left/right bee image
    if (keyIsDown(RIGHT_ARROW) && keyIsDown(UP_ARROW)) {
        bee2 = undefined;
        if (bee != undefined) {
            image(bee, x, y, w1, h1);
            x += 5;
            y -= 5;
        }
    } else if (keyIsDown(RIGHT_ARROW) && keyIsDown(DOWN_ARROW)) {
        bee2 = undefined;
        if (bee != undefined) {
            image(bee, x, y, w1, h1);
            x += 5;
            y += 5;
        }
    } else if (keyIsDown(RIGHT_ARROW)) {
        bee2 = undefined;
        if (bee != undefined) {
            image(bee, x, y, w1, h1);
            x += 5;
        }
    }
    if (keyIsDown(LEFT_ARROW) && keyIsDown(UP_ARROW)) {
        if (bee2 != undefined) {
            image(bee2, x, y, w1, h1);
            bee = undefined;
            x -= 5;
            y -= 5;
        }
    } else if (keyIsDown(LEFT_ARROW) && keyIsDown(DOWN_ARROW)) {
        bee = undefined;
        if (bee2 != undefined) {
            image(bee2, x, y, w1, h1);
            x -= 5;
            y += 5;
        }
    } else if (keyIsDown(LEFT_ARROW)) {
        bee = undefined;
        if (bee2 != undefined) {
            image(bee2, x, y, w1, h1);
            x -= 5;
        }
    } if (keyIsDown(UP_ARROW)) {
        if (bee != undefined) {
            image(bee, x, y, w1, h1);
            bee2 = undefined;
            y -= 5;
        }
        if (bee2 != undefined) {
            image(bee2, x, y, w1, h1);
            bee = undefined;
            y -= 5;
        }
    } if (keyIsDown(DOWN_ARROW)) {
        if (bee != undefined) {
            image(bee, x, y, w1, h1);
            bee2 = undefined;
            y += 5;
        }
        if (bee2 != undefined) {
            image(bee2, x, y, w1, h1);
            bee = undefined;
            y += 5;
        }
    }
    
    // Set up border for canvas size - player can't leave screen
    if (x > 1800) {
        x = 1799;
    } if (x < 0) {
        x = 1;
    } if (y > 1100) {
        y = 1099;
    } if (y < 0) {
        y = 1;
    }
    
    // Set falling flowers' velocities
    for (let i = 0; i < 30; i++) {
        if (images[i] != undefined) {
            imageY[i] += imageDY[i];
        }
    }
    
    // Falling flowers
    for (let i = 0; i < 30; i++) {
        if (images[i] != undefined) {
            image(images[i], imageX[i], imageY[i], w2, h2);

            // Don't allow falling flowers to leave screen.
            if (imageY[i] <= height - 100) {
                imageY[i] = 1119;
            }
        }
    }

    // Delete images once they reach the bottom of the screen
    for (let i = 0; i < imageX.length; i++) {
        if (imageY[i] == height - 100 - 1) {
        images[i] = undefined;
        }
    }

    for (let i = 0; i < imageX.length; i++) {
        // When bee touches falling flower...
        if (dist(x, y, imageX[i], imageY[i]) < 5) {
            if (carry == 100 || pollen == 1) {
                // ...nothing happens
            } else {
                // ...delete flower image and increase score by 1
                images[i] = undefined;
                score++;

                // PLUS: add certain amount of pollen depending on how much pollen is already collected, and change measurement image
                if (pollen == 0) {
                    pollen += 1/3;
                    image(ms1, 1525, 830, 70, 170);
                } else if (pollen == 1/3) {
                    pollen += 1/3;
                    image(ms2, 1525, 830, 70, 170);
                } else if (pollen == 2/3) {
                    pollen += 1/3;
                    image(ms3, 1525, 830, 70, 170);
                }
            }
        }
    }
    
    // Distances between hive and pot respectively
    distance1 = dist(x, y, x1, y1)
    distance2 = dist(x, y, x2, y2)
    
    // When pollen is full and the bee is on the hive and spacebar is pressed and carry of pollen = 0...
    if (pollen == 3/3 && distance1 < 1 && keyCode == 32 && carry == 0) {
        // ...minus all pollen and add 100 carry
        pollen -= 3/3;
        carry += 100;
    }
    
    // When carry is full and bee is on pot and spacebar is pressed...
    if (carry == 100 && distance2 < 2 && keyCode == 32) {
        // ...minus all carry and add certain amount of honey to pot
        carry -= 100;
        
        if (honey < 66) {
            honey += 33;
        } else if (honey == 66) {
            honey += 34;
        } else if (honey > 66) {
            honey = 100;
        }
    }
    
   /*  setInterval(honey, 1000);
    
    function honey() {
        for (let counter = 0; counter < 100; counter++) {
            honey -= 1;
            counter += 1;
        }
        if (counter >= 100) {
            for (let counter = 100; counter >= 100; counter++) {
                honey -= 1;
                counter += 1;
            }
        }
    } */
    
    // Don't allow honey to go over 100 (100%)
    if (honey > 100) {
        honey = 100;
    }
    
    // If honey is less than or equal to '20', show 'LOW HONEY' in red letter next to pot
    if (honey <= 20) {
        document.getElementById("lowhoney").innerHTML = 'LOW HONEY';
    }
    
    // If honey equals '0', game over and show 'GAME OVER' middle of screen and stop gameplay
    if (honey <= 0) {
        honey = 0;
        document.getElementById("gameover").innerHTML = 'GAME OVER';
        counter = 0;
    } else if (frameCount >= 0) { // Else, honey must decrease every second
        honey -= 0.017;
    }
    
    // Reset counter every 10000 frames to allow for new flowers
    /* if (frameCount >= 10000) {
        counter = 0;
    }  */  
    
    // If pollen is full (100%), show 'FULL!' in Gold letters next to hive/measurement
    if (pollen == 100) {
        document.getElementById("fullpollen").innerHTML = 'FULL!';
    }
}

/* function drawScore() {
    ctx.font = "30px Arial";
    ctx.fillStyle = "#0095DD";
    ctx.fillText("Score: "+score, 8, 20);
} */

[Kevin]

You’ll have much better luck if you break your problem down into smaller steps and take those steps on one at a time.

You’ll find more useful information here:

Guidelines—Asking Questions

Summary (TL;DR) Ask complete questions to get better answers! Be specific. For example: I want to load an image. I tried using createImg() , and I expected the image to be on canvas, but what happened instead was the image showing up below the canvas. Isolate your problem and work in small steps. Share only the code directly related to your problem if it is part of a bigger project, and if something isn’t working, try the smallest code that could do the thing you want. Can we run your code …

We can’t run your code because we don’t have all of the images you’re using. Could you try to narrow your problem down to a MCVE that focuses on just one problem, without any extra code?

You’ll probably have to do some debugging. Which line of code is behaving differently from what you expected? Also make sure to check your JavaScript console for errors.

If you’re stressing out, one of the best things you can do is step away from the computer for a while. Go on a walk or take a shower, and then come back and try to narrow your problem down to a smaller example program. Good luck!

[codinghelppls12009]

Thank you for your reply.

I’m having problem with the following piece of code… The variables ‘bee’ (image of right-facing bee) and ‘bee2’ (image of left-facing bee) are supposed to swap when either the left or right arrow keys are pressed. I have tried a few methods, now resorting to the ‘undefined’ and ‘!= undefined’ method. However, when I start the game, if I press either the left or right arrowkey first, once I try pressing the other direction key, the bee image/s disappear completely and I assume they just aren’t there. (sorry it’s a bit much for the code)

   if (bee != undefined) {
        image(bee, x, y, w1, h1);
    }
    if (bee2 != undefined) {
        image(bee2, x, y, w1, h1);
    }
    // Arrow keys + left/right bee image
    if (keyIsDown(RIGHT_ARROW) && keyIsDown(UP_ARROW)) {
        bee2 = undefined;
        if (bee != undefined) {
            image(bee, x, y, w1, h1);
            x += 5;
            y -= 5;
        }
    } else if (keyIsDown(RIGHT_ARROW) && keyIsDown(DOWN_ARROW)) {
        bee2 = undefined;
        if (bee != undefined) {
            image(bee, x, y, w1, h1);
            x += 5;
            y += 5;
        }
    } else if (keyIsDown(RIGHT_ARROW)) {
        bee2 = undefined;
        if (bee != undefined) {
            image(bee, x, y, w1, h1);
            x += 5;
        }
    }
    if (keyIsDown(LEFT_ARROW) && keyIsDown(UP_ARROW)) {
        if (bee2 != undefined) {
            image(bee2, x, y, w1, h1);
            bee = undefined;
            x -= 5;
            y -= 5;
        }
    } else if (keyIsDown(LEFT_ARROW) && keyIsDown(DOWN_ARROW)) {
        bee = undefined;
        if (bee2 != undefined) {
            image(bee2, x, y, w1, h1);
            x -= 5;
            y += 5;
        }
    } else if (keyIsDown(LEFT_ARROW)) {
        bee = undefined;
        if (bee2 != undefined) {
            image(bee2, x, y, w1, h1);
            x -= 5;
        }
    } if (keyIsDown(UP_ARROW)) {
        if (bee != undefined) {
            image(bee, x, y, w1, h1);
            bee2 = undefined;
            y -= 5;
        }
        if (bee2 != undefined) {
            image(bee2, x, y, w1, h1);
            bee = undefined;
            y -= 5;
        }
    } if (keyIsDown(DOWN_ARROW)) {
        if (bee != undefined) {
            image(bee, x, y, w1, h1);
            bee2 = undefined;
            y += 5;
        }
        if (bee2 != undefined) {
            image(bee2, x, y, w1, h1);
            bee = undefined;
            y += 5;
        }
    }

---

Another problem I’m having, which I didn’t have before (and I can’t for the life of me remember what I had before), is the flower images (array) aren’t falling from off-screen -y coordinate down to the bottom of the screen. It worked before. I’m not sure why it isn’t working now. Here are the bits of code I think are relevant to the question, in order…

Global variables in sketch.js ()

// Set up Arrays for images and image positions + imageDY velocity
let images = new Array(30);
let imageX = new Array(30);
let imageY = new Array(30);
let imageDY = new Array(30);

(then, in preload I preloaded each image 0 to 29 individually)

Then, in setup…

// Falling flowers random starting positions between pot and tree
    for (let i = 0; i < imageX.length; i++) {
        imageX[i] = random(440, 1310);
        imageY[i] = random(-1300, -100);
        imageDY[i] = random(3, 5);
    }

 // Set falling flowers' velocities
    for (let i = 0; i < 30; i++) {
        if (images[i] != undefined) {
            imageY[i] += imageDY[i];
        }
    }
    
    // Falling flowers
    for (let i = 0; i < 30; i++) {
        if (images[i] != undefined) {
            image(images[i], imageX[i], imageY[i], w2, h2);

            // Don't allow falling flowers to leave screen.
            if (imageY[i] <= height - 100) {
                imageY[i] = 1119;
            }
        }
    }

---

The last problem I’ll ask for help with as of now, is the falling flowers (when they used to fall) …when the bee image (player) collided with only one flower (supposed to collide with any to affect a score/ amount of ‘pollen’ variable) many flowers would delete and the game would stop, and error would appear involving the ‘width’ of something being off… Just very confusing… Here’s the bit of code I feel is relevant:

for (let i = 0; i < imageX.length; i++) {
        // When bee touches falling flower...
        if (dist(x, y, imageX[i], imageY[i]) < 5) {
            if (carry == 100 || pollen == 1) {
                // ...nothing happens
            } else {
                // ...delete flower image and increase score by 1
                images[i] = undefined;
                score++;

                // PLUS: add certain amount of pollen depending on how much pollen is already collected, and change measurement image
                if (pollen == 0) {
                    pollen += 1/3;
                    image(ms1, 1525, 830, 70, 170);
                } else if (pollen == 1/3) {
                    pollen += 1/3;
                    image(ms2, 1525, 830, 70, 170);
                } else if (pollen == 2/3) {
                    pollen += 1/3;
                    image(ms3, 1525, 830, 70, 170);
                }
            }
        }
    }

I would greatly appreciated help! Thank you.

[TfGuy44]

Bees problem: I would NOT mess with your bee and bee2 variables. Those are your loaded images!

Instead, I would add additional (boolean) variables that track if a right-facing or left-facing bee should appear

var left_bee_visible = true;
var right_bee_visible = false; 

function swap_bee_direction(){
  if( left_bee_visible ){
    left_bee_visible = false;
    right_bee_visible = true;
  } else {
    left_bee_visible = true;
    right_bee_visible = false;
  }
}

if( left_bee_visible ){
  image( bee, ... );
}
if( right_bee_visible ){
  image( bee2, ... );
}

[TfGuy44]

Flower problem: Again, I would not rely on checking it your images are defined or not. Just define them in preload and always leave them defined.

There’s probably no need to load the same image file 15 times. Since each flower is tied to an index in the arrays of position variables, you can just use the value of i to alternate between them:

for( var i = 0; i < 30; i++){
  flowersY[i] += flowersDY[i];
  if( flowersY[i] > height - 100) { // Check your >= vs <= here! I think you flipped it!
    flowersY[i] = height - 100;  // This is much more understandable than a weird constant.
  }
  if( i%2 == 0 ){
    image( flower_yellow, flowersX[i], flowersY[i] );
  } else {
    image( flower_orange, flowersX[i], flowersY[i] );
  }
} // End of loop.

[codinghelppls12009]

Thank you so much. You’ve helped a lot!

In reference to the flower problem, I’ve got them working again (thanks!), but now the previous problem where when the bee image (player) collides with only a certain flower (should be any flower…) Uncaught TypeError: Cannot read property 'width' of undefined comes up…

Any way to fix this? Again, I researched and couldn’t find any help.

[TfGuy44]

I think we’re way past on time right now (sorry, I had to go…), but you were probably trying to access the width of a flower image that got marked as undefined.

Traditionally, you only have one copy of each image you want to use. Any time you need to draw it, just use the same image. This is why it’s weird that you were loading the yellow and orange flowers 15 times each.

It makes a lot more sense to have the one image loaded, and then a boolean for each flower that determines if it is drawn or not.

If you had posted more than 5 hours before you assignment was due we could have helped more. Ideally you want to also start programming using objects, not multiple arrays. If you had written this with objects from the start, it would have been much easier…

[codinghelppls12009]

Just to thank you for your help and to update of course. I got a bit of an extension (was in hospital that week, that’s why I had so much to do) but I got help from the lecturer and ultimately got a 98%. Thank you so much!

[Chrisir]

That is really great to hear and thanks for telling us!

Chrisir