Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
3000 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Aide pour créer un puzzle

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Aide pour créer un puzzle

n°2255951
hyogas
Posté le 16-04-2015 à 17:10:31  profilanswer
 

Bonjour,
 
J'aurai voulu votre aide pour finir la création de puzzle pour mon site sans passer par Java puisque Chrome n'en veux plus.
Jusqu'à présent mon puzzle en java était celui ci http://cartoons1.free.fr/Monsite/puzzle/120.htm ne sachant pas comment faire le même sans java j'en ai fait un autre : http://cartoons1.free.fr/Monsite/puzzle/puzzle10.html
Il marche avec internet explorer mais il plante avec Chrome pouvez vous m'aider à trouver une solution.
Merci de votre aide

mood
Publicité
Posté le 16-04-2015 à 17:10:31  profilanswer
 

n°2255962
caps lock
Posté le 16-04-2015 à 19:10:30  profilanswer
 

Vérifie ton code il y a déjà des erreurs assez grossières ...
Tu déclares 2 fois ton body
la balise <center> alors que tu utilises du css
bgcolor="white" alors que c'est déjà du blanc .. je ne suis pas allé plus loin

n°2255966
hyogas
Posté le 16-04-2015 à 20:35:20  profilanswer
 

Merci pour ton aide j'ai essaie de modifier la page mais je ne suis pas un professionnel.
Voici ce que cela donne http://cartoons1.free.fr/Monsite/puzzle/puzzle12.html
Le problème c'est que le puzzle ne se centre pas
 
