Je n'arrive pas a afficher une variable de score dans mon snake.

Résolu
Yooshy Messages postés 3 Date d'inscription   Statut Membre Dernière intervention   -  
Yooshy Messages postés 3 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,
Je n'arrive pas a afficher une variable de score dans mon snake. J'essaye de mettre ma variable score dans le petit carré a droite mais impossible des idées ?

Le code : 
<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style>
  html, body {
    height: 100%;
    margin: 0;
  }

  body {
    background: black;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  canvas {
    border: 1px solid white;
  }
  </style>
</head>
<body>
<canvas width="400" height="400" id="game"></canvas>
<canvas width="250" height="50" id="score"></canvas>
<script>
var canvas = document.getElementById('game');
var context = canvas.getContext('2d');

var point = 0;
var grid = 16;
var count = 0;
var score = 0;
  
var snake = {
  x: 160,
  y: 160,
  
  dx: grid,
  dy: 0,
  
  cells: [],
  
  maxCells: 4
};
var apple = {
  x: 320,
  y: 320
};

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min)) + min;
}

function loop(){
  requestAnimationFrame(loop);

  if (++count < 15) {
    return;
  }

  count = 0;
  context.clearRect(0,0,canvas.width,canvas.height);

  snake.x += snake.dx;
  snake.y += snake.dy;

  if (snake.x < 0) {
    snake.x = canvas.width - grid;
  }
  else if (snake.x >= canvas.width) {
    snake.x = 0;
  }
  
  if (snake.y < 0) {
    snake.y = canvas.height - grid;
  }
  else if (snake.y >= canvas.height) {
    snake.y = 0;
  }

  snake.cells.unshift({x: snake.x, y: snake.y});

  if (snake.cells.length > snake.maxCells) {
    snake.cells.pop();
  }

  context.fillStyle = 'red';
  context.fillRect(apple.x, apple.y, grid-1, grid-1);

  context.fillStyle = 'green';
  snake.cells.forEach(function(cell, index) {
    
    context.fillRect(cell.x, cell.y, grid-1, grid-1);  

    if (cell.x === apple.x && cell.y === apple.y) {
      snake.maxCells++;

      point=point+1 
      apple.x = getRandomInt(0, 25) * grid;
      apple.y = getRandomInt(0, 25) * grid;
    }

    for (var i = index + 1; i < snake.cells.length; i++) {
      
      if (cell.x === snake.cells[i].x && cell.y === snake.cells[i].y) {
        snake.x = 160;
        snake.y = 160;
        snake.cells = [];
        snake.maxCells = 4;
        snake.dx = grid;
        snake.dy = 0;
        score = score + 50

        apple.x = getRandomInt(0, 25) * grid;
        apple.y = getRandomInt(0, 25) * grid;
      }
    }
  });
}

document.addEventListener('keydown', function(e) {
  
  if (e.which === 37 && snake.dx === 0) {
    snake.dx = -grid;
    snake.dy = 0;
  }
  else if (e.which === 38 && snake.dy === 0) {
    snake.dy = -grid;
    snake.dx = 0;
  }
  else if (e.which === 39 && snake.dx === 0) {
    snake.dx = grid;
    snake.dy = 0;
  }
  else if (e.which === 40 && snake.dy === 0) {
    snake.dy = grid;
    snake.dx = 0;
  }
});

requestAnimationFrame(loop);
</script>
</body>
</html>


EDIT : Correction des balises de code ( Ajout du LANGAGE afin d'avoir la coloration syntaxique, l'indentation, et la numérotation des lignes ...... ) Merci d'y penser à l'avenir !

3 réponses

Réponse 1 / 3
jordane45 Messages postés 38480 Date d'inscription   Statut Modérateur Dernière intervention   4 746
 
Bonjour,

J'ai corrigé tes balises de code.
Merci d'indiquer le langage dedans la prochaine fois.
Explications à lire entièrement disponible ici :
https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code

ensuite, tu nous dis

Je n'arrive pas a afficher une variable de score dans mon snake.

je trouve bien ta variable "score" dans ton code... mais je ne vois nul part où tu as essayé de l'afficher.....

et enfin. pourquoi as tu fais un second canvas pour ton score ( que tu n'utilises pas visiblement...)
Un simple élément html suffirait
Genre.. remplace 
<canvas width="250" height="50" id="score"></canvas>

par 
<span id="score"></span>

et dans ton code js 
document.getElementById("score").innerHTML = score;

0
Réponse 2 / 3
Yooshy Messages postés 3 Date d'inscription   Statut Membre Dernière intervention  
 
Bonjour, merci pour l'aide mais je ne vois pas ou implémenté cette partie de code que vous me donnez 
document.getElementById("score").innerHTML = score;
0
jordane45 Messages postés 38480 Date d'inscription   Statut Modérateur Dernière intervention   4 746
 
Tu as pourtant écrit le code js de ton snake non ??
Enfin.. même si ce n'est pas toi l'auteur... je pense qu'il te sera facile de trouver à quel endroit tu alimentes la variable scrore... et par conséquent..où placer la ligne de code que je t'ai donné.
0
Réponse 3 / 3
Yooshy Messages postés 3 Date d'inscription   Statut Membre Dernière intervention  
 
Effectivement ! escusez moi, merci pour l'aide
0

Discussions similaires

Score qui augmente de 20 à 30 points d'un coup
Titebreizh35 -
theo.ngr17 -

2 réponses
Feuille de score belote
nulleeninfo -
brucine -

7 réponses
Durée d'une diapositive animée
bibibibi99 -
bibibibi99 -

2 réponses
Augmentation d'un score Snapchat : comment c'est possible ?
Emile402 -
Moi -

9 réponses
feuille excel de gestion belote
SiFaSiLa -
frank -

2 réponses