Gibt es eine Möglichkeit, einen laufenden Countdown zu ändern?

Ich erstelle gerade ein Spiel für einen Spiel Jam von meiner Schule organisiert, mit HTML, CSS, Javascript und jQuery.Gibt es eine Möglichkeit, einen laufenden Countdown zu ändern?

In diesem Spiel verwende ich einen Countdown (was gut funktioniert), aber ich möchte es 2 Sekunden verlieren, wenn mein Charakter von Feinden getroffen wird. Wenn der Countdown 0 erreicht, verliert der Spieler das Spiel.

Um dies zu tun, verwende ich die "JChavannes" Github (Link here), die wirklich abgeschlossen ist, aber ich finde keine Möglichkeit, den Countdown zu ändern, während es läuft, obwohl 'Jchavannes' eine Menge setzen Werkzeuge, um seine Arbeit zu nutzen.

Hier ist der HTML-Code von dem, was ich arbeiten möchte, mit Schaltflächen, was ich brauche, um den Countdown und das Javascript von dem, was ich verwende, um die ganze Sache funktionieren zu ändern (eine Bibliothek fehlt aber es ist viel zu groß um es hier zu platzieren, du wirst es im Github finden).

Gibt es eine einfache Möglichkeit, die verbleibende Zeit zu ändern, oder ist sie einfach nicht dafür ausgelegt, geändert zu werden, ohne sie anzuhalten und zurückzusetzen?

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/>

Quelle

2015-12-15 Jaeger

Verschieben 'currentTime' auf' this' statt 'var' oder eine Methode bereitzustellen, die' currentTime' –

Sind Sie in diesem Fall versuchen, ein 'Treffer von Feind' zu simulieren:

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>

Quelle

2015-12-15 19:28:03

modifiziert ich nicht über die Verwendung von this.hitbyenemy INSIDE dachte die Example2-Funktion, und ich habe es versucht, es funktioniert! Ich danke dir sehr !! – Jaeger

Eine der kühlen Sachen über Javascript (auch wenn es manchmal ein wenig gefährlich ist) ist, dass es im Allgemeinen ist Sie können eine gemeinsam genutzte Variable/Ressource ganz einfach ändern, um das Verhalten anderer Teile Ihres Codes zu beeinflussen. Manche Leute mögen das nicht, weil es die Fehlersuche erschwert, wenn Sie Ihre Funktionen zu stark miteinander verknüpfen. Ich persönlich denke, dass es in begrenzten Szenarios wie deiner wirklich nützlich sein kann.

Also mein Ansatz wäre nur eine Funktion, die currentTime ändert, wenn Ihr Spieler getroffen wird. Etwas wie:

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; 
    }

Das heißt, können Sie auch eine neue Variable hinzufügen, die Treffer erfasst und Sie verwenden können, wenn Sie den Timer auf Ihrem regelmäßigen Abständen aktualisieren. Dies wäre die "sauberere" Lösung, aber es ist auch ein wenig wortreich, und möglicherweise nicht was Sie wollen, wenn Sie nicht auf die Inkrement-Funktion warten möchten, bevor Sie Ihren Timer dekrementieren. Das heißt, es so aussehen würde:

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; 
     }

Quelle

2015-12-15 19:32:42

Gibt es eine Möglichkeit, einen laufenden Countdown zu ändern?

Antwort

Verwandte Themen