Partage

15 puzzle fonction mélanger

Sujet résolu

2 avril 2020 à 18:46:50

bonjour. Voici le code d'un petit jeu qui s'appelle 15 puzzle (sans le css). Je l'ai recupérer et j'y est ajouter plusieur fonction comme le nombre de coup... Mais j'ain un probleme

Je vais essayer d'etre clair...

Bon enfaite, j'aimerai realiser une fonction qui quand on appui sur le bouton jouer, toute les tuiles se mélange. Moi, j'avais fait une variable qui les métait dans le désordre mais il falait les remplir a la main... En gros ce n'était pas vraiment aléatoir. De plus ca se lance (le mélange) quand on recharger la page et non pas quand on click sur le bouton...

pouvez vous m'aider

merci d'avance

Voici un bout du code javascript

function entierAleatoire(min, max){
	return Math.floor(Math.random() * (max - min + 1)) + min;
}
var entier = entierAleatoire(1,5);
// var entier va servi plus loin
	function jouer(){
	location.href= 'index.html' ;
		//je recharge la page pour que ca remelange le plateau
	}
	


    // melange le plateau
	if (entier ==1){
    var startOrder = [1,2,3,4,5,6,7,8,9,10,11,12,13,0,14,15];
    }
	if (entier ==2){
    var startOrder = [1,0,3,4,5,6,7,8,9,10,12,11,13,2,14,15];
    }
	if (entier ==3){
    var startOrder = [0,14,3,4,1,6,7,8,9,10,12,11,13,2,5,15];
    }
	if (entier ==4){
    var startOrder = [5,15,12,4,8,7,0,14,13,6,1,3,11,2,10,9];
    }
	if (entier ==5){
    var startOrder = [7,5,11,2,4,8,14,9,13,10,0,1,3,15,6,12];
    }

voici le code html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<link rel="stylesheet" type="text/css" href="style.css">


<title>React numbers puzzle</title>

</head>
<body>



<div id=stats>
<div class="title" style=font-size:0px>Puzzle <span>"Num"</span></div>
<button class="new" onclick=jouer()>Jouer</button>
<div class="timer2"><span>"0"</span> secondes</div>
<div class=mouv><span id="mouvements">"0"</span> Coups</div>
</div>


<div id="container">
  <div class="inner-container"></div>
</div>
<divclass="timer">
  <div class="winMsg hide">Bravo vous avez réussis ce puzzle en <span>"0"</span> secondes et en <span id="mouvements2">"0"</span> coups</div>
</div>

<ul style=display:none class="puzzle-list"></ul>



<script type='text/javascript' src="script.js"></script>



</body>
</html>

-
Edité par PierreHofmann1 3 avril 2020 à 10:02:36

Lartak

2 avril 2020 à 23:53:12

Bonsoir.

Il y a plusieurs problèmes dans ton code HTML.

L'attribut align est obsolète, donc à ne plus utiliser.

Il manque des quotes autour des valeurs de plusieurs attributs.

Trop de balises h1 (5 au total, sans celle qui est commentée).

Donc avant de vouloir résoudre ton problème de JavaScript, il te faut corriger tout ça.

Face a quelqu'un pour qui l'on n'éprouve que de l'aversion et du mépris, les yeux d'un homme deviennent extrêmement froids et cruels.

PierreHofmann1

3 avril 2020 à 10:00:22

ça y est... J'ai modifié cela

Or, ca ne change pas le probleme

AliasDmc

3 avril 2020 à 12:17:07

Bonjour PierreHofmann1,

un exemple :

https://codepen.io/Zonecss/pen/NWqmYoa

Découvrez les Css avec la zonecss.fr

PierreHofmann1

3 avril 2020 à 15:18:50

Merci beaucoup c'est pile ce que je cherche...

Or, ses élement a mélanger son dans un tableau et moi non...

Je ne sais pas trop comment l'insérer dans mon code car sa fonction ne marcherai pas dans mon javascript...et je suis débutant...

au debut, j'avais pensé a metre dans la variable startOrder des variable avec un nombre aléatoire...mais ça ne marche pas

exemple:

var startOrder[var number1,var number2,...]

et le var number seraichoisis au hazard entre 0 et 15

-
Edité par PierreHofmann1 3 avril 2020 à 15:22:34

AliasDmc

3 avril 2020 à 15:49:02

Bonjour PierreHofmann1,

function getRandomTable(max) { 
  let aTmp = Array.from(new Array(max).keys()), aFinal=[];
  while(aTmp.length){
    aFinal.push( aTmp.splice( getRandomInt(aTmp.length), 1)[0]);
  } //while
  return aFinal;
}//fct 

