All geek questions in one place

Is there a way to change the current countdown?

I am currently creating a game for a jam game hosted by my school using html, css, javascript and jQuery.

In this game, I use the countdown (which works great), but I would like it to lose 2 seconds when my character fell into the hands of enemies. When the countdown reaches 0, the player loses the game.

For this, I use "jChavannes" "github" ( link here ), which is really completed, but I cannot find a way to change the countdown while it works, although "jchavannes" uses many tools to use its work.

Here is the HTML code of what I would like to do, with buttons of what I need to change the countdown and javascript of what I use to make it all work (one library is missing, but it's way too big to be able to put here, you will find it on Github).

Is there an easy way to change the remaining time or is it just not designed to change without stopping and resetting?

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/>
+5
source share
2 answers

You simulate an “enemy hit”, in this case try:

 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>
+3
source

One of the most interesting things in Javascript (even if it can be a little dangerous at times) is that it is usually pretty easy to modify a shared variable / resource to influence the behavior of other parts of your code. Some people don't like this because it can make debugging difficult if you mix up your functions. I personally think this can be really useful in limited scenarios like yours.

So my approach would be to have a function that changes currentTime when your player gets hit. Sort of:

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

However, you can also add a new variable that records hits, and you can use it when updating the timer at a regular interval. This would be a “cleaner” solution, but it is also a bit detailed and may not be what you want if you don't want to wait for the increment function to decrease your timer. However, it will look like this:

  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; }
+2
source

Source: https://habr.com/ru/post/1238308/

More articles:


All Articles