創建鼠標事件點擊html5中的圖像

您好，我有一個新手在JavaScript和即時通訊使用HTML5畫布在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);

我如何把這些讓他們是正確的？我該如何讓他們可以點擊以便我可以點擊圖片，因爲他們會下降

來源

2012-10-11 Juliana Juelz Mango

幾乎所有人都認爲要坐那「的點擊事件會在元素上的用戶點擊。 click事件發生在mousedown和mouseup事件之後'https://developer.mozilla.org/en-US/docs/DOM/element.onclick –

可能是這將是有利的。

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-11 19:46:34 Vijay

乾杯！我想我明白這個方法更好 –

很高興這是有幫助的，如果它幫助，請。將答案標記爲您接受的答案。 :) – Vijay

當然:)即時通訊不知道如何呢？我剛剛開始作爲一個新成員 –

首先，我們需要以某種方式找到鼠標光標所在的位置。下面是一個函數來獲取鼠標座標：

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-11 20:13:11

謝謝@esimov！這正是我的導師所建議的，我只是不知道如何註冊一切。我是否將所有這些代碼放在HTML中的任何特定位置？ –

創建鼠標事件點擊html5中的圖像

回答

相關問題