I have touchmove function that checks how many pixels were scrolled by user. It is hooked up to a custom slider I made that has 5 steps with 40 px between each step, hence I want to go to the next step when 40px are scrolled, I tried amountScrolled % 40 == 0 but the issue here is that sometimes numbers are skipped if the user's finger drags quite quickly, therefore I'm not guaranteed to see numbers like 40 or 80 that I expect, so I tried absoluteTouchDistance > 40 || absoluteTouchDistance > 80 || ... , issue here is that after that first condition, it gets executed all the time, whereas I want it to execute next if number was 80 or 120 and so on.
something like this should get you going:
steps = math.floor(absoluteTouchDistance/40);
now you can conveniently check if steps has changed, and react accordingly.
Related
I am just learning JavaScript coding and trying to move an image from left to right upon a keyboard press but unable to figure out the same.
I have defined the image individually in Father.js file and in the sketch.js file - I am trying to write the code to move the image.
Can anyone help please?
Here's the link to the code - https://github.com/Salma-Siddiqua/Self-game-stage-2
You can try to add "eventListeners" for keyboard press either "up" or "down" or "press" I guess. And then inside the "eventListener" you can specify your image movement
I've not used Matter or whatever engine you're using here, but when you want to move something based on user input - and in a game loop - you should move it based on some rate × the deltaTime between each draw. By that I mean: if a character should move at 30 pixels per second when the right-arrow key is pressed, you need to figure out how much time has elapsed since your last draw, then determine which direction to move things in and by how much. Your x,y transformation is a factor of how much time has passed.
So - with each draw you need to store some kind of timestamp / millisecond count.
In terms of capturing user input in the browser, you can do it with events. ie:
document.addEventListener('keydown', (e) => {
/*
left = 37
up = 38
right = 39
down = 40
*/
if (e.which == 37) doSomething();
});
There are other events you could use. 'keyup' etc.
I have a video and i need to zoom at particular point (top-left) at particular time suppose exactly at 10 seconds so i need a smooth transition of moving up and coming back to its original position automatically
video.addEventListener("timeupdate", function(){
// check whether we have passed 5 minutes,
// current time is given in seconds
if(this.currentTime >= 10) {
//do something
document.getElementById("mainvideo").style.height='400px';
}
});
You can try addEventListener and checking current status making changes in dom
So I have a very small, insignificant site i'm working on. my website If you click on the grey-ish bar at the bottom, it will animate a sort of eased-in for me to use in the future to edit info i put together on various pictures or whatever i decide i want to put up there.
my code for the animation is: (edited to reflect changes)
function animateForm(startPosition,endPosition,firstKey,keyInterval)
{
if(currentKey != lastKey)
{
animationPointer =( .5 * Math.sin((currentKey * (Math.PI/totalKeys)) - (Math.PI/2))) + .5;
currentPosition = (animationPointer)*endPosition;
bottomForm.style.bottom = currentPosition + "px";
currentKey=currentKey+(keyInterval*1);
}
else
{
clearInterval(int);
int=0;
}
}
SOLVED! The problem was that I was multiplying the "animation pointer" (a decimal from 0 to 1 indicating the progress in the animation) by the "end position," and if the animation was aiming for an end position of "0," This set my form's position immediately to the "hide" position, and things asploded from there.
What i needed to do multiply the pointer by the maximum height the form could reach so that on its descent it could gradually return a smaller and smaller value to the "currentPosition" variable.
You're never clearing the setInterval between animations. Simply typing clearInterval; doesn't do anything. You need to store the ID that's returned from setInterval(), and then pass it to a call to clearInterval();.
Because you're not clearing, those original intervals are still running and still trying to operate on the same variables.
I have a strange issue I'm encountering only on the iPad. It seems all other browsers can handle this just fine, but I have a condition similar to this:
if( parseFloat( $('#element1').css('opacity'),10).toFixed(2)!=userSetting1 ||
parseFloat( $('#element2').css('opacity'),10).toFixed(2)!=userSetting2
){ return; };
... rest of function
So, basically I have a couple of elements that animate from a user action. To prevent the user from continuously firing the rest of the function, I'm testing to see if the element has finished animating its opacity. The usersetting1 and 2 are the opacities that the user sets element1 and 2 to animate to respectively.
So, basically, if the opacity hasn't reached the user set opacity, it drops out of the function. Works great everywhere but the iPad and it's based on an issue with parseFloat.
If the user sets 0.15, 0.25, etc as their opacity setting, then the parseFloat(,10).toFixed(2) will work and allow for the condition to test properly.
However if the user sets 1 or 0 for the opacity, it screws everything up. Apparently the iPad doesn't think that 1.0 = 1.
If there any way around this?
Ok, just figured this out. The iPad seems to be animating my element (say if userSetting1 was 0.15) to 0.1503850384038439248. So, I had to run the .toFixed(2) on both the user setting and the .css pull.
var iOS = parseFloat(('' + (/CPU.*OS ([0-9_]{1,5})|(CPU like).*AppleWebKit.*Mobile/i.exec(navigator.userAgent) || [0,''])[1])
.replace('undefined', '3_2').replace('_', '.').replace('_', ''));
if( iOS ( $('#element1').css('opacity'),10).toFixed(2)!=userSetting1 ||
iOS ( $('#element2').css('opacity'),10).toFixed(2)!=userSetting2){ return; };
OK, so I'm looking for an interesting effect, here. I have 10 different <div> elements. I would like one of them to be chosen at random every 5 seconds, and then have that <div> that has been selected move to the left (if it's the <div>'s 1-5) first, and then back right to where it started (if it was <div>'s 6-10 it would move right first, and then back left to where it began). I'm looking to accomplish this movement via the jQuery plugin spritely.
Let's start with the rng, which I already have taken care of:
setInterval(function() {
var rand = Math.floor(Math.random()*9+1);
if (rand === 1) {
move <div> #1 left and then right
}
else if (rand === 2) {
move <div> #2 left and then right
}
Then, rinse and repeat for <div>'s 3-10. This is obviously not by any means an elegant solution, but it gets the job done, as far as I'm concerned.
Now, the next job we must get done is the actual moving itself. Since we have only 5 seconds between the time a <div> is picked and another one is picked, I was thinking of making the movement left and right each last for 2 seconds. Then, there is a second left open for a break.
In order to implement this, I tried the following:
$("#piranha_smw_gg").oneTime(2000, function() {
$("#piranha_smw_gg").pan({fps: 30, speed: 2, dir: "left"});
});
$("#piranha_smw_gg").oneTime(2000, function() {
$("#piranha_smw_gg").pan({fps: 30, speed: 2, dir: "right"});
});
This would be inserted between the if (rand ===1) { } part of the "rng" code, so to speak.
That code makes use both of spritely, and the jQuery Timers plugin. Now, for some reason, I'm not getting my desired effect with this. Instead of <div>'s 1-5 moving left and then right to where they came from (and the opposite for <div>'s 6-10) I'm getting this odd, spazzing effect.
You can see it here.
Any ideas as to why this is happening?
Thanks!