Puzzlespil

Du kan tilføje en ny funktion:

[code]function initPuzzle2()
{
  initPuzzle();
  scramble();
}[/code]
og lade onload pege på den i stedet for:

[code]window.onload = initPuzzle2;[/code]

Jeg har prøvet, men spillet starter stadig op med et samlet billede.

funktion inetPuzzle2() har jeg placeret efter funktion inetPuzzle()

mvh. rwj

window.onload = initPuzzle2;

Har du husket at ændre i den linje også? Ellers bliver initPuzzle2 aldrig kaldt.

Det skulle være i orden efter dine anvisninger, men billedet er stadig samlet når man åbner siden, hele koden er her:

    <script type="text/javascript">
       
    var puzzleImages = ['image6.jpg'];    // Array of images to choose from
    var rows = 3;
    var cols = 4;
       
    var imageArray = new Array();
    var imageInUse = false;
    var puzzleContainer;
    var activeImageIndicator = false;
    var activeSquare = false;     // Reference to active puzzle square
    var squareArray = new Array(); // Array with references to all the squares

   
    var emptySquare_x;
    var emptySquare_y;
   
    var colWidth;
    var rowHeight;
   
    var gameInProgress = false;
   
    var revealedImage = false;
   
    for(var no=0;no<puzzleImages.length;no++){
        imageArray[no] = new Image();
        imageArray[no].src = puzzleImages[no];   
    }
   
   
    function initPuzzle()
    {
        gameInProgress = false;
        var tmpInUse = imageInUse;
        imageInUse = imageArray[Math.floor(Math.random() * puzzleImages.length)];
        if(imageInUse==tmpInUse && puzzleImages.length>1)
            initPuzzle();
        else{
            puzzleContainer = document.getElementById('puzzle_container');
            getImageWidth();
        }
    }
   
    function initPuzzle2()
    { 
    initPuzzle(); 
    scramble();
    }
   
   
    function getImageWidth()
    {
        if(imageInUse.width>0){
            startPuzzle();   
        }else{
            setTimeout('getImageWidth()',100);   
        }
    }
   
    function scramble()
    {
        gameInProgress = true;
        var currentRow = cols-1;
        var currentCol = rows-1;
       
        document.getElementById('revealedImage').style.display='none';
       
        for(var no=0;no<rows;no++){
            for(var no2=0;no2<cols;no2++){
                if(no<rows.length || no2<cols.length){
                    var el = document.getElementById('square_' + no2 + '_' + no);
                    if(el){
                        el.style.left = (no2 * colWidth) + (no2) + 'px';
                        el.style.top = (no * rowHeight) + (no) + 'px';   
                    }else{
                        initPuzzle();
                        return;
                    }
                }           
            }
        }       
       
       
        var lastPos=false;
        var countMoves = 0;
        while(countMoves<(50*cols*rows)){
            var dir = Math.floor(Math.random()*4);
            var readyToMove = false;
            if(dir==0 && currentRow>0 && lastPos!=1){    // Moving peice down
                currentRow = currentRow-1;   
                readyToMove = true;
            }               
            if(dir==1 && currentRow<(rows-1) && lastPos!=0){    // Moving peice up
                currentRow = currentRow+1;
                readyToMove = true;
            }   
            if(dir==2 && currentCol>0 && lastPos!=3){     // Moving peice right
                currentCol = currentCol -1;
                readyToMove = true;
            }   
            if(dir==3 && currentCol<(cols-1) && lastPos!=2){     // Moving peice right
                currentCol = currentCol + 1;
                readyToMove = true;
            }
            if(readyToMove){
                activeSquare = document.getElementById('square_' + currentCol + '_' + currentRow);
                moveImage(false,true);   
                lastPos = dir;
                countMoves++;
            }
        }
       
        return;
    }
   
    function gameFinished()
    {
        var string = "";

        var squareWidth = colWidth + 1;
        var squareHeight = rowHeight + 1;       
        var squareCounter = 0;
        var errorsFound = false;
        var correctSquares = 0;
        for(var prop in squareArray){
            var currentCol = squareCounter % cols;
            var currentRow = Math.floor(squareCounter/cols);
            var correctLeft = currentCol * squareWidth;
            var correctTop = currentRow * squareHeight;
            if(squareArray[prop].style.left.replace('px','') != correctLeft || squareArray[prop].style.top.replace('px','') != correctTop){
                //return;           
            }else{
                correctSquares++;
            }
               
            squareCounter++;   
        }   
       
        if(correctSquares == ((cols * rows) -1)){
            document.getElementById('messageDiv').innerHTML = '<h2>Fantastisk - Du fik puzzlespillet samlet !!</h2>';
            gameInProgress = false;
            revealImage();
           
        }else{
            document.getElementById('messageDiv').innerHTML = 'Netop nu har du ' + correctSquares + ' brikker ud af ' + ((cols * rows) -1) + ' placeret korrekt';
        }
       
    }
   
    var currentOpacity = 0;
    function revealImage()
    {
        if(currentOpacity==100)currentOpacity=0;
        var obj = document.getElementById('revealedImage');
        obj.style.display = 'block';
        currentOpacity = currentOpacity +2;
        if(document.all){
            obj.style.filter = 'alpha(opacity='+currentOpacity+')';
        }else{
            obj.style.opacity = currentOpacity/100;
        }
       
        if(currentOpacity<100)setTimeout('revealImage()',10);
       
    }
    function displayActiveImage()
    {
        if(!gameInProgress)return;
        if(!activeImageIndicator){
            activeImageIndicator = document.createElement('DIV');
            activeImageIndicator.className = 'activeImageIndicator';
            puzzleContainer.appendChild(activeImageIndicator);
            activeImageIndicator.onclick = moveImage;
           
        }
        activeImageIndicator.style.display='block';
        activeImageIndicator.style.left = this.offsetLeft +  'px';
        activeImageIndicator.style.top = this.offsetTop + 'px';
        activeImageIndicator.style.width = this.style.width;
        activeImageIndicator.style.height = this.style.height;
        activeImageIndicator.innerHTML = '<span></span>';
        activeSquare = this;
    }
   
    function moveImage(e,fromShuffleFunction)
    {
        if(!activeSquare)return;
        if(!gameInProgress && !fromShuffleFunction){
            alert('You have to shuffle the cards first');
            return;
        }
        var currentLeft = activeSquare.style.left.replace('px','') /1;
        var currentTop = activeSquare.style.top.replace('px','') /1;
       
        var diffLeft = Math.round((currentLeft - emptySquare_x) / colWidth);
        var diffTop = Math.round((currentTop - emptySquare_y) / rowHeight);   
       
        if(((diffLeft==-1 || diffLeft==1) && diffTop==0) || ((diffTop==-1 || diffTop==1) && diffLeft==0)){    // Moving right
            activeSquare.style.left = emptySquare_x + 'px';
            activeSquare.style.top = emptySquare_y + 'px';
            emptySquare_x = currentLeft;
            emptySquare_y = currentTop;   
            activeSquare = false;   
            if(activeImageIndicator)activeImageIndicator.style.display = 'none';
            if(!fromShuffleFunction)gameFinished();   
        }
    }
   
    function startPuzzle()
    {
        puzzleContainer.innerHTML = '';


        var subDivs = puzzleContainer.getElementsByTagName('DIV');
        for(var no=0;no<subDivs.length;no++){
            subDivs[no].parentNode.removeChild(subDivs[no]);
        }
        activeImageIndicator = false;
        squareArray.length = 0;

       
        if(document.getElementById('revealedImage')){
            var obj = document.getElementById('revealedImage');
            obj.parentNode.removeChild(obj);
        }
        var revealedImage = document.createElement('DIV');
        revealedImage.style.display='none';
        revealedImage.id='revealedImage';;
        revealedImage.className='revealedImage';;
        var img = document.createElement('IMG');
        img.src = imageInUse.src;
        revealedImage.appendChild(img);
        puzzleContainer.appendChild(revealedImage);
           
        colWidth = Math.round(imageInUse.width / cols)-1;
        rowHeight = Math.round(imageInUse.height / rows)-1;

        puzzleContainer.style.width = colWidth * cols + (cols * 1) + 'px';
        puzzleContainer.style.height = rowHeight * rows + (rows * 1) + 'px';
       
        if(navigator.appVersion.indexOf('5.')>=0 && navigator.userAgent.indexOf('MSIE')>=0){
            puzzleContainer.style.width = colWidth * cols + (cols * 1) + 20 + 'px';
            puzzleContainer.style.height = rowHeight * rows + (rows * 1) + 20 + 'px';           
           
        }
               
        if(!revealedImage){
            revealedImage = document.createElement('DIV');
            revealedImage.style.display='none';   
            revealedImage.innerHTML = '';
           
        }
        for(var no=0;no<rows;no++){
            for(var no2=0;no2<cols;no2++){
                if(no2==cols-1 && no==rows-1){
                    emptySquare_x = (no2 * colWidth) + (no2);   
                    emptySquare_y = (no * rowHeight) + (no);   
                    break;
                }
                var newDiv = document.createElement('DIV');
                newDiv.id = 'square_' + no2 + '_' + no;
                newDiv.onmouseover = displayActiveImage;
                newDiv.onclick = moveImage;
                newDiv.className = 'square';
                newDiv.style.width = colWidth + 'px';
                newDiv.style.height = rowHeight + 'px';   
                newDiv.style.left = (no2 * colWidth) + (no2) + 'px';
                newDiv.style.top = (no * rowHeight) + (no) + 'px';
                newDiv.setAttribute('initPosition',(no2 * colWidth) + (no2) + '_' + (no * rowHeight) + (no));
                var img = new Image();
                img.src = imageInUse.src;
                img.style.position = 'absolute';
                img.style.left = 0 - (no2 * colWidth) + 'px';
                img.style.top = 0 - (no * rowHeight) + 'px';
                newDiv.appendChild(img);               
                puzzleContainer.appendChild(newDiv);
                squareArray.push(newDiv);
            }
        }   
       
       
    }
    window.onload = initPuzzle2;
       
    </script>
</head>
<body>

<a href="#" onclick="scramble();return false">Start puzzlespil</a>

<div id="puzzle_container">
Please wait - initializing script
</div>

<div id="messageDiv"></div>
<p><i>Vælg afsnit af foto og klik højre museknap</i></p>

jeg opdager lige at i Google browser,  Opera og Safari, der åbner siden med billedet usamlet, altså som ønsket. Det er åbenbart kun i IE som der er problemer.

IE virker fint her. Kan det være et cache-problem?

Hvad er det, altås et cache-problem, instillinger på IE?

jeg sidder og sover på denne tågede dag, og ja, det var et cache-problem, og nu virker det.

Tak for hjælpen, smid et svar og fortsat god dag.

mvh. rwj

Hej HKW

Vil du ikke have dine velfortjente point, så jeg kan lukke spørgsmålet?

mvh. rwj

Ok, så lukker jeg, men tak for hjælpen.

mvh. rwj