I am trying to Tilt and Rotate Google Map with mouse right click.
I followed the documentation
https://developers.google.com/maps/documentation/javascript/webgl/tilt-rotation#maps_webgl_tilt_rotation-css
but find no help yet to achieve same thing with mouse movement.
google Api provide shift + drag mouse to tilt and rotate but I do not wanted to use shift button
only mouse
An bypass I tried was that on mouse drag create keyboard Event key down of shift key and keep rotating mouse but that did not work,
shift key is pressed by right click but map did not get that
that code is here
document.body.addEventListener("keydown", (e) => {
if (e.key == "Enter") {
console.log('Enter keydown');
let keyEvent = new KeyboardEvent("keydown", { shiftKey: true});
document.body.dispatchEvent(keyEvent);
}
if(e.shiftKey) {
console.log('Shift Key keydown');
}
if (e.key == "Enter" && e.shiftKey) {
console.log('Enter + Shift Key keydown');
}
});
document.body.addEventListener("keyup", (e) => {
if (e.key == "Enter") {
console.log('Enter keyup');
let keyEvent = new KeyboardEvent("keyup", { shiftKey: true});
document.body.dispatchEvent(keyEvent);
}
if(e.shiftKey) {
console.log('Shift Key keyup');
}
if (e.key == "Enter" && e.shiftKey) {
console.log('Enter + Shift Key keyup');
}
});
document.body.addEventListener("keypress", (e) => {
if (e.key == "Enter") {
console.log('Enter keypress');
let keyEvent = new KeyboardEvent("keypress", { shiftKey: true});
document.body.dispatchEvent(keyEvent);
}
if(e.shiftKey) {
console.log('Shift Key keypress');
}
if (e.key == "Enter" && e.shiftKey) {
console.log('Enter + Shift Key keypress');
}
});
map.addListener("drag", () => {
let keyEvent = new KeyboardEvent("keydown", { shiftKey: true});
document.body.dispatchEvent(keyEvent);
});
map.addListener("dragend", () => {});
$('#map').mousedown(function(event) {
switch (event.which) {
case 1:
console.log('Left Mouse button pressed.');
break;
case 2:
console.log('Middle Mouse button pressed.');
break;
case 3:
console.log('Right Mouse button pressed.');
const keyEvent = new KeyboardEvent("keydown", { shiftKey: true});
document.body.dispatchEvent(keyEvent);
break;
default:
console.log('You have a strange Mouse!');
}
});
from above code on shift key press or mouse right click i am able to get console log that shift key is pressed but how to rotate map on that no idea
I found a way now, in which we get mouse move position and on basis of it update the map tilt or heading
here is sample code
var directionx = "";
var directiony = "";
let oldx = 0;
let oldy = 0;
document.addEventListener('mousemove', function(e) {
var rightclk = false;
if(e.which) {
rightclk = (e.which == 3);
}
if(rightclk == true){
if(e.pageX == oldx){
}else{
if (e.pageX < oldx) {
directionx = 'left';
} else if (e.pageX > oldx) {
directionx = 'right';
}
oldx = e.pageX;
if(directionx == 'left'){
map.setHeading(map.getHeading()-3);
}
if(directionx == 'right'){
map.setHeading(map.getHeading()+3);
}
}
if(e.pageY == oldy){
}else{
if (e.pageY < oldy) {
directiony = 'up';
} else if (e.pageY > oldy) {
directiony = 'down';
}
oldy = e.pageY;
if(directiony == 'up'){
map.setTilt(map.getTilt()+3);
}
if(directiony == 'down'){
map.setTilt(map.getTilt()-3);
}
}
}
});
Related
I can click the arrow buttons on the web page, but multiple buttons cannot be read at the same time.If I click on 37 and 39 keys it does not work but only when I click on 37 keys it works. Same goes for other keys, how can I control more than one button at the same time?
const handleArrowButtonMouseDown = function() {
$('button').on('mousedown touchstart', (e) => {
e.preventDefault();
if(state.arrowPressed) return;
let direction = $(e.target).closest('button').attr('id');
state.setArrowPressed(direction);
state.setRobotCommand();
});
};
const handleArrowButtonMouseUp = function() {
$('button').on('mouseup mouseleave touchend', endCurrentOperation);
};
const handleArrowKeyDown = function() {
$(document).keydown((e) => {
if(state.arrowPressed) return;
switch(e.which) {
case 37:
state.setArrowPressed('left');
break;
case 38:
state.setArrowPressed('up');
break;
case 39:
state.setArrowPressed('right');
break;
case 40: // down
state.setArrowPressed('down');
break;
default: return;
}
e.preventDefault();
state.setRobotCommand();
});
};
const handleArrowKeyUp = function() {
$(document).keyup((e) => {
if (e.which === 37 && state.arrowPressed !== 'left') return;
if (e.which === 38 && state.arrowPressed !== 'up') return;
if (e.which === 39 && state.arrowPressed !== 'right') return;
if (e.which === 40 && state.arrowPressed !== 'down') return;
endCurrentOperation();
});
};
There is one way, but it's not safe to rely on, since you cannot detect if a key is currently down in JavaScript.
The example below works only with Shift + Number. It's closest to achieve when both keys are pressed.
window.addEventListener("keydown", function (event) {
if (event.shiftKey) {
if (/\d/.test(event.code)){
console.log("SHIFTKEY + Number:"+event.code);
}
}
}, true)
Maybe you can repeat the same login to your code.
I have an SVG
<svg id='mainSvg' viewBox='0 0 1920 1080'>
<rect id='rectangle' x='800' y='800'/>
</svg>
and I am moving the rectangle inside the SVG with javascript with left and right arrow keys and A and D keys.
that is working perfectly but I have a problem that the rectangle can go outside of the view-box of the SVG and I want the rectangle to stop when it touches the left or right corner. this is my code.
function keyDown(event) {
if (event.key === 'ArrowLeft' || event.key === 'a') {
leftKey = true;
aKey = true;
} else if (event.key === 'ArrowRight' || event.key === 'd') {
rightKey = true;
dKey = true;
}
}
function keyUp(event) {
if (event.key === 'ArrowLeft' || event.key === 'a') {
leftKey = false;
aKey = false;
} else if (event.key === 'ArrowRight' || event.key === 'd') {
rightKey = false;
dKey = false;
}
}
function move() {
let xPosition = parseInt(rectangle.getAttribute('x'));
const movmentSpeed = 10;
//if right arrow key,d is pressed
if (rightKey) {
rectangle.setAttribute('x', xPosition + movmentSpeed);
//if right arrow key,a is pressed
} else if (leftKey) {
rectangle.setAttribute('x', xPosition - movmentSpeed)
if(xPosition === 0){
leftKey = false;
}
}
setTimeout(move, 10);
}
on the last function move() I tried saying if(Xposition ===0){leftKey = false} that works briefly but if the user keeps pressing the left arrow then the rectangle will start moving again and go out of the viewBox.
Also, the arrow keys have a value of false by default
Any ideas on how to fix this?
I found this way, but with it I can only set one keycode in .which, I want to simulate the keys ALT+space+x at the same time.
For ALT I can use .altKey = true;
$(".btn").click(function() {
var e = jQuery.Event("keypress");
e.which = 88; // x code value
e.altKey = true; // Alt key pressed
$("input").trigger(e);
});
How do I add space keycode?
I apologize for my previous answer. I thought about how to handle. Now I modify code to handle and trigger:
You can implement it with two events: keyDown and keyUp like this:
var x,
alt,
space;
document.addEventListener('keydown', function (e) {
e = window.event ? event : e;
switch (e.keyCode) {
case 88:
x = true;
break;
case 18:
alt = true;
break;
case 32:
space = true;
break;
}
});
document.addEventListener('keyup', function (e) {
if (x && alt && space) {
alert("alt + space + x Pressed!");
}
x = alt = space = false;
});
function triggerEvent(eventName, keyCode) {
var event; // The custom event that will be created
if (document.createEvent) {
event = document.createEvent('HTMLEvents');
event.initEvent(eventName, true, true);
} else {
event = document.createEventObject();
event.eventType = eventName;
}
event.eventName = eventName;
event.keyCode = keyCode || null;
if (document.createEvent) {
document.dispatchEvent(event);
} else {
document.fireEvent('on' + event.eventType, event);
}
}
triggerEvent('keydown', 88);
triggerEvent('keydown', 18);
triggerEvent('keydown', 32);
triggerEvent('keyup');
https://jsfiddle.net/m83omwq5/1/
Canvas auto runs when you click on another window and come back.
I have added key listeners and they make the ship move when you click w a s d or up, left, right, down.
It all works fine until you click two buttons like up and right and then click on another tab or window and come back. Then it will just keep moving not listening to your input.
What I think the problem is, is that when you click off the page the canvas never gets to check if the key was left up.But how do I make all the keys act like they were unpressed when you click off the screen?
Also the enemy disappera when you move off screen
This is what happens when buttons are pressed:
Player.prototype.checkKeys = function() //these functions are in the PLayer class
{
if(this.isUpKey == true)//if true
{
if(Player1.drawY >= 0)
{
this.drawY -= this.Speed;
}
}
if(this.isRightKey == true)
{
if(Player1.drawX <= (canvasWidthShips - this.playerWidth))
{
this.drawX += this.Speed;
}
}
if(this.isDownKey == true)
{
if(Player1.drawY <= (canvasHeightShips - this.playerHeight))
{
this.drawY += this.Speed;
}
}
if(this.isLeftKey == true)
{
if(Player1.drawX >= 0)
{
this.drawX -= this.Speed;
}
}
};
And these are my simple functions to check when a key is pressed down, I dont think the error is here but not sure?
function checkKeyDown(e)
{
if (Paused == false)
{
var KeyID = e.KeyCode || e.which;
if (KeyID === 38 || KeyID === 87) //up and w keyboard buttons
{
Player1.isUpKey = true;
e.preventDefault(); //webpage dont scroll when playing
}
if (KeyID === 39 || KeyID === 68) //right and d keyboard buttons
{
Player1.isRightKey = true;
e.preventDefault(); //webpage dont scroll when playing
}
if (KeyID === 40 || KeyID === 83) //down and s keyboard buttons
{
Player1.isDownKey = true;
e.preventDefault(); //webpage dont scroll when playing
}
if (KeyID === 37 || KeyID === 65) //left and a keyboard buttons
{
Player1.isLeftKey = true;
e.preventDefault(); //webpage dont scroll when playing
}
}
else if (Paused == true)
{
Player1.isUpKey = false;
Player1.isDownKey = false;
Player1.isRightKey = false;
Player1.isLeftKey = false;
}
}
function checkKeyUp(e)
{
if (Paused == false)
{
var KeyID = e.KeyCode || e.which;
if (KeyID === 38 || KeyID === 87) //up and w keyboard buttons
{
Player1.isUpKey = false;
e.preventDefault(); //webpage dont scroll when playing
}
if (KeyID === 39 || KeyID === 68) //right and d keyboard buttons
{
Player1.isRightKey = false;
e.preventDefault(); //webpage dont scroll when playing
}
if (KeyID === 40 || KeyID === 83) //down and s keyboard buttons
{
Player1.isDownKey = false;
e.preventDefault(); //webpage dont scroll when playing
}
if (KeyID === 37 || KeyID === 65) //left and a keyboard buttons
{
Player1.isLeftKey = false;
e.preventDefault(); //webpage dont scroll when playing
}
}
else if (Paused == true)
{
Player1.isUpKey = false;
Player1.isDownKey = false;
Player1.isRightKey = false;
Player1.isLeftKey = false;
}
}
Would it be ok to just pause the game? You can listen for onblur on the browser window which gets triggered when it loses focus and then just pause the game in the event handler.
window.onblur = function() {
// Add logic to pause the game here...
Paused = true;
};
What is the best way to capture a left AND right mouse click in javascript? I'm not using jQuery (it's next on my to-learn list), just javascript for now. Basically, I want to do something like
onClick()=javascript:rightClickFunction() // do right click function
onContextMenu()=javascript:leftClickFunction() /
onBoth() ???
The only thing I could find on stackoverflow was:
How to distinguish between left and right mouse click with jQuery
How should I capture the double-button click? Can i check if the opposite button is also clicked during the R and L button routines?
You could track which mouse buttons are down with some boolean variables like this:
var leftButtonDown = false;
var rightButtonDown = false;
$(document).mousedown(function() {
if(e.which == 1) {
leftButtonDown = true;
} else if (e.which == 3) {
rightButtonDown = true;
}
});
$(document).mouseup(function() {
if(e.which == 1) {
leftButtonDown = false;
} else if (e.which == 3) {
rightButtonDown = false;
}
});
$(document).click(function() {
if(leftButtonDown && rightButtonDown) {
// left and right buttons are clicked at the same time
}
});
If both booleans are true, the right and left mouse buttons are both being clicked.
Pure Javascript solution based on the answer by Elliot:
var leftButtonDown = false;
var rightButtonDown = false;
document.addEventListener("mousedown", function () {
if (e.which == 1) {
leftButtonDown = true;
} else if (e.which == 3) {
rightButtonDown = true;
}
});
document.addEventListener("mouseup", function () {
if (e.which == 1) {
leftButtonDown = false;
} else if (e.which == 3) {
rightButtonDown = false;
}
});
document.addEventListener("click", function () {
if (leftButtonDown && rightButtonDown) {
// Click with both LMB and RMB.
}
});
For anyone still interested in a recent answer, as event.which is deprecated you can use the following code with ES6 syntax.
let leftButtonDown = false;
let rightButtonDown = false;
document.addEventListener("mousedown", (e) => {
// left click
if (e.button === 0) {
leftButtonDown = true;
}
// right click
if (e.button === 2) {
rightButtonDown = true;
}
if (leftButtonDown && rightButtonDown) {
// insert code here
}
});
document.addEventListener("mouseup", (e) => {
if (e.button === 0) {
leftButtonDown = false;
}
if (e.button === 2) {
rightButtonDown = false;
}
});
If you want to prevent the context menu from popping up you can try a variation of this:
let leftButtonDown = false;
let rightButtonDown = false;
document.addEventListener("mousedown", (e) => {
// left click
if (e.button === 0) {
leftButtonDown = true;
}
// right click
if (e.button === 2) {
rightButtonDown = true;
}
if (leftButtonDown && rightButtonDown) {
// insert code here
}
});
document.addEventListener("mouseup", (e) => {
if (e.button === 0) {
leftButtonDown = false;
}
});
document.addEventListener("contextmenu", (e) => {
if (leftButtonDown && rightButtonDown) {
e.preventDefault();
}
rightButtonDown = false;
});
Modern browsers mouse buttons mapping:
left click = 0
middle click = 1
right click = 2
IE8 and earlier mouse buttons mapping:
left click = 1
middle click = 4
right click = 2