I'm new to web programming and I stumbled upon a problem that I couldn't solve and I'm not sure it can be solved. I'm creating a very simple "game" using jquery, and I want to make the thread to stop waiting for the (keydown) input and just carry on with the code, so I can perform either a simple upwards "jump", or a " left jump"/"right jump". Can it be done?
Here follows the codebit from what I've been doing so far:
http://www.codecademy.com/pt/pySlayer10761/codebits/OYQ11a/edit
You need a game loop thats running independantly from your keydown-handler. Elsewise any animation you might hack into the keydown handler might stop the moment no inputs are made anymore.
By looking at your code, I can see you tried to do it by creating a new setTimeout() on those keydowns. You are creating this for every keydown event fired. This is very likely to crash/freeze your browser at some point if the engine does not realize you are creation the same timeout over and over again.
Do it like this: in the onkeydown handler you only set a variable keydowncode to the keycode value. Then you create a new game loop like this
<script>
var keydownCode = 0;
var isInAnimation = false;
var animatedKeydownCode = 0;
var animationStartTime = 0;
var animationStartValue = 0;
// Lightweight keydown handler:
$(document).keydown(function(key) {
keydownCode = parseInt(key.which,10);
}
$(document).keyup(function(key) {
keydownCode = 0;
}
function animation() {
// here comes your animation logic..
// e.g. keep moving for 100 to 200 milliseconds after keypress
// Milli secs difference from
var nowTime = Date.now();
// Animations get prioritized: Only one animation at the same time!
if(isInAnimation) {
switch(animatedKeydownCode) {
case 37:
var delta = (nowTime-animationStartTime)/100*10;
if(delta > 10) { delta = 10; isInAnimation = false; }; // Animation over!
$('img').left(animationStartValue-delta);
case 37:
var delta = (nowTime-animationStartTime)/200*10;
if(delta > 10) { delta = 10; isInAnimation = false; }; // Animation over!
$('img').top(animationStartValue-delta);
case 39:
var delta = (nowTime-animationStartTime)/100*10;
if(delta > 10) { delta = 10; isInAnimation = false; }; // Animation over!
$('img').left(animationStartValue+delta);
}
// Ready to take new input, if its not outdated
} else {
// If some key is down and no animations active
if(keydownCode > 0) {
switch(keydownCode) {
case 37:
animationStartTime = nowTime;
animatedKeydownCode = keydownCode;
animationStartValue = $('img').left();
isInAnimation = true;
case 38:
// Only start a jump if on bottom
if($('img').css("top") == '390px') {
animationStartTime = nowTime;
animatedKeydownCode = keydownCode;
animationStartValue = $('img').top();
isInAnimation = true;
}
case 39:
animationStartTime = nowTime;
animatedKeydownCode = keydownCode;
animationStartValue = $('img').left();
isInAnimation = true;
}
}
}
window.requestAnimationFrame(animation);
}
window.requestAnimationFrame(animation);
</script>
This is no full game, you need to adjust it by yourself to get a working game. E.g. you might want to add some gravity to get mario down again when there is no input..
I think you are looking for setTimeout().
Like this:
setTimeout(function(){
// do something here which will be executed after 5 seconds.
},5000);
You can't stop a thread in javascript as it is single threaded.
Related
Goal:
Scroll the window smoothly with PageUp and PageDown keys.
1 press: page scrolls 1 unit.
n quick presses: page scrolls n units.
Let unit = 160px.
I press PageDown. Page starts scrolling to 160px, let's say it's 90px now, while I press PageDown again. It's obvious I don't want to STOP animation here, I want to change it's target frame to point to 320px! So it actually should speed up and NOT STOP until the page is scrolled to 320px.
It seemed obvious to me that all I have to do is changing tween object within step function given to .animate() method as argument.
I wired up second keydown to modify tween.end property, but it didn't work. Animation just stuttered and stopped. The movement always ends at first unit.
The x.stop().animate(...) approach is "no-no". More hickup - unacceptable. There must be a way to change animation end during the process without stopping it, slowing it down or any other unwanted artifacts.
Ok, here's the code:
var isScrolling = false;
var scrollStartPosition = 0;
var scrollTargetPosition = 0;
function goTo(position) {
if (isScrolling) {
scrollTargetPosition = position;
goToUpdate();
}
else {
scrollStartPosition = scrollTargetPosition = position;
position = position >= 0 ? (position <= pageEnd ? position : pageEnd) : 0;
$(page).animate({ scrollLeft : scroll = position }, { start: goToStart, step : goToStep, complete : goToComplete, duration : 500 });
}
}
function goToStart(arg) {
isScrolling = true;
}
function goToUpdate() {
// ???
}
function goToStep(n, tween) {
isScrolling = true;
if (scrollTargetPosition !== scrollStartPosition) {
scrollStartPosition = tween.end = scrollTargetPosition;
}
}
function goToComplete(arg) {
isScrolling = false;
}
Please, help :) I've wasted ca 8h experimenting with this with no luck. jQuery.animate() seems completely ignoring any atempt to change animation in progress, the only thing I succeeded to do is to stop and restart it. I also managed to queue subsequent moves, but the total movement was just FUGLY n jumps instead one normal move.
I've just described how to do it for free ;) It actually works as expected, I missed one very ugly bug in position parameter calculation. It just didn't change with pressing the keys.
Here's fixed goTo() function:
function goTo(position) {
if (isScrolling) {
scroll = scrollTargetPosition = position;
goToUpdate();
}
else {
scrollStartPosition = scrollTargetPosition = position;
position = position >= 0 ? (position <= pageEnd ? position : pageEnd) : 0;
$(page).animate({ scrollLeft : scroll = position }, { start: goToStart, step : goToStep, complete : goToComplete, duration : 500, queue : false });
}
}
The only difference is scroll variable (defined elsewhere) set to the new position after registering the event.
Now it works beautifully.
BTW, if we want use that kind of effect without breaking accessibility - it should be activated with some conditions met first. In my code the screen resoultion is checked. If it's over 1280px wide - I activate special animated view.
So, here's complete solution:
// create a very wide page
// include jQuery and this...
var page;
var pageEnd;
var scroll;
var scrollStep = 160;
var isScrolling = false;
var scrollStartPosition = 0;
var scrollTargetPosition = 0;
function goTo(position) {
if (isScrolling) {
scroll = scrollTargetPosition = position;
}
else {
scrollStartPosition = scrollTargetPosition = position;
position = position >= 0 ? (position <= pageEnd ? position : pageEnd) : 0;
$(page).animate({ scrollLeft : scroll = position }, { start: goToStart, step : goToStep, complete : goToComplete, duration : 500, queue : false });
}
}
function goToStart(arg) {
isScrolling = true;
}
function goToStep(n, tween) {
isScrolling = true;
if (scrollTargetPosition !== scrollStartPosition) {
scrollStartPosition = tween.end = scrollTargetPosition;
}
}
function goToComplete(arg) {
isScrolling = false;
}
function keyDown(e) {
var handled = true;
switch (e.which) {
case 33:
case 38:
goTo(scroll - scrollStep);
break;
case 34:
case 40:
goTo(scroll + scrollStep);
break;
case 35:
goTo(pageEnd);
break;
case 36:
goTo(0);
break;
default:
handled = false;
break;
}
if (handled) e.preventDefault();
}
function init() {
page = $('body');
pageEnd = page[0].scrollWidth - page[0].clientWidth;
page.scrollLeft(1);
if (page.scrollLeft() < 1) page = $('html');
goTo(0);
$('html').css({
'overflow-x' : 'scroll',
'overflow-y' : 'hidden'
});
scroll = page.scrollLeft();
$(window).keydown(keyDown);
}
$(init);
As part of a web-based educational game, I have a countdown timer using the code that follows. Mostly, the timer stops at zero, but occasionally, it over-runs, and continues to count down from 59:59.
A couple of notes about the code:
countTime is a global variable set by a dropdown menu
stopCount is a gloabal variable set by a reset button
leadZero is an external function used for formatting
I understand that setTimeout is not very accurate, but I would have thought that the remTime > 0 condition would stop the recursion eventually, even if it missed the first time.
Anyway, here's the code:
function newCount() {
var startTime=new Date();
var min=startTime.getMinutes();
var sec=startTime.getSeconds();
var endTime=(min*60)+sec+countTime;
stopCount=false;
countDown();
function countDown() {
var today=new Date();
var m=today.getMinutes();
var s=today.getSeconds();
var currTime=(m*60)+s;
var remTime=endTime-currTime;
var remMin = Math.floor(remTime/60);
var remSec = remTime % 60;
// add a zero in front of numbers<10
remMin=leadZero(remMin);
remSec=leadZero(remSec);
document.getElementById('timer').innerHTML=remMin+":"+remSec;
if (remTime > 0 && stopCount==false) {
t=setTimeout(function(){countDown()},500);
}
else if (stopCount==false){document.getElementById("nextButton").innerHTML = "Finished";}
else {}
}
}
As requested, here is the code for the buttons and calling functions ...
Buttons:
<button onclick="newSyllable()" id="nextButton" style="font:60px 'Nunito', sans-serif;">Start</button>
<button onclick="resetScore()"><span style="font:20px 'Nunito', sans-serif;">Reset</span></button>
Functions:
function resetScore() {
points=0
stopCount=true;
document.getElementById("score").innerHTML = "Score: " + points
document.getElementById("nextButton").innerHTML = "Start"
document.getElementById("syllable").innerHTML = " "
t=setTimeout(function(){setCountDown()},500);
}
function newSyllable() {
if (document.getElementById("nextButton").innerHTML == "Finished"){
}
else {
if (document.getElementById("nextButton").innerHTML == "Start"){
newCount();
}
document.getElementById("nextButton").innerHTML = "Next"
switch (currentUnit) {
case "1":
unit1();
break;
case "2":
unit2();
break;
case "3":
unit3();
break;
case "4":
unit4();
break;
case "5":
unit5();
break;
case "6":
unit6();
break;
}
document.getElementById("score").innerHTML = "Score: " + points++
}
}
Ok so I think the problem originates from the way you're calculating the remaining time by using two Date objects. A much simpler way to do this would be to just use your countTime variable as the starting time (in seconds), and then use a 1000 millisecond interval to perform the countdown. Try this code instead:
var stopCount = false;
var countTime = 10;
function newCount() {
if(stopCount === false) {
var counter=setInterval(countDown, 1000);
}
stopCount = true;
function countDown() {
countTime = countTime - 1;
var remMin = Math.floor(countTime/60);
var remSec = countTime % 60;
// add a zero in front of numbers<10
remMin=leadZero(remMin);
remSec=leadZero(remSec);
document.getElementById('timer').innerHTML=remMin+":"+remSec;
if (countTime <= 0)
{
clearInterval(counter);
document.getElementById("nextButton").innerHTML = "Finished";
return;
}
}
}
JSFiddle: http://jsfiddle.net/5vxbe/8/
I simplified the code further, using the countTime = countTime-1 idea from #JL, but using my original setTimeout recursive function rather than setInterval and clearInterval.
I want the "reset" button to be able to stop and reset the timer before it's finished, and this code made that a bit simpler (I think).
Here's the final code:
function newCount() {
stopCount=false;
countDown();
function countDown() {
if (stopCount==false) {
countTime=countTime-1
var remMin = Math.floor(countTime/60);
var remSec = countTime % 60;
// add a zero in front of numbers<10
remMin=leadZero(remMin);
remSec=leadZero(remSec);
document.getElementById('timer').innerHTML=remMin+":"+remSec;
if (countTime > 0) {
t=setTimeout(function(){countDown()},1000);
}
else {document.getElementById("nextButton").innerHTML = "Finished";}
}
}
}
So I am at the very beginning stages of creating my first platform style game in html5.So far I have only implemented left and right movement and no 'gravity' or collision detection is at play.
However, I've already hit an issue.
If you go left or right for a short period of time the 'character' acts as intended (I use character loosely as it's the map that is actually moving). If, however, you hold the key down the map moves too fast.
I figure the issue is that the keydown event listener is listening all of the time, there for moving the map is moving before each tick or frame of the game.
So my question is how can I make the keydown increase the map offset only on every tick of the game (20 milliseconds).
Here is my JSFiddle: CLICK HERE
document.addEventListener('keydown',function(event){
var dir = event.which;
if(dir == directions.LEFT){
mapOffsetX += mapOffsetDistanceX;
event.preventDefault();
};
if(dir == directions.RIGHT){
mapOffsetX -= mapOffsetDistanceX;
event.preventDefault();
};
});
document.addEventListener('keyup',function(event){
var dir = event.which;
if(dir == directions.LEFT){
mapOffsetX -= mapOffsetDistanceX;
};
if(dir == directions.RIGHT){
mapOffsetX += mapOffsetDistanceX;
};
});
initFloorObject(100,c.height/2,300,20,0,0,0,1);
var myInt = setInterval(function(){
clearScreen();
for(var i=0;i<floorObject.length;i++){
floorObject[i][0] = parseInt(floorObject[i][0])+mapOffsetX;
};
drawChar();
drawFloorObjects();
},20);
Set variable to false every time you keydown and set it back to true every 20 milliseconds.
var isKeydownAvailable = true;
document.addEventListener('keydown', function (event) {
var dir = event.which;
if(isKeydownAvailable){
if (dir == directions.LEFT) {
mapOffsetX += mapOffsetDistanceX;
event.preventDefault();
};
if (dir == directions.RIGHT) {
mapOffsetX -= mapOffsetDistanceX;
event.preventDefault();
};
isKeydownAvailable = false;
};
});
In the interval, reset the isKeydownAvailable to true.
var myInt = setInterval(function () {
clearScreen();
for (var i = 0; i < floorObject.length; i++) {
floorObject[i][0] = parseInt(floorObject[i][0]) + mapOffsetX;
};
drawChar();
drawFloorObjects();
isKeydownAvailable = true;
}, 20);
Use booleans for actions and check for them inside your interval.
On keydown you set the boolean isMovingLeft to true, then you add the offset in your interval function only if(isMovingLeft).
Do that for the other actions and you are good to go.
Im creating a memory and I almost have it all done. My remaining problem is that while in the setTimeout function,
setTimeout(function(){
for(i = 0; i < guesses.length; i++){
if(clearedPairs[i] != i){
var reset = document.getElementById(cardPosition[i]);
reset.removeAttribute("style");
}
}
score.innerHTML = parseInt(score.innerHTML,10) - 10;
resetValues();
}, 800);
If a click occurs on another card, while its waiting to turn the two open cards back over, the player will receive additional minus point, and thats not whats supposed to happen. Can anyone help?
I can post more of the code if needed.
You can use a variable to watch your state: when in the setTimeout function, set it to true. When it's finished and clicks are acceptable, set it to false. Then just use an if statement in your click handlers to check the state.
var inFunction = false;
setTimeout(function(){
inFunction = true;
for(i = 0; i < guesses.length; i++){
if(clearedPairs[i] != i){
var reset = document.getElementById(cardPosition[i]);
reset.removeAttribute("style");
}
}
score.innerHTML = parseInt(score.innerHTML,10) - 10;
resetValues();
inFunction = false;
}, 800);
Does that address your issue?
I'm using this code to make my logo flicker on my website. But It becomes annoying when it continues to flicker while browsing, how can I set a time to allow it to flicker for something like the first 15seconds on page load, then stops?
JS code I'm using:
$(document).ready(
function(){
var t;
const fparam = 100;
const uparam = 100;
window.flickr = function(){
if(Math.round(Math.random())){
$("#logodcoi").css("visibility","hidden");
t = setTimeout('window.unflickr()',uparam);
}
else
t = setTimeout('window.flickr()',fparam);
}
window.unflickr = function(){
if(Math.round(Math.random())){
$("#logodcoi").css("visibility","visible");
t = setTimeout('window.flickr()',fparam);
}
else
t = setTimeout('window.unflickr()',uparam);
}
t = setTimeout('window.flickr()',fparam);
});
You could have a counter, which you then use to decide whether you want to set another timeout. As a side note, you should never add functions to window and then passing a string to setTimeout. Always just pass the function itself:
$(document).ready(function(){
var t;
var amount = 0;
const fparam = 100;
const uparam = 100;
function timeout(f, t) { // this function delegates setTimeout
if(amount++ < 150) { // and checks the amount already (un)flickered
setTimeout(f, t); // (150 * 100 ms = 15 s)
}
}
var flickr = function(){
if(Math.round(Math.random())){
$("#logodcoi").css("visibility","hidden");
t = timeout(unflickr,uparam);
}
else
t = timeout(flickr,fparam);
};
var unflickr = function(){
if(Math.round(Math.random())){
$("#logodcoi").css("visibility","visible");
t = timeout(flickr,fparam);
}
else
t = timeout(unflickr,uparam);
};
t = timeout(flickr,fparam);
});
I see you're using jquery, you could use the following, if I remember correctly, all the stuff I use below has been in jquery since 1.0, so you should be good:
counter = 1;
function hideOrShow(){
$(".classToSelect").animate({"opacity": "toggle"}, 100);
counter = counter +1;
if (counter >= 21) clearInterval(flickerInterval);
}
flickerInterval = setInterval(hideOrShow, 100);
Change the selector, animation duration, and variable names to whatever you fancy/need.