I have a HTML game that has left and right buttons when the user plays on a mobile. It all was working fine until iOS8 came out. Now the buttons seem really unresponsive. I have been using touchstart and touch end to detect when a user is holding down a button:
document.body.addEventListener('touchstart', function (e) { e.preventDefault(); });
btnLeft.addEventListener('touchstart', function (e) {
dir = "left";
player.isKeyDown = true;
player.isMovingLeft = true;
}, false);
btnLeft.addEventListener('touchend', function (e) {
player.isKeyDown = false;
player.isMovingLeft = false;
}, false);
btnRight.addEventListener('touchstart', function (e) {
player.isKeyDown = true;
player.isMovingRight = true;
dir = "right";
}, false);
btnRight.addEventListener('touchend', function (e) {
player.isKeyDown = false;
player.isMovingRight = false;
}, false);
Related
I want to know how to stop an audio that is set to "autoplay" using the X key on the keyboard. I have tried in a couple of method but it doesn't work.
That's my code:
JavaScript:
var source = "audio/homepage_benvenuto.mp3";
var audio = document.createElement("audio");
audio.autoplay = true;
audio.load()
audio.addEventListener("load", function()
{
audio.play();
}, true);
audio.src = source;
window.addEventListener("keydown", checkKeyPressed, false);
function checkKeyPressed(e)
{
if (e.keyCode == "88") // 88 = X: interrompe audio in corso
{
player.pause();
player.currentTime = 0;
document.getElementById('audioA').pause();
}
}
I am trying to record and repeating touches programmatically. All my efforts have failed. What is wrong?
var elm = null, begin = true, touches = [];
$(document).ready(function () {
elm = $('#element');
elm.bind('touchstart touchmove touchend touchcancel', function (e) {
if (begin) {
touches.push(e);
if (e.type == 'touchend') {
begin = false;
start();
}
}
});
});
function start() {
setTimeout(function () {
try {
for (var e in touches) elm.dispatchEvent(e);
// elm.trigger(e.type, e);
} catch (e) {
console.log(e);
}
start();
}, 5000);
}
Thanks in advance.
Hi I've got some issues with my small project. I want to stop executting the mousedown and mousemove event after the mouseup event invokes. But after that the mousedown event must be active again. It should work like a reset. Here is the code
function quotesMouseDown(event) {
var isMouseDown = true;
document.getElementById("quotes").addEventListener("mouseup",
function() {
isMouseDown = false;
});
if (isMouseDown == false) {
return false;
}
else {
var mDownX = event.pageX;
document.getElementById("quotes").addEventListener("mousemove", quotoesMouseMove);
function quotoesMouseMove(event) {
var mMoveX = event.pageX;
console.log(mMoveX);
console.log(mDownX + "cos")
}
}
console.log(isMouseDown);
}
document.getElementById("quotes").addEventListener("mousedown", quotesMouseDown);
Just detach the mousedown callback at the end of the mouseup callback:
document.getElementById("quotes").addEventListener("mouseup", function() {
isMouseDown = false;
document.getElementById("quotes").removeEventListener("mousedown", quotesMouseDown);
});
So I'm trying to be able to trigger a script using a combinations of keypresses.
var down = {
};
$(document).chardown(function (e) {
down[e.charCode] = true;
}).charup(function (e) {
if (down[68] && down[69] && down[86]) {
var nextButton = document.getElementsByClassName('button-next') [0];
nextButton.click();
}
down[e.keyCode] = false;
});
This is the code I've got so far. So the intention is (afaik) to trigger the
var nextButton = document.getElementsByClassName('button-next') [0];
nextButton.click();
When I press e+d+v. But it isn't working. And if I only use the above part it keeps changing episode (Obvioulsy).
I didn't find any documentation related to chardown and charup in jquery or greasemonkey.I think you were trying to use keydown and keup. You should replace charCode with keyCode.
var down = {};
$(document).keydown(function (e) {
down[e.keyCode] = true;
}).keyup(function (e) {
if (down[68] && down[69] && down[86]) {
alert("Hello");
}
down[e.keyCode] = false;
});
var gameLink = $("#theGame");
$(window).keydown(function (e) {
if (e.which === 32) {
window.location.href = "thegame.html;
}
});
I am very new to jQuery and I can't seem to figure out where to add the "tap" event for mobile to this code.
This is pretty much all you need: http://jsfiddle.net/gianlucaguarini/56Szw/
*code from fiddle
var getPointerEvent = function(event) {
return event.originalEvent.targetTouches ? event.originalEvent.targetTouches[0] : event;
};
var $touchArea = $('#touchArea'),
touchStarted = false, // detect if a touch event is sarted
currX = 0,
currY = 0,
cachedX = 0,
cachedY = 0;
//setting the events listeners
$touchArea.on('touchstart mousedown',function (e){
e.preventDefault();
var pointer = getPointerEvent(e);
// caching the current x
cachedX = currX = pointer.pageX;
// caching the current y
cachedY = currY = pointer.pageY;
// a touch event is detected
touchStarted = true;
$touchArea.text('Touchstarted');
// detecting if after 200ms the finger is still in the same position
setTimeout(function (){
if ((cachedX === currX) && !touchStarted && (cachedY === currY)) {
// Here you get the Tap event
$touchArea.text('Tap');
}
},200);
});
$touchArea.on('touchend mouseup touchcancel',function (e){
e.preventDefault();
// here we can consider finished the touch event
touchStarted = false;
$touchArea.text('Touchended');
});
$touchArea.on('touchmove mousemove',function (e){
e.preventDefault();
var pointer = getPointerEvent(e);
currX = pointer.pageX;
currY = pointer.pageY;
if(touchStarted) {
// here you are swiping
$touchArea.text('Swiping');
}
});