Comment faire redémarrer une partie lorsque le joueur atteint le bas de l'écran

-4

Je suis en train de faire un simple jeu de défilement latéral en HTML et JavaScript, où un joueur saute d'une plateforme à l'autre.Comment faire redémarrer une partie lorsque le joueur atteint le bas de l'écran

Ma question est la suivante: quelle commande est-ce que j'utiliserais pour que le joueur "meure" ou passe à l'écran "game over" quand le joueur rate une plate-forme et touche le bas de l'écran? Voici un lien vers le jeu au cas où vous ne me comprenez pas:

https://output.jsbin.com/mevari

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title></title> 
 
    <style type="text/css"> 
 
     body { 
 
      margin: 0; 
 
     } 
 

 
     canvas { 
 
      display: block; 
 
      margin: 0 auto; 
 
      box-shadow: 0px 0px 20px #3399FF; 
 
     } 
 
    </style> 
 
</head> 
 
<body> 
 
    <canvas id="c"></canvas> 
 
    <script type="text/javascript"> 
 
     var canvas = document.getElementById("c"); 
 
     canvas.width = 1024, canvas.height = 640; 
 
     var context = canvas.getContext("2d"); 
 
     var menu = true; 
 

 
     var background = { 
 
      width: 0, 
 
      height: 0, 
 
      x: 472, 
 
      //x: -8000 
 
     }; 
 

 
     var player = { 
 
      width: 30, 
 
      height: 30, 
 
      x: canvas.width/2 - 15, 
 
      y: 10, 
 
      velx: 0, 
 
      vely: 0, 
 
      speed: 4, 
 
      friction: 0.8, 
 
      gravity: 0.3, 
 
      jumping: false 
 
     }; 
 

 
     var player_stats = { 
 
      lvl: 1 
 
     }; 
 

 
     var starting_pos = { 
 
      x: player.x, 
 
      y: player.y 
 
     }; 
 

 
     var keys = []; 
 
     window.addEventListener("keydown", function (e) { 
 
      keys[e.keyCode] = true; 
 
     }, false); 
 
     window.addEventListener("keyup", function (e) { 
 
      keys[e.keyCode] = false; 
 
     }, false); 
 

 
     function platform(x, y) { 
 
      var platform = { 
 
       x: x, 
 
       y: y, 
 
       width: 100, 
 
       height: 30 
 
      }; 
 
      background.width = platform.x + platform.width; 
 
      context.fillStyle = "#FFFFFF"; 
 
      context.fillRect(platform.x, platform.y, platform.width, platform.height); 
 
      if (player.y + player.height > platform.y && player.y + player.height < platform.y + platform.height && player.x + player.width > platform.x && player.x < platform.x + platform.width) { 
 
       player.jumping = false; 
 
       player.vely = 0; 
 
       player.y = platform.y - player.height; 
 
      } 
 
      if (player.x + player.width > platform.x && player.x + player.width < platform.x + platform.width/2 && player.y + player.height > platform.y && player.y < platform.y + platform.height) { 
 
       player.x = platform.x - player.width; 
 
       player.jumping = true; 
 
      } 
 
      if (player.x < platform.x + platform.width && player.x > platform.x + platform.width/2 && player.y + player.height > platform.y && player.y < platform.y + platform.height) { 
 
       player.x = platform.x + platform.width; 
 
       player.jumping = true; 
 
      } 
 
     } 
 

 
     function update() { 
 
      if (menu) { 
 
       context.fillStyle = "#FFFFFF"; 
 
       context.fillRect(0, 0, canvas.width, canvas.height); 
 

 
       context.fillStyle = "#3399FF"; 
 
       context.textAlign = "center"; 
 
       context.font = "120px Arial"; 
 
       context.fillText("Lord Hero", canvas.width/2, canvas.height/4); 
 

 
       context.font = "30px Arial"; 
 
       context.fillText("Press Enter to play", canvas.width/2, canvas.height/1.5); 
 
       if (keys[13] && menu) { 
 
        menu = !menu; 
 
       } 
 
      } else if (!menu) { 
 

 
       if (keys[38] && !menu) { 
 
        if (!player.jumping) { 
 
         player.jumping = true; 
 
         player.vely = -player.speed * 2; 
 
        } 
 
       } 
 
       if (keys[39] && !menu) { 
 
        if (player.velx < player.speed) { 
 
         player.velx--; 
 
        } 
 
       } 
 
       if (keys[37] && !menu) { 
 
        if (player.velx > -player.speed) { 
 
         player.velx++; 
 
        } 
 
       } 
 

 
       if (player.y > canvas.height) { 
 
        player.x = starting_pos.x; 
 
        player.y = starting_pos.y; 
 
        player.velx = 0; 
 
        player.vely = 0; 
 
       } 
 

 
       player.velx *= player.friction; 
 
       player.vely += player.gravity; 
 

 
       background.x += player.velx; 
 
       player.y += player.vely; 
 

 
       context.fillStyle = "#3399FF"; 
 
       context.fillRect(0, 0, canvas.width, canvas.height); 
 

 
       context.fillStyle = "#FFFFFF"; 
 
       context.fillRect(player.x, player.y, player.width, player.height); 
 
       // Platform width: 100 height: 30 
 
       platform(background.x + 25, 100); 
 
       platform(background.x + 125, 100); 
 
       platform(background.x + 225, 130); 
 
       platform(background.x + 425, 240); 
 
       platform(background.x + 630, 180); 
 
       platform(background.x + 850, 125); 
 
       platform(background.x + 1050, 360); 
 
       platform(background.x + 1250, 265); 
 
       platform(background.x + 1490, 205); 
 
       platform(background.x + 1770, 130); 
 
       platform(background.x + 2050, 240); 
 
       platform(background.x + 2420, 340); 
 
       platform(background.x + 2790, 450); 
 
       platform(background.x + 3050, 360); 
 
       platform(background.x + 3300, 265); 
 
       platform(background.x + 3555, 190); 
 
       platform(background.x + 3810, 100); 
 
       platform(background.x + 4170, 250); 
 
       platform(background.x + 4570, 430); 
 
       platform(background.x + 4810, 330); 
 
       platform(background.x + 5150, 330); 
 
       platform(background.x + 5490, 330); 
 
       platform(background.x + 5750, 240); 
 
       platform(background.x + 6010, 145); 
 
       platform(background.x + 6480, 550); 
 
       platform(background.x + 6940, 330); 
 
       platform(background.x + 7200, 230); 
 
       platform(background.x + 7450, 130); 
 
       platform(background.x + 7810, 130); 
 
       platform(background.x + 8220, 330); 
 
       platform(background.x + 8650, 595); 
 
       platform(background.x + 8890, 485); 
 
       platform(background.x + 9240, 485); 
 
       platform(background.x + 9570, 485); 
 
       platform(background.x + 9850, 390); 
 
       platform(background.x + 10120, 290); 
 
       platform(background.x + 10350, 180); 
 
       platform(background.x + 10790, 450); 
 
       platform(background.x + 11050, 360); 
 
       platform(background.x + 11300, 265); 
 
       platform(background.x + 11555, 190); 
 
       platform(background.x + 11810, 100); 
 
       platform(background.x + 12170, 250); 
 
       platform(background.x + 12570, 430); 
 
       platform(background.x + 12810, 330); 
 
       platform(background.x + 13150, 330); 
 
       platform(background.x + 13490, 330); 
 
       platform(background.x + 13750, 240); 
 
       platform(background.x + 14010, 145); 
 
       platform(background.x + 14480, 550); 
 
       platform(background.x + 14700, 440); 
 
       platform(background.x + 14940, 330); 
 
       platform(background.x + 15200, 230); 
 
       platform(background.x + 15450, 130); 
 
       platform(background.x + 15810, 130); 
 
       platform(background.x + 16220, 330); 
 
       platform(background.x + 16650, 595); 
 
       platform(background.x + 16890, 485); 
 
       platform(background.x + 17240, 485); 
 
       platform(background.x + 17570, 485); 
 
       platform(background.x + 17850, 390); 
 
       platform(background.x + 18120, 290); 
 
       platform(background.x + 18350, 180); 
 
      } 
 
      requestAnimationFrame(update); 
 
     } 
 
     requestAnimationFrame(update); 
 
    </script> 
 
