1

Javascript は初めてで、Dreamweaver エディターで HTML5 キャンバスを使用しています。マウスイベントに関する他の投稿を見てきましたが、私の問題に取り組んでいるようには見えません。

アイテムが落ち、プレイヤーがマウスを動かしてコーンバブルをクリックする「クリックオンリーコーンバブル」というゲームを作成していますが、他の何かをクリックするとゲームオーバーになります。

これまで私は使用してきました：

window.addEventListener("keydown",eventKeyDown,false);  
window.addEventListener("keyup",eventKeyUp,false);  
window.addEventListener("mousedown",onDown,false);  
window.addEventListener("mouseup",onUp,false);  
window.addEventListener("mousemove",onMove,false);

これらが真であるようにするにはどうすればよいですか？また、画像をクリックできるようにするにはどうすればよいですか?

4

2 に答える 2

2

これは役に立つかもしれません。

 document.addEventListener('click',mouseClick,false);
 function mouseClick(e)
 {  
   mouseX = e.pageX - canvas.offsetLeft;
   mouseY = e.pageY - canvas.offsetTop;
   //Now mouseX and mouseY contains the x and y location of mouse click event but w.r.t. your canvas location .
 }
于 2012-10-11T19:46:34.447 に答える
0

まず、マウスカーソルがどこにあるかをどうにかして見つける必要があります。マウス座標を取得する関数は次のとおりです。

function getMousePosition(e) {
    var x, y;        

    x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft - canvas.offsetLeft;
    y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop - canvas.offsetTop;

    return {
        get x() { return x },
        get y() { return y }
    }
}

HTMLCanvasElement.prototype.getMousePosition = getMousePosition;

次に、マウスがクリックされたかどうかをテストする必要があります。クリックされた場合は、マウスと画像の座標を特定します。マウス座標が画像座標と重なっている場合は、何かをしてください。次のメソッドのように条件をテストできます。

var isMouseDown = false;
function onDown(e) {
    var pos = {x:0, y:0 };
    isMouseDown = true;
    var mouseCoordinate = getMousePosition(e);
    for (var i = 0; i < images.length; i++) {
        var bubble = images[i];
        if (( mouseCoordinate.x > image.x && // get the image most left position 
            mouseCoordinate.x < image.x + image.size) && // get image most right position
            ( mouseCoordinate.y > image.y &&
                mouseCoordinate.y < image.y + image.size)) {
            index = image.indexOf(image, 0);
            pos.x = mouseCoordinate.x;
            pos.y = mouseCoordinate.y;
            break;
        }
    }
}


if (isMouseDown &&
    pos.x < image[index].x + image[index].size &&
    pos.x > image[index].x &&
    pos.y < image[index].y + image[index].size &&
    pos.y > image[index].y)
// if the condition is true, then do something        

function onUp(e) {
    isMouseDown = false;
}

ここで実際の例を見ることができます: http://hellopixel.net/experiments/404/404.html

于 2012-10-11T20:13:11.293 に答える