function getRandomInt(max) {
  return Math.floor(Math.random() * Math.floor(max));
}//fct 
var startOrder= getRandomTable(15)

ça marche pas ?

-
Edité par AliasDmc 3 avril 2020 à 15:49:32

Découvrez les Css avec la zonecss.fr

PierreHofmann1

3 avril 2020 à 16:50:25

Merci beaucoup ca marche !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Par contre sur le bouton jouer, il faut mettre quel fonction dans onclick pour que ca remélange le plateau???

Encore MERCI !!!!!!!

-
Edité par PierreHofmann1 3 avril 2020 à 16:55:51

AliasDmc

3 avril 2020 à 17:05:33

Bonjour PierreHofmann1,

Il est difficile de savoir ce que tu as fais

Je que je peux te dire c'est que quand tu vas cliquer sur jouer tu déclenchera une fonction qui fera un

startOrder= getRandomTable(15)

Découvrez les Css avec la zonecss.fr

PierreHofmann1

3 avril 2020 à 17:15:46

J'ai bien fait cela or ca ne change pas le plateau.

Peut etre que la variable ne peut pas etre modifier ou autre chose...

Je pourrai faire un location.href= 'index.html' pour recharger la page mais ce n'est pas super.

Pour ne pas reouvrir un autre sujet, je voulais savoir si il était possible de tester la solvabiliter du jeu...Mais ca doit etre tres compliquer car il y a beaucoup de condition...

Merci encore

AliasDmc

3 avril 2020 à 19:02:22

Bonjour PierreHofmann1,

Pour moi cela devrait fonctionner

function getRandomTable(max) {
  let aTmp = Array.from(new Array(max).keys()), aFinal=[];
  while(aTmp.length){
    aFinal.push( aTmp.splice( getRandomInt(aTmp.length), 1)[0]);
  } //while
  return aFinal;
}//fct

function getRandomInt(max) {
  return Math.floor(Math.random() * Math.floor(max));
}//fct
var startOrder= getRandomTable(15)
function jouer(){
  startOrder= getRandomTable(15)
}


/*
    // melange le plateau
    if (entier ==1){
    var startOrder = [1,2,3,4,5,6,7,8,9,10,11,12,13,0,14,15];
    }
    if (entier ==2){
    var startOrder = [1,0,3,4,5,6,7,8,9,10,12,11,13,2,14,15];
    }
    if (entier ==3){
    var startOrder = [0,14,3,4,1,6,7,8,9,10,12,11,13,2,5,15];
    }
    if (entier ==4){
    var startOrder = [5,15,12,4,8,7,0,14,13,6,1,3,11,2,10,9];
    }
    if (entier ==5){
    var startOrder = [7,5,11,2,4,8,14,9,13,10,0,1,3,15,6,12];
    }

     */

Découvrez les Css avec la zonecss.fr

PierreHofmann1

3 avril 2020 à 19:56:53

Ba j'ai bien fait ca mais ca ne marche pas... je ne comprend pas pourquoi?!!?

AliasDmc

4 avril 2020 à 9:03:44

Bonjour PierreHofmann1,

As tu des erreur Javascript

Quand tu dis sa marche pas cela veut dire :

que startOrder n'est pas mis a jour
ou bien que ton jeu marche pas ?

Découvrez les Css avec la zonecss.fr

PierreHofmann1

4 avril 2020 à 10:31:56

Non le jeu n'est pas mis a jour... pour le mettre a jour, il faut que je recharge la page

AliasDmc

4 avril 2020 à 11:01:03

Bonjour PierreHofmann1,

Ok, si c'est le jeux qui n'est pas mis à jour, c'est un autre problème.

Sans le javascript complet, difficile de t'aider.

Découvrez les Css avec la zonecss.fr

PierreHofmann1

4 avril 2020 à 11:17:26

voici le javascript complet...

	
function getRandomTable(max) {
  let aTmp = Array.from(new Array(max).keys()), aFinal=[];
  while(aTmp.length){
    aFinal.push( aTmp.splice( getRandomInt(aTmp.length), 1)[0]);
  } //while
  return aFinal;
}//fct
 
function getRandomInt(max) {
  return Math.floor(Math.random() * Math.floor(max));
}//fct
var startOrder= getRandomTable(16)
function jouer(){
  startOrder= getRandomTable(16)
}




