내 함수에서 변수 "_time"을 늘리는 방법

Question

// 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"을 하나씩 늘리는 것으로되어 있습니다. 나는 1000 밀리 초마다 "runTimer"를 실행해야하는 "increaseTime"이라는 또 다른 기능이 있습니다. 변수는 결코 증가하지 않는 것 같습니다. 지난 몇 시간 동안 여러 가지 시도를했기 때문에 이것은 처음으로 스파게티 코드를 구현 한 것이 아닙니다. 나는 변수가 왜 증가하지 않는지 이해할 수 없다.

Answer 1

이것은 큰 코드입니다. RobG이 지적한 것처럼 최소한의 완벽하고 검증 가능한 예제로 질문을 다시 분석하는 작업을 시도하십시오.

즉, 한눈에 타이머가 업데이트 중으로 보입니다. 적어도 _time입니다.

문제는 사용자가 div를 다시 그리지 않으므로 업데이트 된 값을 표시하지 않는 것일 수 있습니다. _time 업데이트가있을 때마다 game.displayTimer() 번으로 전화해야합니다. 아마

가장 쉬운 장소는 당신의 setInterval() increaseTime()에에있을 것입니다 추가 :

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