1

我编写这段代码是为了制作一个基本的游戏。完整的html是:

<!DOCTYPE>
<html>
    <head>
        <title>The dodge game</title>
        <link rel="stylesheet" type="text/css" href="normalize.css">
        <link rel="stylesheet" type="text/css" href="index.css">
        <script src="jquery.js"></script>
        <script src="script.js"></script>
    </head>
    <body>
        <div id="play-ground">
        <div id="character"></div>
        <div id="chaser"></div>
        </div>
        <button id="control-up" class="button">UP</button>
        <button id="control-down" class="button">DOWN</button>
        <button id="control-right" class="button">RIGHT</button>
        <button id="control-left" class="button">LEFT</button>
    </body>
</html>

剧本 :

$(document).ready (
    function() {
        var characterPositionLeft = 0;
        var characterPositionTop = 0;
        var chaserPositionLeft = 810;
        var chaserPositionTop = 630;
        var speed = 30;
        var dspeed = 60;
        var apoint = 5;
        var testPositionLeft = function() {
            if (chaserPositionLeft > characterPositionLeft) {
                chaserPositionLeft -= 30;
                var caLeft = chaserPositionLeft + 'px';
                $('#chaser').css('margin-left', caLeft);
                leftRight();
                topBottom();
                testEndGame();
                console.log(chaserPositionLeft);
            } else if (chaserPositionLeft < characterPositionLeft) {
                chaserPositionLeft += 30;
                var caLeft = chaserPositionLeft + 'px';
                $('#chaser').css('margin-left', caLeft);
                leftRight();
                topBottom();
                testEndGame();
                console.log(characterPositionLeft);
            }
        }
        var testPositionTop = function() {
            if (chaserPositionTop > characterPositionTop) {
                chaserPositionTop -= 30;
                var caTop = chaserPositionTop + 'px';
                $('#chaser').css('margin-top', caTop);
                leftRight();
                topBottom();
                testEndGame();
                console.log(chaserPositionTop);
            } else if (chaserPositionTop < characterPositionTop) {
                chaserPositionTop += 30;
                var caTop = chaserPositionTop + 'px';
                $('#chaser').css('margin-top', caTop);
                leftRight();
                topBottom();
                testEndGame();
                console.log(chaserPositionTop);
            }
        }
        // left and right
        var CacLeftPlus = chaserPositionLeft + 30;
        var CacLeftMinus = chaserPositionLeft - 30;
        var LeftCaught = false;
        // top and bottom
        var CacTopPlus = chaserPositionTop + 30;
        var CacTopMinus = chaserPositionTop - 30;
        var TopCaught = false;
        // up
        $('#control-up').click ( 
            function() {
                testPositionTop();
                if(characterPositionTop > 0) { 
                characterPositionTop -= speed;
                var cTop = characterPositionTop + 'px';
                console.log(characterPositionTop);
                $('#character').css('margin-top', cTop);
                leftRight();
                topBottom();
                testEndGame();
                } else {
                    console.log('warning: [reached sky limit]');
                }
            }
        )
        // down
        $('#control-down').click ( 
            function() {
                testPositionTop();
                if(characterPositionTop < 630) { 
                characterPositionTop += speed;
                var cTop = characterPositionTop + 'px';
                console.log(characterPositionTop);
                $('#character').css('margin-top', cTop);
                leftRight();
                topBottom();
                testEndGame();
                } else {
                    console.log('warning: [reached earth limit]');
                }
            }
        )
        // right 
        $('#control-right').click ( 
            function() {
                testPositionLeft();
                if(characterPositionLeft < 810) { 
                characterPositionLeft += speed;
                var cTop = characterPositionLeft + 'px';
                console.log(characterPositionLeft);
                $('#character').css('margin-left', cTop);
                leftRight();
                topBottom();
                testEndGame();
                } else {
                    console.log('warning: [reached right limit]');
                }
            }
        )
        // left
        $('#control-left').click ( 
            function() {
                testPositionLeft();
                if(characterPositionLeft > 0) { 
                characterPositionLeft -= speed;
                var cTop = characterPositionLeft + 'px';
                console.log(characterPositionLeft);
                $('#character').css('margin-left', cTop);
                leftRight();
                topBottom();
                testEndGame();
                } else {
                    console.log('warning: [reached left limit]');
                }
            }
        )
        var leftRight = function() {
            if(characterPositionLeft == CacLeftPlus || characterPositionLeft == CacLeftMinus) {
                LeftCaught = true;
                console.log('worked?');
            } else {

            }
        }
        var topBottom = function() {
            if(characterPositionTop == CacTopPlus || characterPositionLeft == CacTopMinus) {
                TopCaught = true;
                console.log('worked?');
            } else {

            }
        }
        var testEndGame = function () {
            if (LeftCaught == true && TopCaught == true) {
            console.log('game over');
            alert('game over');
        } else {

        }
        }
    }
)

一切正常,直到函数 leftRight、upBottom 和 testEndGame。他们只有在控制台记录 600 和 630 时才能工作。谁能告诉我这段代码的缺陷和解决方法?这是完整的代码:http: //jsfiddle.net/StK7r/1/

4

1 回答 1

1

我相信你想要

if(characterPositionTop == CacTopPlus || characterPositionLeft == CacTopMinus) {

改为测试

if(characterPositionTop <= CacTopPlus && characterPositionTop >= CacTopMinus) {

因为你想让你的角色被困在一个盒子里。左边也一样。此外,您正在测试您的“顶部”位置与您的“左侧”。

稍后编辑:

我已经更新了小提琴一点。我也注意到了这一点:

     // left and right
    var CacLeftPlus = chaserPositionLeft + 30;
    var CacLeftMinus = chaserPositionLeft - 30;
    var LeftCaught = false;
    // top and bottom
    var CacTopPlus = chaserPositionTop + 30;
    var CacTopMinus = chaserPositionTop - 30;

当chaserPositionTop/Left 更改时,您不会更新这些变量。它们在这里受值约束,因此显然它们永远保持在您在初始化程序中赋予它们的值。

于 2013-10-10T12:52:25.363 回答