添加到变量

我试图给我的游戏添加一个分数，只要多维数据集经过一个差距就会增加一个分数。我尝试了一些不同的方法，但没有一个为我工作。这里是我的脚本，我有所有三个HTML，CSS和JavaScript在那里，对不起，如果它有点混乱。谢谢。 ps。我必须把更多的信息在这个问题将它张贴添加到变量

var ctx 
 
    var pieceX = 200; 
 
    var pieceY = 400; 
 
    var pieceXX = 5; 
 
    var pieceYY = 5; 
 
    var length = 200; 
 
    var height = 0; 
 
    var myScore = 0; 
 
    document.getElementById("score").innerHTML = myScore; 
 

 
    function init() { 
 

 
     ctx = canvas.getContext('2d'); 
 
     setInterval(draw,10); 
 
     document.getElementById('lose').style.visibility = "hidden"; 
 
    } 
 
    function draw() { 
 
    ctx.clearRect(0,0,500,500); 
 
    ctx.beginPath(); 
 
    ctx.fillStyle = "red"; 
 
    ctx.fillRect(pieceX,pieceY,30,30); 
 
    ctx.fill(); 
 
    
 
    ctx.beginPath(); 
 
    ctx.fillStyle = "blue"; 
 
    ctx.fillRect(0,height,length,30); 
 
    ctx.fill(); 
 
    
 
    ctx.beginPath(); 
 
    ctx.fillStyle = "blue"; 
 
    ctx.fillRect(length + 50,height,500 - (length + 50), 30); 
 
    ctx.fill(); 
 
    
 
    height ++ 
 
    if (height > 500) { 
 
     height = 0; 
 
     length = Math.floor(Math.random()*400) + 50; 
 
    } 
 
    if (pieceY == height) { 
 
     if (pieceX < length || pieceX > length + 20) { 
 
      document.getElementById("lose").style.visibility = "visible"; 
 
      } 
 
     myScore = myScore + 1; 
 
     
 
     
 
         } 
 
    } 
 

 
    
 
    function keyDown() { 
 
     var key = event.keyCode; 
 
     switch (key) { 
 
    case 37 : pieceX -= pieceXX; 
 
     break; 
 
    case 38 : pieceY -= pieceYY; 
 
     break; 
 
    case 39 : pieceX += pieceXX; 
 
     break; 
 
    case 40 : pieceY += pieceYY; 
 
      } 
 
    }

#canvas { 
 
    border: solid; 
 
    } 
 
    #lose { 
 
    position : absolute; 
 
    top: 40%; 
 
    left: 34%; 
 
    width : 167px; 
 
    background-color: red; 
 
    } 
 
    #score { 
 
    position : absolute; 
 
    top : -10px; 
 
    left : 90%; 
 
    }

<!DOCTYPE HTML> 
 
    <html> 
 
    <body onLoad="init()" onkeydown="keyDown()"> 
 
     <canvas id="canvas" width="500" height="500"></canvas> 
 
     <h1 id="lose">YOU LOSE</h1> 
 
     <h1 id="score"></h1> 
 
    </body> 
 
    </html>

来源

2017-09-17 Nicholas Costanzo

你有什么问题* exacly *？ –

if (pieceY == height) { 
    if (pieceX < length || pieceX > length + 20) { 
     document.getElementById("lose").style.visibility = "visible"; 
    } 
    //Here add 
    myScore = myScore +1; 
    document.getElementById("score").innerHTML = myScore; 
}

要停止动画（集gameIsOver为true时要停止）：

var stop,gameIsOver; 
function init() { 

    ctx = canvas.getContext('2d'); 
    stop = setInterval(draw,10); 
    document.getElementById('lose').style.visibility = "hidden"; 
} 
function draw(){ 
    if(gameIsOver){ 
    clearInterval(stop); 
    } 
}

来源

2017-09-17 12:11:23 Eladian

停止绘制功能，记录间隔编号：

var interval_id; 

function init() { 

    ctx = canvas.getContext('2d'); 
    document.getElementById('lose').style.visibility = "hidden"; 
    interval_id = setInterval(draw,10); // to record the interval id 
}

，失去时清除该ID的时间间隔：

if (pieceY == height) { 
    if (pieceX < length || pieceX > length + 20) { 

    // to stop the draw interval 
    clearInterval(interval_id); 

    document.getElementById("lose").style.visibility = "visible"; 
    } 

    myScore = myScore + 1; 

    // to update the score to the view 
    document.getElementById("score").innerHTML = myScore; 
}

重新启动游戏：

function restart() { 

    // reset all variables that changed to it's initial value 
    pieceX = 200; 
    pieceY = 400; 
    height = 0; 
    myScore = 0; 

    // reset view 
    document.getElementById("score").innerHTML = myScore; 
    document.getElementById('lose').style.visibility = "hidden"; 

    // start the interval loop(it will return a different id) 
    interval_id = setInterval(draw, 10); // to record the interval id 
}

来源

2017-09-17 12:24:41

谢谢，我该如何使用函数来重新开始间隔？ –

好吧，我已经想通了方法 –

我通过编辑帖子添加了重启功能 –

回答

相关问题