Menu
I'm currently creating a game for a game jam organized by my school, using html, css, javascript and jQuery.
In this game, i'm using a countdown (which works fine), but i'd like it to lose 2 seconds when my character is getting hit by enemies. When the countdown reaches 0, the player loses the game.
To do so, I'm using the "jChavannes"' github (Link here) that is really complete, but I can't find a way to modify the countdown while it's running even though 'jchavannes' put a lot of tools to use his work.
Here is the HTML code of what i'd like to make work, with buttons of what I need to modify the countdown and the javascript of what I'm using to make the whole thing work (one library is missing but it's way too big to be put here, you'll find it in the Github).
Is there a simply way to modify the remaining time, or is it simply not designed to be modified without stopping and resetting it?
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/>
640
var t = 60; var decr = 1; var handle = null; var e = null; function startTimer() { if(!e) e = document. getElementById("time"); e. innerHTML = t; handle = setInterval(function() { if(t == 0) { clearInterval(handle); var answer = confirm("Yes/No?") if (answer){ alert("You Clicked Yes!") window.
Are you simulating a 'hit by enemy', 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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
