Sujet Précédent Sujet Suivant

Aide pour centrer un jeu en css

Résolu/Fermé
hyoga - 17 avril 2015 à 10:25
 hyoga - 17 avril 2015 à 18:44
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/puzzle12.html
Le problème c'est que je ne suis pas un pro et que je n'arrive pas à centrer le puzzle pouvez vous m'aider à trouver une solution.
Merci de votre aide

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>
A voir également:

2 réponses

Réponse 1 / 2
RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 1 353
17 avril 2015 à 12:33
Salut

en fait il faudrait tout refaire le code est obsolete !

mais bon si tu ni pige rien on va pas te compliquer la tache ;-))

j ai juste mis le canvas qui contient ton puzzle au centre en le mettant tout simplement dans le <center> qui est une balise obsolete mais bon !

j ai aussi un peu corrige les erreur les + grosses (multiple balises ,balises mal place ,ect ) mais j ai laisse ton code comme il etait ;-) 

<!DOCTYPE html>
<html>
  <head>
    <title>
    </title>
<script type="text/javascript">
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();" background="http://cartoons1.free.fr/Monsite/puzzle/image/fondpageVide.jpg">
    <center>
      <canvas id="canvas">
      </canvas>
      <br>
      <p class="MsoNormal" style='text-align:center;text-align:center'>
      </p>
      <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>
      <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>
      <p class="MsoNormal" style='text-align:center;text-align:center'>
      </p>
      <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>
  </body>
</html>


mais comme je le redis ce code regle ta demande mais
CE CODE N'EST PAS A PRENDRE EN EXEMPLE, PAR D AUTRE QUE TOI !!!

A+
0
Réponse 2 / 2
hyoga
17 avril 2015 à 13:30
Bonjour,

Je te remercie pour ton aide voici ce que cela donne : http://cartoons1.free.fr/Monsite/puzzle/puzzle14.html

Cela marche parfaitement avec Internet explorer par contre avec chrome je ne peux plus déplacer les pièces du puzzle.
0
RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 1 353
Modifié par RAD ZONE le 17/04/2015 à 17:47
Ok
la ca va etre trop complexe pour toi , il faudrait modifier le js pour l adapter a chrome !
alors je t ai fais un truc tres simple avec une iframe
telecharge les 2 html ici
http://www.solidfiles.com/d/0fc430a46a/
a+
0
hyoga > RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024
17 avril 2015 à 18:44
Je te remercie cela marche chez internet explorer et chrome et en plus c'est simple d'utilisation je vais pouvoir le refaire pour les 20 autres puzzles que j'ai.
Voilà ce que cela donne pour ceux que j'ai déjà refait :
http://cartoons1.free.fr/Monsite/puzzle/120.htm
http://cartoons1.free.fr/Monsite/puzzle/121.htm
http://cartoons1.free.fr/Monsite/puzzle/122.htm
http://cartoons1.free.fr/Monsite/puzzle/123.htm
http://cartoons1.free.fr/Monsite/puzzle/130.htm
http://cartoons1.free.fr/Monsite/puzzle/139.htm
Merci encore pour ton aide
0

Discussions similaires

Avis sur les sites pour Gagner de l'Argent ?
C0sm3tik -
Arnack -

8 réponses
trait horizontal avec du css
tipi75 -
tipi75 -

8 réponses
Envoyé un SMS pour participer à un jeu télévisé
Leocadie -
jordane45 -

5 réponses
jeux affichés sur le mauvais ecran
Julie22 -
Elia -

5 réponses
Jeu de société shazam
kouki -
Lice2laLoyre -

10 réponses