【问题标题】:How to get my function to increase variable "_time"如何让我的函数增加变量“_time”
【发布时间】:2017-12-21 01:57:39
【问题描述】:
// videogame.js
// don't forget to validate at jslint.com

/*jslint devel: true, browser: true */
/*global $*/

$(function () {
    "use strict";

    // global functions


    function boundaryCheck(element_selector) {
        var element = $(element_selector);
        var universe = $("#universe");
        var p = element.position();
        if (p.left < 0) {
            element.css("left", "0px");
        }
        if (p.top < 0) {
            element.css("top", "0px");
        }
        if (p.left + element.width() > universe.width()) {
            element.css("left", (universe.width() - element.width()) + "px");
        }
        if (p.top + element.height() > universe.height()) {
            element.css("top", (universe.height() - element.height()) + "px");
        }
    }

    function getRandomInt(min, max) {
        min = Math.ceil(min);
        max = Math.floor(max);
        return Math.floor(Math.random() * (max - min)) + min;
    }

    // Constructor for Player Ship object
    function PlayerShip() {

        var my = {};

        $("#universe").append($("<div>").attr("id", "player"));

        my.navigate = function (keys) {
            var RIGHTARROW_KEYCODE = 39;
            var LEFTARROW_KEYCODE = 37;
            var UPARROW_KEYCODE = 38;
            var DOWNARROW_KEYCODE = 40;
            if (keys === RIGHTARROW_KEYCODE) {
                $("#player").css("left", "+=10px");
            }
            if (keys === LEFTARROW_KEYCODE) {
                $("#player").css("left", "-=10px");
            }
            if (keys === UPARROW_KEYCODE) {
                $("#player").css("top", "-=10px");
            }

            if (keys === DOWNARROW_KEYCODE) {
                $("#player").css("top", "+=10px");

            }
            boundaryCheck("#player");
        };

        return my;
    }

    // Constructor for Enemy Ship object
    function EnemyShip() {

        var my = {};

        $("#universe").append($("<div>").attr("id", "enemy"));

        my.move = function (paused) {
            if (!paused) {
                var left = Boolean(getRandomInt(0, 2));
                var top = Boolean(getRandomInt(0, 2));
                if (left) {
                    $("#enemy").css("left", "-=" + getRandomInt(1, 10) + "px");
                } else {
                    $("#enemy").css("left", "+=" + getRandomInt(1, 10) + "px");
                }
                if (top) {
                    $("#enemy").css("top", "-=" + getRandomInt(1, 10) + "px");
                } else {
                    $("#enemy").css("top", "+=" + getRandomInt(1, 10) + "px");
              }
                boundaryCheck("#enemy");
            }
        };

        return my;
    }

// this might make an asteroid happen, maybe. I don't know if it will work.
    function Asteroid() {

      var my = {};

      $("#universe").append($("<div>").attr("id", "asteroid"));

      my.move = function (paused) {
        if (!paused) {
          var left = Boolean(getRandomInt(0, 2));
          var top = Boolean(getRandomInt(0, 2));
          if (left) {
              $("#asteroid").css("left", "-=" + getRandomInt(1, 10) + "px");
          } else {
              $("#asteroid").css("left", "+=" + getRandomInt(1, 10) + "px");
          }
          if (top) {
              $("#asteroid").css("top", "-=" + getRandomInt(1, 10) + "px");
          } else {
              $("#asteroid").css("top", "+=" + getRandomInt(1, 10) + "px");
          }
          boundaryCheck("#asteroid");
        }
      };
        return my;
    }

    // Constructor for Game object
    function Game() {

        // total points
        var _health = 1000;

        var _time = 0;

        // is the game paused?
        var _game_paused = false;

        // speed of background animation in ms (larger = slower)
        var _background_speed = 100;

        // player ship
        var _player_ship = new PlayerShip();

        // enemy ship
        var _enemy_ship = new EnemyShip();

        var _asteroid = new Asteroid(); //make this an actual thing

        var my = {
            health: _health,
            time: _time,
            game_paused: _game_paused,
            background_speed: _background_speed,
            player_ship: _player_ship,
            enemy_ship: _enemy_ship,
            asteroid: _asteroid
        };

        $("#universe").append($("<div>").attr("id", "results"));
        $("#results").append($("<h1>"));
        $("#universe").append($("<div>").attr("id", "results2"));
        $("#results2").append($("<h1>"));

        my.health = function (value) {
            if (value === undefined) {
                return _health;
            }
            _health = value;

            return my;
        };

        my.time = function (value) {
          if (value === undefined) {
            return _time;
          }
          _time = value;

          return my;
        };

        my.game_paused = function (value) {
            if (value === undefined) {
                return _game_paused;
            }
            _game_paused = value;

            return my;
        };

        my.background_speed = function (value) {
            if (value === undefined) {
                return _background_speed;
            }
            _background_speed = value;

            return my;
        };


        my.player_ship = function (value) {
            if (value === undefined) {
                return _player_ship;
            }
            _player_ship = value;

            return my;
        };

        function runtimer() {
          _time++;
        };

        my.enemy_ship = function (value) {
            if (value === undefined) {
                return _enemy_ship;
            }
            _enemy_ship = value;

            return my;
        };

        my.asteroid = function (value) {
          if (value === undefined) {
            return _asteroid;
          }
          _asteroid = value;

          return my;
        };

        // METHODS

        // display total points
        my.displayHealth = function () {
            $("#results h1").html("Health: " + _health);
        };

        my.increaseTime = function () {
          setInterval(function(){ runTimer() }, 1000)
        }

        my.displayTimer = function () {
          $("#results2 h1").html("Time: "+ _time);
        };

        my.moveBackground = function () {
            if (!_game_paused) {
                var background_position = $("#universe")
                    .css("backgroundPosition")
                    .split(" ");
                var current_x = parseInt(background_position[0], 10);
                var current_y = parseInt(background_position[1], 10);
                var new_x = current_x - 1;
                var new_y = current_y;
                $("#universe").css({
                    "background-position": new_x + "px " + new_y + "px"
                });
            }
        };

        my.checkKeys = function () {
            var ESCAPE_KEYCODE = 27;
            $(document).keydown(function (key_event) {
                if (key_event.which === ESCAPE_KEYCODE) {
                    if (_game_paused) {
                        _game_paused = false;
                        $("#pause").remove();
                    } else {
                        _game_paused = true;
                        var pause = $("<div>", {id: "pause"});
                        $("body").prepend(pause);
                    }
                } else {
                    _player_ship.navigate(key_event.which);
                }
            });
        };

        my.checkCollisions = function (paused) {
            var p = $("#player");
            var e = $("#enemy");
            var ppos = p.position();
            var epos = e.position();
            if (!paused) {
                if (
                    (
                        (ppos.left + p.width() < epos.left) ||
                        (ppos.left > epos.left + e.width())
                    ) ||
                    (
                        (ppos.top + p.height() < epos.top) ||
                        (ppos.top > epos.top + e.height())
                    )
                ) {
                    return false;

                } else {
                    return true;
                }

            }
        };


        my.checkAsteroid = function (paused) {
            var p = $("#player");
            var a = $("#asteroid");
            var ppos = p.position();
            var apos = a.position();
            if (!paused) {
                if (
                    (
                        (ppos.left + p.width() < apos.left) ||
                        (ppos.left > apos.left + a.width())
                    ) ||
                    (
                        (ppos.top + p.height() < apos.top) ||
                        (ppos.top > apos.top + a.height())
                    )
                ) {
                    return false;

                } else {
                    return true;
                }

            }
        };

        my.play = function () {
            _enemy_ship.move(_game_paused);
            _asteroid.move(_game_paused);
            if (my.checkCollisions(_game_paused)) {
              _health --;
              my.displayHealth();
            }  else if (
            my.checkAsteroid(_game_paused)) {
                _health --;
                my.displayHealth();
            }
        };
        return my;
    }

    var game = new Game();

    game.checkKeys();
    game.displayHealth();
    game.displayTimer();
    game.increaseTime();
    setInterval(game.moveBackground, game.background_speed);
    setInterval(game.play, game.background_speed);
});