</body> 
 
</html>

Source

2015-12-21 Tristan Bouchard

La clé est cancelAnimationFrame

Qu'ai-je fait?

var ra = 0; Définissez une variable pour stocker l'ID requestAnimationFrame().
Remplacez requestAnimationFrame(update); par ra = requestAnimationFrame(update); pour stocker l'ID.
Une fois le programme détectera que le joueur touché le fond (qui était déjà vérifier), vous devez arrêter l'animation, alerter un message (ou afficher une page) et empêcher le code de continuer à l'utiliser:
```
alert('game over'); 
cancelAnimationFrame(ra); 
return; 
```

Le code complet:

var ra = 0; 
 
var canvas = document.getElementById("c"); 
 
canvas.width = 1024, canvas.height = 640; 
 
var context = canvas.getContext("2d"); 
 
var menu = true; 
 

 
var background = { 
 
    width: 0, 
 
    height: 0, 
 
    x: 472, 
 
    //x: -8000 
 
}; 
 

 
var player = { 
 
    width: 30, 
 
    height: 30, 
 
    x: canvas.width/2-15, 
 
    y: 10, 
 
    velx: 0, 
 
    vely: 0, 
 
    speed: 4, 
 
    friction: 0.8, 
 
    gravity: 0.3, 
 
    jumping: false 
 
}; 
 

 
var player_stats = { 
 
    lvl: 1 
 
}; 
 

 
var starting_pos = { 
 
    x: player.x, 
 
    y: player.y 
 
}; 
 

 
var keys = []; 
 
