HTML5 Javascript游戏

我正在尝试在javascript中制作HTML5游戏。与乒乓球类似，但一旦泡泡击中桨或底部屏幕，它就会“爆裂”或消失。我似乎无法让Bubble在我的代码中消失或爆发。任何人都可以帮我吗？HTML5 Javascript游戏

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>

来源

2017-05-08 A.Hetzel

您是否正在获取'Uncaught TypeError：无法在控制台中读取'null'属性'getContext'？ ctrl + shift + i。 – Goose

我在控制台中没有收到任何错误 –

您可以附加您的HTML和CSS代码吗？ – shaochuancs

你是指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局部变量;他们目前没有达到你似乎认为的目的。

来源

2017-05-09 23:26:31 Stuart

以上的HTML代码，谢谢你这是一个巨大的帮助！我现在有麻烦了，现在让爆发计数工作，它计数爆炸的泡沫，但也是逃避的泡沫？ –

看到这个版本https://jsfiddle.net/acLot87q/13/ - 尝试隔离问题，并作为一个新问题，如果你不能得到它的问题 – Stuart

HTML5 Javascript游戏

回答

相关问题