我对编程比较陌生。我在高中上过一门课,非常平庸。我现在正在大学学习一些入门课程,我的任务是改进通用太空游戏(我已经开始这样做了)。我有一个用于计时器的 div,但由于某种原因,我无法获得任何函数来增加 _time 变量。就好像他们不被允许访问它一样。我有一个名为“runTimer”的函数,它应该在每次运行时将“_time”增加一。我有另一个名为“increaseTime”的函数,它应该每 1000 毫秒运行一次“runTimer”。不过,这个变量似乎永远不会增加。这不是我第一次实现计时器的意大利面条式代码,因为在过去的几个小时里我尝试了各种事情。我只是不明白为什么变量不会增加。

【问题讨论】:

标签: javascript timer intervals


【解决方案1】:

这是一大段代码。正如 RobG 指出的那样,尽量将您的问题缩减为最小、完整且可验证的示例。

也就是说,乍一看,您的计时器可能正在更新。至少_time 是。

问题可能是您从未重新绘制 div,因此它没有显示更新后的值。每次_time 更新时,您都需要致电game.displayTimer()

可能最简单的添加位置是在setInterval() 中的increaseTime()

my.increaseTime = function () {
  setInterval(function(){ 
    runTimer();
    my.displayTime();
  }, 1000)
}

【讨论】:

    猜你喜欢
    • 2013-03-20
    • 1970-01-01
    • 1970-01-01
    • 2023-01-14
    • 1970-01-01
    • 2020-03-27
    • 1970-01-01
    • 1970-01-01
    • 2011-08-23
    相关资源
    最近更新 更多