Fatal编程技术网

HTML5JavaScript游戏

javascript html

HTML5JavaScript游戏,javascript,html,Javascript,Html,我正在尝试用javascript制作一个HTML5游戏。与乒乓球相似，但一旦泡泡击中球拍或底部屏幕，它就会“破裂”或消失。我似乎无法让代码中的气泡消失或破灭。有人能帮我吗 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 m

我正在尝试用javascript制作一个HTML5游戏。与乒乓球相似，但一旦泡泡击中球拍或底部屏幕，它就会“破裂”或消失。我似乎无法让代码中的气泡消失或破灭。有人能帮我吗

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;
}

var canvasColor；
变量x，y，半径，颜色；
变量x=50，y=30
风险值=[]；
var计数器；
var=0；
变量步长=0，突发=0，转义=0；
var batonMovement=200；
var moveBatonRight=false；
var moveBatonLeft=false；
函数startName（）
{
var r，g，b；
var画布，颜色；
//初始化
画布颜色='#EAEDDC'；
x=10；
y=10；
半径=10；
清除屏幕（）；
计数器=0；
while（计数器0）
{
指挥棒移动-=20；
}
else if（moveBatonRight==true&&batonMovement<400）
{
指挥棒移动+=20；
}
//绘制指挥棒（矩形）
canvas=document.getElementById（'myCanvas'）；
pen=canvas.getContext（'2d'）；
pen.fillStyle='#0000FF'；
pen.fillRect（指挥棒移动，250,50,10）；
}
函数moveLeft（）
{
moveBatonLeft=true；
}
函数moveRight（）
{
moveBatonRight=true；
}
函数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>


气泡爆破器
气泡爆破器
您的浏览器不支持画布元素。


左边
右


容易的
中庸的
硬的


爆裂：
逃脱：
经过的步骤：
您指的是
x
，
y
，它们未在
drawForever
函数中定义。
x
和
y
的全局值可能不是指右气泡。事实上，
y
在
startGame
函数中被设置为10，并且随后从未更改。您可能还希望参考
气泡[计数器]
，而不是
气泡[最后一个气泡]
。如果您进行以下更改，游戏似乎可以运行，请参考
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;

    }
}

函数drawForever（）{
油画、钢笔；
canvas=document.getElementById（'myCanvas'）；
pen=canvas.getContext（'2d'）；
步数+=1
清除屏幕（）；
如果（步骤%20==0&&lastBubble<100）{
气泡[lastBubble]。活动=真；
lastBubble+=1；
}
退税（）；
计数器=0；
同时（计数器<100）{
if（气泡[计数器].active==true）{
pen.fillStyle=气泡[计数器]。颜色；
pen.beginPath（）；
pen.arc（气泡[计数器].x，
气泡[计数器].y，
气泡[计数器]。半径，
0,
2*数学PI）；
笔。填充（）；
气泡[计数器]。y+=2；
}
y=bubbles[counter].y；//添加（原始代码中未定义y）
x=bubbles[counter].x；//已添加（原始代码中未定义x）
如果（y>=240&&y=batonMovement-10&&x=450）{
气泡[counter]=false；//已更改（爆破当前气泡，而不是lastBubble所指的任何气泡
}
计数器+=1；
}
}

您还应该在每个函数中设置
x
和
y
局部变量；它们目前没有达到您认为的目的。

您指的是
x
，
y
，它们在
drawForever
函数中没有定义。
x
和
y
的全局值可能不正确在右边的泡泡前面。事实上，
y
在
startName
函数中被设置为10，并且以后从未更改。您可能还希望参考
bubbles[counter]
而不是
bubbles[lastbuble]
。如果您参考
bubbles[counter]进行以下更改，游戏似乎可以正常运行.x
和
气泡[计数器].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;

    }
}

函数drawForever（）{
油画、钢笔；
canvas=document.getElementById（'myCanvas'）；
pen=canvas.getContext（'2d'）；
步数+=1
清除屏幕（）；
如果（步骤%20==0&&lastBubble<100）{
气泡[lastBubble]。活动=真；
lastBubble+=1；
}
退税（）；
计数器=0；
同时（计数器<100）{
if（气泡[计数器].active==true）{
pen.fillStyle=气泡[计数器]。颜色；
pen.beginPath（）；
pen.arc（气泡[计数器].x，
气泡[计数器].y，
气泡[计数器]。半径，
0,
2*数学PI）；
笔。填充（）；
气泡[计数器]。y+=2；
}
y=bubbles[counter].y；//添加（原始代码中未定义y）
x=bubbles[counter].x；//已添加（原始代码中未定义x）
如果（y>=240&&y=batonMovement-10&&x=450）{
气泡[counter]=false；//已更改（爆破当前气泡，而不是lastBubble所指的任何气泡
}
计数器+=1；
}
}

您还应该在每个函数中设置
x
和
y
局部变量；它们目前没有达到您认为的目的。

您是否得到
未捕获的TypeError:Cannot read property'getContext'of null
在控制台中？ctrl+shift+i。我在控制台中根本没有得到任何错误。您是否可以ach你的HTML和CSS代码？我只有这方面的HTML和Java代码，这就是我们所需要的…我已经在上面发布了HTML代码。你是否得到
未捕获的类型错误：无法在控制台中读取null属性“getContext”
？ctrl+shift+I。我在控制台中根本没有收到任何错误。你能附加你的HTML和CSS代码吗？我只有HTML和Java