2015-12-15 7 views
5

Obecnie tworzę grę na jamę zorganizowaną przez moją szkołę, używając html, css, javascript i jQuery.Czy istnieje sposób na modyfikację odliczanego czasu pracy?

W tej grze używam odliczania (które działa poprawnie), ale chciałbym, aby stracił 2 sekundy, gdy moja postać zostanie trafiona przez wrogów. Kiedy odliczanie osiągnie 0, gracz przegrywa grę.

Aby to zrobić, używam githubu "jChavannes" (Link here), który jest naprawdę kompletny, ale nie mogę znaleźć sposobu na modyfikację odliczania podczas jego działania, chociaż "jchavannes" umieścił wiele narzędzia do korzystania z jego pracy.

Oto kod HTML, z którego chciałbym pracować, z przyciskami potrzebnymi do modyfikacji odliczania i javascript z tego, czego używam, aby wszystko działało (brakuje jednej biblioteki, ale jest zbyt duży, aby go tu umieścić, znajdziesz go w Githubie).

Czy istnieje prosty sposób modyfikacji pozostałego czasu, czy też po prostu nie jest przeznaczony do modyfikacji bez zatrzymywania i resetowania?

var Example2 = new (function() { 
 
    var $countdown, 
 
     $form, // Form used to change the countdown time 
 
     incrementTime = 70, 
 
     currentTime = 30000, 
 
     updateTimer = function() { 
 
      $countdown.html(formatTime(currentTime)); 
 
      if (currentTime == 0) { 
 
       Example2.Timer.stop(); 
 
       timerComplete(); 
 
       Example2.resetCountdown(); 
 
       return; 
 
      } 
 
      currentTime -= incrementTime/10; 
 
      if (currentTime < 0) currentTime = 0; 
 
     }, 
 
     timerComplete = function() { 
 
      alert('Example 2: Countdown timer complete!'); 
 
     }, 
 
     init = function() { 
 
      $countdown = $('#countdown'); 
 
      Example2.Timer = $.timer(updateTimer, incrementTime, true); 
 
      $form = $('#example2form'); 
 
      $form.bind('submit', function() { 
 
       Example2.resetCountdown(); 
 
       return false; 
 
      }); 
 
     }; 
 
    this.resetCountdown = function() { 
 
     var newTime = parseInt($form.find('input[type=text]').val()) * 100; 
 
     if (newTime > 0) {currentTime = newTime;} 
 
     this.Timer.stop().once(); 
 
    }; 
 
    $(init); 
 
}); 
 
//I tried to trigger some commands, in vain 
 
$("#timerOnce5000").click(function(){ 
 
console.log("euh ouais ?"); 
 
$("#countdown").timer.once(5000); 
 
}); 
 
$("#timerSetTime1000").click(function(){ 
 
    console.log("allô ?"); 
 
    $("#countdown").timer.set({time:1000}); 
 
}); 
 
$("#timerSetTime5000").click(function(){ 
 
    console.log("bonjour ?"); 
 
    $("#countdown").timer.set({time:5000}); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
 
    <head> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
    <meta name="author" content="Jason Chavannes" /> 
 
    <title>jQuery Timer Demo</title> 
 

 
    <link rel="stylesheet" href="res/style.css" /> 
 
    <script type="text/javascript" src="res/jquery.min.js"></script> 
 
    <script type="text/javascript" src="jquery.timer.js"></script> 
 
    <script type="text/javascript" src="res/demo.js"></script> 
 
    </head> 
 
    <body> 
 
    <h3>Example 2 - Countdown Timer</h3> 
 
    <span id="countdown">05:00:00</span> 
 
    <form id="example2form"> 
 
     <input type='button' value='Play/Pause' onclick='Example2.Timer.toggle();' /> 
 
     <input type='button' value='Stop/Reset' onclick='Example2.resetCountdown();' /> 
 
     <input type='text' name='startTime' value='300' style='width:30px;' /> 
 
    </form> 
 

 
    <div class='example-four'> 
 
     <input type='button' value='timer.reset()' onclick='timer.reset();' /><br/> 
 
     <input type='button' value='timer.once()' onclick='timer.once();' /><br/> 
 
     <input type='button' value='timer.once(5000)' id="timerOnce5000" onclick='timer.once(5000);' /><br/> 
 
     <input type='button' value='timer.set({time:1000})' id ="timerSetTime1000" onclick='timer.set({time:1000});' /><br/> 
 
     <input type='button' value='timer.set({time:5000})' id="timerSetTime5000" onclick='timer.set({time:5000});' /> 
 
    </div> 
 
    <br/>

+0

Move 'currentTime' na' this' zamiast 'var' lub dostarczyć pewną metodę, która modyfikuje' currentTime' –

Odpowiedz

3

Czy jesteś symulowanie 'trafienie przez wroga', w tym przypadku Spróbuj:

var Example2 = new (function() { 
... 

... 
    this.hitByEnemy() = function { 
    currentTime = currentTime - 2000; //assuming milliseconds is units 
    }); 
}); 

HTML:

<div class='example-four'> 
    ... 
    <input type='button' value='hit by enemy' onclick='Example2.hitByEnemy();' /><br/> 
</div> 
+0

nie myśleć o użyciu this.hitbyenemy INSIDE funkcja Example2, a spróbowałem, DZIAŁA! Dziękuję bardzo !! – Jaeger

2

Jedną z fajnych rzeczy JavaScript (nawet jeśli czasami może być trochę niebezpieczny) jest taki, że jest ogólny y bardzo łatwo zmodyfikować wspólną zmienną/zasobem, aby wpłynąć na zachowanie innych części kodu. Niektórym się to nie podoba, ponieważ może utrudnić debugowanie, jeśli twoje funkcje będą zbytnio powiązane. Osobiście uważam, że może być bardzo przydatny w ograniczonych scenariuszach, takich jak twój.

Tak więc moim podejściem byłoby po prostu posiadanie funkcji, która modyfikuje currentTime, gdy gracz zostanie trafiony. Coś jak:

var $countdown, 
    $form, 
    // ... the other stuff you had in your provided code 
    hitHandler = function() { // you'll need to call this when your player gets hit 
     currentTime -= 2 * incrementTime; 
     if (currentTime < 0) currentTime = 0; 
    } 

powiedział, że można również dodać nową zmienną, który rejestruje uderzenia i można go użyć podczas aktualizacji timer na swojej regularnych odstępach czasu. To byłoby "czystsze" rozwiązanie, ale jest też trochę gadatliwe i może nie być tym, co chcesz, jeśli nie chcesz czekać na funkcję przyrostu przed zmniejszeniem licznika czasu. Powiedział, że to wyglądać tak:

var $countdown, 
     $form, 
     // ... 
     hits = 0 
     hitHandler = function() { 
     hits++; 
     } 
     updateTimer = function() { 
     $countdown.html(formatTime(currentTime)); 
     if (currentTime == 0) { 
      Example2.Timer.stop(); 
      timerComplete(); 
      Example2.resetCountdown(); 
      return; 
     } 
     currentTime -= incrementTime/10; 
     currentTime -= hits * (2 * incrementTime); 
     hits = 0; 
     if (currentTime < 0) currentTime = 0; 
     } 
Powiązane problemy