I currently have a animated sprite that walks when you press the left and right keys on the keyboard. What I would like to do is to make the sprite walk-right when you scroll down and walk left when you scroll up. I would also like to make the sprite stop walking when the user stops scrolling. Thanks in advance!
I tried using the $(window).scroll function with variables of current and lastscroll positions, but it didn't work.
function walk(e) {
var keyCode = e.keyCode;
if (keyCode === 39) {
key.right = true;
} else if (keyCode === 37) {
key.left = true;
}
if (key.right === true) {
trans += 0;
translate();
sprite.classList.remove('left');
sprite.classList.add('right');
sprite.classList.add('walk-right');
} else if (key.left === true) {
trans -= 0;
translate();
sprite.classList.remove('right');
sprite.classList.add('left');
sprite.classList.add('walk-left');
}
}
function stop(e) {
var keyCode = e.keyCode;
if (keyCode === 39) {
key.right = false;
} else if (keyCode === 37) {
key.left = false;
}
if (key.right === false) {
sprite.classList.remove('walk-right');
} if (key.left === false) {
sprite.classList.remove('walk-left');
}
}
Update:
Here's a better version; I merged the keyboard and scroll code into the same event for you:
if (document.addEventListener) {
// IE9, Chrome, Safari, Opera
document.addEventListener("mousewheel", walk, false);
// Firefox
document.addEventListener("DOMMouseScroll", walk, false);
}else{
// IE 6/7/8
document.attachEvent("onmousewheel", walk);
}
function walk(e) {
var e = window.event || e; // old IE support
if (e.keyCode) {
//keyboard input
if (e.keyCode === 39) {
key.right = true;
} else if (keyCode === 37) {
key.left = true;
}
}else{
//scroll input
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
if (delta == 1) {
//walk right
key.right = true;
key.left = false;
}else if (delta == -1) {
//walk left
key.left = true;
key.right = false;
}else{
//stop
key.left = false;
key.right = false;
sprite.classList.remove('walk-right');
sprite.classList.remove('walk-left');
}
}
if (key.right === true) {
trans += 0;
translate();
sprite.classList.remove('left');
sprite.classList.add('right');
sprite.classList.add('walk-right');
} else if (key.left === true) {
trans -= 0;
translate();
sprite.classList.remove('right');
sprite.classList.add('left');
sprite.classList.add('walk-left');
}
}
Previous answer:
Here you go:
if (document.addEventListener) {
// IE9, Chrome, Safari, Opera
document.addEventListener("mousewheel", scroll, false);
// Firefox
document.addEventListener("DOMMouseScroll", scroll, false);
}else{
// IE 6/7/8
document.attachEvent("onmousewheel", scroll);
}
function scroll(e) {
var e = window.event || e; // old IE support
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
if (delta == 1) {
//walk right
key.right = true;
key.left = false;
}else if (delta == -1) {
//walk left
key.left = true;
key.right = false;
}else{
//stop
key.left = false;
key.right = false;
sprite.classList.remove('walk-right');
sprite.classList.remove('walk-left');
}
if (key.right === true) {
trans += 0;
translate();
sprite.classList.remove('left');
sprite.classList.add('right');
sprite.classList.add('walk-right');
} else if (key.left === true) {
trans -= 0;
translate();
sprite.classList.remove('right');
sprite.classList.add('left');
sprite.classList.add('walk-left');
}
}
Use document.addEventListener instead:
var currentY = 0;
document.addEventListener('scroll', function(e){
// some logic
key.right = false;
key.left = false;
currentY < window.pageYOffset ? key.right = true : key.left = true;
currentY = window.pageYOffset;
})
Related
I am trying to prevent specific buttons from continuously firing but have had no luck with any of my methods. I've tried several suggestions/answers from other stackoverflow posts but none have worked. I currently have a controller and for my left/right buttons I don't care if they repeat but for my jump button I do not want to be able to hold the button and have the character keep jumping. The closest I got to making this work was by using a Map and setting the button to it but unfortunately on keyup the character would also jump. Here is my current code:
class Controller {
constructor() {
this.left = false;
this.up = false;
this.right = false;
this.down = false;
this.pressed = {};
let keyDown = (e) => {
if (e.code == 'ArrowLeft') this.left = true;
if (e.code == 'ArrowRight') this.right = true;
if (e.code == 'ArrowDown') this.down = true;
if (e.code === 'ArrowUp') {
if (this.pressed[e.code] === false) { return }
else {
this.pressed[e.code] = false;
this.up = true;
}
}
}
let keyUp = (e) => {
if (e.code == 'ArrowLeft') this.left = false;
if (e.code == 'ArrowRight') this.right = false;
if (e.code == 'ArrowDown') this.down = false;
if (e.code === 'ArrowUp') {
this.pressed[e.code] = true;
this.up = false;
}
}
window.addEventListener('keydown', keyDown);
window.addEventListener('keyup', keyUp);
}
}
let controller = new Controller();
and some alternates that I've tried also
this.pressed = false;
let keyDown = (e) => {
if (e.code == 'ArrowLeft') this.left = true;
if (e.code == 'ArrowRight') this.right = true;
if (e.code == 'ArrowDown') this.down = true;
console.log(controller.pressed)
if (e.code === 'ArrowUp') {
if (!this.pressed) { return }
this.pressed = false;
this.up = true;
}
}
let keyUp = (e) => {
if (e.code == 'ArrowLeft') this.left = false;
if (e.code == 'ArrowRight') this.right = false;
if (e.code == 'ArrowDown') this.down = false;
if (e.code === 'ArrowUp') {
this.pressed = true;
this.up = false;
}
}
this.pressed = false;
let keyDown = (e) => {
if (e.code == 'ArrowLeft') this.left = true;
if (e.code == 'ArrowRight') this.right = true;
if (e.code == 'ArrowDown') this.down = true;
if (!this.pressed) {
this.pressed = true;
if (e.code == 'ArrowUp') {
this.up = true;
}
}
}
let keyUp = (e) => {
if (e.code == 'ArrowLeft') this.left = false;
if (e.code == 'ArrowRight') this.right = false;
if (e.code == 'ArrowDown') this.down = false;
if (e.code == 'ArrowUp') {
this.pressed = false;
this.up = false;
}
}
Logically I feel as though these should work but they don't. And in case it matters my character jumps based on this
if (controller.up && !this.jumping) {this.vy -= this.speed * 60; this.jumping = true;}
I've probably tried doing this at least 10 different ways and the closest I got was my character jumped twice before stopping (while holding arrowup).
EDIT: this gives 2 jumps then stops. Can anyone explain why he jumps twice before stopping?
this.keySet = new Set();
let keyDown = (e) => {
if (e.code == 'ArrowUp') {
if (this.keySet.has(e.code)) { this.up = false }
else { this.keySet.add(e.code); this.up = 'keydown' === e.type }
}
}
let keyUp = (e) => {
if (e.code == 'ArrowUp') { this.keySet.delete(e.code); this.up = false }
}
You can throttle the function
The way throttling works is when you call a function, it will execute the function like normal, but on subsequent calls it won't run again until enough time has passed since the last attempted execution.
Lodash has an implementation, but you can find versions of this all over the internet: https://lodash.com/docs/4.17.15#throttle
I am trying to make a 2D platforming game and I am missing an essential part of it, gravity.
I have tried everything from look at questions on this website to looking at online tutorials and you-tube videos.
I really need help with getting gravity into this game as I am out of ideas.
As I said I have already tried looking at multiple tutorials and videos, including this one:
http://www.somethinghitme.com/2013/01/09/creating-a-canvas-platformer-tutorial-part-one/
but this one uses shapes created in canvas rather than images.
I already know that you have to use a velocity function as well as variable for the gravity. Then you have to put this all inside the key handler function so that it can get executed.
//spaceman variables
var sx = canvasWidth / 2; // start the spaceman in the centre
var sy = canvasHeight / 2;
var sdx = 0; // set initial speed to 0
var sdy = 0;
var sspeed = 3; // create a variable for speed
var gravity = 0.2;
var svX = 0;
var svY = (Math.random() * -10) - 5;
//set variables to use for key presses
//these are Boolean variables
//they can only be true or false
var rightPressed = false;
var leftPressed = false;
var upPressed = false;
var downPressed = false;
function keyDownHandler(e) {
if (e.keyCode == 39) {
rightPressed = true;
} else if (e.keyCode == 37) {
spaceman2Ready = true;
spacemanReady = false;
leftPressed = true;
} else if (e.keyCode == 38) {
upPressed = true;
} else if (e.keyCode == 40) {
downPressed = true;
}
}
function keyUpHandler(e) {
if (e.keyCode == 39) {
rightPressed = false;
sdx--;
} else if (e.keyCode == 37) {
spaceman2Ready = false;
spacemanReady = true;
leftPressed = false;
sdx--;
} else if (e.keyCode == 38) {
upPressed = false;
sdx--;
} else if (e.keyCode == 40) {
downPressed = false;
sdx--;
}
}
// add something to "listen" for an event
//an event is keypress, mouse movement, mouse click etc.
document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
if (rightPressed == true) {
sdx = sspeed;
} else if (leftPressed == true) {
sdx = -sspeed;
} else if (upPressed == true) {
sdy = -sspeed;
} else if (downPressed == true) {
sdy = sspeed
}
if (rightPressed == false && leftPressed == false && upPressed == false && downPressed == false) {
sdx = 0;
sdy = 0;
}
sx = sx + sdx;
sy = sy + sdy;
}
if (spacemanReady) {
ctx.drawImage(spacemanImage, sx, sy);
if (spaceman2Ready) {
ctx.drawImage(spaceman2Image, sx, sy);
}
// basically the setTimeout part, but this time its requesting the function that we made at the top
requestAnimationFrame(draw);
}
// this is to get the loop for the animation to start going
window.addEventListener("load",
function() {
draw();
});
< /script>
</body >
</html>/
You should be using gravity to update your position every frame (in the draw function). This would look like:
if(sy > 0){
sdy += gravity
}
I have created a codepen with your game with gravity. I hope this helps!
I am trying to create a slider with event listeners touchstart and touchmove.
The slider works very good, if you click on the buttons. But if you move your finger from left to right, it slides many times until the last image but it should only slide once. Also you cannot slide back.
var i = 0;
// Go next
$('.next').bind('click', function() {
niceSlider('left', '<');
});
// Go Back
$('.back').bind('click', function() {
niceSlider('right', '>', 0);
});
// Greather or less
function greatherOrLess(num1, operator, num2) {
if (operator == '<') {
return (num1 < num2) ? true : false;
}
else if (operator == '>') {
return (num1 > num2) ? true : false;
}
}
// Slider
function niceSlider(direction, operator, NumberOfAllImages = 4, position = 600) {
var direction = (direction == 'left') ? '-' : '+';
if (greatherOrLess(i, operator, NumberOfAllImages)) {
if (direction == '+' || direction == '-') {
$('li').animate({'left': direction + '=600px'}, 300).delay(600);
x = (direction == '-') ? i++ : i--;
}
}
console.log($('li:first').position().left);
console.log(x);
}
// Event Listener
var slider = document.querySelector('.slider');
slider.addEventListener('touchstart', handleTouchStart, false);
slider.addEventListener('touchmove', handleTouchMove, false);
// Start from touch
function handleTouchStart(evt) {
startClientX = evt.touches[0].clientX;
startClientY = evt.touches[0].clientY;
}
// Move from touch
function handleTouchMove(evt) {
moveClientX = evt.touches[0].clientX;
moveClientY = evt.touches[0].clientY;
var diffClientX = startClientX - moveClientX;
var diffClientY = startClientY - moveClientY;
if (Math.abs(diffClientX) > Math.abs(diffClientY)) {
if (diffClientX > 0) {
niceSlider('left', '<');
}
else {
niceSlider('right', '>');
}
}
}
There must be something wrong with the function handleTouchMove. How can I fix it?
https://jsfiddle.net/6t1wx95f/16/
function handleTouchStart(evt) {
startClientX = evt.touches[0].clientX;
startClientY = evt.touches[0].clientY;
checkTouch = true;
}
// Move from touch
function handleTouchMove(evt) {
moveClientX = evt.touches[0].clientX;
moveClientY = evt.touches[0].clientY;
if (checkTouch) {
var diffClientX = startClientX - moveClientX;
var diffClientY = startClientY - moveClientY;
if (Math.abs(diffClientX) > Math.abs(diffClientY)) {
if (diffClientX > 0) {
niceSlider('left', '<');
} else {
niceSlider('right', '>', 0);
}
}
checkTouch = false;
}
}
function handleTouchEnd(evt) {
checkTouch = true;
}
Here is jsFiddle, check it for only once use a boolean value. On touch move next function was calling on every move.
I currently use the code below to navigate to the next and previous pages by allowing the user to use the left and right buttons. How would I integrate the code for swiping on the mobile phone for navigation?
var browser = navigator.appName;
if (browser == "Microsoft Internet Explorer") {
document.onkeydown=keydownie;
} else {
document.onkeydown=keydown;
}
function keydownie(e) {
if (!e) var e = window.event;
if (e.keyCode) {
keycode = e.keyCode;
if ((keycode == 39) || (keycode == 37)) {
window.event.keyCode = 0;
}
} else {
keycode = e.which;
}
if (keycode == 37) {
img = document.querySelector("img[src='http://www.example.com/arrowleft.jpg'],img[src='http://www.example.com/images/left.png']");
window.location = img.parentElement.href;
return false;
} else if (keycode == 39) {
img = document.querySelector("img[src='http://www.example.com/arrowright.jpg'],img[src='http://www.example.com/images/right.png']");
window.location = img.parentElement.href;
return false;
}
}
function keydown(e) {
if (e.which) {
keycode = e.which;
} else {
keycode = e.keyCode;
}
if (keycode == 37) {
img = document.querySelector("img[src='http://www.example.com/arrowleft.jpg'],img[src='http://www.example.com/images/left.png']");
window.location = img.parentElement.href;
return false;
} else if (keycode == 39) {
img = document.querySelector("img[src='http://www.example.com/arrowright.jpg'],img[src='http://www.example.com/images/right.png']");
window.location = img.parentElement.href;
return false;
}
}
I am making a Snake game so I'm trying to move my snake. It is moving with keys but it should move automatically on the screen. I tried doing that with while loops like in the code below but because of break; I have to press a key every time I want it to move. How can I make it move automatically? I tried removing break; an using an if statement but I didn't succeed.
Any other solutions or something else?
I'm new to programming so any advices would be helpful.
var main = function() {
var i = 0;
var j = 0;
$(document).keyup(function(event) {
var e = event.which;
while(i == 1) {
$('.snake').animate({left: '+=10px'}, 10);
break;
}
while(i == 2) {
$('.snake').animate({left: '-=10px'}, 10);
break;
}
while(i == 3) {
$('.snake').animate({top: '-=10px'}, 10);
break;
}
while(i == 4) {
$('.snake').animate({top: '+=10px'}, 10);
break;
}
//Which key is preesed
//D
if(e == 68) {
i = 1;
}
//A
else if(e == 65) {
i = 2;
}
//W
else if(e == 87) {
i = 3;
}
//S
else if(e == 83) {
i = 4;
}
//Any other key
else {
i = 0;
}
});
};
$(document).ready(main);
I think you just have to organize a little bit your code.
First. You must put your code inside a function. You really don't need a while. You can use a simple if.
function move(i) {
if(i == 1) {
$('.snake').animate({left: '+=10px'}, 10);
break;
}
if(i == 2) {
$('.snake').animate({left: '-=10px'}, 10);
break;
}
if(i == 3) {
$('.snake').animate({top: '-=10px'}, 10);
break;
}
if(i == 4) {
$('.snake').animate({top: '+=10px'}, 10);
break;
}
}
Now you have to change the event, using keydown instead of keyup
function main() {
var interval;
$(document).keydown(function(event) {
if(interval) clearInterval(interval); // Clear the previous interval
var e = event.which;
var i;
//Which key is pressed
//D
if(e == 68) {
i = 1;
}
//A
else if(e == 65) {
i = 2;
}
//W
else if(e == 87) {
i = 3;
}
//S
else if(e == 83) {
i = 4;
}
//Any other key
else {
i = 0;
}
interval = setInterval(function() {
move(i)
},1000); // repeat every 1 second
});
}
$(document).ready(main);