Frage Warum lässt es sich nicht verschieben

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Kuddel7

Neues Mitglied
31 August 2020
15
0
1
22
Hallo, ich kann bei dem Code der sich im Anhang befindet das Spiel nicht zentrieren. Ich kann nur den Rahmen verschieben was mir nichts bringt da das Spiel an sich nicht mitkommt. Links sollte nämlich noch ein Dropdown Menü hin daher brauch ich den Platz. Hat jemand eine Idee wieso und kann mir wer helfen was ich falsch mache?
 

Anhänge

  • index.txt
    22,2 KB · Aufrufe: 5
  • OhMANDUDE.PNG
    OhMANDUDE.PNG
    366,5 KB · Aufrufe: 6

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.084
404
83
67
OMG, dieses Spiel ist aber sehr, sehr alt!
Du schreibst, Du möchtest das Spiel zentrieren. Ich vermute, mit "Spiel" meinst Du die 5 kleinen Rechtecke, die jetzt links sind. Wenn Du die zentrierst, was soll mit dem großen schwarzen Quadrat passieren? Wozu dient das überhaupt?
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.084
404
83
67
PS: Da steht man darf auch nicht den schwarzen Rand berühren. Heißt das, dass die kleinen Rechtecke in das große schwarze Quadrat hinein sollen?
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.084
404
83
67
Verstehe. Die Rechtecke in das Quadrat zu legen ist einfach:
CSS:
    <style>
        body {
            background-image: url(WebsiteHintergrund.jpg);
            text-align: center;
        }

        #wrapper {
            margin: 0 auto;
            width: 450px;
            height: 450px;
            border: 50px solid black;
            position: relative;
        }
    </style>
Und die Tabelle durch einen div-Container ersetzen:
HTML:
<body>
    <div id="wrapper">
        <div id="box"
            style="left: 205px; width: 40px; position: absolute; top: 205px; height: 40px; background-color: #990000; layer-background-color: #990000">
            <table height="40" width="40">
                <tbody>
                    <tr>
                        <td>&nbsp;</td>
                        <td></TD>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div id="enemy0"
            style="left: 270px; width: 60px; position: absolute; top: 60px; height: 50px; background-color: #000099; layer-background-color: #000099">
            <table height="50" width="60">
                <tbody>
                    <tr>
                        <td>&nbsp;</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div id="enemy1"
            style="left: 300px; width: 100px; position: absolute; top: 330px; height: 20px; background-color: #000099; layer-background-color: #000099">
            <table height="20" width="100">
                <tbody>
                    <tr>
                        <td>&nbsp;</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div id="enemy2"
            style="left: 70px; width: 30px; position: absolute; top: 320px; height: 60px; background-color: #000099; layer-background-color: #000099">
            <table height="60" width="30">
                <tbody>
                    <tr>
                        <td>&nbsp;</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div id="enemy3"
            style="left: 70px; width: 60px; position: absolute; top: 70px; height: 60px; background-color: #000099; layer-background-color: #000099">
            <table height="60" width="60">
                <tbody>
                    <tr>
                        <td>&nbsp;</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <br />
    Klicke auf das rote Kästchen und bewege es so lange wie möglich ohne von den blauen Boxen berührt zu werden. <br />
    Du darfst auch nicht den schwarzen Rand berühren, sonst ist das Spiel auch vorbei.<br />
</body>
Das Javascript muss stark überarbeitet werden, denn es ist sehr, sehr veraltet.
 
  • Like
