admin管理员组文章数量:1398831
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 plete, 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 plete!');
},
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 mands, 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=".1.1/jquery.min.js"></script>
<html xmlns="" 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/>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 plete, 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 plete!');
},
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 mands, 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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html xmlns="http://www.w3/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/>-
Move
currentTimeontothisinstead ofvar, or provide some method which modifiescurrentTime– Paul S. Commented Dec 15, 2015 at 18:25
2 Answers
Reset to default 3Are 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>
One of the cool things about Javascript (even if it can be a little dangerous at times) is that it's generally 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 things hard to debug if you make your functions too intertwined. I personally think it can be really useful in limited scenarios like yours.
So my approach would be just to have a function that modifies currentTime when your player gets hit. Something like:
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;
}
That said, you could also add a new variable that records hits and you can use that when you update the timer on your regular interval. This would be the "cleaner" solution, but it's also a little verbose, and might not be what you want if you don't want to wait for the increment function before decrementing your timer. That said, it'd look like:
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;
}
本文标签： javascriptIs there a way to modify a running countdownStack Overflow
版权声明：本文标题：javascript - Is there a way to modify a running countdown? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744638701a2616983.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论