2013-11-01 4 views
0

У меня есть холст, на котором я творю экран меню для моей игры:Javascript предупреждение, когда холст щелкнул

var canvas = document.createElement("canvas"); 
var ctx = canvas.getContext("2d"); 
canvas.width = 512; 
canvas.height = 480; 
document.body.appendChild(canvas); 

ctx.font="30px monospace"; 
ctx.fillStyle = "black"; 
ctx.strokeText("click to begin",140,260); 

Когда пользователь нажимает «кнопку, чтобы начать», я хочу, чтобы это прогресс в моей игре , но учитывая, что я не могу получить работу onclick, я просто хочу, чтобы она предупредила, что она сработала. До сих пор (на основе от руководств и примеров, которые я нашел) У меня есть следующий код:

mouse = (function (target) { 
    var isButtonDown = false; 

    c.addEventListener('mousedown', function() { 
     isButtonDown = true; 
    }); 

    return { 
     isButtonDown: function() { 
      return isButtonDown; 
     } 
    }; 
}(document)); 

var isButtonDown = input.isButtonDown(); 

if (isbuttondown == true) { 
      alert("Mouse clicked"); 
} 

Этот код ничего не делает, когда я запускаю его. Может кто-нибудь, пожалуйста, объясните мне, как это сделать, или, по крайней мере, что мне нужно изменить?

Спасибо заранее,

Райли

+0

http://stackoverflow.com/questions/9880279/how-do-i-add-a-simple-onclick-event-handler-to-a-canvas-element – Ashish

ответ

1

Вот решение.

Solution

Я снял тревогу и вместо этого используется console.log. Проверьте консоль.

JS

canvas.addEventListener('click', function (evt) { 
    var mousePos = getMousePos(canvas, evt); 
    var message = 'Mouse Clicked at ' + mousePos.x + ',' + mousePos.y; 
    console.log(message); 
}, false); 

function getMousePos(canvas, evt) { 
    var rect = canvas.getBoundingClientRect(); 
    return { 
     x: evt.clientX - rect.left, 
     y: evt.clientY - rect.top 
    }; 
} 

EDIT: Здесь же скрипку с возможностью оповещения. FIDDLE

+0

Спасибо MarsOne, это отлично работает. – Progrmr

Смежные вопросы