Reaktionen: Kuddel7

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.084
404
83
67
Ich habe auch begonnen, das Javascript zu überarbeiten, so funktioniert es so weit, dass man das rote Quadrat bewegen kann. Noch zu tun: Prüfung auf Kollision überprüfen.
Javascript:
    <script>

        isNS4 = (document.layers) ? true : false;
        isIE4 = (document.all && !document.getElementById) ? true : false;
        isIE5 = (document.all && document.getElementById) ? true : false;
        isNS6 = (!document.all && document.getElementById) ? true : false;

        const wBorder = 50, wWrapper = 450, hWrappper = 450;
        var curX, curY, curX2, curY2, boxX, boxY, moving = 0, touch = 0;
        var gametime = 0, started = 0, speed;
        var starttime, endtime, finaltime = 0; //pass finaltime to popup window to ask for initials
        var enemyxdir = new Array(1, 1, 1, 1);
        var enemyydir = new Array(1, 1, 1, 1);

        document.onmousedown = start;
        document.onmousemove = checkLocation;
        document.onmouseup = stop;

        function startclock() { var today = new Date(); starttime = today.getTime(); }
        function endclock() { var today = new Date(); endtime = today.getTime(); }
        function calctime() { var time = (endtime - starttime - 0) / 1000; return time; }

        function giveposX(divname) {
            if (isNS4) var posLeft = document.layers[divname].left;
            else if (isIE4 || isIE5) var posLeft = document.all(divname).style.pixelLeft;
            else if (isNS6) var posLeft = parseInt(document.getElementById(divname).style.left + "");
            return posLeft;
        }

        function giveposY(divname) {
            if (isNS4) var posTop = document.layers[divname].top;
            else if (isIE4 || isIE5) var posTop = document.all(divname).style.pixelTop;
            else if (isNS6) var posTop = parseInt(document.getElementById(divname).style.top + "");
            return posTop;
        }

        function setposX(divname, xpos) {
            if (isNS4) document.layers[divname].left = xpos + "px";
            else if (isIE4 || isIE5) document.all(divname).style.pixelLeft = xpos;
            else if (isNS6) document.getElementById(divname).style.left = xpos + "px";
        }

        function setposY(divname, ypos) {
            if (isNS4) document.layers[divname].top = ypos + "px";
            else if (isIE4 || isIE5) document.all(divname).style.pixelTop = ypos;
            else if (isNS6) document.getElementById(divname).style.top = ypos + "px";
        }

        function givesize(divname, dimension) {
            var divsize = 0;
            if (dimension == 'y') {
                if (isNS4) divsize = document.layers[divname].clip.height;
                else if (isIE4 || isIE5) divsize = document.all(divname).style.pixelHeight;
                else if (isNS6) divsize = parseInt(document.getElementById(divname).style.height + "");
            }
            else if (dimension == 'x') {
                if (isNS4) divsize = document.layers[divname].clip.width;
                else if (isIE4 || isIE5) divsize = document.all(divname).style.pixelWidth;
                else if (isNS6) divsize = parseInt(document.getElementById(divname).style.width + "");
            }

            return divsize;
        }

        // check to see if 'box' is touching 'enemy1'   
        function checktouching(num) {

            var enemy = "enemy" + num + ""
            var difX = giveposX('box') - giveposX(enemy) - 0; // -0 converts to integer
            var difY = giveposY('box') - giveposY(enemy) - 0;

            // set touch = 1 if it is touching an enemy
            if (difX > (-1 * givesize('box', 'x')) && difX < givesize(enemy, 'x') && difY > (-1 * givesize('box', 'y')) && difY < givesize(enemy, 'y')) {
                touch = 1;
            }
            else touch = 0;

        }

        function movenemy(num, step_x, step_y) {

            var enemy = "enemy" + num + ""
            var enemyx = givesize(enemy, 'x');
            var enemyy = givesize(enemy, 'y');

            if (giveposX(enemy) >= (450 - enemyx) || giveposX(enemy) <= 0) {
                enemyxdir[num] = -1 * enemyxdir[num];
            }
            if (giveposY(enemy) >= (450 - enemyy) || giveposY(enemy) <= 0) {
                enemyydir[num] = -1 * enemyydir[num];
            }

            var newposx = giveposX(enemy) + (step_x * enemyxdir[num]) + 0;
            var newposy = giveposY(enemy) + (step_y * enemyydir[num]) + 0;

            setposX(enemy, newposx);
            setposY(enemy, newposy);

            checktouching(num + "");
            if (touch == 1) {
                stop(); reset();
            }
        }

        function movenemies() {

            gametime = gametime + 1

            if (gametime >= 0 && gametime < 100) speed = 80;
            else if (gametime >= 100 && gametime < 200) speed = 60;
            else if (gametime >= 200 && gametime < 300) speed = 40;
            else if (gametime >= 300 && gametime < 400) speed = 30;
            else if (gametime >= 400 && gametime < 500) speed = 20;
            else speed = 10;
            // window.status = "speed:  " + speed + "   gametime: " + gametime;

            movenemy(0, -10, 12);
            movenemy(1, -12, -20);
            movenemy(2, 15, -13);
            movenemy(3, 17, 11);

            // setTimeout(movenemies, speed);
            setTimeout(movenemies, 1000);
        }

        function start(e) {
            const pos = getMousePos(e);
            if (started == 0) { movenemies(); startclock(); started = 1; }


            var boxleft = giveposX('box');
            var boxtop = giveposY('box');

            if (pos.boxX > 0 && pos.boxX < wWrapper && pos.boxY > 0 && pos.boxY < hWrappper) {

                moving = 1;
                setposX('box', boxX);
                setposY('box', boxY);
            }
        }

        function stop(e) {
            moving = 0;
        }

        function reset(e) {
            endclock();
            moving = 0;
            if (isNS4 || isNS6) {
                document.releaseEvents(Event.MOUSEMOVE);
            }
            if (finaltime == 0) {
                finaltime = calctime();
                window.alert('Du Kencht hast nur ' + finaltime + ' Sekunden überlebt');
                //        var entername = window.confirm('Enter your name?');
                //            if (entername) {
                //            window.open("?" + finaltime,'winwin','width=300,height=500,left=40,top=40,status=1,resizable');
                //            document.location.reload();
                //            }
                //            else document.location.reload();
                document.location.reload();
            }
        }

        function getMousePos(e) {
            curX = e.clientX;
            curY = e.clientY;
            const boundingRect = document.getElementById('wrapper').getBoundingClientRect();
            const boxX = curX - boundingRect.left - wBorder;
            const boxY = curY - boundingRect.top - wBorder;
            console.log(boxX, boxY, moving);
            return { boxX: boxX, boxY: boxY };
        }
        function checkLocation(e) {

            const pos = getMousePos(e);
            const boxX = pos[0]
            checktouching('1');

            if (moving == 1 && touch == 0) {

                setposX('box', pos.boxX);
                setposY('box', pos.boxY);

                if (curY > 69 && curX > 69 && curY < 381 && curX < 381) return false;
                else stop(); reset();
            }

            else if (touch == 1) {
                stop(); reset();
            }

        }

    </script>
 
  • Like
