Note to self: Update this page :P
A while ago I showed you guys how to do keyboard input here and here. Now I'll show you how to do mouse input.
It's fairly simple, just use an eventListener for the event "mousemove" and use a function that takes the event as a parameter, and use the e.pageX and e.pageY for the mouse's X and Y position.
And for mouse clicks, just use eventListener for the "click" event, and use a function that does whatever. In the example I give, it sets the position of an image to the position of the mouse at the point it is clicked. In this case, a bullethole in the position the cursor was pointing at.
Here is the code:
<html>
<head>
<script type="text/javascript">
const FPS = 60;
var canvas = null;
var context2D = null;
var cursorImg = new Image();
cursorImg.src = "images/cursorexample.png";
var bulletHoleImg = new Image();
bulletHoleImg.src = "images/bullethole.png";
var bulletHolesX = new Array();
var bulletHolesY = new Array();
for (var i=0; i<50; i++) {
bulletHolesX[i] = -500;
bulletHolesY[i] = -500;
}
bulletNum = 0;
window.addEventListener('mousemove', mouseMoved, true);
window.addEventListener('click', clicked, true);
var mouseX = 0;
var mouseY = 0;
window.onload = init;
function init() {
canvas = document.getElementById('canvas1');
context2D = canvas.getContext('2d');
setInterval(draw, 1000/FPS);
}
function draw() {
context2D.clearRect(0, 0, canvas.width, canvas.height);
for (var i=0; i<50; i++) {
context2D.drawImage(bulletHoleImg, bulletHolesX[i]-(bulletHoleImg.width/2), bulletHolesY[i]-(bulletHoleImg.height/2));
}
context2D.drawImage(cursorImg, mouseX-(cursorImg.width/2), mouseY-(cursorImg.width/2));
}
function mouseMoved(e) {
mouseX = e.pageX;
mouseY = e.pageY;
}
function clicked(e) {
bulletHolesX[bulletNum] = mouseX;
bulletHolesY[bulletNum] = mouseY;
bulletNum++;
if (bulletNum > 50) {
bulletNum = 0;
}
}
</script>
</head>
<body style="padding: 0px; margin: 0px;">
<canvas id="canvas1" width="600" height="480" style="background-color: #A9A9A9;">
Browser not compatible with HTML5 canvas
</canvas>
</body>
</html>
Here is the result: here
No comments:
Post a Comment