2

さて、インターネットで検索しようとしましたが、これを行う方法が見つかりませんでした。私が見つけたのは、右クリックでコンテキストメニューを無効にすることだけです。ポイントは：私は（単純な）ゲームを（しようと）しています。プレーヤーを移動するためのスクリプトがありますが、onclick/onmousedown (実際にはすべてのマウス イベント) は LMB と RMB の両方でトリガーできます。右クリックが機能するかどうかはあまり気にしませんが、実際の問題は、マウスダウンで「オン」に設定され、マウスアップで「オフ」に設定されている間隔があることです。(文字をドラッグ) ; LMB と RMB の両方をスパムすると、ある時点で間隔がオフにならず、ボタンを押さずにキャラクターがドラッグされます。もう一度クリックしても間隔はリセットされません。

必要に応じてコードを貼り付けることができますが、私は JavaScript にかなり慣れていないため、面倒で間違っていると思います。でもねえ、ここまではとても良い。

さて、コードに行きましょう...これまでに「メイン」とキャラクターの動き用の2つのファイルがある場合...すべてが相互に関連しているため、必要な部分を単純に投稿できないため、これは本当に役に立ちません*(?);

メインコード:

/* ==========
 * 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;
        }
    /* ========== */
/* ========== */

そしてキャラクターの動き：

/* ==========
 * 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;
        }
    /* ========== */
/* ==========*/
4

4 に答える 4

0

event.buttonプロパティをチェックして、どのボタンがクリックされたかを確認できます

于 2013-01-24T02:56:52.120 に答える
0

よし、mrtsherman のコードを使用しました。しかし、最後の部分を削除して、すべてを関数に入れました。LMB を押すと、間隔がトリガーされます。私はコードをよく理解していないので....だからです。また、おそらく将来のアクションでも同じ問題が発生する可能性があることはすでにわかっているので、最終的にはとにかくグローバルを使用する必要があるかもしれませんが、それでも、私は個人的な楽しみのためにこれをやっています!

function characterdrag(){
    document.onmousedown = function (e) {
        e = e || window.event;
        switch (e.which) {
            case 1:
                console.log('left');
                chardrag = setInterval(function(){charactermovement()},1);
                charisdragged = true;
                break;
            case 2:
                console.log('middle');
                break;
            case 3:
                console.log('right');
                break;
        }
    }
}
于 2013-01-24T03:33:25.157 に答える
0

これが私が来ることができる最も近いものでした。グローバルに頼らなければならなかったので、あまり好きではありませんでした。onmousedown イベントをキャンセルするなど、他のことを試しましたが、その後 onclick イベントが発生することはありませんでした。

ちなみに、右クリックは FF では onclick イベントをスローしますが、Chrome ではスローしないことに気付きました。私はIEをチェックしませんでした。

http://jsfiddle.net/Rsrw4/2/

//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);
于 2013-01-24T02:58:50.797 に答える
0

Douglas Crockford はそれについて話しました... マウス ボタンを正しく使えるのは Microsoft だけです。W3C はそれを誤りました。RMB を無効にするだけではなく、フィルタリングする必要があります。

W3C:
* Left button   0
* Middle button 1
* Right button  2

Microsoft:
* Left button   1
* Middle button 4
* Right button  2

マウス ボタンをフィルター処理するために、このコードをイベント関数に配置します。

mouse = e.button || e.which;    // w3s || MS
// ff 0 ie 1
mouse_left = e.button ? this.mouse === 0 ? true : false : this.mouse === 1 ? true : false;// w3c 0; ms 1;
// ff 2 ie 2
mouse_right = this.mouse === 2 ? true : false;  // w3c 2; ms 2; //right mouse button clicked
// ff 1 ie 4
this.mouse_middle = 0;

この関数を使用して、イベントのバブリングを停止し、デフォルトの右クリック アクションを防止します。

stop_bubbling = function () {
    obj.e.cancelBubble = true;  // MS inhereted from Netscape
    if(obj.e.stopPropagation){obj.e.stopPropagation();} // w3c
};

prevent_default_action = function () {
    obj.e.returnValue = false;  //MS
    if( obj.e.preventDefault){obj.e.preventDefault();}  // w3c
    return false;
};
于 2013-01-24T03:17:59.673 に答える