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

Résolu/Fermé

Yooshy Messages postés 3 Date d'inscription vendredi 14 août 2020 Statut Membre Dernière intervention 15 août 2020 - Modifié le 14 août 2020 à 21:36
Yooshy Messages postés 3 Date d'inscription vendredi 14 août 2020 Statut Membre Dernière intervention 15 août 2020 - 15 août 2020 à 13:47

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 !

A voir également:

Je n'arrive pas a afficher une variable de score dans mon snake.
Voir le score snap de quelqu'un sans etre ami - Forum Snapchat
Score de malinas ✓ - Forum Excel
Feuille de score belote a imprimer ✓ - Forum LibreOffice / OpenOffice
Feuille de comptage des point pour la belote - Forum Loisirs / Divertissements

3 réponses

Réponse 1 / 3

jordane45 Messages postés 38453 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 mars 2025 4 740
14 août 2020 à 21:40

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;

Réponse 2 / 3

Yooshy Messages postés 3 Date d'inscription vendredi 14 août 2020 Statut Membre Dernière intervention 15 août 2020
15 août 2020 à 13:38

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;

jordane45 Messages postés 38453 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 mars 2025 4 740
15 août 2020 à 13:40

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é.

Réponse 3 / 3

Yooshy Messages postés 3 Date d'inscription vendredi 14 août 2020 Statut Membre Dernière intervention 15 août 2020
15 août 2020 à 13:47

Effectivement ! escusez moi, merci pour l'aide

Discussions similaires

Score qui augmente de 20 à 30 points d'un coup

Augmentation d'un score Snapchat : comment c'est possible ?

Feuille de score belote

Durée d'une diapositive animée

Comment surveiller sa copine.