Problème pour stocker le meilleur score dans une base de données

CodeOtaku Le 31 mars 2019 à 21:01

Bonsoir,
j'ai besoin d'aide en php, en fait je suis actuellement en train de réaliser un jeu du serpent en js et je voudrais rajouter du php afin d'afficher la valeur du champ bestscore.
j'ai une fonction highScore qui s'actualise en temp réel et qui stocke le meilleur score, mais maintenant il faudrait que cette valeur soit sauvegarder dans le back pour que lorsqu'un autre user arrive qu'il puise connaitre le meilleur score actuel, mais j'ai du mal à lier le php et le javascript, mes requêtes sql
(comme mon UPDATE) n'arrivent pas à s’exécuter c'est vraiment chiant
je voudrais pouvoir récupérer la valeur du champ bestScore et qu'il soit sauvegardé en back et sans utiliser de local storage s'il vous plait car le but c'est que tout le monde puisse avoir accès à la même valeur !
voila code source du projet :

<?php
try
{
    // On se connecte à MySQL
    $bdd = new PDO('mysql:host=localhost;dbname=snake;charset=utf8', 'root', '');
}
catch(Exception $e)
{
    // En cas d'erreur, on affiche un message et on arrête tout
    die('Erreur : '.$e->getMessage());
}
 
// Si tout va bien, on peut continuer
 
// On récupère tout le contenu de la table highscore
$reponse = $bdd->query('SELECT * FROM highscore WHERE id=1 LIMIT 0,1');
 
// On affiche chaque entrée une à une
while ($donnees = $reponse->fetch())
{
    ?>
    <h1><?php echo $donnees['bestscore']; ?></h1>
 
    <?php
}
 
 
?>
 
<!DOCTYPE html>
<html>
    <head>
        <title>Jeu du Serpent</title>
        <meta charset="utf-8">
    </head>
    <body>
 
<script>
 
