Well alright, I tried to search around the internet and didn't find how to do this. Everything I find is only to disable the context menu on right click. The point is : I am (Trying to) making a (simple) game. I have my scripts to move my player around, but the onclick/onmousedown (And all the mouse events in fact) can be triggered with both LMB and RMB. I don't really care if the right click works, the real problem is that I have an interval being set to "on" on mouse down and "off" on mouse up ; (Dragging the character) ; If I spam both LMB and RMB, at one point the interval doesn't toggle off and it drags the character around without any button pressed. Clicking again doesn't even reset the interval.
I could paste the code if needed but I'm fairly new to javascript and I guess it's messy and wrong. But hey, so far, so good.
Alright let's go for the code... If have 2 files so far one "Main" and another for character movement... No seriously this won't really help since I can't simply post the parts I need because it's all interrelated*(?);
Main code :
/* ==========
* Main JS file. Calling functions and handling user input.
========== */
/* Everlasting Intervals */
window.setInterval(function(){animateplayersprite()},250);
/* ========== */
/* Onload */
window.onload = function(){
/* initialize Mouse Interactions */
document.onmousemove = getmouseposition;
/* ========== */
/* Initialize Character Movement */
Player.style.marginLeft = playerx - (window.innerWidth / 2 - 512) + "px";
Player.style.marginTop = playery - (window.innerHeight /2 - 384) + "px";
Scene.onmousemove = characterorientation;
document.onmouseup = characterdragstop;
document.onclick = characterdragstop;
GameAreaL2.onmousedown = characterdrag;
Scene.onmouseout = characterdragstop;
/* ========== */
}
/* ========== */
/* Global Variables */
/* Mouse Interaction */
var target = false;
/* ========== */
/* Character Movement */
var posx = window.innerWidth / 2; /* Sync Values */
var posy = window.innerHeight / 2; /* Sync Values */
var tempx = window.innerWidth / 2; /* Sync Values */
var tempy = window.innerHeight / 2; /* Sync Values */
var playerx = window.innerWidth / 2; /* Sync Values */
var playery = window.innerHeight / 2; /* Sync Values */
var charspeed = 1;
var charspeedcall = false;
var chardrag = false;
var charisdragged = false;
var playerismoving = false;
var playercanlook = true;
var playermovementa = 0;
var playeranimationframex = 2;
var playeranimationframey = 1;
var characteredgescroll = false;
/* ========== */
/* Game Area L1 Properties */
var GameAreaL1BackgroundPositionx = 0;
var GameAreaL1BackgroundPositiony = 0;
var GameAreaL1BackgroundWidth = 2000; /* TESTS ; WILL BE OVERRIDEN ON AREA LOADING */
var GameAreaL1BackgroundHeight = 2000; /* TESTS ; WILL BE OVERRIDEN ON AREA LOADING */
/* ========== */
/* ========== */
/* Functions */
/* Get mouse Position in posx and posy */
function getmouseposition(e){
if(!e){ e=window.event; }
posx = e.clientX;
posy = e.clientY;
}
/* ========== */
/* Define if mouse is pointing outside the game area (Override Mouse Movement) */
function targeton(){
target = true;
}
function targetoff(){
target = false;
}
/* ========== */
/* ========== */
And the character movement :
/* ==========
* JS file handling character movement.
========== */
/* Functions */
/* Find active zone and look at the mouse */
function characterorientation(){
if(target == false){
if(charisdragged == true || playercanlook == true){
if(posy < 0.75 * (posx + (512 - playerx)) + (playery - 384) && posy > -0.75 * (posx + (512 - playerx)) + (384 + playery)){
if(playeranimationframex == 1){
PlayerBody.style.backgroundPosition = "0px 288px";
}
else if(playeranimationframex == 2){
PlayerBody.style.backgroundPosition = "-72px 288px";
}
else if(playeranimationframex == 3){
PlayerBody.style.backgroundPosition = "-144px 288px";
}
else if(playeranimationframex == 4){
PlayerBody.style.backgroundPosition = "-72px 288px";
}
playeranimationframey = 4;
}
else if(posy > 0.75 * (posx + (512 - playerx)) + (playery - 384) && posy > -0.75 * (posx + (512 - playerx)) + (384 + playery)){
if(playeranimationframex == 1){
PlayerBody.style.backgroundPosition = "0px 192px";
}
else if(playeranimationframex == 2){
PlayerBody.style.backgroundPosition = "-72px 192px";
}
else if(playeranimationframex == 3){
PlayerBody.style.backgroundPosition = "-144px 192px";
}
else if(playeranimationframex == 4){
PlayerBody.style.backgroundPosition = "-72px 192px";
}
playeranimationframey = 3;
}
else if(posy > 0.75 * (posx + (512 - playerx)) + (playery - 384) && posy < -0.75 * (posx + (512 - playerx)) + (384 + playery)){
if(playeranimationframex == 1){
PlayerBody.style.backgroundPosition = "0px 96px";
}
else if(playeranimationframex == 2){
PlayerBody.style.backgroundPosition = "-72px 96px";
}
else if(playeranimationframex == 3){
PlayerBody.style.backgroundPosition = "-144px 96px";
}
else if(playeranimationframex == 4){
PlayerBody.style.backgroundPosition = "-72px 96px";
}
playeranimationframey = 2;
}
else if(posy < 0.75 * (posx + (512 - playerx)) + (playery - 384) && posy < -0.75 * (posx + (512 - playerx)) + (384 + playery)){
if(playeranimationframex == 1){
PlayerBody.style.backgroundPosition = "0px 0px";
}
else if(playeranimationframex == 2){
PlayerBody.style.backgroundPosition = "-72px 0px";
}
else if(playeranimationframex == 3){
PlayerBody.style.backgroundPosition = "-144px 0px";
}
else if(playeranimationframex == 4){
PlayerBody.style.backgroundPosition = "-72px 0px";
}
playeranimationframey = 1;
}
}
}
}
/* ========== */
/* Animate the sprite if the player is moving */
function animateplayersprite(){
if(playerismoving == true){
if(playeranimationframex == 1){
if(playeranimationframey == 1){
PlayerBody.style.backgroundPosition = "-72px 0px";
}
else if(playeranimationframey == 2){
PlayerBody.style.backgroundPosition = "-72px 96px";
}
else if(playeranimationframey == 3){
PlayerBody.style.backgroundPosition = "-72px 192px";
}
else if(playeranimationframey == 4){
PlayerBody.style.backgroundPosition = "-72px 288px";
}
playeranimationframex = 2;
}
else if(playeranimationframex == 2){
if(playeranimationframey == 1){
PlayerBody.style.backgroundPosition = "-144px 0px";
}
else if(playeranimationframey == 2){
PlayerBody.style.backgroundPosition = "-144px 96px";
}
else if(playeranimationframey == 3){
PlayerBody.style.backgroundPosition = "-144px 192px";
}
else if(playeranimationframey == 4){
PlayerBody.style.backgroundPosition = "-144px 288px";
}
playeranimationframex = 3;
}
else if(playeranimationframex == 3){
if(playeranimationframey == 1){
PlayerBody.style.backgroundPosition = "-72px 0px";
}
else if(playeranimationframey == 2){
PlayerBody.style.backgroundPosition = "-72px 96px";
}
else if(playeranimationframey == 3){
PlayerBody.style.backgroundPosition = "-72px 192px";
}
else if(playeranimationframey == 4){
PlayerBody.style.backgroundPosition = "-72px 288px";
}
playeranimationframex = 4;
}
else if(playeranimationframex == 4){
if(playeranimationframey == 1){
PlayerBody.style.backgroundPosition = "0px 0px";
}
else if(playeranimationframey == 2){
PlayerBody.style.backgroundPosition = "0px 96px";
}
else if(playeranimationframey == 3){
PlayerBody.style.backgroundPosition = "0px 192px";
}
else if(playeranimationframey == 4){
PlayerBody.style.backgroundPosition = "0px 288px";
}
playeranimationframex = 1;
}
}
else{
if(playeranimationframey == 1){
PlayerBody.style.backgroundPosition = "-72px 0px";
}
else if(playeranimationframey == 2){
PlayerBody.style.backgroundPosition = "-72px 96px";
}
else if(playeranimationframey == 3){
PlayerBody.style.backgroundPosition = "-72px 192px";
}
else if(playeranimationframey == 4){
PlayerBody.style.backgroundPosition = "-72px 288px";
}
playeranimationframex = 4;
}
}
/* ========== */
/* Player's Movement directions */
function playerxplus(charmovexap){
if(tempx - playerx < charspeed){
playerx += tempx - playerx;
}
else{
playerx += charmovexap * charspeed;
}
}
function playerxminus(charmovexam){
if(playerx - tempx < charspeed){
playerx -= playerx - tempx;
}
else{
playerx -= charmovexam * charspeed;
}
}
function playeryplus(charmoveyap){
if(tempy - playery < charspeed){
playery += tempy - playery;
}
else{
playery += charmoveyap * charspeed;
}
}
function playeryminus(charmoveyam){
if(playery - tempy < charspeed){
playery -= playery - tempy;
}
else{
playery -= charmoveyam * charspeed;
}
}
/* ========== */
/* Set the character animation speed and move depending on direction + Scroll area if the player is near the edge */
function charactermovementspeed(){
if(characteredgescroll == false){
if(tempx > playerx && tempy > playery){
playermovementa = (tempy - playery) / (tempx - playerx);
if(tempx - playerx > tempy - playery){
playerxplus(1);
playeryplus(playermovementa);
}
else if(tempx - playerx < tempy - playery){
playerxplus(1/playermovementa);
playeryplus(1);
}
}
else if(tempx < playerx && tempy < playery){
playermovementa = (playery - tempy) / (playerx - tempx);
if(playerx - tempx > playery - tempy){
playerxminus(1);
playeryminus(playermovementa);
}
else{
playerxminus(1/playermovementa);
playeryminus(1);
}
}
else if(tempx > playerx && tempy < playery){
playermovementa = (playery - tempy) / (tempx - playerx);
if(tempx - playerx > playery - tempy){
playerxplus(1);
playeryminus(playermovementa);
}
else{
playerxplus(1/playermovementa);
playeryminus(1);
}
}
else if(tempx < playerx && tempy > playery){
playermovementa = (tempy - playery) / (playerx - tempx);
if(playerx - tempx > tempy - playery){
playerxminus(1);
playeryplus(playermovementa);
}
else{
playerxminus(1/playermovementa);
playeryplus(1);
}
}
else if(tempx > playerx){
playerxplus(1);
}
else if(tempy > playery){
playeryplus(1);
}
else if(tempx < playerx){
playerxminus(1);
}
else if(tempy < playery){
playeryminus(1);
}
else{
playerismoving = false;
playercanlook = true;
clearInterval(charspeedcall);
}
}
if(playerismoving == true){
if(playerx > window.innerWidth / 2 + 100 && GameAreaL1BackgroundPositionx > - (GameAreaL1BackgroundWidth - 1024) ){
characteredgescroll = true;
playerx = window.innerWidth / 2 + 100;
if(- (GameAreaL1BackgroundWidth - 1024) - GameAreaL1BackgroundPositionx <= - charspeed){
tempx -= charspeed;
GameAreaL1BackgroundPositionx -= charspeed;
}
else{
tempx += - (GameAreaL1BackgroundWidth - 1024) - GameAreaL1BackgroundPositionx;
GameAreaL1BackgroundPositionx += - (GameAreaL1BackgroundWidth - 1024) - GameAreaL1BackgroundPositionx;
}
GameAreaL1.style.backgroundPosition = GameAreaL1BackgroundPositionx + "px " + GameAreaL1BackgroundPositiony + "px";
}
else if(playerx < window.innerWidth / 2 - 100 && GameAreaL1BackgroundPositionx < 0){
characteredgescroll = true;
playerx = window.innerWidth / 2 - 100;
if(GameAreaL1BackgroundPositionx <= - charspeed){
tempx += charspeed;
GameAreaL1BackgroundPositionx += charspeed;
}
else{
tempx += - GameAreaL1BackgroundPositionx;
GameAreaL1BackgroundPositionx += - GameAreaL1BackgroundPositionx;
}
GameAreaL1.style.backgroundPosition = GameAreaL1BackgroundPositionx + "px " + GameAreaL1BackgroundPositiony + "px";
}
else{
characteredgescroll = false;
Player.style.marginLeft = playerx - (window.innerWidth / 2 - 512) + "px";
Player.style.marginTop = playery - (window.innerHeight /2 - 384) + "px";
}
if(playery > window.innerHeight / 2 + 100 && GameAreaL1BackgroundPositiony > - (GameAreaL1BackgroundHeight - 768)){
characteredgescroll = true;
playery = window.innerHeight/ 2 + 100;
if(- (GameAreaL1BackgroundHeight - 768) - GameAreaL1BackgroundPositiony <= - charspeed){
tempy -= charspeed;
GameAreaL1BackgroundPositiony -= charspeed;
}
else{
tempy += - (GameAreaL1BackgroundHeight - 768) - GameAreaL1BackgroundPositiony;
GameAreaL1BackgroundPositiony += - (GameAreaL1BackgroundHeight - 768) - GameAreaL1BackgroundPositiony;
}
GameAreaL1.style.backgroundPosition = GameAreaL1BackgroundPositionx + "px " + GameAreaL1BackgroundPositiony + "px";
}
else if(playery < window.innerHeight / 2 - 100 && GameAreaL1BackgroundPositiony < 0){
characteredgescroll = true;
playery = window.innerHeight / 2 - 100;
if(GameAreaL1BackgroundPositiony <= - charspeed){
tempy += charspeed;
GameAreaL1BackgroundPositiony += charspeed;
}
else{
tempy += - GameAreaL1BackgroundPositiony;
GameAreaL1BackgroundPositiony += - GameAreaL1BackgroundPositiony;
}
GameAreaL1.style.backgroundPosition = GameAreaL1BackgroundPositionx + "px " + GameAreaL1BackgroundPositiony + "px";
}
else{
characteredgescroll = false;
Player.style.marginLeft = playerx - (window.innerWidth / 2 - 512) + "px";
Player.style.marginTop = playery - (window.innerHeight /2 - 384) + "px";
}
}
}
/* ========== */
/* Move character calling the movespeed function : Get the direction (pos/neg values of the axes) */
function charactermovement(){
/* Set Values */
tempx = posx;
tempy = posy;
playercanlook = false;
charisdragged = true;
characterorientation();
charisdragged = false;
/* ========== */
if(target == false){
if(playerismoving == false){
playerismoving = true;
charspeedcall = setInterval(function(){charactermovementspeed()},1);
}
}
}
/* ========== */
/* Continue to move character if lmb is held */
function characterdrag(){
chardrag = setInterval(function(){charactermovement()},1);
charisdragged = true;
}
function characterdragstop(){
clearInterval(chardrag);
charisdragged = false;
}
/* ========== */
/* ==========*/
This was the closest I could come. I didn't like it that much though because I had to rely on a global. I tried other things like canceling the onmousedown event, but nothing I did could subsequently cause the onclick event from firing.
Incidentally I noticed that rightclick throws an onclick event in FF, but not in Chrome. I didn't check IE.
//global to store whether we rightclicked
var rightclick = false;
//use mousedown to detect rightclick
document.onmousedown = function (e) {
e = e || window.event;
switch (e.which) {
case 1:
console.log('left');
break;
case 2:
console.log('middle');
break;
case 3:
console.log('right');
rightclick = true; //store click in global
break;
}
};
//in onclick, which fires after onmousedown, check whether it was from a right click
document.onclick = function (e) {
if (rightclick) {
rightclick = false;
return;
}
console.log('onclick');
};
document.addEventListener("contextmenu", function (e) {
e.preventDefault();
}, false);