2017-06-09 3 views
0

erreichen Wie Sie sehen können, habe ich diesen Code hier:Stopp einmal Zustand ist

<!DOCTYPE html> 
 
    <html> 
 
    <body> 
 
    
 
    <canvas id="myCanvas" width="500" height="300" 
 
    style="border:1px solid #d3d3d3;"> 
 
    Your browser does not support the canvas element. 
 
    </canvas> 
 
    
 
    <script> 
 
    var canvas = document.getElementById("myCanvas"); 
 
    var ctx = canvas.getContext("2d"); 
 
    var player = { 
 
     x: 0, 
 
     y: 297.3 
 
    }; 
 
    var monster = { 
 
    \t x: 150, 
 
     y: 296 
 
    }; 
 
    var slope = { 
 
    \t 1: { 
 
     \t x: 183, 
 
     \t y: 299 
 
     } 
 
    } 
 
    ctx.font = "13px monospace"; 
 
    setInterval(function() { 
 
    \t player.x += 8; 
 
     ctx.clearRect(0, 0, canvas.width, canvas.height); 
 
     }, 50); 
 
    setInterval(function() { 
 
    \t ctx.fillText("\\o/",player.x, player.y) 
 
     ctx.fillText(">:)",monster.x, monster.y) 
 
     ctx.fillText("/",slope[1].x, slope[1].y) 
 
     ctx.fillText("_______________________",0,296); 
 
     ctx.fillText("_______________________",189,286); 
 
     if (player.x >= monster.x - 25) { 
 
     \t monster.x = 1000; monster.y = 1000; 
 
     } 
 
     if (player.x >= slope[1].x - 21) { 
 
     \t player.y -= 10; 
 
     } 
 
     }, 50); 
 
    </script> 
 
    
 
    </body> 
 
    </html>

Ich möchte von dem Spieler stoppen steigen mehr als 10 (y - = 10 dann Stopp), sobald es den Hang berührt, anstatt weiterzugehen. Gibt es dafür eine Lösung?

Antwort

1

können Sie eine Statusvariable verwenden, die in der anfänglichen falsch gesetzt und nach der Aktion, auf wahr gesetzt:

<!DOCTYPE html> 
 
    <html> 
 
    <body> 
 
    
 
    <canvas id="myCanvas" width="500" height="300" 
 
    style="border:1px solid #d3d3d3;"> 
 
    Your browser does not support the canvas element. 
 
    </canvas> 
 
    
 
    <script> 
 
    var canvas = document.getElementById("myCanvas"); 
 
    var ctx = canvas.getContext("2d"); 
 
    var player = { 
 
     x: 0, 
 
     y: 297.3 
 
    }; 
 
    var monster = { 
 
    \t x: 150, 
 
     y: 296 
 
    }; 
 
    var slope = { 
 
    \t 1: { 
 
     \t x: 183, 
 
     \t y: 299 
 
     } 
 
    } 
 
    ctx.font = "13px monospace"; 
 
    setInterval(function() { 
 
    \t player.x += 8; 
 
     ctx.clearRect(0, 0, canvas.width, canvas.height); 
 
     }, 50); 
 
    var up = false; 
 
    setInterval(function() { 
 
    \t ctx.fillText("\\o/",player.x, player.y) 
 
     ctx.fillText(">:)",monster.x, monster.y) 
 
     ctx.fillText("/",slope[1].x, slope[1].y) 
 
     ctx.fillText("_______________________",0,296); 
 
     ctx.fillText("_______________________",189,286); 
 
     if (player.x >= monster.x - 25) { 
 
     \t monster.x = 1000; monster.y = 1000; 
 
     } 
 
     if (!up && player.x >= slope[1].x - 21) { 
 
     \t player.y -= 10; 
 
      up=true 
 
     } 
 
     }, 50); 
 
    </script> 
 
    
 
    </body> 
 
    </html>

0

sicher, speichern Sie Ihr Intervall in einer Variablen, dann deutlich, wenn Sie brauchen zu:

var myInterval = setInterval(function() { 
     player.x += 8; 
     ctx.clearRect(0, 0, canvas.width, canvas.height); 
}, 50); 

// Whenever you want to stop it 
clearInterval(myInterval)