Question

我正在尝试用javascript制作HTML5游戏。类似于乒乓球，但一旦气泡击中桨或底部屏幕，它就会“爆裂”或消失。我似乎无法让我的代码中的Bubble消失或破灭。有谁可以帮助我？

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 batonMovement = 200;
var moveBatonRight = false;
var moveBatonLeft = false;
function startGame()
{
    var r,g,b;
    var canvas,color;
    //Initialize
    canvasColor = '#EAEDDC';
    x = 10;
    y = 10;
    radius = 10;
    clearScreen();
    counter=0;


    while (counter <100)
    {

                //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);
                color='rgb('+r+','+g+','+b+')';

                bubbles[counter]  = new Bubble(x,y,radius,color);
                counter+=1;

    }
    setInterval('drawForever()',50);
}

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

function drawForever()
{
    var canvas, pen;

    canvas = document.getElementById('myCanvas');
    pen = canvas.getContext('2d');
    steps +=1
    clearScreen();
    if (steps%20==0 && lastBubble < 100){
        bubbles[lastBubble].active=true;
        lastBubble +=1;
    }
    drawBaton();
    counter=0;


    while (counter <100)
    {
            if (bubbles[counter].active==true){
                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;

            }

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

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

    }
}

function clearScreen()
{
    var canvas, pen;

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

}
function drawBaton()
{
    var canvas, pen;
    if (moveBatonLeft == true && batonMovement > 0)
    {
        batonMovement -= 20;
    }
    else if (moveBatonRight == true && batonMovement < 400)
    {
        batonMovement += 20;
    }
//draw Baton (rectangle)
    canvas = document.getElementById('myCanvas');
    pen = canvas.getContext('2d');
    pen.fillStyle = '#0000FF';

    pen.fillRect(batonMovement,250,50,10);

}
function moveLeft()
{
        moveBatonLeft=true;
}
function moveRight()
{
        moveBatonRight=true;
}
function stopMove()
{
    moveBatonLeft=false;
    moveBatonRight=false;
}

以下是HTML代码......

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Bubble Burster</title>
        <script type="text/javascript" src="project.js"></script>
    </head>
    <body onload="startGame();">
        <div style="text-align:center;">
            <h2>Bubble Burster</h2>
            <canvas id="myCanvas" width="450" height="300" style="border:5px solid #000000; background-color: #f1f1f1;">
                Your browser does not support the canvas element.
            </canvas><br>
            <button onmousedown="moveLeft();" onmouseup="stopMove();">LEFT</button>
            <button onmousedown="moveRight();" onmouseup="stopMove();">RIGHT</button><br><br>
            <form>
                <input type="radio" name="difficulty" value="easy" onclick="check(this.value);" checked> Easy &nbsp;&nbsp;
                <input type="radio" name="difficulty" value="moderate" onclick="check(this.value)"> Moderate&nbsp;&nbsp;
                <input type="radio" name="difficulty" value="hard" onclick="check(this.value)"> Hard  <br><br>
            </form>
            <span id="burst">Burst:</span> &nbsp;&nbsp;
            <span id="escaped">Escaped: </span> &nbsp;&nbsp;
            <span id="steps">Steps elapsed:</span> &nbsp;&nbsp;
            <h3 id="output"></h3>
        </div>
    </body>
</html>

Answer 1

您所指的x，y未在drawForever函数中定义。 x和y的全球价值可能不是指正确的泡沫。实际上，y函数中的startGame设置为10，后来从未更改过。您可能还想引用bubbles[counter]而不是bubbles[lastBubble]。如果您进行以下更改，游戏似乎有效，请参考bubbles[counter].x和bubbles[counter].y，而不是x和y。

function drawForever() {
    var canvas, pen;

    canvas = document.getElementById('myCanvas');
    pen = canvas.getContext('2d');
    steps += 1
    clearScreen();
    if (steps % 20 == 0 && lastBubble < 100) {
        bubbles[lastBubble].active = true;
        lastBubble += 1;
    }
    drawBaton();
    counter = 0;


    while (counter < 100) {
        if (bubbles[counter].active == true) {
            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;

        }
        y = bubbles[counter].y;    // ADDED (y was not defined in original code)
        x = bubbles[counter].x;    // ADDED (x was not defined in original code)
        if (y >= 240 && y <= 270 && x >= batonMovement - 10 && x <= batonMovement + 60) {
            bubbles[counter] = false;   // ALTERED (burst the current bubble, not whatever lastBubble refers to

        } else if (y >= 450) {
            bubbles[counter] = false;   // ALTERED (burst the current bubble, not whatever lastBubble refers to
        }
        counter += 1;

    }
}

https://jsfiddle.net/acLot87q/4/

您还应该在每个函数中创建x和y局部变量;他们目前没有达到你想象中的目的。

HTML5 Javascript游戏

1 个答案: