CODEWITHSUNDEEP
javascript
Amber
Amber

Reputation: 25

HTML5/Javascript Game

I'm currently working on a game where I need a bunch of random bubbles to fall, and a rectangle below it that can move to "burst" these bubbles. I have a code currently that is not dropping these bubbles. Can someone tell me where I am going wrong? Here is my code:

var canvasColor;
var x,y,radius,color;
var x=50, y=30;
var bubbles= [];
var counter;
var lastBubble=0;
var steps=0, burst=0, escaped=0;
var xx=200; 
var moveRectangleRight=false;
var moveRectangleLeft=false;


function startGame()
{
    var r, g, b;
    canvasColor= '#f1f1f1';
    x=10;
    y=10;
    radius=10;
    clearScreen();
    counter=0;

    while (counter<100)
    {
        x= Math.floor(450*Math.random()+1);

        r = Math.floor(Math.random()*256);
        g = Math.floor(Math.random()*256);
        b = Math.floor(Math.random()*256);

        color='rgb('+r+','+g+','+b+')';

        bubbles[counter]=new Bubble(x,y,radius,color);
        counter+=1;
    }
    setInterval('drawEverything()',50); 
}

function Bubble(x,y,radius,color)
{   
        this.x=x;
        this.y=y;
        this.radius=radius;
        this.color=color;
        this.active=false;
}

function drawEverything()
{   
    var canvas=document.getElementById('myCanvas');
    var context= canvas.getContext('2d');

    steps+=1;
    clearScreen();

    if (steps%20==0 && lastBubble <100) {
        bubbles[lastBubble].active=true;
        lastBubble+=1;
    }

    drawRectangle();
    counter=0;

    while(counter<100)
        {
        if (bubbles[counter].active==true) {
            context.fillStyle= bubbles[counter].color;
            context.beginPath();
            context.arc(bubbles[counter].x, bubbles[counter].y,
                        bubbles[counter.radius], 0, 2*Math.PI);
            context.fill();
            bubbles[counter].y+=2;
        }

        y=bubbles[counter].y;
        x=bubbles[counter].x;

        if (y>=240 && y<=270 && x>=xx-10 && x<=xx+60)
        {
            bubbles[counter]=false;
        }


        else if (y>=450)
        {
            bubbles[counter]=false;
        }
        counter+=1;
    }
}

function clearScreen ()
{
    var canvas=document.getElementById('myCanvas');
    var context= canvas.getContext('2d');
    context.fillStyle= canvasColor;
    context.fillRect(0,0,450,300);
}


function drawRectangle()
{   var canvas, context;

    if (moveRectangleRight==true && xx<400){
        xx+=20;
    }

    if (moveRectangleLeft==true && xx>0){
        xx-=20;
    }

    canvas=document.getElementById('myCanvas');
    context= canvas.getContext('2d');
    context.fillStyle = 'blue';
    context.fillRect(xx,250,50,10);

}

function moveLeft () {
    moveRectangleLeft=true;
}

function moveRight() {
    moveRectangleRight=true;
}

function stopMove () {
    moveRectangleRight=false;
    moveRectangleLeft=false;
}

Upvotes: 0

Views: 59

Answers (2)

Amber
Amber

Reputation: 25

A bracket was located in the wrong place, and this solved the problem.

Upvotes: 0

A.J. Uppal
A.J. Uppal

Reputation: 19264

Your problem is that you initialize counter as 1, so when you add items to counter, you begin with the index of 1, which is actually the 2nd item. Thus, when you try to access bubbles[0], it returns undefined. Instead, initialize counter as 0.

Upvotes: 1

Related Questions