var puzzle = {
	

	// var mouvements=0
  complete: false,
  linksGenerated: false,
  empty: {
    emptyPos: 0,
    emptyRow: 0,
    emptyCol: 0,
    
    emptyFindOptions: function(){
      // Top
      puzzle.empty.emptyOptions[0].push(+puzzle.empty.emptyRow-1);
      puzzle.empty.emptyOptions[0].push(+puzzle.empty.emptyCol);
      // Bottom
      puzzle.empty.emptyOptions[1].push(+puzzle.empty.emptyRow+1);
      puzzle.empty.emptyOptions[1].push(+puzzle.empty.emptyCol);
      // Left
      puzzle.empty.emptyOptions[2].push(+puzzle.empty.emptyRow);
      puzzle.empty.emptyOptions[2].push(+puzzle.empty.emptyCol-1);
      // Right
      puzzle.empty.emptyOptions[3].push(+puzzle.empty.emptyRow);
      puzzle.empty.emptyOptions[3].push(+puzzle.empty.emptyCol+1);
    }
  },
  
  timer: {
    started: false,
    timerRef: undefined,
    startTimer: function(){  
      if(!this.started){
        this.started = true;
        var start = new Date().getTime(), elapsed = '0.0', h1 = document.querySelector("h1.timer span");
        this.timerRef = setInterval(function(){
          var time = new Date().getTime() - start;
          elapsed = Math.floor(time / 100) / 10;
          if(Math.round(elapsed) == elapsed) 
		  // { elapsed += '.0'; }
          h1.innerText = elapsed;
		document.getElementById("mouvements2").innerHTML=mouvements+1;
        }, 100);
      }
    }
  },
  timer2: {
    started: false,
    timerRef: undefined,
    startTimer: function(){  
      if(!this.started){
        this.started = true;
        var start = new Date().getTime(), elapsed = '0.0', h1 = document.querySelector("h1.timer2 span");
        this.timerRef = setInterval(function(){
          var time = new Date().getTime() - start;
          elapsed = Math.floor(time / 100) / 10;
          if(Math.round(elapsed) == elapsed) 
		  // { elapsed += '.0'; }
          h1.innerText = elapsed;
		  document.getElementById("mouvements2").innerHTML=mouvements+1;
        }, 100);
      }
    }
  },


  startPoints: [
  
    [12,15,3,4,10,7,0,13,5,9,8,6,11,14,2,1],
    [13,6,8,7,14,4,12,2,10,1,3,11,9,15,5,0],
    [14,13,5,12,2,3,15,4,8,0,11,9,10,1,7,6],
    [3,2,1,4,5,0,11,8,9,7,10,12,13,14,6,15],
	[1,2,3,4,5,6,7,8,9,10,11,12,13,0,14,15],
	[1,2,3,4,5,6,7,8,9,10,11,12,13,14,0,15],
    // [1,2,3,4,5,6,7,8,9,10,11,12,13,0,14,15]
  ],

  currentOrder: [],
  desiredOrder: [],
  checkVictory: function(){
    var tiles = document.querySelectorAll(".tile");
    this.currentOrder = [];
    for(i=0; i < tiles.length; i++) {
      this.currentOrder.push(tiles[i].dataset.position);
    }
    var desired = this.desiredOrder.slice(0);
    var a = desired.indexOf(0);
    desired.splice(a,1);
    var a = desired.join("");
    var b = this.currentOrder.join("");
    
    if(a === b) {
      return true;
    }
    else {
      return false;
    }  
  },
// ON TESTE SI LA TUILE EST A LA BONNE PLACE
  checkSingle: function(el){
      if(el.dataset.position === el.dataset.num) {
          return true;
      }
      else {
          return false;
      }
  },
  
// ON TESTE SI LA TUILE OU ON CLICK EST A COTE DE LA TUILE VIDE POUR POUVOIR LES ECHANGER
  checkTile: function(num, col, row){
    for(i=0; i < this.empty.emptyOptions.length; i++){
      if(this.empty.emptyOptions[i][0] == row && this.empty.emptyOptions[i][1] == col) {
        return true;
      }
    }
    return false;
  },
  
  
  
// dd  
  
  

  moveTile: function(el, col, row) {
    if(!this.complete) {
		
      var num = el.dataset.position;
      col = el.dataset.col;
      row = el.dataset.row;
	  // mouvements =+ 1;
		// alert(mouvement);
      if(this.checkTile(+num, col, row)){
		mouvements += 1; 
		  // alert(mouvements)
		  document.getElementById("mouvements").innerHTML=mouvements;
        el.dataset.position = this.empty.emptyPos;
        el.dataset.col = this.empty.emptyCol;
        el.dataset.row = this.empty.emptyRow;
        this.empty.emptyPos = num;
        this.empty.emptyRow = row;
        this.empty.emptyCol = col;
        this.empty.emptyOptions = [[],[],[],[]];
        this.empty.emptyFindOptions();
		
        // Start timer
        this.timer.startTimer();
        this.timer2.startTimer();
      }

      // Check if match
      this.checkSingle(el) ? el.classList.add("match") : el.classList.remove("match");
      // Check if all match
      if(this.checkVictory()) {
         clearInterval(puzzle.timer.timerRef);
         clearInterval(puzzle.timer2.timerRef);
		 
         document.querySelector(".winMsg").classList.remove("hide");
         this.complete = true;
         document.querySelector(".inner-container").classList.add("complete");
      }
    }
  },
  
// REINITIALISATION DU TIMER
  init: function(order){
    var r, i, pos, tiles, col, row, entries, list, links, container = document.querySelector(".inner-container");
    
    // Stop and reset timer if running
    if(puzzle.timer.timerRef !== undefined){
      clearInterval(puzzle.timer.timerRef);
      this.timer.started = false;
      document.querySelector("h1.timer span").innerText = "0";
      document.querySelector("h1.mouv span").innerText = "0";
	  document.getElementById("mouvements2").innerHTML="0";
      mouvements=0

    }
    if(puzzle.timer.timerRef !== undefined){
      clearInterval(puzzle.timer2.timerRef);
      this.timer2.started = false;
      document.querySelector("h1.timer2 span").innerText = "0";
      document.querySelector("h1.mouv span").innerText = "0";
	  document.getElementById("mouvements2").innerHTML="0";
      mouvements=0

    }
    this.empty.emptyOptions = [[],[],[],[]];
    this.currentOrder = [];
    this.desiredOrder = [];
    
// Create links if not already there
// LIGNE 174 (list.insertAdjacentHTML) SON LIEN ET SON NOM
    if(!this.linksGenerated){
      for(i=0, list = document.querySelector(".puzzle-list"), entries = this.startPoints.length; i < entries; i++) {
        list.insertAdjacentHTML('beforeend', '<li>[<a href="/" data-puzzle="' + (i+1) + '">Puzzle ' + (i+1) + '</a>]</li>');
      }    
      this.linksGenerated = true;
      // Attach event handlers to links
      links = document.querySelectorAll(".puzzle-list li");
      for(i = 0; i < links.length; i++){
          links[i].children[0].addEventListener("click", function(e){
             e.preventDefault();
             puzzle.init(e.target.dataset.puzzle);
          });
      }
    }
    
    // Declare complete to be false
    this.complete = false;
    document.querySelector(".winMsg").classList.add("hide");
    document.querySelector(".inner-container").classList.remove("complete");
    
    // Get rid of any tiles if they exist
    while (container.firstChild) {
      container.removeChild(container.firstChild);
    }
    

    // Sort Title
    document.querySelector("h1.title span").innerText = order;
    
    //Populate container
    for(i = 0, pos = 1, col = 1, row = 1; i < startOrder.length; pos++, i++) {
    
      // If 0 found declare it as empty space and update this.empty accordingly
      if(startOrder[i] === 0) {
        this.empty.emptyPos = pos;
        this.empty.emptyRow = row;
        this.empty.emptyCol = col;
        this.empty.emptyFindOptions();
      }
      else {      
        container.insertAdjacentHTML('beforeend', '<div class="tile" data-row="' + row + '" data-num="' + startOrder[i] + '" data-col="' + col + '" data-position="' + pos + '"><span>' + startOrder[i] + '</span></div>');     
      }
      // Update row 
      // Reset column every 4
      pos % 4 === 0 ? (col = 1, row++) : col++;
      this.desiredOrder.push(startOrder[i]);   
    };

    // Attach event handlers to tiles
    tiles = document.getElementsByClassName("tile");
    for(i = 0; i < tiles.length; i++){
        this.checkSingle(tiles[i]) ? tiles[i].classList.add("match") : tiles[i].classList.remove("match");
        tiles[i].addEventListener("click", function(){
           puzzle.moveTile(this)
		   ;
        });
    }
  }
}
var mouvements=0;
puzzle.init(1);

Certaine ligne ne serve peut etre pas car le code de base ne vient pas de moi

-
Edité par PierreHofmann1 4 avril 2020 à 11:19:15

AliasDmc

4 avril 2020 à 13:56:37

Bonjour PierreHofmann1,

https://codepen.io/Zonecss/pen/poJmXEE

Découvrez les Css avec la zonecss.fr

PierreHofmann1

4 avril 2020 à 14:05:00

Merci beaucoup AliasDmc pour le temps que tu a pris pour m'aider. Cela fonctionne tres bien et je t'en remercie encore...

Je vais pourvoir clore se sujet.