2017-12-21 19 views
0
// 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"を1ずつ増やすことになっています。私は1000ミリ秒ごとに "runTimer"を実行するはずの "increaseTime"と呼ばれる別の機能があります。変数は決して増加するようには思えません。私は過去数時間にわたって様々なことを試みたので、これは私の最初のスパゲッティコードの実装ではありません。なぜ変数が増えないのか分かりません。変数 "_time"を増やすために関数を取得する方法

+1

[?私は良い質問をするにはどうすればよい* *]を参照してください(https://stackoverflow.com/help/ how-to-ask)と[*最小で完全で検証可能なサンプルの作成方法*](https://stackoverflow.com/help/mcve)を参照してください。書かれているように、これはあまりにも広すぎるとはみなされません。問題を示す最小のコード量で問題を特定し、投稿してください。 – RobG

答えて

0

これは大きなコードです。 RobGが指摘したように、あなたの質問を、最小限で完全で検証可能な例に戻すように努めてください。

つまり、一目で、あなたのタイマーはおそらく更新中であるようです。少なくとも_timeです。

問題はあなたのdivを再描画することはないので、更新された値が表示されない可能性があります。 _timeが更新されるたびにgame.displayTimer()に電話する必要があります。

おそらくそれを追加する最も簡単な場所はincreaseTime()であなたのsetInterval()で次のようになります。

my.increaseTime = function() { 
    setInterval(function(){ 
    runTimer(); 
    my.displayTime(); 
    }, 1000) 
} 
関連する問題