Reaktionen: Kuddel7

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.084
404
83
67
So, ich habe es mal weiter überarbeitet und ich denke, der Kern des Spiels funktioniert jetzt. Probiere es aus.
Code:
<!DOCTYPE html>

<head>
    <style>
        body {
            background-image: url(WebsiteHintergrund.jpg);
            text-align: center;
        }

        #wrapper {
            margin: 0 auto;
            width: 450px;
            height: 450px;
            border: 50px solid black;
            position: relative;
        }
    </style>
    <title>Escape!</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<body>
    <div id="wrapper">
        <div id="box"
            style="left: 205px; width: 40px; position: absolute; top: 205px; height: 40px; background-color: #990000;"
            height="40" width="40">
        </div>
        <div id="enemy0"
            style="left: 270px; width: 60px; position: absolute; top: 60px; height: 50px; background-color: #000099;"
            height="50" width="60">
        </div>
        <div id="enemy1"
            style="left: 300px; width: 100px; position: absolute; top: 330px; height: 20px; background-color: #000099;"
            height="20" width="100">
        </div>
        <div id="enemy2"
            style="left: 70px; width: 30px; position: absolute; top: 320px; height: 60px; background-color: #000099;"
            height="60" width="30">
        </div>
        <div id="enemy3"
            style="left: 70px; width: 60px; position: absolute; top: 70px; height: 60px; background-color: #000099;"
            height="60" width="60">
        </div>
    </div>
    <br />
    Klicke auf das rote Kästchen und bewege es so lange wie möglich ohne von den blauen Boxen berührt zu werden. <br />
    Du darfst auch nicht den schwarzen Rand berühren, sonst ist das Spiel auch vorbei.<br />
    <script>


    </script>