Voici le code en entier :  
<!DOCTYPE html>
<html>
<head>
<BODY background="http://cartoons1.free.fr/Monsite/puzzle/image/fondpageVide.jpg">
<title></title>
    <script>
        const PUZZLE_DIFFICULTY = 4;
        const PUZZLE_HOVER_TINT = '#009900';
 
        var _stage;
        var _canvas;
 
        var _img;
        var _pieces;
        var _puzzleWidth;
        var _puzzleHeight;
        var _pieceWidth;
        var _pieceHeight;
        var _currentPiece;
        var _currentDropPiece;  
 
        var _mouse;
 
        function init(){
            _img = new Image();
            _img.addEventListener('load',onImage,false);
            _img.src = "http://cartoons1.free.fr/Monsite/puzzle/image/1397cb29.jpg";
        }
        function onImage(e){
            _pieceWidth = Math.floor(_img.width / PUZZLE_DIFFICULTY)
            _pieceHeight = Math.floor(_img.height / PUZZLE_DIFFICULTY)
            _puzzleWidth = _pieceWidth * PUZZLE_DIFFICULTY;
            _puzzleHeight = _pieceHeight * PUZZLE_DIFFICULTY;
            setCanvas();
            initPuzzle();
        }
        function setCanvas(){
            _canvas = document.getElementById('canvas');
            _stage = _canvas.getContext('2d');
            _canvas.width = _puzzleWidth;
            _canvas.height = _puzzleHeight;
            _canvas.style.border = "1px solid black";
        }
        function initPuzzle(){
            _pieces = [];
            _mouse = {x:0,y:0};
            _currentPiece = null;
            _currentDropPiece = null;
            _stage.drawImage(_img, 0, 0, _puzzleWidth, _puzzleHeight, 0, 0, _puzzleWidth, _puzzleHeight);
                       buildPieces();
        }
        function createTitle(msg){
            _stage.fillStyle = "#000000";
            _stage.globalAlpha = .4;
            _stage.fillRect(100,_puzzleHeight - 40,_puzzleWidth - 200,40);
            _stage.fillStyle = "#FFFFFF";
            _stage.globalAlpha = 1;
            _stage.textAlign = "center";
            _stage.textBaseline = "middle";
            _stage.font = "20px Arial";
            _stage.fillText(msg,_puzzleWidth / 2,_puzzleHeight - 20);
        }
        function buildPieces(){
            var i;
            var piece;
            var xPos = 0;
            var yPos = 0;
            for(i = 0;i < PUZZLE_DIFFICULTY * PUZZLE_DIFFICULTY;i++){
                piece = {};
                piece.sx = xPos;
                piece.sy = yPos;
                _pieces.push(piece);
                xPos += _pieceWidth;
                if(xPos >= _puzzleWidth){
                    xPos = 0;
                    yPos += _pieceHeight;
                }
            }
            document.onmousedown = shufflePuzzle;
        }
        function shufflePuzzle(){
            _pieces = shuffleArray(_pieces);
            _stage.clearRect(0,0,_puzzleWidth,_puzzleHeight);
            var i;
            var piece;
            var xPos = 0;
            var yPos = 0;
            for(i = 0;i < _pieces.length;i++){
                piece = _pieces[i];
                piece.xPos = xPos;
                piece.yPos = yPos;
                _stage.drawImage(_img, piece.sx, piece.sy, _pieceWidth, _pieceHeight, xPos, yPos, _pieceWidth, _pieceHeight);
                _stage.strokeRect(xPos, yPos, _pieceWidth,_pieceHeight);
                xPos += _pieceWidth;
                if(xPos >= _puzzleWidth){
                    xPos = 0;
                    yPos += _pieceHeight;
                }
            }
            document.onmousedown = onPuzzleClick;
        }
        function onPuzzleClick(e){
            if(e.layerX || e.layerX == 0){
                _mouse.x = e.layerX - _canvas.offsetLeft;
                _mouse.y = e.layerY - _canvas.offsetTop;
            }
            else if(e.offsetX || e.offsetX == 0){
                _mouse.x = e.offsetX - _canvas.offsetLeft;
                _mouse.y = e.offsetY - _canvas.offsetTop;
            }
            _currentPiece = checkPieceClicked();
            if(_currentPiece != null){
                _stage.clearRect(_currentPiece.xPos,_currentPiece.yPos,_pieceWidth,_pieceHeight);
                _stage.save();
                _stage.globalAlpha = .9;
                _stage.drawImage(_img, _currentPiece.sx, _currentPiece.sy, _pieceWidth, _pieceHeight, _mouse.x - (_pieceWidth / 2), _mouse.y - (_pieceHeight / 2), _pieceWidth, _pieceHeight);
                _stage.restore();
                document.onmousemove = updatePuzzle;
                document.onmouseup = pieceDropped;
            }
        }
        function checkPieceClicked(){
            var i;
            var piece;
            for(i = 0;i < _pieces.length;i++){
                piece = _pieces[i];
                if(_mouse.x < piece.xPos || _mouse.x > (piece.xPos + _pieceWidth) || _mouse.y < piece.yPos || _mouse.y > (piece.yPos + _pieceHeight)){
                    //PIECE NOT HIT
                }
                else{
                    return piece;
                }
            }
            return null;
        }
        function updatePuzzle(e){
            _currentDropPiece = null;
            if(e.layerX || e.layerX == 0){
                _mouse.x = e.layerX - _canvas.offsetLeft;
                _mouse.y = e.layerY - _canvas.offsetTop;
            }
            else if(e.offsetX || e.offsetX == 0){
                _mouse.x = e.offsetX - _canvas.offsetLeft;
                _mouse.y = e.offsetY - _canvas.offsetTop;
            }
            _stage.clearRect(0,0,_puzzleWidth,_puzzleHeight);
            var i;
            var piece;
            for(i = 0;i < _pieces.length;i++){
                piece = _pieces[i];
                if(piece == _currentPiece){
                    continue;
                }
                _stage.drawImage(_img, piece.sx, piece.sy, _pieceWidth, _pieceHeight, piece.xPos, piece.yPos, _pieceWidth, _pieceHeight);
                _stage.strokeRect(piece.xPos, piece.yPos, _pieceWidth,_pieceHeight);
                if(_currentDropPiece == null){
                    if(_mouse.x < piece.xPos || _mouse.x > (piece.xPos + _pieceWidth) || _mouse.y < piece.yPos || _mouse.y > (piece.yPos + _pieceHeight)){
                        //NOT OVER
                    }
                    else{
                        _currentDropPiece = piece;
                        _stage.save();
                        _stage.globalAlpha = .4;
                        _stage.fillStyle = PUZZLE_HOVER_TINT;
                        _stage.fillRect(_currentDropPiece.xPos,_currentDropPiece.yPos,_pieceWidth, _pieceHeight);
                        _stage.restore();
                    }
                }
            }
            _stage.save();
            _stage.globalAlpha = .6;
            _stage.drawImage(_img, _currentPiece.sx, _currentPiece.sy, _pieceWidth, _pieceHeight, _mouse.x - (_pieceWidth / 2), _mouse.y - (_pieceHeight / 2), _pieceWidth, _pieceHeight);
            _stage.restore();
            _stage.strokeRect( _mouse.x - (_pieceWidth / 2), _mouse.y - (_pieceHeight / 2), _pieceWidth,_pieceHeight);
        }
        function pieceDropped(e){
            document.onmousemove = null;
            document.onmouseup = null;
            if(_currentDropPiece != null){
                var tmp = {xPos:_currentPiece.xPos,yPos:_currentPiece.yPos};
                _currentPiece.xPos = _currentDropPiece.xPos;
                _currentPiece.yPos = _currentDropPiece.yPos;
                _currentDropPiece.xPos = tmp.xPos;
                _currentDropPiece.yPos = tmp.yPos;
            }
            resetPuzzleAndCheckWin();
        }
        function resetPuzzleAndCheckWin(){
            _stage.clearRect(0,0,_puzzleWidth,_puzzleHeight);
            var gameWin = true;
            var i;
            var piece;
            for(i = 0;i < _pieces.length;i++){
                piece = _pieces[i];
                _stage.drawImage(_img, piece.sx, piece.sy, _pieceWidth, _pieceHeight, piece.xPos, piece.yPos, _pieceWidth, _pieceHeight);
                _stage.strokeRect(piece.xPos, piece.yPos, _pieceWidth,_pieceHeight);
                if(piece.xPos != piece.sx || piece.yPos != piece.sy){
                    gameWin = false;
                }
            }
            if(gameWin){
                setTimeout(gameOver,500);
            }
        }
        function gameOver(){
            document.onmousedown = null;
            document.onmousemove = null;
            document.onmouseup = null;
            initPuzzle();
        }
        function shuffleArray(o){
            for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
            return o;
        }
 
    </script>
