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.
Related
Example http://jsfiddle.net/5MsUd/
I am having issues with this code for the scroll up and down effect. The key issue is this:
//create the event listener of the users choice.
window.addEventListener(this.trigger,function(){
//get the current position of scroll and add it to the object
self.scrollPos= this.scrollY || this.pageYoffset;
//get the current position of the element
newPos = getPosition(self.target,self.dir);
//HERE IS THE BIG ISSUE!!!!!!!
//adjust the current position depending on the scroll direction
if(scrollex.direction == "down"){
self.target.style[self.dir]= newPos + (self.scrollPos * self.offset)+"px";
}else{
self.target.style[self.dir]= newPos - (this.scrollY * self.offset)+"px";
}
//run callback if there is one
if(callback !== null && typeof callback=='function'){
callback.call(self);
}
}, false);
I'm not getting the correct PXs to go back to the correct position. I added the fiddle as that has all the major code with notes. As well as extra functions that I've added to help assist this scrollex function
Can anyone suggestion a better mathematical equation to get the correct pxs back and forth. Try it out and play with it, let me know of any good suggestions. I've gone pretty deep with this and have more to add but as of now the scroll down and up part system is majorly buggy. You can see once you start scrolling back and forth it does move back and forth but moving up gives less pixels than what down did.
Windows 8 has this neat feature where you scroll through your apps by "pushing" the side of the screen.
I want to know if anyone has any ideas to accomplish this in JavaScript.
Essentially, the screen does should NOT scroll if you hover over the side of the screen, but should rather be able to detect when the user is attempting to go beyond the viewport and cannot.
Is such a thing possible?
Sure, you just need to figure out their algorithm if you want to duplicate it.
You can track the last several known locations of the pointer to determine velocity and direction and stop the scrolling as soon as the direction changes, for example.
I'm using something along the lines of:
$(window).mousemove(function (e) {
if (getIsPageEdge()) {
if (lastX == e.pageX) {
console.debug('pushing the page');
}
var now = new Date().getTime();
if (lastUpdate == null || now - lastUpdate > 500) {
lastUpdate = now;
lastX = e.pageX;
}
}
});
Essentially, onmousemove, if the cursor is at the edge of the viewport, and the X value is not changing (with a time delay added to compensate for the event processing delay), then change the scroll position of the containing div.
Im just wondering whether its possible to drag images/elements (whether inside a div or not) where the image/element is dragged to the far left and comes in from the right side of the screen - therefore dragging the image/element left to get the same result, or vice versa.
Similar to the google maps (on zoom level 1) the user can continuously drag the image left or right, and those images are on a continuous loop.
If so, what languages would you recommend using? javascript?
I hope this makes sense.
Many thanks
This is certainly possible using Javascript. Just have two copies of the image, and as you slide the images left, move the second copy to the right side. (Or vice versa if sliding right).
You can add event handlers to any element, including your images, that execute code while dragging. I apologize for not providing a complete working solution, I am pressed for time, I hope this helps as a starting point
var myGlobals = {
state: {
dragging: false;
}
};
$('.carouselImg').on('mousedown', function(e){
myGlobals.state.dragging = true;
});
$(window).on('mouseup', function(e){
// stop movement even if mouseup happens somewhere outside the carousel
myGlobals.state.dragging = false;
});
$(window).on('mousemove', function(e){
// allow user to drag beyond confines of the carousel
if(myGlobals.state.dragging == true){
recalculateCarouselPosition(e);
}
});
function recalculateCarouselPosition(e){
// These fun bits are left as an exercise for the reader
// the event variable `e` gives you the pixel coordinates where the mouse is
// You will have to do some math to determine what you need to do after this drag.
// You may want to store the coordinates of the initial click in
// `myGlobals.dragStart.x, .y` or similar so you can easily compare them
// You will probably set a negative CSS margin-left property on some element
// of your carousel.
// The carousel will probably have overflow:hidden.
// You will also have to manipulate the DOM, by adding a duplicate image to the
// opposite end and deleting the duplicates once they have scrolled out of view
};
How can I control the animation speed of a sprite using create JS?
When you press right and left, the sprite will run through the frames... I'd like to leave the fps at 60, but alter how fast the frames are looped through without altering the main game FPS rate.
See a demo here. Press right and left arrow to see.
I thought changing the bmp animation frequency property would do the trick...
bmpAnimation.frequency = 2;
But it did not work...
Or should I be using the jQuery animation?
Also, I noticed that each time I hit a random key, the animation plays 1 frame then goes back to first frame. Why is that?
Thanks!
1) The frequency is a property of the spriteSheet-animation, not the bitmapAnimation itself.
So you would have to set the freuqency in the SpriteSheetData itself(http://www.createjs.com/Docs/EaselJS/classes/SpriteSheet.html) or if you want to set it during runtime you could use:
bmpAnimation.spriteSheet.getAnimation("walk_right").frequency = 2;
Please also note that the frequency will be deprecated in the next version of EaselJS in favor of speed (bit this is in the NEXT version, so just something for you to keep in mind)
2) You are currently calling the gotoAndPlay() every frame (if walking), that means that every frame your animation will be set to the first frame of that animation, you could easily avoid this by using something like:
if ( dir == "right" and bmpAnimation.currentAnimation != "walk_right" ) {
bmpAnimation.gotoAndPlay("walk_right");
}
But a better way would be to only call that method ONCE when you start walking and then again when you stop walking.
I am working on a touch based JS application, I've studied Flex and Royal slider as examples. I noticed that both sliders acting similarly when getting touchmove event:
var started,touched ;
el.bind('touchstart',function(e){
started = Number(new Date()) ;
// Get pageX and pageY etc...
}) ;
el.bind('touchmove',function(e){
touched = Number(new Date()) ;
if (started-touched > 500) {
// Handle touch moves etc...
}
}) ;
My JS app works seamless without these, but why do they need to do this? Why they are waiting 500ms to get move datas?
I believe this is some kind of sensitivity setting. You only want to register a touch-move (drag) event if the user has been moving his or her finger across the device for at least 500ms (in this example).
This could be useful to differentiate between taps and drags. Otherwise, if the user would slightly move his/her finger when clicking, for example, a button, the app would also register a drag. As some controls accept both events, this could lead to erroneous behaviour.