window.onload = function() {
  var canvasWidth = 900;
  var canvasHeight = 600;
  var blockSize = 30;
  var ctx;
  var delay = 100;
  var xCoord = 0;
  var yCoord = 0;
  var snakee;
  var applee;
  var widthInBlocks = canvasWidth / blockSize;
  var heightInBlocks = canvasHeight / blockSize;
  var score;
  var bestScore;
  var timeOut;
  init();
 
  function init() {
    var canvas = document.createElement('canvas');
    canvas.width = canvasWidth;
    canvas.height = canvasHeight;
    canvas.style.border = "30px solid gray";
    canvas.style.margin = "50px auto";
    canvas.style.display = "block";
    canvas.style.backgroundColor = "#ddd";
    document.body.appendChild(canvas);
    ctx = canvas.getContext('2d');
    snakee = new Snake([
      [6, 4],
      [5, 4],
      [4, 4],
      [3, 4],
      [2, 4]
    ], "right");
    applee = new Apple([10, 10]);
    score = 0;
    bestScore = 0;
    refreshCanvas();
  }
 
  function refreshCanvas() {
    snakee.advance();
    if (score > bestScore) {
      bestScore = score;
      <?php $bdd->exec('UPDATE highscore SET bestscore = ?>bestScore<?php>'); ?>
 
    }
    if (snakee.checkCollision()) {
      gameOver();
    } else {
      if (snakee.isEatingApple(applee)) {
        score++;
        delay -= 2;
        snakee.ateApple = true;
        do {
          applee.setNewPosition();
        } while (applee.isOnSnake(snakee));
      }
      ctx.clearRect(0, 0, canvasWidth, canvasHeight);
      drawScore();
      highScore();
      snakee.draw();
      applee.draw();
      timeOut = setTimeout(refreshCanvas, delay);
    }
  }
 
  function gameOver() {
    ctx.save();
    ctx.font = "bold 70px sans-serif";
    ctx.fillStyle = "#000";
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    ctx.strokeStyle = "white";
    ctx.lineWidth = 5;
    var centreX = canvasWidth / 2;
    var centreY = canvasHeight / 2;
    ctx.strokeText("Game Over", centreX, centreY - 180);
    ctx.fillText("Game Over", centreX, centreY - 180);
    ctx.font = "bold 30px sans-serif";
    ctx.strokeText("Appuyer sur la touche Espace pour rejouer", centreX, centreY - 120);
    ctx.fillText("Appuyer sur la touche Espace pour rejouer", centreX, centreY - 120);
    ctx.strokeText("Utiliser les flèches pour vous diriger", centreX, centreY - 80);
    ctx.fillText("Utiliser les flèches pour vous diriger", centreX, centreY - 80);
    ctx.restore();
  }
 
  function restart() {
    snakee = new Snake([
      [6, 4],
      [5, 4],
      [4, 4],
      [3, 4],
      [2, 4]
    ], "right");
    applee = new Apple([10, 10]);
    score = 0;
    delay = 100;
    clearTimeout(timeOut);
    refreshCanvas();
  }
 
  function drawScore() {
    ctx.save();
    ctx.font = "bold 200px sans-serif";
    ctx.fillStyle = "gray";
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    var centreX = canvasWidth / 2;
    var centreY = canvasHeight / 2;
    ctx.fillText(score.toString(), centreX, centreY);
    ctx.restore();
  }
 
  function highScore() {
    ctx.save();
    ctx.font = "bold 50px sans-serif";
    ctx.fillStyle = "gray";
    var centreX = canvasWidth / 1.05;
    var centreY = canvasHeight / 1.02;
    ctx.fillText(bestScore.toString(), centreX, centreY);
    ctx.restore();
  }
 
  function drawBlock(ctx, position) {
    var x = position[0] * blockSize;
    var y = position[1] * blockSize;
    ctx.fillRect(x, y, blockSize, blockSize);
  }
 
  function Snake(body, direction) {
    this.body = body;
    this.direction = direction;
    this.ateApple = false;
 
    this.draw = function() {
      ctx.save();
      ctx.fillStyle = "#ff0000";
 
      for (var i = 0; i < this.body.length; i++) {
        drawBlock(ctx, this.body);
      }
      ctx.restore();
    };
 
    this.advance = function() {
      var nextPosition = this.body[0].slice();
      switch (this.direction) {
        case "left":
          nextPosition[0] -= 1;
          break;
        case "right":
          nextPosition[0] += 1;
          break;
        case "down":
          nextPosition[1] += 1;
          break;
        case "up":
          nextPosition[1] -= 1;
          break;
        default:
          throw ("invalid direction");
      }
      this.body.unshift(nextPosition);
      if (!this.ateApple) {
        this.body.pop();
      } else {
        this.ateApple = false;
      }
    };
 
    this.setDirection = function(newDirection) {
      var allowedDirections;
      switch (this.direction) {
        case "left":
        case "right":
          allowedDirections = ["up", "down"];
          break;
        case "down":
        case "up":
          allowedDirections = ["left", "right"];
          break;
        default:
          throw ("invalid direction");
      }
      if (allowedDirections.indexOf(newDirection) > -1) {
        this.direction = newDirection;
      }
    };
 
    this.checkCollision = function() {
      var wallCollision = false;
      var snakeCollision = false;
      var head = this.body[0];
      var rest = this.body.slice(1);
      var snakeX = head[0];
      var snakeY = head[1];
      var minX = 0;
      var minY = 0;
      var maxX = widthInBlocks - 1;
      var maxY = heightInBlocks - 1;
      var isNotBetweenHorizontalWalls = snakeX < minX || snakeX > maxX;
      var isNotBetweenVerticalWalls = snakeY < minY || snakeY > maxY;
 
      if (isNotBetweenHorizontalWalls || isNotBetweenVerticalWalls) {
        wallCollision = true;
      }
 
      for (var i = 0; i < rest.length; i++) {
        if (snakeX === rest[0] && snakeY === rest[1]) {
          snakeCollision = true;
        }
      }
 
      return wallCollision || snakeCollision;
    };
 
    this.isEatingApple = function(appleToEat) {
      var head = this.body[0];
      if (head[0] === appleToEat.position[0] && head[1] === appleToEat.position[1]) {
        return true;
      } else {
        return false;
      }
    };
 
  }
 
  function Apple(position) {
    this.position = position;
 
    this.draw = function() {
      ctx.save();
      ctx.fillStyle = "#33cc33";
      ctx.beginPath();
      var radius = blockSize / 2;
      var x = this.position[0] * blockSize + radius;
      var y = this.position[1] * blockSize + radius;
      ctx.arc(x, y, radius, 0, Math.PI * 2, true);
      ctx.fill();
      ctx.restore();
    };
 
    this.setNewPosition = function() {
      var newX = Math.round(Math.random() * (widthInBlocks - 1));
      var newY = Math.round(Math.random() * (heightInBlocks - 1));
      this.position = [newX, newY];
    };
 
    this.isOnSnake = function(snakeToCheck) {
      var isOnSnake = false;
      for (var i = 0; i < snakeToCheck.body.length; i++) {
        if (this.position[0] === snakeToCheck.body[0] && this.position[1] === snakeToCheck.body[1]) {
          isOnSnake = true;
        }
      }
      return isOnSnake;
    };
 
  }
 
  document.onkeydown = function handleKeyDown(e) {
    var key = e.keyCode;
    var newDirection;
    switch (key) {
      case 37:
        newDirection = "left";
        break;
      case 38:
        newDirection = "up";
        break;
      case 39:
        newDirection = "right";
        break;
      case 40:
        newDirection = "down";
        break;
      case 32:
        restart();
        return;
      default:
        return;
    }
    snakee.setDirection(newDirection);
  };
}
 
</script>
    </body>
</html>

Gusroi Le 4 avril 2019 à 18:22 (Édité le 4 avril 2019 à 18:23)

Salut, pour passer une variable du JS vers du PHP c'est très difficile, mais j'ai une solution pour toi
au lieu de vouloir actualiser ton meilleur score dans le JS tu dois faire une requête SQL en php qui va sortir le meilleur score de la table
ex :
$stm->prepare("SELECT meilleurScore FROM laTable WHERE meilleurScore=?"); $stm->execute(array($max));
Donc en gros tu sors le score le plus haut de la table et tu mets la condition (WHERE) que le meilleurScore soit plus grand que $max, et tu modifies $max avec le JS
Voilà j'espère que j'ai été clair 😋

CodeOtaku Le 5 avril 2019 à 17:42

Salut, j'ai essayé de faire ce que tu m'as dit, mais j'ai des problèmes (le serpent ne s'affiche même plus) et je comprend pas trop comment faire pour modifier la variable $max avec le JS
if (score > bestScore) { <?php $max ?> = bestScore = score; <?php $bdd->prepare("SELECT bestscore FROM highscore WHERE bestscore=$max"); $bdd->execute(array($max)); ?> }

Vous devez être connecté pour poster une réponse. Se connecter ou Créer un compte

Problème pour stocker le meilleur score dans une base de données

Échange

Articles / Vidéos

Ressources