Aide pour créer un puzzle

Aide pour créer un puzzle - HTML/CSS - Programmation

Marsh Posté le 16-04-2015 à 17:10:31    

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

Reply

Marsh Posté le 16-04-2015 à 17:10:31   

Reply

Marsh Posté le 16-04-2015 à 19:10:30    

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

Reply

Marsh Posté le 16-04-2015 à 20:35:20    

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>

Reply

Marsh Posté le 17-04-2015 à 18:57:55    

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

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed