Javascript HTML5编程

Question

我正在开发一个javascript项目并需要一些帮助。我试图创建一个类似于乒乓球游戏但有很多泡泡的Bubble Buster游戏。我尝试用随机颜色在屏幕上创建掉落的气泡（大约100个计数），然后从屏幕上的随机点开始下降。继承人我有什么，我做错了什么？

var canvasColor;
var x,y,radius,color;
var x=50, y=30
var bubbles=[];
var counter;

function startGame()
{
    var r,g,b;
    var canvas, pen;
    //Initialize
    canvasColor = '#EAEDDC';
    x = 10;
    y = 10;
    radius = 10;
    clearScreen();
    setInterval('drawForever()',50);

    //make bubble appear randomly
    x=Math.floor(Math.random()*450)

    //Set up a random color
    r = Math.floor(Math.random()*256);
    g = Math.floor(Math.random()*256);
    b = Math.floor(Math.random()*256);
    pen.fillStyle='rgb('+r+','+g+','+b+')';
    pen.fill();

            while (counter <100)
            {
                bubbles[counter]  = new Bubble(x,y,radius,color);
                counter+=1;
            }
}

function bubbles (x,y,radius,color)
{
    this.x=x;
    this.y=y;
    this.radius=radius;
    this.color=color;
}

function drawForever()
{
    var canvas, pen;

    clearScreen();

        while (counter <100)
        {
            pen.fillstyle(bubbles[counter].color);
            pen.beginPath();
            pen.arc(bubbles[counter].x,
                            bubbles[counter].y,
                            bubbles[counter].radius,
                            0,
                            2*Math.PI);
            pen.fill();

            bubbles[counter].y+=2;
            counter +=1;
        }
}


function drawCircle()
{
    var canvas, pen;

    canvas = document.getElementById('myCanvas');
    pen = canvas.getContext('2d');


    pen.fillStyle = '#b3ffff';
    pen.beginPath();
    pen.arc(x,y,radius,0,2*Math.PI);
    pen.fill();

}

function clearScreen()
{
    var canvas, pen;

    canvas = document.getElementById('myCanvas');
    pen = canvas.getContext('2d');
    pen.fillStyle = canvasColor;
    pen.fillRect(0,0,450,300);

}
function drawShape()
{
    var canvas, pen;

    canvas = document.getElementById('myCanvas');
    pen = canvas.getContext('2d');


    //Draw circle
    pen.fillStyle = '#b3ffff';
    pen.beginPath();
    pen.arc(50,50,25,0,2*Math.PI); //x,y,radius,startangle,endangle
    pen.fill();

}

Answer 1

在你的开始游戏变量中，你没有定义画布和笔。 这应该是正确的代码。

function startGame()
{
    var r,g,b;
    var canvas, pen;

    canvas = document.getElementById('myCanvas');
    pen = canvas.getContext('2d');

    //Initialize
    canvasColor = '#EAEDDC';
    x = 10;
    y = 10;
    radius = 10;
    clearScreen();
    setInterval('drawForever()',50);

    //make bubble appear randomly
    x=Math.floor(Math.random()*450)

    //Set up a random color
    r = Math.floor(Math.random()*256);
    g = Math.floor(Math.random()*256);
    b = Math.floor(Math.random()*256);
    pen.fillStyle='rgb('+r+','+g+','+b+')';
    pen.fill();

            while (counter <100)
            {
                bubbles[counter]  = new Bubble(x,y,radius,color);
                counter+=1;
            }
}