window.addEventListener("keydown", function(e) { 
 
    keys[e.keyCode] = true; 
 
}, false); 
 
window.addEventListener("keyup", function(e) { 
 
    keys[e.keyCode] = false; 
 
}, false); 
 

 
function platform(x, y) { 
 
    var platform = { 
 
    x: x, 
 
    y: y, 
 
    width: 100, 
 
    height: 30 
 
    }; 
 
    background.width = platform.x + platform.width; 
 
    context.fillStyle="#FFFFFF"; 
 
    context.fillRect(platform.x, platform.y, platform.width, platform.height); 
 
    if (player.y + player.height > platform.y && player.y + player.height < platform.y + platform.height && player.x + player.width > platform.x && player.x < platform.x + platform.width) { 
 
    player.jumping = false; 
 
    player.vely = 0; 
 
    player.y = platform.y-player.height; 
 
    } 
 
    if (player.x + player.width > platform.x && player.x + player.width < platform.x + platform.width/2 && player.y + player.height > platform.y && player.y < platform.y + platform.height) { 
 
    player.x = platform.x-player.width; 
 
    player.jumping = true; 
 
    } 
 
    if (player.x < platform.x + platform.width && player.x > platform.x + platform.width/2 && player.y + player.height > platform.y && player.y < platform.y + platform.height) { 
 
    player.x = platform.x+platform.width; 
 
    player.jumping = true; 
 
    } 
 
} 
 

 
function update() { 
 
    if (menu) { 
 
    context.fillStyle="#FFFFFF"; 
 
    context.fillRect(0, 0, canvas.width, canvas.height); 
 

 
    context.fillStyle="#3399FF"; 
 
    context.textAlign="center"; 
 
    context.font = "120px Arial"; 
 
    context.fillText("Lord Hero", canvas.width/2, canvas.height/4); 
 

 
    context.font = "30px Arial"; 
 
    context.fillText("Press Enter to play", canvas.width/2, canvas.height/1.5); 
 
    if (keys[13] && menu) { 
 
     menu = !menu; 
 
    } 
 
    } else if (!menu) { 
 

 
    if (keys[38] && !menu) { 
 
     if(!player.jumping){ 
 
     player.jumping = true; 
 
     player.vely = -player.speed*2; 
 
     } 
 
    } 
 
    if (keys[39] && !menu) { 
 
     if (player.velx < player.speed) {       
 
     player.velx--;     
 
     }   
 
    }   
 
    if (keys[37] && !menu) {      
 
     if (player.velx > -player.speed) { 
 
     player.velx++; 
 
     } 
 
    } 
 

 
    if (player.y > canvas.height) { 
 
     console.log('game over'); 
 
     alert('game over'); 
 
     cancelAnimationFrame(ra); 
 
     return; 
 
     //player.x = starting_pos.x; 
 
     //player.y = starting_pos.y; 
 
     //player.velx = 0; 
 
     //player.vely = 0; 
 
    } 
 

 
    player.velx *= player.friction; 
 
    player.vely += player.gravity; 
 

 
    background.x += player.velx; 
 
    player.y += player.vely; 
 

 
    context.fillStyle="#3399FF"; 
 
    context.fillRect(0, 0, canvas.width, canvas.height); 
 

 
    context.fillStyle="#FFFFFF"; 
 
    context.fillRect(player.x, player.y, player.width, player.height); 
 
    // Platform width: 100 height: 30 
 
    platform(background.x+25, 100); 
 
    platform(background.x+125, 100); 
 
    platform(background.x+225, 130); 
 
    platform(background.x+425, 240); 
 
    platform(background.x+630, 180); 
 
    platform(background.x+850, 125); 
 
    platform(background.x+1050, 360); 
 
    platform(background.x+1250, 265); 
 
    platform(background.x+1490, 205); 
 
    platform(background.x+1770, 130); 
 
    platform(background.x+2050, 240); 
 
    platform(background.x+2420, 340); 
 
    platform(background.x+2790, 450); 
 
    platform(background.x+3050, 360); 
 
    platform(background.x+3300, 265); 
 
    platform(background.x+3555, 190); 
 
    platform(background.x+3810, 100); 
 
    platform(background.x+4170, 250); 
 
    platform(background.x+4570, 430); 
 
    platform(background.x+4810, 330); 
 
    platform(background.x+5150, 330); 
 
    platform(background.x+5490, 330); 
 
    platform(background.x+5750, 240); 
 
    platform(background.x+6010, 145); 
 
    platform(background.x+6480, 550); 
 
    platform(background.x+6940, 330); 
 
    platform(background.x+7200, 230); 
 
    platform(background.x+7450, 130); 
 
    platform(background.x+7810, 130); 
 
    platform(background.x+8220, 330); 
 
    platform(background.x+8650, 595); 
 
    platform(background.x+8890, 485); 
 
    platform(background.x+9240, 485); 
 
    platform(background.x+9570, 485); 
 
    platform(background.x+9850, 390); 
 
    platform(background.x+10120, 290); 
 
    platform(background.x+10350, 180); 
 
    platform(background.x+10790, 450); 
 
    platform(background.x+11050, 360); 
 
    platform(background.x+11300, 265); 
 
    platform(background.x+11555, 190); 
 
    platform(background.x+11810, 100); 
 
    platform(background.x+12170, 250); 
 
    platform(background.x+12570, 430); 
 
    platform(background.x+12810, 330); 
 
    platform(background.x+13150, 330); 
 
    platform(background.x+13490, 330); 
 
    platform(background.x+13750, 240); 
 
    platform(background.x+14010, 145); 
 
    platform(background.x+14480, 550); 
 
    platform(background.x+14700, 440); 
 
    platform(background.x+14940, 330); 
 
    platform(background.x+15200, 230); 
 
    platform(background.x+15450, 130); 
 
    platform(background.x+15810, 130); 
 
    platform(background.x+16220, 330); 
 
    platform(background.x+16650, 595); 
 
    platform(background.x+16890, 485); 
 
    platform(background.x+17240, 485); 
 
    platform(background.x+17570, 485); 
 
    platform(background.x+17850, 390); 
 
    platform(background.x+18120, 290); 
 
    platform(background.x+18350, 180); 
 
    } 
 
    ra = requestAnimationFrame(update); 
 
} 
 
ra = requestAnimationFrame(update);

<canvas id="c"></canvas>

https://jsbin.com/yenure

Source

2015-12-21 06:39:44

Merci beaucoup –

Est-ce que cela fonctionne? –

Oui, très bien. Votre aide est très appréciée –

Comment faire redémarrer une partie lorsque le joueur atteint le bas de l'écran

Répondre

Questions connexes