</body>

</html>
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.084
404
83
67
Und das Javascript:
Javascript:
        isNS4 = (document.layers) ? true : false;

        isIE4 = (document.all && !document.getElementById) ? true : false;

        isIE5 = (document.all && document.getElementById) ? true : false;

        isNS6 = (!document.all && document.getElementById) ? true : false;



        const wBorder = 50, wWrapper = 450, hWrappper = 450;

        const boundingRectWrapper = document.getElementById('wrapper').getBoundingClientRect();

        let innerMousePos = {}, playerPos = {};

        var curX, curY, curX2, curY2, boxX, boxY, moving = 0, touch = 0;

        var gametime = 0, started = 0, speed;

        var starttime, endtime, finaltime = 0; //pass finaltime to popup window to ask for initials

        var enemyxdir = new Array(1, 1, 1, 1);

        var enemyydir = new Array(1, 1, 1, 1);



        document.onmousedown = start;

        document.onmousemove = checkLocation;

        document.onmouseup = stop;



        function startclock() { var today = new Date(); starttime = today.getTime(); }

        function endclock() { var today = new Date(); endtime = today.getTime(); }

        function calctime() { var time = (endtime - starttime - 0) / 1000; return time; }



        function giveposX(divname) {

            if (isNS4) var posLeft = document.layers[divname].left;

            else if (isIE4 || isIE5) var posLeft = document.all(divname).style.pixelLeft;

            else if (isNS6) var posLeft = parseInt(document.getElementById(divname).style.left + "");

            return posLeft;

        }



        function giveposY(divname) {

            if (isNS4) var posTop = document.layers[divname].top;

            else if (isIE4 || isIE5) var posTop = document.all(divname).style.pixelTop;

            else if (isNS6) var posTop = parseInt(document.getElementById(divname).style.top + "");

            return posTop;

        }



        function setposX(divname, xpos) {

            if (isNS4) document.layers[divname].left = xpos + "px";

            else if (isIE4 || isIE5) document.all(divname).style.pixelLeft = xpos;

            else if (isNS6) document.getElementById(divname).style.left = xpos + "px";

        }



        function setposY(divname, ypos) {

            if (isNS4) document.layers[divname].top = ypos + "px";

            else if (isIE4 || isIE5) document.all(divname).style.pixelTop = ypos;

            else if (isNS6) document.getElementById(divname).style.top = ypos + "px";

        }



        function givesize(divname, dimension) {

            var divsize = 0;

            if (dimension == 'y') {

                if (isNS4) divsize = document.layers[divname].clip.height;

                else if (isIE4 || isIE5) divsize = document.all(divname).style.pixelHeight;

                else if (isNS6) divsize = parseInt(document.getElementById(divname).style.height + "");

            }

            else if (dimension == 'x') {

                if (isNS4) divsize = document.layers[divname].clip.width;

                else if (isIE4 || isIE5) divsize = document.all(divname).style.pixelWidth;

                else if (isNS6) divsize = parseInt(document.getElementById(divname).style.width + "");

            }



            return divsize;

        }



        // check to see if 'box' is touching 'enemy1'   

        function checktouching(num) {



            const enemy = "enemy" + num + "";

            const enemyPos = getBoxPos(enemy);



            if (!(playerPos.right < enemyPos.left || playerPos.left > enemyPos.right ||

                playerPos.bottom < enemyPos.top || playerPos.top > enemyPos.bottom)) {

                touch = 1;

            } else touch = 0;



        }



        function movenemy(num, step_x, step_y) {

            step_x *= 0.1;

            step_y *= 0.1;

            var enemy = "enemy" + num + ""

            var enemyx = givesize(enemy, 'x');

            var enemyy = givesize(enemy, 'y');



            if (giveposX(enemy) >= (450 - enemyx) || giveposX(enemy) <= 0) {

                enemyxdir[num] = -1 * enemyxdir[num];

            }

            if (giveposY(enemy) >= (450 - enemyy) || giveposY(enemy) <= 0) {

                enemyydir[num] = -1 * enemyydir[num];

            }



            var newposx = giveposX(enemy) + (step_x * enemyxdir[num]) + 0;

            var newposy = giveposY(enemy) + (step_y * enemyydir[num]) + 0;



            setposX(enemy, newposx);

            setposY(enemy, newposy);



            checktouching(num + "");

            if (touch == 1) {

                stop(); reset();

            }

        }



        function movenemies() {



            gametime = gametime + 1



            if (gametime >= 0 && gametime < 100) speed = 80;

            else if (gametime >= 100 && gametime < 200) speed = 60;

            else if (gametime >= 200 && gametime < 300) speed = 40;

            else if (gametime >= 300 && gametime < 400) speed = 30;

            else if (gametime >= 400 && gametime < 500) speed = 20;

            else speed = 10;

            // window.status = "speed:  " + speed + "   gametime: " + gametime;



            movenemy(0, -10, 12);

            movenemy(1, -12, -20);

            movenemy(2, 15, -13);

            movenemy(3, 17, 11);



            setTimeout(movenemies, speed);

            // setTimeout(movenemies, 1000);

        }



        function start(e) {

            const mousePos = getMousePos(e);

            playerPos = getBoxPos('box');

            if (started == 0) {

                if (mousePos.x > playerPos.left && mousePos.x < playerPos.right &&

                    mousePos.y > playerPos.top && mousePos.y < playerPos.bottom) {

                    innerMousePos.x = mousePos.x - playerPos.left;

                    innerMousePos.y = mousePos.y - playerPos.top;

                    movenemies();

                    startclock();

                    started = 1;

                    moving = 1;

                }

            }

        }



        function stop(e) {

            moving = 0;

        }



        function reset(e) {

            endclock();

            moving = 0;

            if (isNS4 || isNS6) {

                document.releaseEvents(Event.MOUSEMOVE);

            }

            if (finaltime == 0) {

                finaltime = calctime();

                window.alert('Du Kencht hast nur ' + finaltime + ' Sekunden überlebt');

                //        var entername = window.confirm('Enter your name?');

                //            if (entername) {

                //            window.open("?" + finaltime,'winwin','width=300,height=500,left=40,top=40,status=1,resizable');

                //            document.location.reload();

                //            }

                //            else document.location.reload();

                document.location.reload();

            }

        }



        function getMousePos(e) {

            curX = e.clientX;

            curY = e.clientY;

            const x = curX - boundingRectWrapper.left - wBorder;

            const y = curY - boundingRectWrapper.top - wBorder;

            console.log(x, y, moving);

            return { x: x, y: y };

        }



        function getBoxPos(id) {

            const boundingRectBox = document.getElementById(id).getBoundingClientRect();

            let result = {};

            result.left = boundingRectBox.left - boundingRectWrapper.left - wBorder;

            result.right = boundingRectBox.right - boundingRectWrapper.left - wBorder;

            result.top = boundingRectBox.top - boundingRectWrapper.top - wBorder;

            result.bottom = boundingRectBox.bottom - boundingRectWrapper.top - wBorder;

            console.log(result);

            return result;

        }



        function checkLocation(e) {



            const pos = getMousePos(e);

            playerPos = getBoxPos('box');

            // checktouching('1');



            if (moving == 1 && touch == 0) {



                setposX('box', pos.x - innerMousePos.x);

                setposY('box', pos.y - innerMousePos.y);



                if (!(playerPos.left > 0 && playerPos.right < wWrapper

                    && playerPos.top > 0 && playerPos.bottom < hWrappper)) {

                    stop();

                    reset();

                }

            }



            else if (touch == 1) {

                stop(); reset();

            }



        }
 
Werbung:

Neueste Beiträge