</head>
<body onload="init();">
    <canvas id="canvas"></canvas>
</body>
</APPLET><br>
<CENTER><p class=MsoNormal style='text-align:center;text-align:center'>
<p class=MsoNormal><span lang=fr style='font-size:12.0pt;color:white;language:fr'>Cliquez sur l'image pour lancer le Puzzle, pas besoin de vous expliquer le but du jeu :o)</span></p><br></CENTER>
</BODY>
<p class=MsoNormal style='text-align:center;text-align:center'><a
  href="http://cartoons1.free.fr/Monsite/index_fichiers1/page0001.htm"><span
  lang=fr style='font-size:14.0pt;font-family:"Baskerville Old Face";
  font-style:italic;color:red;text-decoration:underline;font-weight:bold;language:fr'>Page des jeux</span></a>
  <a
  href="http://cartoons.spirit.free.fr/Monsite/index_fichiers/page0001.htm"><span
  lang=fr style='font-size:14.0pt;font-family:"Baskerville Old Face";
  font-style:italic;color:red;text-decoration:underline;font-weight:bold;language:fr'>Page d accueil</span></a></p>
  </div></form></p>
   </div>
  </div>
<CENTER><p class=MsoNormal style='text-align:center;text-align:center'>
<p class=MsoNormal><span lang=fr style='font-size:9.0pt;font-family:Arial;
  color:white;language:fr'>FOUNISSEUR D ACCES:  Orange, Free et  Voila.fr</span></p>
</CENTER></html>

n°2256081
hyogas
Posté le 17-04-2015 à 18:57:55  profilanswer
 

J'ai reçu une aide sur un autre forum et cela fonctionne sur Chrome et internet explorer.  
Voici ce que cela donne http://cartoons1.free.fr/Monsite/puzzle/120.htm


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Aide pour créer un puzzle

 

Sujets relatifs
aide pour un travail en bashCréer un classement en python 2.7
Besoin d'aide Algorithmes VBACréer des séries à partir de plusieurs colonnes d'une table
Besoin d'aide en programmation c++Créer une classe pour se connecter au ftp
aide pour mon boulot[SQL] Aide requête avec enregistrement facultatif
Aide sur Javascript pour un pdf intéractifCréer un formulaire pour sélectionner des PDF à inclure dans un zip ?
Plus de sujets relatifs à : Aide pour créer un puzzle


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR